@fruits-chain/react-native-xiaoshu/lib/commonjs/number-input/index.js

🌈 React Native UI library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _react = _interopRequireWildcard(require("react"));

var _helpers = require("../helpers");

var _hooks = require("../hooks");

var _textInput = _interopRequireDefault(require("../text-input"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const parserNumberToString = n => `${!(0, _isNil.default)(n) ? n : ''}`;

const defaultFormatter = t => t;

const defaultParser = t => Number(t);
/**
 * 数字输入框
 * @description 输入中过滤所有非数字类字符，输入结束结合外界的 parser 修正数据
 */


const NumberInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  let {
    type = 'number',
    min = Number.MIN_SAFE_INTEGER,
    max = Number.MAX_SAFE_INTEGER,
    formatter,
    parser,
    limitDecimals = -1,
    value,
    defaultValue,
    onEndEditing,
    onChange,
    ...restProps
  } = _ref;

  // iOS 数字键盘没有减号，负数无法输入，去掉限制，交给外部控制
  // if (type === 'number') {
  //   restProps.keyboardType = 'numeric'
  // }
  if (type === 'digit') {
    // restProps.keyboardType = 'number-pad'
    limitDecimals = -1;
  }

  const onEndEditingPersistFn = (0, _hooks.usePersistFn)(onEndEditing || _noop.default);
  const onChangePersistFn = (0, _hooks.usePersistFn)(onChange || _noop.default);
  const parserPersistFn = (0, _hooks.usePersistFn)(parser || defaultParser);
  const formatterPersistFn = (0, _hooks.usePersistFn)(formatter || defaultFormatter);
  const [localValue, setLocalValue] = (0, _react.useState)(formatterPersistFn(parserNumberToString(!(0, _isUndefined.default)(value) ? value : defaultValue)));
  /** 记录外部的数值 */

  const LastValue = (0, _react.useRef)(!(0, _isUndefined.default)(value) ? value : defaultValue); // 同步数据

  (0, _hooks.useUpdateEffect)(() => {
    // 记录上次/当前外部的数字
    LastValue.current = value; // 更新内部的值

    setLocalValue(formatterPersistFn(parserNumberToString(value)));
  }, [value]);
  /** 数据过滤，限制小数位，返回数字的字符串 */

  const parserInputValue = (0, _hooks.usePersistFn)(t => (0, _helpers.formatDecimal)(t, limitDecimals));
  /** 计算数据 */

  const computeValueStringify = (0, _react.useCallback)((t, isEnd) => {
    // 部分数据开始格式化
    // 允许输入正整数
    const isNumber = type === 'number';
    t = (0, _helpers.formatNumber)(t, isNumber, true); // 解析数据

    let newValueStringify = parserInputValue(t);

    if (newValueStringify !== '') {
      // 结束的时候限制最大最小值
      if (isEnd) {
        const newValueNum = Number(newValueStringify); // 输入结束做最大、最小限制

        if (newValueNum > max) {
          newValueStringify = String(max);
        }

        if (newValueNum < min) {
          newValueStringify = String(min);
        }

        if (t === '-') {
          newValueStringify = null;
        }
      }
    }

    return newValueStringify;
  }, [max, min, parserInputValue, type]);
  const triggerValueUpdate = (0, _react.useCallback)( // eslint-disable-next-line @typescript-eslint/no-inferrable-types
  (t, isEnd) => {
    let newValueStringify = computeValueStringify(t || '', isEnd);
    let finallyValue = newValueStringify; // 同步更新到组件状态
    // 第一个字符串非数字，newValueStringify 是 null，setLocalValue(null) 不能触发更新，导致限制其他字符输入失败

    setLocalValue(formatterPersistFn(newValueStringify) || ''); // 1. 空字符串 + 非 null
    // 2. 空字符串 + null
    // 3. 非空字符串 + null
    // 4. 非空字符串 + 非 null

    if (newValueStringify === '' && LastValue.current !== null) {
      // 状态 1 触发 onChange
      onChangePersistFn(null);
      finallyValue = null;
      LastValue.current = null;
    } else if (newValueStringify) {
      // 状态 3 和 状态 4
      if (isEnd) {
        // 按照提供的解析函数转成数字
        const returnValue = parserPersistFn(newValueStringify);
        finallyValue = parserNumberToString(returnValue); // 新数字转成字符串

        setLocalValue(formatterPersistFn(finallyValue));

        if (returnValue !== LastValue.current) {
          // 当最终值和上次值不同时触发 onChange
          onChangePersistFn(returnValue);
          LastValue.current = returnValue;
        }
      } else {
        // 聚焦输入中
        // 字符串有数字
        // 格式化后的值和最新值不相同
        // '1.' 和 1 在 Number 后是一致的
        // '1.0' 和 1 在 Number 后是一致的
        const newValueNum = Number(newValueStringify);

        if (newValueStringify && newValueStringify !== '-' && newValueNum !== LastValue.current) {
          onChangePersistFn(newValueNum);
          LastValue.current = newValueNum;
        }
      }
    }

    return finallyValue;
  }, [computeValueStringify, formatterPersistFn, onChangePersistFn, parserPersistFn]);
  const onChangeTextTextInput = (0, _react.useCallback)(t => {
    triggerValueUpdate(t, false);
  }, [triggerValueUpdate]);
  const onEndEditingTextInput = (0, _react.useCallback)(e => {
    e.nativeEvent.text = triggerValueUpdate(e.nativeEvent.text, true);
    onEndEditingPersistFn(e);
  }, [onEndEditingPersistFn, triggerValueUpdate]);
  return /*#__PURE__*/_react.default.createElement(_textInput.default, _extends({}, restProps, {
    ref: ref,
    type: "text",
    value: localValue,
    onChangeText: onChangeTextTextInput,
    onEndEditing: onEndEditingTextInput
  }));
});
const NumberInputMemo = /*#__PURE__*/(0, _react.memo)(NumberInput);
var _default = NumberInputMemo;
exports.default = _default;
//# sourceMappingURL=index.js.map