@tarojs/components/dist/esm/taro-slider-core.entry.js

import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8809c729.js';

let Slider = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.onChange = createEvent(this, "change", 7);
    this.onChanging = createEvent(this, "changing", 7);
    this.min = 0;
    this.max = 100;
    this.step = 1;
    this.disabled = false;
    this.value = 0;
    this.activeColor = '#1aad19';
    this.backgroundColor = '#e9e9e9';
    this.blockSize = 28;
    this.blockColor = '#ffffff';
    this.showValue = false;
    this.name = '';
    this.totalWidth = 0;
    this.touching = false;
    this.ogX = 0;
    this.touchId = null;
    this.percent = 0;
    this.isWillLoadCalled = false;
    this.handleTouchStart = (e) => {
      if (this.touching || this.disabled)
        return;
      this.touching = true;
      this.touchId = e.targetTouches[0].identifier;
      this.totalWidth = this.sliderInsRef.clientWidth;
      this.ogX = e.targetTouches[0].pageX;
      this.ogPercent = this.percent;
    };
    this.handleTouchMove = (e) => {
      const { disabled, touching, touchId, totalWidth, max, min, ogX, ogPercent } = this;
      if (!touching || disabled)
        return;
      if (e.targetTouches[0].identifier !== touchId)
        return;
      // 阻止默认事件
      e.preventDefault();
      const pageX = e.targetTouches[0].pageX;
      const diffX = pageX - ogX;
      let percent = diffX / totalWidth * 100 + ogPercent;
      percent = Math.max(0, Math.min(percent, 100));
      const val = min + percent * 0.01 * (max - min);
      this.updateByStep(val);
      this.onChanging.emit({
        detail: e.detail,
        value: this.val
      });
    };
    this.handleTouchEnd = (e) => {
      const { disabled, touching } = this;
      if (!touching || disabled)
        return;
      if (this.percent !== this.ogPercent) {
        this.onChange.emit({
          detail: e.detail,
          value: this.val
        });
      }
      this.touching = false;
      this.touchId = null;
      this.ogX = 0;
      this.ogPercent = 0;
    };
  }
  function(newVal) {
    if (!this.isWillLoadCalled)
      return;
    const { max, min } = this;
    if (newVal !== null && newVal !== this.val) {
      const val = Math.max(min, Math.min(newVal, max));
      this.updateByStep(val);
    }
  }
  componentDidLoad() {
    Object.defineProperty(this.el, 'value', {
      get: () => this.val,
      set: value => (this.value = value),
      configurable: true
    });
    // 在自动化测试时，如果通过 JSX 绑定 touch 事件，
    // 模拟的 touch 事件只会在浏览器的 device mode 下触发，Karma 跑的测试就会跪。
    // 因此改为 didLoad 后 addEventListener 的形式。
    this.handler.addEventListener('touchstart', this.handleTouchStart);
    this.handler.addEventListener('touchmove', this.handleTouchMove);
    this.handler.addEventListener('touchend', this.handleTouchEnd);
  }
  componentDidUpdate() {
    this.value = null;
  }
  componentWillLoad() {
    this.isWillLoadCalled = true;
    const { value, max, min } = this;
    if (value === null)
      return;
    const val = Math.max(min, Math.min(value, max));
    this.updateByStep(val);
  }
  // 根据步长 step 修改 value
  updateByStep(value) {
    const { max, min, step } = this;
    const steps = Math.floor((max - min) / step);
    for (let i = 0; i <= steps; i++) {
      const current = min + step * i;
      const next = i === steps ? null : min + step * (i + 1);
      if (value === current)
        break;
      if (!next && value > current) {
        // step 不能被 max - min 整除
        value = current;
      }
      if (next && value > current && value < next) {
        if (value - current < step / 2) {
          value = current;
        }
        else {
          value = next;
        }
        break;
      }
    }
    const percent = (value - min) / (max - min) * 100;
    this.val = value;
    this.percent = percent;
  }
  render() {
    const { showValue, backgroundColor, activeColor, blockColor, name, percent, val } = this;
    let blockSize = this.blockSize;
    const innerStyles = { backgroundColor };
    const percentage = percent > 100 ? 100 : percent;
    const trackStyles = {
      width: `${percentage}%`,
      backgroundColor: activeColor
    };
    if (blockSize < 12) {
      blockSize = 12;
    }
    if (blockSize > 28) {
      blockSize = 28;
    }
    const handlerStyles = {
      left: `${percentage}%`,
      width: `${blockSize}px`,
      height: `${blockSize}px`,
      backgroundColor: blockColor,
      marginTop: `-${Math.floor(blockSize / 2)}px`,
      marginLeft: `-${Math.floor(blockSize / 2)}px`
    };
    return (h(Host, { class: 'weui-slider-box' }, h("div", { class: 'weui-slider' }, h("div", { class: 'weui-slider__inner', style: innerStyles, ref: c => (this.sliderInsRef = c) }, h("div", { style: trackStyles, class: 'weui-slider__track' }), h("div", { class: 'weui-slider__handler', ref: dom => {
        if (dom)
          this.handler = dom;
      }, style: handlerStyles }), h("input", { type: 'hidden', name: name, value: val }))), showValue && h("div", { class: 'weui-slider-box__value' }, val)));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "value": ["function"]
  }; }
};

export { Slider as taro_slider_core };