vantui-edit/es/stepper/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 = ["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 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 { View, Input } from '@tarojs/components';
import { useCallback, useEffect, useState, useRef } from 'react';
import * as utils from '../wxs/utils';
import { isDef } from '../common/validator';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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);
}

export 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 = _objectWithoutProperties(props, _excluded);

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      currentValue = _useState2[0],
      setCurrentValue = _useState2[1];

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

  var _filter = 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 = 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 (isDef(decimalLength)) {
        value = value.toFixed(decimalLength);
      }
    }

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

  var _check = useCallback(function () {
    var val = _format(currentValue);

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

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

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

  var _emitChange = useCallback(function (value) {
    if (!asyncChange) {
      setCurrentValue(value);
    }

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

  var _onInput = 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 (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 = useCallback(function (event) {
    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
  }, [onFocus]);

  var _onBlur = 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 = 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 = useCallback(function (currentValue) {
    longPressTimerRef.current = setTimeout(function (t) {
      var cv = _onChange(t);

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

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

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

  var _onTouchStart = 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 = useCallback(function (event) {
    if (!longPress) {
      return;
    }

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

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

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

  }, [_format, value]);
  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
    className: utils.bem('stepper', [theme]) + " ".concat(className || '')
  }, others), {}, {
    children: [showMinus && /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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
    })]
  }));
}
export default Stepper;