2021SC@SDUSC amis-低代码前端框架代码分析八

代码分析

inputnumber.js

class NumberControl extends react_1.default.Component {
      constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange(inputValue) {
          const { classPrefix: ns, onChange, resetValue } = this.props;
          if (inputValue && typeof inputValue !== 'number') {
              return;
          }
          onChange(inputValue === null ? resetValue !== null && resetValue !== void 0 ? resetValue : null : inputValue);
      }
      filterNum(value) {
          if (typeof value !== 'number') {
              value = (0, tpl_1.filter)(value, this.props.data);
              value = /^[-]?\d+/.test(value) ? +value : undefined;
          }
          return value;
      }
      render() {
          const { className, classPrefix: ns, value, step, precision, max, min, disabled, placeholder, showSteps, borderMode, suffix, prefix, kilobitSeparator, readOnly } = this.props;
          let precisionProps = {};
          const finalPrecision = this.filterNum(precision);
          if (typeof finalPrecision === 'number') {
              precisionProps.precision = finalPrecision;
          }
          // 数据格式化
          const formatter = (value) => {
              // 增加千分分隔
              if (kilobitSeparator && value) {
                  value = (value + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
              }
              return (prefix ? prefix : '')
                  + value
                  + (suffix ? suffix : '');
          };
          // 将数字还原
          const parser = (value) => {
              if (value) {
                  prefix && (value = value.replace(prefix, ''));
                  suffix && (value = value.replace(suffix, ''));
                  kilobitSeparator && (value = value.replace(/,/g, ''));
              }
              return value;
          };
          return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${ns}NumberControl`, className) },
              react_1.default.createElement(NumberInput_1.default, { value: value, step: step, max: this.filterNum(max), min: this.filterNum(min), formatter: formatter, parser: parser, onChange: this.handleChange, disabled: disabled, placeholder: placeholder, precision: finalPrecision, showSteps: showSteps, borderMode: borderMode, readOnly: readOnly })));
      }
  }
  exports.default = NumberControl;
  NumberControl.defaultProps = {
      step: 1,
      resetValue: ''
  };
  let NumberControlRenderer = class NumberControlRenderer extends NumberControl {
  };
  NumberControlRenderer.defaultProps = Object.assign({ validations: 'isNumeric' }, NumberControl.defaultProps);
  NumberControlRenderer = (0, tslib_1.__decorate)([
      (0, Item_1.FormItem)({
          type: 'input-number'
      })
  ], NumberControlRenderer);
  exports.NumberControlRenderer = NumberControlRenderer;

NumberControl类继承了react_1.default.Component（引用的已定义的类）
读取并确认数字，将数据格式化，添加千分分隔以方便查看，再将数字还原，并显示出来。

总结

将数字格式化后能加快数字处理，提高运行速度。