vantui-edit/es/slider/index.js

一套适用于Taro3及React的vantui组件库

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["range", "disabled", "activeColor", "inactiveColor", "max", "min", "step", "value", "barHeight", "vertical", "onDrag", "onChange", "onDragStart", "onDragEnd", "className", "renderButton"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { View } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import * as utils from '../wxs/utils';
import { style } from '../wxs/style';
import { canIUseModel } from '../common/version';
import { getRect, addUnit } from '../common/utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var MIN_DISTANCE = 10;

function getDirection(x, y) {
  if (x > y && x > MIN_DISTANCE) {
    return 'horizontal';
  }

  if (y > x && y > MIN_DISTANCE) {
    return 'vertical';
  }

  return '';
}

export function Slider(props) {
  var range = props.range,
      disabled = props.disabled,
      activeColor = props.activeColor,
      inactiveColor = props.inactiveColor,
      _props$max = props.max,
      max = _props$max === void 0 ? 100 : _props$max,
      _props$min = props.min,
      min = _props$min === void 0 ? 0 : _props$min,
      _props$step = props.step,
      step = _props$step === void 0 ? 1 : _props$step,
      _props$value = props.value,
      value = _props$value === void 0 ? 0 : _props$value,
      barHeight = props.barHeight,
      _props$vertical = props.vertical,
      vertical = _props$vertical === void 0 ? false : _props$vertical,
      onDrag = props.onDrag,
      onChange = props.onChange,
      onDragStart = props.onDragStart,
      onDragEnd = props.onDragEnd,
      _props$className = props.className,
      className = _props$className === void 0 ? '' : _props$className,
      renderButton = props.renderButton,
      others = _objectWithoutProperties(props, _excluded);

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      barStyle = _useState2[0],
      setBarStyle = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      wrapperStyle = _useState4[0],
      setWrapperStyle = _useState4[1];

  var _useState5 = useState(),
      _useState6 = _slicedToArray(_useState5, 2),
      value_ = _useState6[0],
      setValue = _useState6[1];

  var _useState7 = useState(),
      _useState8 = _slicedToArray(_useState7, 2),
      dragStatus = _useState8[0],
      setDragStatus = _useState8[1];

  var _useState9 = useState(),
      _useState10 = _slicedToArray(_useState9, 2),
      buttonIndex = _useState10[0],
      setButtonIndex = _useState10[1];

  var _useState11 = useState({}),
      _useState12 = _slicedToArray(_useState11, 2),
      touchState = _useState12[0],
      setTouchState = _useState12[1];

  var _useState13 = useState({}),
      _useState14 = _slicedToArray(_useState13, 2),
      newValue = _useState14[0],
      setNewValue = _useState14[1];

  var _useState15 = useState(),
      _useState16 = _slicedToArray(_useState15, 2),
      startValue = _useState16[0],
      setstartValue = _useState16[1];

  var indexRef = useRef("".concat(+new Date()).concat(Math.ceil(Math.random() * 10000)));
  var resetTouchStatus = useCallback(function () {
    setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
      direction: '',
      deltaX: 0,
      deltaY: 0,
      offsetX: 0,
      offsetY: 0
    }));
  }, [touchState]);
  var touchStart = useCallback(function (event) {
    resetTouchStatus();
    var touch = event.touches[0];
    setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
      startX: touch.clientX,
      startY: touch.clientY
    }));
  }, [touchState, resetTouchStatus]);
  var touchMove = useCallback(function (event) {
    resetTouchStatus();
    var touch = event.touches[0];

    var newTouchState = _objectSpread(_objectSpread({}, touchState), {}, {
      direction: touchState.direction || getDirection(touchState.offsetX, touchState.offsetY),
      deltaX: touch.clientX - (touchState.startX || 0),
      deltaY: touch.clientY - (touchState.startY || 0),
      offsetX: Math.abs(touchState.deltaX),
      offsetY: Math.abs(touchState.deltaY)
    });

    nextTick(function () {
      setTouchState(newTouchState);
    });
    return newTouchState;
  }, [touchState, resetTouchStatus]);
  var isRange = useCallback(function (value) {
    return range && Array.isArray(value);
  }, [range]);
  var getScope = useCallback(function (max, min) {
    return Number(max) - Number(min);
  }, []);
  var calcMainAxis = useCallback(function (value_) {
    var scope = getScope(max, min);

    if (isRange(value_)) {
      return "".concat((value_[1] - value_[0]) * 100 / scope, "%");
    }

    return "".concat((value_ - Number(min)) * 100 / scope, "%");
  }, [getScope, isRange, max, min]);
  var calcOffset = useCallback(function (value_) {
    var scope = getScope(max, min);

    if (isRange(value_)) {
      return (value_[0] - Number(min)) * 100 / scope + '%';
    }

    return '0%';
  }, [getScope, isRange, max, min]);
  var format = useCallback(function (value) {
    return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
  }, [max, min, step]);
  var handleOverlap = useCallback(function (value) {
    if (value[0] > value[1]) {
      return value.slice(0).reverse();
    }

    return value;
  }, []);
  var updateValue = useCallback(function (value, end, drag) {
    var _styleBar;

    if (isRange(value)) {
      value = handleOverlap(value).map(function (val) {
        return format(val);
      });
    } else {
      value = format(value);
    }

    var mainAxis = vertical ? 'height' : 'width';
    setValue(value);
    setWrapperStyle(_defineProperty({
      background: inactiveColor || ''
    }, vertical ? 'width' : 'height', addUnit(barHeight) || ''));
    var styleBar = (_styleBar = {}, _defineProperty(_styleBar, mainAxis, calcMainAxis(value)), _defineProperty(_styleBar, "left", vertical ? 0 : calcOffset(value)), _defineProperty(_styleBar, "top", vertical ? calcOffset(value) : 0), _styleBar);
    if (drag) styleBar.transition = 'none';
    setBarStyle(styleBar);
    drag ? 'transition: none;' : '';

    if (drag && onDrag) {
      onDrag({
        detail: {
          value: value
        }
      });
    }

    if (end && onChange) {
      onChange({
        detail: value
      });
    }

    if ((drag || end) && canIUseModel()) {
      nextTick(function () {
        setValue(value);
      });
    }
  }, [calcMainAxis, format, handleOverlap, isRange, onChange, onDrag, barHeight, calcOffset, inactiveColor, vertical]);
  useEffect(function () {
    setValue(value);
    updateValue(value);
  }, [value, updateValue]);

  var _onTouchStart = useCallback(function (event, index) {
    if (disabled) return;

    if (typeof index === 'number') {
      setButtonIndex(index || 0);
    }

    touchStart(event);
    setstartValue(format(value_));
    setNewValue(value_);

    if (isRange(value_)) {
      setstartValue(value_.map(function (val) {
        return format(val);
      }));
    } else {
      setstartValue(format(value_));
    }

    setDragStatus('start');
  }, [disabled, format, isRange, touchStart, value_]);

  var getRange = useCallback(function () {
    return max - min;
  }, [max, min]);
  var onTouchMove = useCallback(function (event) {
    event.preventDefault();
    if (disabled) return;

    if (dragStatus === 'start') {
      if (onDragStart) onDragStart();
    }

    var touchState = touchMove(event);
    setDragStatus('draging');
    getRect(null, ".van-slider".concat(indexRef.current)).then(function (rect) {
      var diff = touchState.deltaX / rect.width * getRange();

      if (vertical) {
        diff = touchState.deltaY / rect.height * getRange();
      }

      if (isRange(startValue)) {
        newValue[buttonIndex] = startValue[buttonIndex] + diff;
        setNewValue(newValue);
      } else {
        var newValue_ = newValue;
        newValue_ = (startValue || 0) + diff;
        setNewValue(newValue_);
      }

      updateValue(newValue, false, true);
    });
  }, [disabled, dragStatus, touchMove, onDragStart, getRange, vertical, isRange, startValue, updateValue, newValue, buttonIndex]);
  var onTouchEnd = useCallback(function () {
    if (disabled) return;

    if (dragStatus === 'draging') {
      updateValue(newValue, true);
      if (onDragEnd) onDragEnd();
    }
  }, [disabled, dragStatus, newValue, onDragEnd, updateValue]);
  var onClick = useCallback(function (event) {
    event.preventDefault();
    if (disabled) return;
    getRect(null, ".van-slider".concat(indexRef.current)).then(function (rect) {
      var target = process.env.TARO_ENV === 'h5' ? event : event.detail;
      var value = ((target.x || target.clientX) - rect.left) / rect.width * getRange() + Number(min);

      if (vertical) {
        value = ((target.y || target.clientY) - rect.top) / rect.height * getRange() + Number(min);
      }

      if (isRange(value_)) {
        var _value_ = _slicedToArray(value_, 2),
            left = _value_[0],
            right = _value_[1];

        var middle = (left + right) / 2;

        if (value <= middle) {
          updateValue([value, right], true);
        } else {
          updateValue([left, value], true);
        }
      } else {
        updateValue(value, true);
      }
    });
  }, [disabled, getRange, min, vertical, isRange, value_, updateValue]);
  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
    className: ' ' + utils.bem('slider', {
      disabled: disabled,
      vertical: vertical
    }) + " van-slider".concat(indexRef.current, " ") + className,
    style: utils.style([wrapperStyle, others.style]),
    onClick: onClick
  }, others), {}, {
    children: /*#__PURE__*/_jsxs(View, {
      className: utils.bem('slider__bar'),
      style: style(_objectSpread(_objectSpread({}, barStyle), {}, {
        backgroundColor: activeColor
      })),
      children: [range && /*#__PURE__*/_jsx(View, {
        className: utils.bem('slider__button-wrapper-left'),
        onTouchStart: function onTouchStart(e) {
          return _onTouchStart(e, 0);
        },
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd,
        children: /*#__PURE__*/_jsx(_Fragment, {
          children: renderButton || /*#__PURE__*/_jsx(View, {
            className: utils.bem('slider__button')
          })
        })
      }), range && /*#__PURE__*/_jsx(View, {
        className: utils.bem('slider__button-wrapper-right'),
        onTouchStart: function onTouchStart(e) {
          return _onTouchStart(e, 1);
        },
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd,
        children: /*#__PURE__*/_jsx(_Fragment, {
          children: renderButton || /*#__PURE__*/_jsx(View, {
            className: utils.bem('slider__button')
          })
        })
      }), !range && /*#__PURE__*/_jsx(View, {
        className: utils.bem('slider__button-wrapper'),
        onTouchStart: _onTouchStart,
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd,
        children: /*#__PURE__*/_jsx(_Fragment, {
          children: renderButton || /*#__PURE__*/_jsx(View, {
            className: utils.bem('slider__button')
          })
        })
      })]
    })
  }));
}
export default Slider;