@gizwits/vantui/es/stepper-g/index.js

机智云组件库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useRef, useEffect, useCallback } from 'react';
import { View } from '@tarojs/components';
import classnames from 'classnames';
import './index.css';
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;
function equal(value1, value2) {
  return String(value1) === String(value2);
}
export function StepperG(_ref) {
  var _ref$max = _ref.max,
    max = _ref$max === void 0 ? 100 : _ref$max,
    _ref$min = _ref.min,
    min = _ref$min === void 0 ? 1 : _ref$min,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? 1 : _ref$value,
    onChange = _ref.onChange,
    id = _ref.id,
    _ref$step = _ref.step,
    step = _ref$step === void 0 ? 1 : _ref$step,
    unit = _ref.unit,
    disabled = _ref.disabled,
    _ref$longPress = _ref.longPress,
    longPress = _ref$longPress === void 0 ? false : _ref$longPress;
  var _useState = useState(value),
    _useState2 = _slicedToArray(_useState, 2),
    currentValue = _useState2[0],
    setCurrentValue = _useState2[1];
  var eventTypeRef = useRef('');
  var isLongPressRef = useRef(false);
  var longPressTimerRef = useRef();
  useEffect(function () {
    if (!equal(value, currentValue)) {
      setCurrentValue(value);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);
  var _isDisabled = useCallback(function (type, currentValue) {
    if (type === 'plus') {
      return disabled || currentValue >= max;
    }
    return disabled || currentValue <= min;
  }, [disabled, max, min]);
  var dispatchEvent = function dispatchEvent(type) {
    return function () {
      eventTypeRef.current = type;
      triggerChange(currentValue);
    };
  };
  var emitChange = useCallback(function (v) {
    if (!equal(v, currentValue)) {
      setCurrentValue(v);
      onChange === null || onChange === void 0 ? void 0 : onChange(v);
    }
  }, [onChange, currentValue]);
  var triggerChange = useCallback(function (currentValue) {
    var evType = eventTypeRef.current;
    var disabled = _isDisabled(evType, currentValue);
    if (disabled) {
      return evType === 'minus' ? min : max;
    }
    var diff = evType === 'minus' ? -step : +step;
    var val = +currentValue + diff;
    emitChange(val);
    return val;
  }, [_isDisabled, emitChange, step, min, max]);
  var _longPressStep = useCallback(function (cval) {
    longPressTimerRef.current = setTimeout(function (t) {
      var cv = triggerChange(t);
      _longPressStep(cv);
    }, LONG_PRESS_INTERVAL, cval);
  }, [triggerChange]);
  var handleTouchStart = useCallback(function (type) {
    return function () {
      if (!longPress) {
        return;
      }
      clearTimeout(longPressTimerRef.current);
      eventTypeRef.current = type;
      isLongPressRef.current = false;
      longPressTimerRef.current = setTimeout(function () {
        isLongPressRef.current = true;
        triggerChange(currentValue);
        _longPressStep(currentValue);
      }, LONG_PRESS_START_TIME);
    };
  }, [_longPressStep, currentValue, longPress, triggerChange]);
  var handleTouchEnd = useCallback(function (event) {
    if (!longPress) {
      return;
    }
    if (isLongPressRef.current) {
      event.preventDefault();
    }
    clearTimeout(longPressTimerRef.current);
  }, [longPress]);
  return /*#__PURE__*/_jsxs(View, {
    className: "stepper-g",
    id: id,
    children: [/*#__PURE__*/_jsx(View, {
      className: classnames('stepper-g-button stepper-g-minus', {
        'stepper-g-button-disabled': disabled || currentValue <= min
      }),
      onClick: dispatchEvent('minus'),
      onTouchStart: handleTouchStart('minus'),
      onTouchEnd: handleTouchEnd,
      children: "-"
    }), /*#__PURE__*/_jsxs(View, {
      className: "stepper-g-content",
      children: [currentValue, unit]
    }), /*#__PURE__*/_jsx(View, {
      className: classnames('stepper-g-button stepper-g-plus', {
        'stepper-g-button-disabled': disabled || currentValue >= max
      }),
      onClick: dispatchEvent('plus'),
      onTouchStart: handleTouchStart('plus'),
      onTouchEnd: handleTouchEnd,
      children: "+"
    })]
  });
}
export default StepperG;