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

机智云组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StepperG = StepperG;
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _components = require("@tarojs/components");
var _classnames = _interopRequireDefault(require("classnames"));
require("./index.css");
var _jsxRuntime = require("react/jsx-runtime");
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; }
var LONG_PRESS_START_TIME = 600;
var LONG_PRESS_INTERVAL = 200;
function equal(value1, value2) {
  return String(value1) === String(value2);
}
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 = (0, _react.useState)(value),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    currentValue = _useState2[0],
    setCurrentValue = _useState2[1];
  var eventTypeRef = (0, _react.useRef)('');
  var isLongPressRef = (0, _react.useRef)(false);
  var longPressTimerRef = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    if (!equal(value, currentValue)) {
      setCurrentValue(value);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);
  var _isDisabled = (0, _react.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 = (0, _react.useCallback)(function (v) {
    if (!equal(v, currentValue)) {
      setCurrentValue(v);
      onChange === null || onChange === void 0 ? void 0 : onChange(v);
    }
  }, [onChange, currentValue]);
  var triggerChange = (0, _react.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 = (0, _react.useCallback)(function (cval) {
    longPressTimerRef.current = setTimeout(function (t) {
      var cv = triggerChange(t);
      _longPressStep(cv);
    }, LONG_PRESS_INTERVAL, cval);
  }, [triggerChange]);
  var handleTouchStart = (0, _react.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 = (0, _react.useCallback)(function (event) {
    if (!longPress) {
      return;
    }
    if (isLongPressRef.current) {
      event.preventDefault();
    }
    clearTimeout(longPressTimerRef.current);
  }, [longPress]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
    className: "stepper-g",
    id: id,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      className: (0, _classnames.default)('stepper-g-button stepper-g-minus', {
        'stepper-g-button-disabled': disabled || currentValue <= min
      }),
      onClick: dispatchEvent('minus'),
      onTouchStart: handleTouchStart('minus'),
      onTouchEnd: handleTouchEnd,
      children: "-"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "stepper-g-content",
      children: [currentValue, unit]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      className: (0, _classnames.default)('stepper-g-button stepper-g-plus', {
        'stepper-g-button-disabled': disabled || currentValue >= max
      }),
      onClick: dispatchEvent('plus'),
      onTouchStart: handleTouchStart('plus'),
      onTouchEnd: handleTouchEnd,
      children: "+"
    })]
  });
}
var _default = StepperG;
exports.default = _default;