vantui-edit/lib/slider/index.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Slider = Slider;
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _components = require("@tarojs/components");

var _taro = require("@tarojs/taro");

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _style = require("../wxs/style");

var _version = require("../common/version");

var _utils2 = require("../common/utils");

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["range", "disabled", "activeColor", "inactiveColor", "max", "min", "step", "value", "barHeight", "vertical", "onDrag", "onChange", "onDragStart", "onDragEnd", "className", "renderButton"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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) { (0, _defineProperty2.default)(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; }

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 '';
}

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 = (0, _objectWithoutProperties2.default)(props, _excluded);

  var _useState = (0, _react.useState)(),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      barStyle = _useState2[0],
      setBarStyle = _useState2[1];

  var _useState3 = (0, _react.useState)(),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      wrapperStyle = _useState4[0],
      setWrapperStyle = _useState4[1];

  var _useState5 = (0, _react.useState)(),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      value_ = _useState6[0],
      setValue = _useState6[1];

  var _useState7 = (0, _react.useState)(),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      dragStatus = _useState8[0],
      setDragStatus = _useState8[1];

  var _useState9 = (0, _react.useState)(),
      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
      buttonIndex = _useState10[0],
      setButtonIndex = _useState10[1];

  var _useState11 = (0, _react.useState)({}),
      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
      touchState = _useState12[0],
      setTouchState = _useState12[1];

  var _useState13 = (0, _react.useState)({}),
      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
      newValue = _useState14[0],
      setNewValue = _useState14[1];

  var _useState15 = (0, _react.useState)(),
      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
      startValue = _useState16[0],
      setstartValue = _useState16[1];

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

    (0, _taro.nextTick)(function () {
      setTouchState(newTouchState);
    });
    return newTouchState;
  }, [touchState, resetTouchStatus]);
  var isRange = (0, _react.useCallback)(function (value) {
    return range && Array.isArray(value);
  }, [range]);
  var getScope = (0, _react.useCallback)(function (max, min) {
    return Number(max) - Number(min);
  }, []);
  var calcMainAxis = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (value) {
    return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
  }, [max, min, step]);
  var handleOverlap = (0, _react.useCallback)(function (value) {
    if (value[0] > value[1]) {
      return value.slice(0).reverse();
    }

    return value;
  }, []);
  var updateValue = (0, _react.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((0, _defineProperty2.default)({
      background: inactiveColor || ''
    }, vertical ? 'width' : 'height', (0, _utils2.addUnit)(barHeight) || ''));
    var styleBar = (_styleBar = {}, (0, _defineProperty2.default)(_styleBar, mainAxis, calcMainAxis(value)), (0, _defineProperty2.default)(_styleBar, "left", vertical ? 0 : calcOffset(value)), (0, _defineProperty2.default)(_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) && (0, _version.canIUseModel)()) {
      (0, _taro.nextTick)(function () {
        setValue(value);
      });
    }
  }, [calcMainAxis, format, handleOverlap, isRange, onChange, onDrag, barHeight, calcOffset, inactiveColor, vertical]);
  (0, _react.useEffect)(function () {
    setValue(value);
    updateValue(value);
  }, [value, updateValue]);

  var _onTouchStart = (0, _react.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 = (0, _react.useCallback)(function () {
    return max - min;
  }, [max, min]);
  var onTouchMove = (0, _react.useCallback)(function (event) {
    event.preventDefault();
    if (disabled) return;

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

    var touchState = touchMove(event);
    setDragStatus('draging');
    (0, _utils2.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 = (0, _react.useCallback)(function () {
    if (disabled) return;

    if (dragStatus === 'draging') {
      updateValue(newValue, true);
      if (onDragEnd) onDragEnd();
    }
  }, [disabled, dragStatus, newValue, onDragEnd, updateValue]);
  var onClick = (0, _react.useCallback)(function (event) {
    event.preventDefault();
    if (disabled) return;
    (0, _utils2.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_ = (0, _slicedToArray2.default)(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__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: utils.bem('slider__bar'),
      style: (0, _style.style)(_objectSpread(_objectSpread({}, barStyle), {}, {
        backgroundColor: activeColor
      })),
      children: [range && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: utils.bem('slider__button-wrapper-left'),
        onTouchStart: function onTouchStart(e) {
          return _onTouchStart(e, 0);
        },
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
          children: renderButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
            className: utils.bem('slider__button')
          })
        })
      }), range && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: utils.bem('slider__button-wrapper-right'),
        onTouchStart: function onTouchStart(e) {
          return _onTouchStart(e, 1);
        },
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
          children: renderButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
            className: utils.bem('slider__button')
          })
        })
      }), !range && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: utils.bem('slider__button-wrapper'),
        onTouchStart: _onTouchStart,
        onTouchMove: onTouchMove,
        onTouchEnd: onTouchEnd,
        onTouchCancel: onTouchEnd,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
          children: renderButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
            className: utils.bem('slider__button')
          })
        })
      })]
    })
  }));
}

var _default = Slider;
exports.default = _default;