@nutui/nutui-react/dist/cjs/packages/inputnumber/inputnumber.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "InputNumber", {
    enumerable: true,
    get: function() {
        return InputNumber;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _usepropsvalue = require("../../hooks/use-props-value");
var _typings = require("../../utils/typings");
var _bound = require("../../utils/bound");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    disabled: false,
    readOnly: false,
    allowEmpty: false,
    min: 1,
    max: 9999,
    step: 1,
    digits: 0,
    select: true,
    beforeChange: function beforeChange(value) {
        return Promise.resolve(true);
    }
});
var classPrefix = "nut-inputnumber";
var InputNumber = function InputNumber(props) {
    var _ref = (0, _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 = (0, _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 = (0, _classnames.default)(classPrefix, className, (0, _define_property._)({}, "".concat(classPrefix, "-disabled"), disabled));
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), focused = _useState[0], setFocused = _useState[1];
    var inputRef = (0, _react.useRef)(null);
    (0, _react.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 = (0, _sliced_to_array._)((0, _usepropsvalue.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 format(value) {
        if (value === null) return '';
        // 如果超过 min 或 max, 需要纠正
        var fixedValue = (0, _bound.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 = (0, _sliced_to_array._)((0, _react.useState)(format(shadowValue)), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
    (0, _react.useEffect)(function() {
        if (!focused) {
            setInputValue(format(shadowValue));
        }
    }, [
        focused,
        shadowValue
    ]);
    var calcNextValue = function calcNextValue(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 = (0, _async_to_generator._)(function(negative, e) {
            var shouldOverBoundary, maybeResume, nextValue;
            return (0, _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((0, _bound.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 = (0, _bound.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 = (0, _async_to_generator._)(function(e) {
            return (0, _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 = (0, _async_to_generator._)(function(e) {
            return (0, _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 parseValue(text) {
        if (text === '') return null;
        if (text === '-') return null;
        return text;
    };
    var handleInputChange = /*#__PURE__*/ function() {
        var _ref = (0, _async_to_generator._)(function(e) {
            var valueStr, maybeResume;
            return (0, _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(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 handleFocus(e) {
        setFocused(true);
        setInputValue(shadowValue !== undefined && shadowValue !== null ? (0, _bound.bound)(Number(shadowValue), Number(min), Number(max)).toString() : '');
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
    };
    var handleBlur = function handleBlur(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.default.createElement("div", (0, _object_spread._)({
        className: classes,
        style: style
    }, restProps), /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-minus"),
        onClick: handleReduce
    }, /*#__PURE__*/ _react.default.createElement(_iconsreact.Minus, {
        className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
    })), /*#__PURE__*/ _react.default.createElement("input", {
        className: (0, _classnames.default)("".concat(classPrefix, "-input"), (0, _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.default.createElement("div", {
        className: "".concat(classPrefix, "-add"),
        onClick: handlePlus
    }, /*#__PURE__*/ _react.default.createElement(_iconsreact.Plus, {
        className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
    })));
};
InputNumber.displayName = 'NutInputNumber';