@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
258 lines (257 loc) • 11.4 kB
JavaScript
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useEffect, useRef, useState } from "react";
import { Minus, Plus } from "@nutui/icons-react";
import classNames from "classnames";
import { usePropsValue } from "../../hooks/use-props-value";
import { ComponentDefaults } from "../../utils/typings";
import { bound } from "../../utils/bound";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
disabled: false,
readOnly: false,
allowEmpty: false,
min: 1,
max: 9999,
step: 1,
digits: 0,
select: true,
beforeChange: function(value) {
return Promise.resolve(true);
}
});
var classPrefix = "nut-inputnumber";
export var InputNumber = function(props) {
var _ref = _object_spread({}, defaultProps, props), children = _ref.children, disabled = _ref.disabled, min = _ref.min, max = _ref.max, readOnly = _ref.readOnly, value = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, select = _ref.select, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, beforeChange = _ref.beforeChange, restProps = _object_without_properties(_ref, [
"children",
"disabled",
"min",
"max",
"readOnly",
"value",
"defaultValue",
"allowEmpty",
"digits",
"step",
"select",
"className",
"style",
"formatter",
"onPlus",
"onMinus",
"onOverlimit",
"onBlur",
"onFocus",
"onChange",
"beforeChange"
]);
var classes = classNames(classPrefix, className, _define_property({}, "".concat(classPrefix, "-disabled"), disabled));
var _useState = _sliced_to_array(useState(false), 2), focused = _useState[0], setFocused = _useState[1];
var inputRef = useRef(null);
useEffect(function() {
if (select && focused) {
var _inputRef_current_select, _inputRef_current;
(_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : (_inputRef_current_select = _inputRef_current.select) === null || _inputRef_current_select === void 0 ? void 0 : _inputRef_current_select.call(_inputRef_current);
}
}, [
select,
focused
]);
var _usePropsValue = _sliced_to_array(usePropsValue({
value: typeof value === 'string' ? parseFloat(value) : value,
defaultValue: typeof defaultValue === 'string' ? parseFloat(defaultValue) : defaultValue,
finalValue: 0
}), 2), shadowValue = _usePropsValue[0], setShadowValue = _usePropsValue[1];
var format = function(value) {
if (value === null) return '';
// 如果超过 min 或 max, 需要纠正
var fixedValue = bound(typeof value === 'string' ? parseFloat(value) : value, Number(min), Number(max));
if (formatter) {
return formatter(fixedValue);
}
if (digits) {
return fixedValue.toFixed(digits).toString();
}
return fixedValue.toString();
};
var _useState1 = _sliced_to_array(useState(format(shadowValue)), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
useEffect(function() {
if (!focused) {
setInputValue(format(shadowValue));
}
}, [
focused,
shadowValue
]);
var calcNextValue = function(current, stepValue, symbol) {
var dig = digits + 1;
var currentValue = parseFloat(current || '0');
var stepAmount = parseFloat(stepValue) * symbol;
return (currentValue * dig + stepAmount * dig) / dig;
};
var update = /*#__PURE__*/ function() {
var _ref = _async_to_generator(function(negative, e) {
var shouldOverBoundary, maybeResume, nextValue;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
if (step === undefined) return [
2
];
negative ? onMinus === null || onMinus === void 0 ? void 0 : onMinus(e) : onPlus === null || onPlus === void 0 ? void 0 : onPlus(e);
shouldOverBoundary = calcNextValue(bound(Number(shadowValue), Number(min), Number(max)), step, negative ? -1 : 1);
return [
4,
beforeChange(Number(shouldOverBoundary))
];
case 1:
maybeResume = _state.sent();
if (!maybeResume) return [
2
];
nextValue = bound(shouldOverBoundary, Number(min), Number(max));
setShadowValue(nextValue);
if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e);
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, e);
}
return [
2
];
}
});
});
return function update(negative, e) {
return _ref.apply(this, arguments);
};
}();
var handleReduce = /*#__PURE__*/ function() {
var _ref = _async_to_generator(function(e) {
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
if (disabled) return [
2
];
return [
4,
update(true, e)
];
case 1:
_state.sent();
return [
2
];
}
});
});
return function handleReduce(e) {
return _ref.apply(this, arguments);
};
}();
var handlePlus = /*#__PURE__*/ function() {
var _ref = _async_to_generator(function(e) {
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
if (disabled) return [
2
];
return [
4,
update(false, e)
];
case 1:
_state.sent();
return [
2
];
}
});
});
return function handlePlus(e) {
return _ref.apply(this, arguments);
};
}();
var parseValue = function(text) {
if (text === '') return null;
if (text === '-') return null;
return text;
};
var handleInputChange = /*#__PURE__*/ function() {
var _ref = _async_to_generator(function(e) {
var valueStr, maybeResume;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
// 设置 input 值， 在 blur 时格式化
setInputValue(e.target.value);
valueStr = parseValue(e.target.value);
return [
4,
beforeChange(Number(valueStr))
];
case 1:
maybeResume = _state.sent();
if (!maybeResume) return [
2
];
setShadowValue(// eslint-disable-next-line no-nested-ternary
valueStr === null ? allowEmpty ? null : defaultValue : valueStr);
if (valueStr !== null && (Number(valueStr) < Number(min) || Number(valueStr) > Number(max))) {
onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e);
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || '0').toFixed(digits), e);
}
return [
2
];
}
});
});
return function handleInputChange(e) {
return _ref.apply(this, arguments);
};
}();
var handleFocus = function(e) {
setFocused(true);
setInputValue(shadowValue !== undefined && shadowValue !== null ? bound(Number(shadowValue), Number(min), Number(max)).toString() : '');
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
};
var handleBlur = function(e) {
setFocused(false);
onBlur && onBlur(e);
var valueStr = parseValue(e.target.value);
onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || '0').toFixed(digits), e);
};
return /*#__PURE__*/ React.createElement("div", _object_spread({
className: classes,
style: style
}, restProps), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-minus"),
onClick: handleReduce
}, /*#__PURE__*/ React.createElement(Minus, {
className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
})), /*#__PURE__*/ React.createElement("input", {
className: classNames("".concat(classPrefix, "-input"), _define_property({}, "".concat(classPrefix, "-input-disabled"), disabled)),
ref: inputRef,
inputMode: "decimal",
disabled: disabled,
readOnly: readOnly,
value: inputValue,
onInput: handleInputChange,
onBlur: handleBlur,
onFocus: handleFocus
}), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-add"),
onClick: handlePlus
}, /*#__PURE__*/ React.createElement(Plus, {
className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
})));
};
InputNumber.displayName = 'NutInputNumber';