dtable-ui-component 6.0.24-beta1 → 6.0.25

package/lib/InputItem/index.js

@@ -0,0 +1,388 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
+var _getLocale = require("../_util/getLocale");
+var _customInput = _interopRequireDefault(require("./custom-input"));
+var _input = _interopRequireDefault(require("./input"));
+/* tslint:disable:jsx-no-multiline-js */
+
+function noop() {}
+function normalizeValue(value) {
+  if (typeof value === 'undefined' || value === null) {
+    return '';
+  }
+  return value + '';
+}
+class InputItem extends React.Component {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    this.onInputChange = e => {
+      const el = e.target;
+      const {
+        value: rawVal
+      } = el;
+      let prePos = 0;
+      try {
+        // some input type do not support selection, see https://html.spec.whatwg.org/multipage/input.html#do-not-apply
+        prePos = el.selectionEnd || 0;
+      } catch (error) {
+        console.warn('Get selection error:', error);
+      }
+      const {
+        value: preCtrlVal = ''
+      } = this.state;
+      const {
+        type
+      } = this.props;
+      let ctrlValue = rawVal;
+      switch (type) {
+        case 'bankCard':
+          ctrlValue = rawVal.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
+          break;
+        case 'phone':
+          ctrlValue = rawVal.replace(/\D/g, '').substring(0, 11);
+          const valueLen = ctrlValue.length;
+          if (valueLen > 3 && valueLen < 8) {
+            ctrlValue = "".concat(ctrlValue.substr(0, 3), " ").concat(ctrlValue.substr(3));
+          } else if (valueLen >= 8) {
+            ctrlValue = "".concat(ctrlValue.substr(0, 3), " ").concat(ctrlValue.substr(3, 4), " ").concat(ctrlValue.substr(7));
+          }
+          break;
+        case 'number':
+          ctrlValue = rawVal.replace(/\D/g, '');
+          break;
+        case 'text':
+        case 'password':
+        default:
+          break;
+      }
+      this.handleOnChange(ctrlValue, ctrlValue !== rawVal, () => {
+        switch (type) {
+          case 'bankCard':
+          case 'phone':
+          case 'number':
+            // controlled input type needs to adjust the position of the caret
+            try {
+              // some input type do not support selection, see https://html.spec.whatwg.org/multipage/input.html#do-not-apply
+              let pos = this.calcPos(prePos, preCtrlVal, rawVal, ctrlValue, [' '], /\D/g);
+              if (type === 'phone' && (pos === 4 || pos === 9) || type === 'bankCard' && pos > 0 && pos % 5 === 0) {
+                pos -= 1;
+              }
+              el.selectionStart = el.selectionEnd = pos;
+            } catch (error) {
+              console.warn('Set selection error:', error);
+            }
+            break;
+          default:
+            break;
+        }
+      });
+    };
+    this.handleOnChange = function (value) {
+      let isMutated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      let adjustPos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : noop;
+      const {
+        onChange
+      } = _this.props;
+      if (!('value' in _this.props)) {
+        _this.setState({
+          value
+        });
+      } else {
+        _this.setState({
+          value: _this.props.value
+        });
+      }
+      if (onChange) {
+        if (isMutated) {
+          setTimeout(() => {
+            onChange(value);
+            adjustPos();
+          });
+        } else {
+          onChange(value);
+          adjustPos();
+        }
+      } else {
+        adjustPos();
+      }
+    };
+    this.onInputFocus = value => {
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout);
+        this.debounceTimeout = null;
+      }
+      this.setState({
+        focus: true
+      });
+      if (this.props.onFocus) {
+        this.props.onFocus(value);
+      }
+    };
+    this.onInputBlur = value => {
+      if (this.inputRef) {
+        // this.inputRef may be null if customKeyboard unmount
+        this.debounceTimeout = window.setTimeout(() => {
+          if (document.activeElement !== (this.inputRef && this.inputRef.inputRef)) {
+            this.setState({
+              focus: false
+            });
+          }
+        }, 200);
+      }
+      if (this.props.onBlur) {
+        // fix autoFocus item blur with flash
+        setTimeout(() => {
+          // fix ios12 wechat browser click failure after input
+          if (document.body) {
+            // eslint-disable-next-line no-self-assign
+            document.body.scrollTop = document.body.scrollTop;
+          }
+        }, 100);
+        this.props.onBlur(value);
+      }
+    };
+    this.clearInput = () => {
+      if (this.props.type !== 'password' && this.props.updatePlaceholder) {
+        this.setState({
+          placeholder: this.props.value
+        });
+      }
+      this.setState({
+        value: ''
+      });
+      if (this.props.onChange) {
+        this.props.onChange('');
+      }
+      this.focus();
+    };
+    // this is instance method for user to use
+    this.focus = () => {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+    };
+    // calculate the position of the caret
+    this.calcPos = (prePos, preCtrlVal, rawVal, ctrlVal, placeholderChars, maskReg) => {
+      const editLength = rawVal.length - preCtrlVal.length;
+      const isAddition = editLength > 0;
+      let pos = prePos;
+      if (isAddition) {
+        const additionStr = rawVal.substr(pos - editLength, editLength);
+        let ctrlCharCount = additionStr.replace(maskReg, '').length;
+        pos -= editLength - ctrlCharCount;
+        let placeholderCharCount = 0;
+        while (ctrlCharCount > 0) {
+          if (placeholderChars.indexOf(ctrlVal.charAt(pos - ctrlCharCount + placeholderCharCount)) === -1) {
+            ctrlCharCount--;
+          } else {
+            placeholderCharCount++;
+          }
+        }
+        pos += placeholderCharCount;
+      }
+      return pos;
+    };
+    this.state = {
+      placeholder: props.placeholder,
+      value: normalizeValue(props.value || props.defaultValue)
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if ('placeholder' in nextProps && !nextProps.updatePlaceholder) {
+      this.setState({
+        placeholder: nextProps.placeholder
+      });
+    }
+    if ('value' in nextProps) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.debounceTimeout) {
+      window.clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = null;
+    }
+  }
+  render() {
+    const props = {
+      ...this.props
+    };
+    delete props.updatePlaceholder;
+    const {
+      prefixCls,
+      prefixListCls,
+      editable,
+      style,
+      clear,
+      children,
+      error,
+      className,
+      extra,
+      labelNumber,
+      type,
+      onExtraClick,
+      onErrorClick,
+      moneyKeyboardAlign,
+      moneyKeyboardWrapProps,
+      moneyKeyboardHeader,
+      onVirtualKeyboardConfirm,
+      autoAdjustHeight,
+      disabledKeys,
+      ...restProps
+    } = props;
+    const {
+      name,
+      disabled,
+      maxLength
+    } = restProps;
+    const {
+      value
+    } = this.state;
+
+    // tslint:disable-next-line:variable-name
+    const _locale = (0, _getLocale.getComponentLocale)(this.props, this.context, 'InputItem', () => require('./locale/zh_CN'));
+    const {
+      confirmLabel,
+      backspaceLabel,
+      cancelKeyboardLabel
+    } = _locale;
+    const {
+      focus,
+      placeholder
+    } = this.state;
+    const wrapCls = (0, _classnames.default)("".concat(prefixListCls, "-item"), "".concat(prefixCls, "-item"), "".concat(prefixListCls, "-item-middle"), className, {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-error")]: error,
+      ["".concat(prefixCls, "-focus")]: focus,
+      ["".concat(prefixCls, "-android")]: focus
+    });
+    const labelCls = (0, _classnames.default)("".concat(prefixCls, "-label"), {
+      ["".concat(prefixCls, "-label-2")]: labelNumber === 2,
+      ["".concat(prefixCls, "-label-3")]: labelNumber === 3,
+      ["".concat(prefixCls, "-label-4")]: labelNumber === 4,
+      ["".concat(prefixCls, "-label-5")]: labelNumber === 5,
+      ["".concat(prefixCls, "-label-6")]: labelNumber === 6,
+      ["".concat(prefixCls, "-label-7")]: labelNumber === 7
+    });
+    const controlCls = "".concat(prefixCls, "-control");
+    let inputType = 'text';
+    if (type === 'bankCard' || type === 'phone') {
+      inputType = 'tel';
+    } else if (type === 'password') {
+      inputType = 'password';
+    } else if (type === 'digit') {
+      inputType = 'number';
+    } else if (type !== 'text' && type !== 'number') {
+      inputType = type;
+    }
+    let patternProps;
+    if (type === 'number') {
+      patternProps = {
+        pattern: '[0-9]*'
+      };
+    }
+    let classNameProps;
+    if (type === 'digit') {
+      classNameProps = {
+        className: 'h5numInput' // the name is bad! todos rename.
+      };
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: wrapCls
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixListCls, "-line")
+    }, children ? /*#__PURE__*/React.createElement("div", {
+      className: labelCls
+    }, children) : null, /*#__PURE__*/React.createElement("div", {
+      className: controlCls
+    }, type === 'money' ? /*#__PURE__*/React.createElement(_customInput.default, {
+      value: normalizeValue(value),
+      type: type,
+      ref: el => this.inputRef = el,
+      maxLength: maxLength,
+      placeholder: placeholder,
+      onChange: this.onInputChange,
+      onFocus: this.onInputFocus,
+      onBlur: this.onInputBlur,
+      onVirtualKeyboardConfirm: onVirtualKeyboardConfirm,
+      disabled: disabled,
+      editable: editable,
+      prefixCls: prefixCls,
+      style: style,
+      confirmLabel: confirmLabel,
+      backspaceLabel: backspaceLabel,
+      cancelKeyboardLabel: cancelKeyboardLabel,
+      moneyKeyboardAlign: moneyKeyboardAlign,
+      moneyKeyboardWrapProps: moneyKeyboardWrapProps,
+      moneyKeyboardHeader: moneyKeyboardHeader,
+      autoAdjustHeight: autoAdjustHeight,
+      disabledKeys: disabledKeys
+    }) : /*#__PURE__*/React.createElement(_input.default, Object.assign({}, patternProps, restProps, classNameProps, {
+      value: normalizeValue(value),
+      defaultValue: undefined,
+      ref: el => this.inputRef = el,
+      style: style,
+      type: inputType,
+      maxLength: maxLength,
+      name: name,
+      placeholder: placeholder,
+      onChange: this.onInputChange,
+      onFocus: this.onInputFocus,
+      onBlur: this.onInputBlur,
+      readOnly: !editable,
+      disabled: disabled
+    }))), clear && editable && !disabled && value && "".concat(value).length > 0 ? /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+      activeClassName: "".concat(prefixCls, "-clear-active")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-clear"),
+      onClick: this.clearInput
+    })) : null, error ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-error-extra"),
+      onClick: onErrorClick
+    }) : null, extra !== '' ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-extra"),
+      onClick: onExtraClick
+    }, extra) : null));
+  }
+}
+InputItem.defaultProps = {
+  prefixCls: 'am-input',
+  prefixListCls: 'am-list',
+  type: 'text',
+  editable: true,
+  disabled: false,
+  placeholder: '',
+  clear: false,
+  onChange: noop,
+  onBlur: noop,
+  onFocus: noop,
+  extra: '',
+  onExtraClick: noop,
+  error: false,
+  onErrorClick: noop,
+  onVirtualKeyboardConfirm: noop,
+  labelNumber: 5,
+  updatePlaceholder: false,
+  moneyKeyboardAlign: 'right',
+  moneyKeyboardWrapProps: {},
+  moneyKeyboardHeader: null,
+  disabledKeys: null
+};
+InputItem.contextTypes = {
+  antLocale: PropTypes.object
+};
+var _default = exports.default = InputItem;

package/lib/InputItem/input.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+require("./style/index.css");
+class Input extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.onInputBlur = e => {
+      const value = e.target.value;
+      if (this.props.onBlur) {
+        this.props.onBlur(value);
+      }
+    };
+    this.onInputFocus = e => {
+      // here should have a value definition but none.
+      const value = e.target.value;
+      if (this.props.onFocus) {
+        this.props.onFocus(value);
+      }
+    };
+    this.focus = () => {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+    };
+  }
+  render() {
+    const {
+      onBlur,
+      onFocus,
+      ...restProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement("input", Object.assign({
+      ref: el => this.inputRef = el,
+      onBlur: this.onInputBlur,
+      onFocus: this.onInputFocus
+    }, restProps));
+  }
+}
+var _default = exports.default = Input;

package/lib/InputItem/locale/en_US.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {
+  confirmLabel: 'Done',
+  backspaceLabel: 'Backspace',
+  cancelKeyboardLabel: 'CancelKeyboard'
+};

package/lib/InputItem/locale/ru_RU.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {
+  confirmLabel: 'Ок',
+  backspaceLabel: 'возврат на одну позицию',
+  cancelKeyboardLabel: 'Отменить клавиатуру'
+};

package/lib/InputItem/locale/sv_SE.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {
+  confirmLabel: 'Ok',
+  backspaceLabel: 'Backspace',
+  cancelKeyboardLabel: 'CancelKeyboard'
+};

package/lib/InputItem/locale/zh_CN.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {
+  confirmLabel: '确定',
+  backspaceLabel: '退格',
+  cancelKeyboardLabel: '收起键盘'
+};

package/lib/InputItem/portal.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+const createPortal = ReactDOM.createPortal;
+class Portal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.container = this.props.getContainer();
+  }
+  render() {
+    if (this.props.children) {
+      return createPortal(this.props.children, this.container);
+    }
+    return null;
+  }
+}
+exports.default = Portal;