dtable-ui-component 6.0.24 → 6.0.25

package/lib/InputItem/custom-input.js

@@ -0,0 +1,321 @@
+"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 React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _class = require("../_util/class");
+var _exenv = require("../_util/exenv");
+var _customKeyboard = _interopRequireDefault(require("./custom-keyboard"));
+var _portal = _interopRequireDefault(require("./portal"));
+let customNumberKeyboard = null;
+const IS_REACT_16 = !!ReactDOM.createPortal;
+function getBodyScrollTop() {
+  const el = document.scrollingElement || document.documentElement;
+  return el && el.scrollTop || 0;
+}
+function setBodyScrollTop(scrollTop) {
+  const el = document.scrollingElement || document.documentElement;
+  el.scrollTop = scrollTop;
+}
+class NumberInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = value => {
+      if (!('value' in this.props)) {
+        this.setState({
+          value: value.target.value
+        });
+      }
+      this.props.onChange(value);
+    };
+    this.onConfirm = value => {
+      this.props.onVirtualKeyboardConfirm(value);
+    };
+    this.addBlurListener = () => {
+      document.addEventListener('touchend', this.doBlur, false);
+    };
+    this.removeBlurListener = () => {
+      document.removeEventListener('touchend', this.doBlur, false);
+    };
+    this.saveRef = el => {
+      if (IS_REACT_16 && el) {
+        customNumberKeyboard = el;
+      }
+    };
+    this.doBlur = ev => {
+      const {
+        value
+      } = this.state;
+      if (ev.target !== this.inputRef) {
+        this.onInputBlur(value);
+      }
+    };
+    this.unLinkInput = () => {
+      if (customNumberKeyboard && customNumberKeyboard.antmKeyboard && customNumberKeyboard.linkedInput && customNumberKeyboard.linkedInput === this) {
+        customNumberKeyboard.linkedInput = null;
+        if (this.props.autoAdjustHeight) {
+          this.getContainer().style.height = '0';
+        }
+        (0, _class.addClass)(customNumberKeyboard.antmKeyboard, "".concat(this.props.keyboardPrefixCls, "-wrapper-hide"));
+      }
+      // for unmount
+      this.removeBlurListener();
+    };
+    this.onInputBlur = value => {
+      if (IS_REACT_16) {
+        this.keyBoard = null;
+      }
+      const {
+        focus
+      } = this.state;
+      if (focus) {
+        this.setState({
+          focus: false
+        });
+        this.props.onBlur(value);
+        setTimeout(() => {
+          this.unLinkInput();
+        }, 50);
+      }
+    };
+    this.onInputFocus = () => {
+      const {
+        value
+      } = this.state;
+      this.props.onFocus(value);
+      this.setState({
+        focus: true
+      }, () => {
+        if (customNumberKeyboard) {
+          customNumberKeyboard.linkedInput = this;
+          if (customNumberKeyboard.antmKeyboard) {
+            if (this.props.autoAdjustHeight) {
+              const keyBoardHeight = customNumberKeyboard.antmKeyboard.offsetHeight;
+              this.getContainer().style.height = "".concat(keyBoardHeight, "px");
+              if (this.inputRef) {
+                const {
+                  bottom
+                } = this.inputRef.getBoundingClientRect();
+                const clientHeight = window.innerHeight;
+                // 计算输入框距离视窗的底部距离
+                const distance = clientHeight - bottom;
+                if (distance < keyBoardHeight) {
+                  setBodyScrollTop(getBodyScrollTop() + keyBoardHeight - distance);
+                }
+              }
+            }
+            (0, _class.removeClass)(customNumberKeyboard.antmKeyboard, "".concat(this.props.keyboardPrefixCls, "-wrapper-hide"));
+          }
+          customNumberKeyboard.confirmDisabled = value === '';
+          if (customNumberKeyboard.confirmKeyboardItem) {
+            if (value === '') {
+              (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+            } else {
+              (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+            }
+          }
+        }
+      });
+    };
+    this.onKeyboardClick = KeyboardItemValue => {
+      const {
+        maxLength
+      } = this.props;
+      const {
+        value
+      } = this.state;
+      // tslint:disable-next-line:no-this-assignment
+      const {
+        onChange
+      } = this;
+      let valueAfterChange;
+      // 删除键
+      if (KeyboardItemValue === 'delete') {
+        valueAfterChange = value.substring(0, value.length - 1);
+        onChange({
+          target: {
+            value: valueAfterChange
+          }
+        });
+        // 确认键
+      } else if (KeyboardItemValue === 'confirm') {
+        valueAfterChange = value;
+        onChange({
+          target: {
+            value: valueAfterChange
+          }
+        });
+        this.onInputBlur(value);
+        this.onConfirm(value);
+        // 收起键
+      } else if (KeyboardItemValue === 'hide') {
+        valueAfterChange = value;
+        this.onInputBlur(valueAfterChange);
+      } else {
+        if (maxLength !== undefined && +maxLength >= 0 && (value + KeyboardItemValue).length > maxLength) {
+          valueAfterChange = (value + KeyboardItemValue).substr(0, maxLength);
+          onChange({
+            target: {
+              value: valueAfterChange
+            }
+          });
+        } else {
+          valueAfterChange = value + KeyboardItemValue;
+          onChange({
+            target: {
+              value: valueAfterChange
+            }
+          });
+        }
+      }
+      if (customNumberKeyboard) {
+        customNumberKeyboard.confirmDisabled = valueAfterChange === '';
+        if (customNumberKeyboard.confirmKeyboardItem) {
+          if (valueAfterChange === '') {
+            (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+          } else {
+            (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+          }
+        }
+      }
+    };
+    this.onFakeInputClick = () => {
+      this.focus();
+    };
+    this.focus = () => {
+      // this focus may invocked by users page button click, so this click may trigger blurEventListener at the same time
+      this.renderCustomKeyboard();
+      this.removeBlurListener();
+      const {
+        focus
+      } = this.state;
+      if (!focus) {
+        this.onInputFocus();
+      }
+      setTimeout(() => {
+        this.addBlurListener();
+      }, 50);
+    };
+    this.state = {
+      focus: false,
+      value: props.value || ''
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    // focus:true unmount 不能触发 blur
+    if (this.state.focus) {
+      this.props.onBlur(this.state.value);
+    }
+    this.unLinkInput();
+  }
+  getComponent() {
+    const {
+      confirmLabel,
+      backspaceLabel,
+      cancelKeyboardLabel,
+      keyboardPrefixCls,
+      moneyKeyboardWrapProps,
+      moneyKeyboardHeader,
+      disabledKeys
+    } = this.props;
+    return /*#__PURE__*/React.createElement(_customKeyboard.default, {
+      ref: this.saveRef,
+      onClick: this.onKeyboardClick,
+      prefixCls: keyboardPrefixCls,
+      confirmLabel: confirmLabel,
+      backspaceLabel: backspaceLabel,
+      cancelKeyboardLabel: cancelKeyboardLabel,
+      wrapProps: moneyKeyboardWrapProps,
+      header: moneyKeyboardHeader,
+      disabledKeys: disabledKeys
+    });
+  }
+  getContainer() {
+    const {
+      keyboardPrefixCls
+    } = this.props;
+    let container = document.querySelector("#".concat(keyboardPrefixCls, "-container"));
+    if (!container) {
+      container = document.createElement('div');
+      container.setAttribute('id', "".concat(keyboardPrefixCls, "-container"));
+      document.body.appendChild(container);
+    }
+    this.container = container;
+    return this.container;
+  }
+  renderCustomKeyboard() {
+    if (IS_REACT_16) {
+      this.keyBoard = /*#__PURE__*/React.createElement(_portal.default, {
+        getContainer: () => this.getContainer()
+      }, this.getComponent());
+    } else {
+      customNumberKeyboard = ReactDOM.unstable_renderSubtreeIntoContainer(this, this.getComponent(), this.getContainer());
+    }
+  }
+  renderPortal() {
+    if (!IS_REACT_16 || !_exenv.canUseDOM) {
+      return null;
+    }
+    return this.keyBoard;
+  }
+  render() {
+    const {
+      placeholder,
+      disabled,
+      editable,
+      moneyKeyboardAlign
+    } = this.props;
+    const {
+      focus,
+      value
+    } = this.state;
+    const preventKeyboard = disabled || !editable;
+    const fakeInputCls = (0, _classnames.default)('fake-input', {
+      focus,
+      'fake-input-disabled': disabled
+    });
+    const fakeInputContainerCls = (0, _classnames.default)('fake-input-container', {
+      'fake-input-container-left': moneyKeyboardAlign === 'left'
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: fakeInputContainerCls
+    }, value === '' &&
+    /*#__PURE__*/
+    // tslint:disable-next-line:jsx-no-multiline-js
+    React.createElement("div", {
+      className: "fake-input-placeholder"
+    }, placeholder), /*#__PURE__*/React.createElement("div", {
+      role: "textbox",
+      "aria-label": value || placeholder,
+      className: fakeInputCls,
+      ref: el => this.inputRef = el,
+      onClick: preventKeyboard ? () => {} : this.onFakeInputClick
+    }, value), this.renderPortal());
+  }
+}
+NumberInput.defaultProps = {
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  onVirtualKeyboardConfirm: () => {},
+  placeholder: '',
+  disabled: false,
+  editable: true,
+  prefixCls: 'am-input',
+  keyboardPrefixCls: 'am-number-keyboard',
+  autoAdjustHeight: false
+};
+var _default = exports.default = NumberInput;

package/lib/InputItem/custom-keyboard.js

@@ -0,0 +1,162 @@
+"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 = exports.KeyboardItem = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
+var _exenv = require("../_util/exenv");
+/**
+ * determines whether an array includes a certain value among its entries, returning true or false as appropriate.
+ * @param {array} arr The array to search in
+ * @param {any} item  The value to search for
+ */
+function includes(arr, item) {
+  if (!arr || !arr.length || !item) {
+    return false;
+  }
+  for (let i = 0, len = arr.length; i < len; i++) {
+    if (arr[i] === item) {
+      return true;
+    }
+  }
+  return false;
+}
+class KeyboardItem extends React.Component {
+  render() {
+    const {
+      prefixCls,
+      onClick,
+      className,
+      disabled,
+      children,
+      tdRef,
+      label,
+      iconOnly,
+      ...restProps
+    } = this.props;
+    let value = children;
+    if (className === 'keyboard-delete') {
+      value = 'delete';
+    } else if (className === 'keyboard-hide') {
+      value = 'hide';
+    } else if (className === 'keyboard-confirm') {
+      value = 'confirm';
+    }
+    const extraCls = {
+      ["".concat(prefixCls, "-item-disabled")]: disabled
+    };
+    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-item"), className, extraCls);
+    return /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+      disabled: disabled,
+      activeClassName: "".concat(prefixCls, "-item-active")
+    }, /*#__PURE__*/React.createElement("td", Object.assign({
+      ref: tdRef
+      // tslint:disable-next-line:jsx-no-multiline-js
+      ,
+      onTouchEnd: e => {
+        onClick(e, value);
+      },
+      className: wrapCls
+    }, restProps), children, iconOnly && /*#__PURE__*/React.createElement("i", {
+      className: "sr-only"
+    }, label)));
+  }
+}
+exports.KeyboardItem = KeyboardItem;
+KeyboardItem.defaultProps = {
+  prefixCls: 'am-number-keyboard',
+  onClick: () => {},
+  disabled: false
+};
+class CustomKeyboard extends React.Component {
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
+    this.onKeyboardClick = function (e) {
+      let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      e.nativeEvent.stopImmediatePropagation();
+      if (_this.props.disabledKeys && includes(_this.props.disabledKeys, value)) {
+        return null;
+      }
+      if (value === 'confirm' && _this.confirmDisabled) {
+        return null;
+      } else {
+        if (_this.linkedInput) {
+          _this.linkedInput.onKeyboardClick(value);
+        }
+      }
+    };
+    this.renderKeyboardItem = (item, index) => {
+      let disabled = false;
+      if (this.props.disabledKeys && includes(this.props.disabledKeys, item)) {
+        disabled = true;
+      }
+      return /*#__PURE__*/React.createElement(KeyboardItem, {
+        onClick: this.onKeyboardClick,
+        key: "item-".concat(item, "-").concat(index),
+        disabled: disabled
+      }, item);
+    };
+  }
+  render() {
+    const {
+      prefixCls,
+      confirmLabel,
+      backspaceLabel,
+      cancelKeyboardLabel,
+      wrapProps,
+      header
+    } = this.props;
+    const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), "".concat(prefixCls, "-wrapper-hide"));
+    return /*#__PURE__*/React.createElement("div", Object.assign({
+      className: wrapperCls,
+      ref: el => this.antmKeyboard = el
+    }, wrapProps), header && /*#__PURE__*/React.cloneElement(header, {
+      onClick: this.onKeyboardClick
+    }), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, ['1', '2', '3'].map((item, index) =>
+    // tslint:disable-next-line:jsx-no-multiline-js
+    this.renderKeyboardItem(item, index)), /*#__PURE__*/React.createElement(KeyboardItem, Object.assign({
+      className: "keyboard-delete",
+      rowSpan: 2,
+      onClick: this.onKeyboardClick
+    }, this.getAriaAttr(backspaceLabel)))), /*#__PURE__*/React.createElement("tr", null, ['4', '5', '6'].map((item, index) =>
+    // tslint:disable-next-line:jsx-no-multiline-js
+    this.renderKeyboardItem(item, index))), /*#__PURE__*/React.createElement("tr", null, ['7', '8', '9'].map((item, index) =>
+    // tslint:disable-next-line:jsx-no-multiline-js
+    this.renderKeyboardItem(item, index)), /*#__PURE__*/React.createElement(KeyboardItem, {
+      className: "keyboard-confirm",
+      rowSpan: 2,
+      onClick: this.onKeyboardClick,
+      tdRef: el => this.confirmKeyboardItem = el
+    }, confirmLabel)), /*#__PURE__*/React.createElement("tr", null, ['.', '0'].map((item, index) =>
+    // tslint:disable-next-line:jsx-no-multiline-js
+    this.renderKeyboardItem(item, index)), /*#__PURE__*/React.createElement(KeyboardItem, Object.assign({
+      className: "keyboard-hide",
+      onClick: this.onKeyboardClick
+    }, this.getAriaAttr(cancelKeyboardLabel)))))));
+  }
+  getAriaAttr(label) {
+    if (_exenv.IS_IOS) {
+      return {
+        label,
+        iconOnly: true
+      };
+    } else {
+      return {
+        role: 'button',
+        'aria-label': label
+      };
+    }
+  }
+}
+CustomKeyboard.defaultProps = {
+  prefixCls: 'am-number-keyboard',
+  disabledKeys: null
+};
+var _default = exports.default = CustomKeyboard;