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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { isValidElement } from 'react';
import PropTypes from 'prop-types';
import { action, computed, isArrayLike, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import isString from 'lodash/isString';
import omit from 'lodash/omit';
import isPlainObject from 'lodash/isPlainObject';
import defaultTo from 'lodash/defaultTo';
import isNil from 'lodash/isNil';
import KeyCode from '../../../es/_util/KeyCode';
import { getConfig } from '../../../es/configure';
import { TextField } from '../text-field/TextField';
import autobind from '../_util/autobind';
import keepRunning from '../_util/keepRunning';
import Icon from '../icon';
import { getNearStepValues, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, parseNumber, plus } from './utils';
import isEmpty from '../_util/isEmpty';
import { $l } from '../locale-context';
import { FieldType } from '../data-set/enum';
import defaultFormatNumber from '../formatter/formatNumber';
import localeContext from '../locale-context/LocaleContext';
import { getNumberFormatOptions, getNumberFormatter } from '../field/utils';

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

export var NumberField =
/*#__PURE__*/
function (_TextField) {
  _inherits(NumberField, _TextField);

  var _super = _createSuper(NumberField);

  function NumberField() {
    _classCallCheck(this, NumberField);

    return _super.apply(this, arguments);
  }

  _createClass(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 FieldType.number;
    }
  }, {
    key: "getLimit",
    value: function getLimit(type) {
      var record = this.record;
      var limit = this.getProp(type);

      if (record && isString(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 omit(_objectSpread({}, _get(_getPrototypeOf(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.readOnly && !this.disabled) {
        var plusIconProps = {
          ref: this.savePlusRef,
          key: 'plus',
          className: "".concat(prefixCls, "-plus"),
          onMouseDown: longPressPlus ? this.handlePlus : this.handleOncePlus,
          onTouchStart: this.handleOncePlus
        };
        var minIconProps = {
          ref: this.saveMinusRef,
          key: 'minus',
          className: "".concat(prefixCls, "-minus"),
          onMouseDown: longPressPlus ? this.handleMinus : this.handleOnceMinus,
          onTouchStart: this.handleOnceMinus
        };
        return this.wrapperInnerSpanButton(React.createElement("div", null, React.createElement("div", _extends({}, plusIconProps), React.createElement(Icon, {
          type: "keyboard_arrow_up"
        })), React.createElement("div", _extends({}, minIconProps), React.createElement(Icon, {
          type: "keyboard_arrow_down"
        }))));
      }
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var prefixCls = this.prefixCls;
      var suffix = this.getSuffix();
      var button = this.getInnerSpanButton();

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return _get(_getPrototypeOf(NumberField.prototype), "getWrapperClassNames", this).call(this, _objectSpread(_defineProperty({}, "".concat(prefixCls, "-step-suffix"), button && isValidElement(suffix)), args));
    }
  }, {
    key: "handleEnterDown",
    value: function handleEnterDown(e) {
      if (this.multiple && this.range && this.text) {
        this.prepareSetValue(this.text);
      }

      _get(_getPrototypeOf(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.disabled && !this.readOnly) {
        switch (e.keyCode) {
          case KeyCode.UP:
            this.handleKeyDownUp(e);
            break;

          case KeyCode.DOWN:
            this.handleKeyDownDown(e);
            break;

          default:
        }
      }

      _get(_getPrototypeOf(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: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(NumberField.prototype), "getOmitPropsKeys", this).call(this).concat(['nonStrictStep', 'formatter', 'formatterOptions', 'longPressPlus', 'precision', 'numberGrouping', 'maxLength']);
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return _objectSpread({}, _get(_getPrototypeOf(NumberField.prototype), "getObservableProps", this).call(this, props, context), {
        max: props.max,
        min: props.min,
        precision: props.precision,
        nonStrictStep: props.nonStrictStep
      });
    }
  }, {
    key: "step",
    value: function step(isPlus, isKeeping) {
      var min = defaultTo(this.min, -MAX_SAFE_INTEGER);
      var max = defaultTo(this.max, MAX_SAFE_INTEGER);
      var step = defaultTo(this.getProp('step'), 1);
      var nonStrictStep = this.nonStrictStep; // 需要处理非严格模式

      var newValue;
      var value = this.multiple || this.isFocused ? Number(this.text || this.getValue()) : this.getValue();
      var currentValue = getCurrentValidValue(String(value));
      newValue = currentValue;
      var nearStep = 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 = plus(currentValue, isPlus ? step : -step);

        if (nextValue < min) {
          newValue = min;
        } else if (nextValue > max) {
          var nearMaxStep = 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) {
      _get(_getPrototypeOf(NumberField.prototype), "prepareSetValue", this).call(this, isNaN(value) || isEmpty(value) ? null : parseNumber(value, this.getProp('precision')));
    }
  }, {
    key: "restrictInput",
    value: function restrictInput(value) {
      if (value) {
        var restrict = '0-9';

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

        var isNegative = this.allowNegative && /^-/.test(value);
        value = _get(_getPrototypeOf(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 _this = this;

      return getNumberFormatOptions(function (name) {
        return _this.getProp(name);
      }, function () {
        return _this.getValue();
      }, value, this.lang);
    }
  }, {
    key: "getFormatter",
    value: function getFormatter() {
      return this.getProp('formatter') || getNumberFormatter();
    }
  }, {
    key: "processText",
    value: function processText(value) {
      var formatOptions = this.getFormatOptions(Number(value));
      return this.getFormatter()(value, formatOptions.lang, formatOptions.options);
    }
  }, {
    key: "renderLengthInfo",
    value: function renderLengthInfo() {
      return undefined;
    }
  }, {
    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.numberFormatLanguage,
          locale = localeContext.locale;

      if (numberFormatLanguage) {
        return numberFormatLanguage;
      }

      return locale.lang;
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: $l('NumberField', label ? 'value_missing' : 'value_missing_no_label', {
          label: label
        })
      };
    }
  }, {
    key: "allowDecimal",
    get: function get() {
      var min = this.min,
          nonStrictStep = this.nonStrictStep;
      var precision = this.getProp('precision');

      if (precision === 0) {
        return false;
      } // 非严格步距下允许输入小数


      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 = getConfig('numberFieldNonStrictStep');

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

      return false;
    }
  }, {
    key: "allowNegative",
    get: function get() {
      var min = this.min;
      return isNil(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 (isArrayLike(value)) {
        return value;
      }

      var range = this.range;

      if (isArrayLike(range)) {
        if (isPlainObject(value)) {
          var _ref;

          var _range = _slicedToArray(range, 2),
              start = _range[0],
              end = _range[1];

          return _ref = {}, _defineProperty(_ref, start, value[start]), _defineProperty(_ref, end, value[end]), _ref;
        }
      }

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

      runInAction(function () {
        _this2.observableProps.value = value;
      });
    }
  }]);

  return NumberField;
}(TextField);
NumberField.displayName = 'NumberField';
NumberField.propTypes = _objectSpread({
  /**
   * 最小值
   */
  min: PropTypes.number,

  /**
   * 最大值
   */
  max: PropTypes.number,

  /**
   * 步距
   */
  step: PropTypes.number,

  /**
   * 非严格步距
   */
  nonStrictStep: PropTypes.bool,

  /**
   * 格式器
   */
  formatter: PropTypes.func,

  /**
   * 格式器参数
   */
  longPressPlus: PropTypes.bool,

  /**
   * 是否开启长按步距增加
   */
  formatterOptions: PropTypes.object
}, TextField.propTypes);
NumberField.defaultProps = _objectSpread({}, TextField.defaultProps, {
  suffixCls: 'input-number',
  longPressPlus: true,
  max: MAX_SAFE_INTEGER,
  min: MIN_SAFE_INTEGER
});
NumberField.format = defaultFormatNumber;

__decorate([computed], NumberField.prototype, "lang", null);

__decorate([computed], NumberField.prototype, "allowDecimal", null);

__decorate([computed], NumberField.prototype, "nonStrictStep", null);

__decorate([computed], NumberField.prototype, "allowNegative", null);

__decorate([computed], NumberField.prototype, "min", null);

__decorate([computed], NumberField.prototype, "max", null);

__decorate([computed], NumberField.prototype, "value", null);

__decorate([autobind], NumberField.prototype, "savePlusRef", null);

__decorate([autobind], NumberField.prototype, "saveMinusRef", null);

__decorate([action], NumberField.prototype, "handleEnterDown", null);

__decorate([autobind], NumberField.prototype, "handleKeyDown", null);

__decorate([keepRunning(function () {
  return this.plusElement;
})], NumberField.prototype, "handlePlus", null);

__decorate([keepRunning(function () {
  return this.minusElement;
})], NumberField.prototype, "handleMinus", null);

__decorate([autobind], NumberField.prototype, "handleOncePlus", null);

__decorate([autobind], NumberField.prototype, "handleOnceMinus", null);

var ObserverNumberField =
/*#__PURE__*/
function (_NumberField) {
  _inherits(ObserverNumberField, _NumberField);

  var _super2 = _createSuper(ObserverNumberField);

  function ObserverNumberField() {
    _classCallCheck(this, ObserverNumberField);

    return _super2.apply(this, arguments);
  }

  return ObserverNumberField;
}(NumberField);

ObserverNumberField.defaultProps = NumberField.defaultProps;
ObserverNumberField.format = defaultFormatNumber;
ObserverNumberField = __decorate([observer], ObserverNumberField);
export default ObserverNumberField;
//# sourceMappingURL=NumberField.js.map