ui/src/loading/index.js

/**
 * {加载条}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/04/26 15:20:28
 */

import { html, css, Component, styleMap, nextTick } from 'wkit'

class Loading extends Component {
  static props = {
    value: {
      type: Boolean,
      default: false,
      observer(v) {
        if (v && this.loading) {
          this.#start = void 0
          this.value = false
          this.#progress = 0
          requestAnimationFrame(this.loading)
        }
      }
    },
    duration: 3000
  }

  static styles = [
    css`
      :host {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 65535;
        display: flex;
        width: 100vw;
        height: 0;
      }

      .thumb {
        width: 0;
        height: 1px;
        background: var(--color-teal-1);
        box-shadow: 0 0 5px var(--color-teal-1);
      }
    `
  ]

  #force2end = false
  #start = 0
  #progress = 0

  end() {
    this.#force2end = true
  }

  mounted() {
    this.loading = timestamp => {
      if (this.#force2end) {
        if (this.#progress === 100) {
          this.#force2end = false
          this.#progress = 0
          this.$requestUpdate()
          return
        }
        this.#progress = 100
        this.$requestUpdate()
      } else {
        if (this.#start === void 0) {
          this.#start = timestamp
        }

        let _time = timestamp - this.#start

        let tmp = ~~(_time / (this.duration / 100))
        if (tmp !== this.#progress) {
          this.#progress = tmp
          this.$requestUpdate()
        }

        if (_time > this.duration) {
          this.#progress = 0
          return
        }
      }

      requestAnimationFrame(this.loading)
    }
  }

  render() {
    let pc = styleMap({ width: this.#progress + '%' })
    return html` <span class="thumb" style=${pc}></span> `
  }
}

Loading.reg('loading')