choerodon-ui/pro/lib/number-field/NumberField.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

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

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _configure = require("../../../lib/configure");

var _TextField2 = require("../text-field/TextField");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _keepRunning = _interopRequireDefault(require("../_util/keepRunning"));

var _icon = _interopRequireDefault(require("../icon"));

var _utils = require("./utils");

var _isEmpty = _interopRequireDefault(require("../_util/isEmpty"));

var _localeContext = require("../locale-context");

var _enum = require("../data-set/enum");

var _formatNumber = _interopRequireDefault(require("../formatter/formatNumber"));

var _LocaleContext = _interopRequireDefault(require("../locale-context/LocaleContext"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

function getCurrentValidValue(value) {
  return Number(value.replace(/\.$/, '')) || 0;
}

var NumberField =
/*#__PURE__*/
function (_TextField) {
  (0, _inherits2["default"])(NumberField, _TextField);

  var _super = _createSuper(NumberField);

  function NumberField() {
    (0, _classCallCheck2["default"])(this, NumberField);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(NumberField, [{
    key: "savePlusRef",
    value: function savePlusRef(ref) {
      this.plusElement = ref;
    }
  }, {
    key: "saveMinusRef",
    value: function saveMinusRef(ref) {
      this.minusElement = ref;
    }
  }, {
    key: "isLowerRange",
    value: function isLowerRange(value1, value2) {
      return value1 < value2;
    }
  }, {
    key: "getFieldType",
    value: function getFieldType() {
      return _enum.FieldType.number;
    }
  }, {
    key: "getLimit",
    value: function getLimit(type) {
      var record = this.record;
      var limit = this.getProp(type);

      if (record && (0, _isString["default"])(limit)) {
        var num = record.get(limit);

        if (num !== undefined) {
          return num;
        }
      }

      return limit;
    }
  }, {
    key: "getValidatorProps",
    value: function getValidatorProps() {
      var min = this.min,
          max = this.max;
      var step = this.getProp('step');
      var nonStrictStep = this.nonStrictStep;
      return (0, _omit["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(NumberField.prototype), "getValidatorProps", this).call(this), {
        min: min,
        max: max,
        step: step,
        nonStrictStep: nonStrictStep
      }), ['maxLength', 'minLength']);
    }
  }, {
    key: "getInnerSpanButton",
    value: function getInnerSpanButton() {
      var prefixCls = this.prefixCls,
          range = this.range;
      var longPressPlus = this.props.longPressPlus;
      var step = this.getProp('step');

      if (step && !range && !this.isReadOnly()) {
        var plusIconProps = {
          ref: this.savePlusRef,
          key: 'plus',
          className: "".concat(prefixCls, "-plus"),
          onMouseDown: longPressPlus ? this.handlePlus : this.handleOncePlus
        };
        var minIconProps = {
          ref: this.saveMinusRef,
          key: 'minus',
          className: "".concat(prefixCls, "-minus"),
          onMouseDown: longPressPlus ? this.handleMinus : this.handleOnceMinus
        };
        return this.wrapperInnerSpanButton(_react["default"].createElement("div", null, _react["default"].createElement("div", (0, _extends2["default"])({}, plusIconProps), _react["default"].createElement(_icon["default"], {
          type: "keyboard_arrow_up"
        })), _react["default"].createElement("div", (0, _extends2["default"])({}, minIconProps), _react["default"].createElement(_icon["default"], {
          type: "keyboard_arrow_down"
        }))));
      }
    }
  }, {
    key: "handleEnterDown",
    value: function handleEnterDown(e) {
      if (this.multiple && this.range && this.text) {
        this.prepareSetValue(this.text);
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(NumberField.prototype), "handleEnterDown", this).call(this, e);

      if (this.multiple && this.range) {
        this.setRangeTarget(0);
        this.beginRange();
      }
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (!this.props.disabled && !this.isReadOnly()) {
        switch (e.keyCode) {
          case _KeyCode["default"].UP:
            this.handleKeyDownUp(e);
            break;

          case _KeyCode["default"].DOWN:
            this.handleKeyDownDown(e);
            break;

          default:
        }
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(NumberField.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "handleKeyDownUp",
    value: function handleKeyDownUp(e) {
      e.preventDefault();

      if (this.getProp('step')) {
        this.step(true);
      }
    }
  }, {
    key: "handleKeyDownDown",
    value: function handleKeyDownDown(e) {
      e.preventDefault();

      if (this.getProp('step')) {
        this.step(false);
      }
    }
  }, {
    key: "handlePlus",
    value: function handlePlus(_e, isKeeping) {
      this.step(true, isKeeping);
    }
  }, {
    key: "handleMinus",
    value: function handleMinus(_e, isKeeping) {
      this.step(false, isKeeping);
    }
  }, {
    key: "handleOncePlus",
    value: function handleOncePlus() {
      this.step(true);
    }
  }, {
    key: "handleOnceMinus",
    value: function handleOnceMinus() {
      this.step(false);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _omit["default"])((0, _get2["default"])((0, _getPrototypeOf2["default"])(NumberField.prototype), "getOtherProps", this).call(this), ['nonStrictStep', 'formatter', 'formatterOptions', 'longPressPlus', 'precision', 'numberGrouping', 'maxLength']);
      return otherProps;
    }
  }, {
    key: "step",
    value: function step(isPlus, isKeeping) {
      var min = (0, _defaultTo["default"])(this.min, -_utils.MAX_SAFE_INTEGER);
      var max = (0, _defaultTo["default"])(this.max, _utils.MAX_SAFE_INTEGER);
      var step = (0, _defaultTo["default"])(this.getProp('step'), 1);
      var nonStrictStep = this.nonStrictStep; // 需要处理非严格模式

      var newValue;
      var value = this.multiple || this.isFocused ? Number(this.text || this.getValue()) : this.getValue();

      if (!(0, _isNumber["default"])(value)) {
        newValue = (0, _defaultTo["default"])(this.min, 0);
      } else {
        var currentValue = getCurrentValidValue(String(value));
        newValue = currentValue;
        var nearStep = (0, _utils.getNearStepValues)(currentValue, step, min, max);

        if (nonStrictStep === false && nearStep) {
          switch (nearStep.length) {
            case 1:
              newValue = nearStep[0];
              break;

            case 2:
              newValue = nearStep[isPlus ? 1 : 0];
              break;

            default:
          }
        } else {
          var nextValue = (0, _utils.plus)(currentValue, isPlus ? step : -step);

          if (nextValue < min) {
            newValue = min;
          } else if (nextValue > max) {
            var nearMaxStep = (0, _utils.getNearStepValues)(max, step, min, max);

            if (nearMaxStep) {
              newValue = nearMaxStep[0];
            } else {
              newValue = max;
            }
          } else {
            newValue = nextValue;
          }
        }
      } // 不要进行对比操作,在table中使用的时候,因为NumberField会作为editor使用,所以在 对第一个cell只点击一次的情况下(例如plus)
      // 此时切换到第二个cell进行编辑，无法进行上次操作(同上次的plus)
      // this.value !== newValue


      if (this.multiple || isKeeping) {
        this.setText(String(newValue));
      } else {
        this.prepareSetValue(newValue);
      }
    }
  }, {
    key: "prepareSetValue",
    value: function prepareSetValue(value) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(NumberField.prototype), "prepareSetValue", this).call(this, isNaN(value) || (0, _isEmpty["default"])(value) ? null : Number(value));
    }
  }, {
    key: "restrictInput",
    value: function restrictInput(value) {
      if (value) {
        var restrict = '0-9';

        if (this.allowDecimal) {
          restrict += '.';
        }

        var isNegative = this.allowNegative && /^-/.test(value);
        value = (0, _get2["default"])((0, _getPrototypeOf2["default"])(NumberField.prototype), "restrictInput", this).call(this, value.replace(new RegExp("[^".concat(restrict, "]+"), 'g'), ''));
        var values = value.split('.');

        if (values.length > 2) {
          value = "".concat(values.shift(), ".").concat(values.join(''));
        }

        if (isNegative) {
          value = "-".concat(value);
        }
      }

      return value;
    }
  }, {
    key: "getFormatOptions",
    value: function getFormatOptions(value) {
      var precisionInValue = (0, _utils.getPrecision)((0, _isNil["default"])(value) ? this.getValue() || 0 : value);
      var formatterOptions = this.getProp('formatterOptions') || {};
      var numberFieldFormatterOptions = (0, _configure.getConfig)('numberFieldFormatterOptions') || {};
      var lang = formatterOptions.lang || numberFieldFormatterOptions.lang || this.lang;
      var options = (0, _objectSpread2["default"])({
        minimumFractionDigits: precisionInValue,
        maximumFractionDigits: precisionInValue
      }, numberFieldFormatterOptions.options, {}, formatterOptions.options);
      var precision = this.getProp('precision');
      var numberGrouping = this.getProp('numberGrouping');

      if ((0, _isNumber["default"])(precision)) {
        options.minimumFractionDigits = precision;
        options.maximumFractionDigits = precision;
      }

      if (numberGrouping === false) {
        options.useGrouping = false;
      }

      return {
        lang: lang,
        options: options
      };
    }
  }, {
    key: "getFormatter",
    value: function getFormatter() {
      var formatter = this.getProp('formatter');

      if (formatter !== undefined) {
        return formatter;
      }

      var numberFieldFormatter = (0, _configure.getConfig)('numberFieldFormatter');

      if (numberFieldFormatter !== undefined) {
        return numberFieldFormatter;
      }

      return _formatNumber["default"];
    }
  }, {
    key: "processText",
    value: function processText(value) {
      var formatOptions = this.getFormatOptions(Number(value));
      return this.getFormatter()(value, formatOptions.lang, formatOptions.options);
    }
  }, {
    key: "lang",
    get: function get() {
      var lang = this.observableProps.lang;

      if (lang) {
        return lang;
      }

      var dataSet = this.dataSet;

      if (dataSet && dataSet.lang) {
        return dataSet.lang;
      }

      var numberFormatLanguage = _LocaleContext["default"].numberFormatLanguage,
          locale = _LocaleContext["default"].locale;

      if (numberFormatLanguage) {
        return numberFormatLanguage;
      }

      return locale.lang;
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: (0, _localeContext.$l)('NumberField', label ? 'value_missing' : 'value_missing_no_label', {
          label: label
        })
      };
    }
  }, {
    key: "allowDecimal",
    get: function get() {
      var min = this.min,
          nonStrictStep = this.nonStrictStep; // 非严格步距下允许输入小数

      if (nonStrictStep) {
        return true;
      }

      var step = this.getProp('step');
      return !step || step % 1 !== 0 || !!min && min % 1 !== 0;
    }
  }, {
    key: "nonStrictStep",
    get: function get() {
      var nonStrictStep = this.getProp('nonStrictStep');

      if (nonStrictStep !== undefined) {
        return nonStrictStep;
      }

      var numberFieldNonStrictStep = (0, _configure.getConfig)('numberFieldNonStrictStep');

      if (numberFieldNonStrictStep !== undefined) {
        return numberFieldNonStrictStep;
      }

      return false;
    }
  }, {
    key: "allowNegative",
    get: function get() {
      var min = this.min;
      return (0, _isNil["default"])(min) || min < 0;
    }
  }, {
    key: "min",
    get: function get() {
      return this.getLimit('min');
    }
  }, {
    key: "max",
    get: function get() {
      return this.getLimit('max');
    }
  }, {
    key: "value",
    get: function get() {
      var value = this.observableProps.value;

      if ((0, _mobx.isArrayLike)(value)) {
        return value;
      }

      var range = this.range;

      if ((0, _mobx.isArrayLike)(range)) {
        if ((0, _isPlainObject["default"])(value)) {
          var _ref;

          var _range = (0, _slicedToArray2["default"])(range, 2),
              start = _range[0],
              end = _range[1];

          return _ref = {}, (0, _defineProperty2["default"])(_ref, start, value[start]), (0, _defineProperty2["default"])(_ref, end, value[end]), _ref;
        }
      }

      return value;
    },
    set: function set(value) {
      var _this = this;

      (0, _mobx.runInAction)(function () {
        _this.observableProps.value = value;
      });
    }
  }]);
  return NumberField;
}(_TextField2.TextField);

exports.NumberField = NumberField;
NumberField.displayName = 'NumberField';
NumberField.propTypes = (0, _objectSpread2["default"])({
  /**
   * 最小值
   */
  min: _propTypes["default"].number,

  /**
   * 最大值
   */
  max: _propTypes["default"].number,

  /**
   * 步距
   */
  step: _propTypes["default"].number,

  /**
   * 非严格步距
   */
  nonStrictStep: _propTypes["default"].bool,

  /**
   * 格式器
   */
  formatter: _propTypes["default"].func,

  /**
   * 格式器参数
   */
  longPressPlus: _propTypes["default"].bool,

  /**
   * 是否开启长按步距增加
   */
  formatterOptions: _propTypes["default"].object
}, _TextField2.TextField.propTypes);
NumberField.defaultProps = (0, _objectSpread2["default"])({}, _TextField2.TextField.defaultProps, {
  suffixCls: 'input-number',
  longPressPlus: true,
  max: _utils.MAX_SAFE_INTEGER,
  min: _utils.MIN_SAFE_INTEGER
});
NumberField.format = _formatNumber["default"];
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "lang", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "defaultValidationMessages", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "allowDecimal", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "nonStrictStep", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "allowNegative", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "min", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "max", null);
(0, _tslib.__decorate)([_mobx.computed], NumberField.prototype, "value", null);
(0, _tslib.__decorate)([_autobind["default"]], NumberField.prototype, "savePlusRef", null);
(0, _tslib.__decorate)([_autobind["default"]], NumberField.prototype, "saveMinusRef", null);
(0, _tslib.__decorate)([_mobx.action], NumberField.prototype, "handleEnterDown", null);
(0, _tslib.__decorate)([_autobind["default"]], NumberField.prototype, "handleKeyDown", null);
(0, _tslib.__decorate)([(0, _keepRunning["default"])(function () {
  return this.plusElement;
})], NumberField.prototype, "handlePlus", null);
(0, _tslib.__decorate)([(0, _keepRunning["default"])(function () {
  return this.minusElement;
})], NumberField.prototype, "handleMinus", null);
(0, _tslib.__decorate)([_autobind["default"]], NumberField.prototype, "handleOncePlus", null);
(0, _tslib.__decorate)([_autobind["default"]], NumberField.prototype, "handleOnceMinus", null);

var ObserverNumberField =
/*#__PURE__*/
function (_NumberField) {
  (0, _inherits2["default"])(ObserverNumberField, _NumberField);

  var _super2 = _createSuper(ObserverNumberField);

  function ObserverNumberField() {
    (0, _classCallCheck2["default"])(this, ObserverNumberField);
    return _super2.apply(this, arguments);
  }

  return ObserverNumberField;
}(NumberField);

ObserverNumberField.defaultProps = NumberField.defaultProps;
ObserverNumberField.format = _formatNumber["default"];
ObserverNumberField = (0, _tslib.__decorate)([_mobxReact.observer], ObserverNumberField);
var _default = ObserverNumberField;
exports["default"] = _default;
//# sourceMappingURL=NumberField.js.map