@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
268 lines (267 loc) • 10.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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, useImperativeHandle, forwardRef } from 'react';
import * as utils from '../wxs/utils';
import { isDef } from '../common/validator';
import { get } from '../default-props';
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, ref) {
var _useState = useState(get().Stepper),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
theme = _d$props.theme,
value = _d$props.value,
integer = _d$props.integer,
disabled = _d$props.disabled,
alwaysEmbed = _d$props.alwaysEmbed,
inputWidth = _d$props.inputWidth,
buttonSize = _d$props.buttonSize,
asyncChange = _d$props.asyncChange,
disableInput = _d$props.disableInput,
decimalLength = _d$props.decimalLength,
_d$props$min = _d$props.min,
min = _d$props$min === void 0 ? 1 : _d$props$min,
_d$props$max = _d$props.max,
max = _d$props$max === void 0 ? Number.MAX_SAFE_INTEGER : _d$props$max,
_d$props$step = _d$props.step,
step = _d$props$step === void 0 ? 1 : _d$props$step,
_d$props$showPlus = _d$props.showPlus,
showPlus = _d$props$showPlus === void 0 ? true : _d$props$showPlus,
_d$props$showMinus = _d$props.showMinus,
showMinus = _d$props$showMinus === void 0 ? true : _d$props$showMinus,
disablePlus = _d$props.disablePlus,
disableMinus = _d$props.disableMinus,
_d$props$longPress = _d$props.longPress,
longPress = _d$props$longPress === void 0 ? true : _d$props$longPress,
className = _d$props.className,
onFocus = _d$props.onFocus,
onChange = _d$props.onChange,
onBlur = _d$props.onBlur,
onOverlimit = _d$props.onOverlimit,
onPlus = _d$props.onPlus,
onMinus = _d$props.onMinus,
renderMinus = _d$props.renderMinus,
renderPlus = _d$props.renderPlus,
_d$props$adjustPositi = _d$props.adjustPosition,
adjustPosition = _d$props$adjustPositi === void 0 ? true : _d$props$adjustPositi,
others = _objectWithoutProperties(_d$props, _excluded);
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
currentValue = _useState4[0],
setCurrentValue = _useState4[1];
var eventTypeRef = useRef('');
var longPressTimerRef = useRef(0);
var isLongPressRef = useRef(false);
var InputRef = useRef(null);
// 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]);
var setAutoFocus = useCallback(function () {
if (InputRef.current) InputRef.current.autoFocus = true;
}, []);
useImperativeHandle(ref, function () {
return {
setValue: function setValue(v) {
return setCurrentValue(v);
},
setAutoFocus: setAutoFocus
};
});
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, {
ref: InputRef,
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 /*#__PURE__*/forwardRef(Stepper);