taro-ui-vue3/lib/range/index.js

Taro UI Rewritten in Vue 3.0

var __defProp = Object.defineProperty;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
var __objSpread = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import {h, defineComponent, nextTick, reactive, ref, watch, onMounted, computed, mergeProps} from "vue";
import {View} from "@tarojs/components";
import {
  delayQuerySelector,
  getEventDetail,
  mergeStyle
} from "../utils/common";
const AtRange = defineComponent({
  name: "AtRange",
  props: {
    sliderStyle: {
      type: [Object, String],
      default: ""
    },
    railStyle: {
      type: [Object, String],
      default: ""
    },
    trackStyle: {
      type: [Object, String],
      default: ""
    },
    value: {
      type: Array,
      default: [0, 0]
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    blockSize: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    onChange: Function,
    onAfterChange: Function
  },
  setup(props, {attrs}) {
    const width = ref(0);
    const left = ref(0);
    const currentSlider = ref("");
    const state = reactive({
      aX: 0,
      bX: 0
    });
    const deltaValue = computed(() => props.max - props.min);
    const rootClasses = computed(() => ({
      "at-range": true,
      "at-range--disabled": props.disabled
    }));
    const sliderCommonStyle = computed(() => ({
      width: props.blockSize ? `${props.blockSize}PX` : "",
      height: props.blockSize ? `${props.blockSize}PX` : "",
      marginLeft: props.blockSize ? `${-props.blockSize / 2}PX` : ""
    }));
    const sliderAStyle = computed(() => mergeStyle(props.sliderStyle, __objSpread(__objSpread({}, sliderCommonStyle.value), {
      left: `${state.aX}%`,
      top: "0%"
    })));
    const sliderBStyle = computed(() => mergeStyle(props.sliderStyle, __objSpread(__objSpread({}, sliderCommonStyle.value), {
      left: `${state.bX}%`,
      top: "0%"
    })));
    const containerStyle = computed(() => ({
      height: props.blockSize ? `${props.blockSize}PX` : ""
    }));
    const atTrackStyle = computed(() => mergeStyle(props.trackStyle, {
      left: `${Math.min(state.aX, state.bX)}%`,
      width: `${Math.abs(state.aX - state.bX)}%`
    }));
    function handleClick(event) {
      if (currentSlider.value && !props.disabled) {
        let sliderValue = 0;
        const detail = getEventDetail(event);
        sliderValue = detail.x - left.value;
        setSliderValue(currentSlider.value, sliderValue, "onChange");
      }
    }
    function handleTouchMove(sliderName, event) {
      if (props.disabled)
        return;
      event.stopPropagation();
      const clientX = event.touches[0].clientX;
      setSliderValue(sliderName, clientX - left.value, "onChange");
    }
    function handleTouchEnd(sliderName) {
      if (props.disabled)
        return;
      currentSlider.value = sliderName;
      triggerEvent("onAfterChange");
    }
    function setSliderValue(sliderName, targetValue, funcName) {
      const distance = Math.min(Math.max(targetValue, 0), width.value);
      const sliderValue = Math.floor(distance / width.value * 100);
      if (funcName) {
        state[sliderName] = sliderValue;
        nextTick(() => triggerEvent(funcName));
      } else {
        state[sliderName] = sliderValue;
      }
    }
    function setValue(value) {
      const aX = Math.round((value[0] - props.min) / deltaValue.value * 100);
      const bX = Math.round((value[1] - props.min) / deltaValue.value * 100);
      state.aX = aX;
      state.bX = bX;
    }
    function triggerEvent(funcName) {
      const {aX, bX} = state;
      const a = Math.round(aX / 100 * deltaValue.value) + props.min;
      const b = Math.round(bX / 100 * deltaValue.value) + props.min;
      const result = [a, b].sort((x, y) => x - y);
      if (funcName === "onChange") {
        props.onChange && props.onChange(result);
      } else if (funcName === "onAfterChange") {
        props.onAfterChange && props.onAfterChange(result);
      }
    }
    function updatePos() {
      delayQuerySelector(this, ".at-range__container", 10).then((rect) => {
        width.value = Math.round(rect[0].width);
        left.value = Math.round(rect[0].left);
      });
    }
    watch(() => props.value, (value, oldValue) => {
      updatePos();
      if (oldValue[0] !== value[0] || oldValue[1] !== value[1]) {
        setValue(value);
      }
    });
    onMounted(() => {
      updatePos();
      setValue(props.value);
    });
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value,
      onTap: handleClick
    }), {
      default: () => [
        h(View, {
          class: "at-range__container",
          style: containerStyle.value
        }, {
          default: () => [
            h(View, {
              class: "at-range__rail",
              style: props.railStyle
            }, {
              default: () => [
                h(View, {
                  class: "at-range__track",
                  style: atTrackStyle.value
                }),
                ...["aX", "bX"].map((sliderName, index) => h(View, {
                  key: `${sliderName} - ${index}`,
                  class: "at-range__slider",
                  style: sliderName === "aX" ? sliderAStyle.value : sliderBStyle.value,
                  onTouchend: handleTouchEnd.bind(this, sliderName),
                  onTouchmove: handleTouchMove.bind(this, sliderName)
                }))
              ]
            })
          ]
        })
      ]
    });
  }
});
var range_default = AtRange;
export {
  range_default as default
};