vantui-edit/lib/stepper/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.Stepper = Stepper;
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 _components = require("@tarojs/components");

var _react = require("react");

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

var _validator = require("../common/validator");

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

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

var _excluded = ["theme", "value", "integer", "disabled", "alwaysEmbed", "inputWidth", "buttonSize", "asyncChange", "disableInput", "decimalLength", "min", "max", "step", "showPlus", "showMinus", "disablePlus", "disableMinus", "longPress", "className", "onFocus", "onChange", "onBlur", "onOverlimit", "onPlus", "onMinus", "renderMinus", "renderPlus", "adjustPosition"];

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 LONG_PRESS_START_TIME = 600;
var LONG_PRESS_INTERVAL = 200; // add num and avoid float number

function add(num1, num2) {
  var cardinal = Math.pow(10, 10);
  return Math.round((num1 + num2) * cardinal) / cardinal;
}

function equal(value1, value2) {
  return String(value1) === String(value2);
}

function Stepper(props) {
  var theme = props.theme,
      value = props.value,
      integer = props.integer,
      disabled = props.disabled,
      alwaysEmbed = props.alwaysEmbed,
      inputWidth = props.inputWidth,
      buttonSize = props.buttonSize,
      asyncChange = props.asyncChange,
      disableInput = props.disableInput,
      decimalLength = props.decimalLength,
      _props$min = props.min,
      min = _props$min === void 0 ? 1 : _props$min,
      _props$max = props.max,
      max = _props$max === void 0 ? Number.MAX_SAFE_INTEGER : _props$max,
      _props$step = props.step,
      step = _props$step === void 0 ? 1 : _props$step,
      _props$showPlus = props.showPlus,
      showPlus = _props$showPlus === void 0 ? true : _props$showPlus,
      _props$showMinus = props.showMinus,
      showMinus = _props$showMinus === void 0 ? true : _props$showMinus,
      disablePlus = props.disablePlus,
      disableMinus = props.disableMinus,
      _props$longPress = props.longPress,
      longPress = _props$longPress === void 0 ? true : _props$longPress,
      className = props.className,
      onFocus = props.onFocus,
      onChange = props.onChange,
      onBlur = props.onBlur,
      onOverlimit = props.onOverlimit,
      onPlus = props.onPlus,
      onMinus = props.onMinus,
      renderMinus = props.renderMinus,
      renderPlus = props.renderPlus,
      _props$adjustPosition = props.adjustPosition,
      adjustPosition = _props$adjustPosition === void 0 ? true : _props$adjustPosition,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);

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

  var eventTypeRef = (0, _react.useRef)('');
  var longPressTimerRef = (0, _react.useRef)(0);
  var isLongPressRef = (0, _react.useRef)(false); // filter illegal characters

  var _filter = (0, _react.useCallback)(function (value) {
    value = String(value).replace(/[^0-9.-]/g, '');

    if (integer && value.indexOf('.') !== -1) {
      value = value.split('.')[0];
    }

    return value;
  }, [integer]); // limit value range


  var _format = (0, _react.useCallback)(function (value) {
    value = _filter(value);

    if (!/(.+?)\.$/.test(String(value))) {
      // format range
      value = value === '' ? 0 : +value;
      value = Math.max(Math.min(+max, value), +min); // format decimal

      if ((0, _validator.isDef)(decimalLength)) {
        value = value.toFixed(decimalLength);
      }
    }

    return value;
  }, [decimalLength, _filter, max, min]);

  var _check = (0, _react.useCallback)(function () {
    var val = _format(currentValue);

    if (!equal(val, currentValue)) {
      setCurrentValue(val);
    }
  }, [_format, currentValue]);

  var _isDisabled = (0, _react.useCallback)(function (type) {
    if (type === 'plus') {
      return disabled || disablePlus || currentValue >= max;
    }

    return disabled || disableMinus || currentValue <= min;
  }, [currentValue, disableMinus, disablePlus, disabled, max, min]);

  var _emitChange = (0, _react.useCallback)(function (value) {
    if (!asyncChange) {
      setCurrentValue(value);
    }

    onChange === null || onChange === void 0 ? void 0 : onChange({
      detail: value
    });
  }, [asyncChange, onChange]);

  var _onInput = (0, _react.useCallback)(function (event) {
    var _ref = event.detail || {},
        _ref$value = _ref.value,
        value = _ref$value === void 0 ? '' : _ref$value; // allow input to be empty


    if (value === '') {
      return;
    }

    var formatted = _filter(value); // limit max decimal length


    if ((0, _validator.isDef)(decimalLength) && formatted.indexOf('.') !== -1) {
      var pair = formatted.split('.');
      formatted = "".concat(pair[0], ".").concat(pair[1].slice(0, decimalLength));
    }

    _emitChange(formatted);
  }, [decimalLength, _emitChange, _filter]);

  var _onFocus = (0, _react.useCallback)(function (event) {
    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
  }, [onFocus]);

  var _onBlur = (0, _react.useCallback)(function (event) {
    var value = _format(event.detail.value);

    _emitChange(value);

    onBlur === null || onBlur === void 0 ? void 0 : onBlur(Object.assign(Object.assign({}, event.detail), {
      value: value
    }));
  }, [_emitChange, _format, onBlur]);

  var _onChange = (0, _react.useCallback)(function (currentValue) {
    if (_isDisabled(eventTypeRef.current)) {
      onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit();
      return;
    }

    var diff = eventTypeRef.current === 'minus' ? -step : +step;

    var value = _format(add(+currentValue, diff));

    _emitChange(value); // 不太美观----


    if (eventTypeRef.current === 'plus') {
      onPlus === null || onPlus === void 0 ? void 0 : onPlus();
    } else {
      onMinus === null || onMinus === void 0 ? void 0 : onMinus();
    }

    return value;
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [_isDisabled, step, asyncChange, onOverlimit, _format, onChange, onPlus, onMinus]);

  var _longPressStep = (0, _react.useCallback)(function (currentValue) {
    longPressTimerRef.current = setTimeout(function (t) {
      var cv = _onChange(t);

      _longPressStep(cv);
    }, LONG_PRESS_INTERVAL, currentValue);
  }, [_onChange]);

  var _onTap = (0, _react.useCallback)(function (event) {
    var type = event.currentTarget.dataset.type;
    eventTypeRef.current = type;

    _onChange(currentValue);
  }, [_onChange, currentValue]);

  var _onTouchStart = (0, _react.useCallback)(function (event) {
    if (!longPress || asyncChange) {
      return;
    }

    clearTimeout(longPressTimerRef.current);
    var type = event.currentTarget.dataset.type;
    eventTypeRef.current = type;
    isLongPressRef.current = false;
    longPressTimerRef.current = setTimeout(function () {
      isLongPressRef.current = true;

      _onChange(currentValue);

      _longPressStep(currentValue);
    }, LONG_PRESS_START_TIME);
  }, [longPress, asyncChange, _longPressStep, _onChange, currentValue]);

  var _onTouchEnd = (0, _react.useCallback)(function (event) {
    if (!longPress) {
      return;
    }

    if (isLongPressRef.current) {
      event.preventDefault();
    }

    clearTimeout(longPressTimerRef.current);
  }, [longPress]);

  (0, _react.useEffect)(function () {
    _check();
  }, [decimalLength, min, max, integer, _check]);
  (0, _react.useEffect)(function () {
    if (!equal(value, currentValue)) {
      setCurrentValue(_format(value));
    } // eslint-disable-next-line

  }, [_format, value]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
    className: utils.bem('stepper', [theme]) + " ".concat(className || '')
  }, others), {}, {
    children: [showMinus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      "data-type": "minus",
      style: computed.buttonStyle({
        buttonSize: buttonSize
      }),
      className: 'minus-class ' + utils.bem('stepper__minus', {
        disabled: disabled || disableMinus || currentValue <= min
      }),
      hoverClass: "van-stepper__minus--hover" // hoverStayTime="70"
      ,
      onClick: _onTap,
      onTouchStart: _onTouchStart,
      onTouchEnd: _onTouchEnd,
      children: renderMinus
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
      type: integer ? 'number' : 'digit',
      className: 'input-class ' + utils.bem('stepper__input', {
        disabled: disabled || disableInput
      }),
      style: computed.inputStyle({
        buttonSize: buttonSize,
        inputWidth: inputWidth
      }),
      alwaysEmbed: alwaysEmbed,
      value: currentValue,
      disabled: disabled || disableInput,
      onInput: _onInput,
      onFocus: _onFocus,
      onBlur: _onBlur,
      adjustPosition: adjustPosition
    }), showPlus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      "data-type": "plus",
      style: computed.buttonStyle({
        buttonSize: buttonSize
      }),
      className: 'plus-class ' + utils.bem('stepper__plus', {
        disabled: disabled || disablePlus || currentValue >= max
      }),
      hoverClass: "van-stepper__plus--hover" // hoverStayTime="70"
      ,
      onClick: _onTap,
      onTouchStart: _onTouchStart,
      onTouchEnd: _onTouchEnd,
      children: renderPlus
    })]
  }));
}

var _default = Stepper;
exports.default = _default;