dtable-ui-component 6.0.29-beta9 → 6.0.29

package/lib/ImageEditor/index.js

@@ -1,35 +1,194 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _pcEditor = _interopRequireDefault(require("./pc-editor"));
-var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _imagesPreviewer = _interopRequireDefault(require("./images-previewer"));
+var _additionPreviewer = _interopRequireDefault(require("./addition-previewer"));
+var _constants = require("../constants");
+var _DTableModalHeader = _interopRequireDefault(require("../DTableModalHeader"));
+var _lang = require("../lang");
+var _constants2 = require("./constants");
 require("./index.css");
-const ImageEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    isMobile,
-    ...props
-  } = _ref;
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
-});
+class ImageEditor extends _react.default.Component {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    this.getValue = () => {
+      return this.state.value;
+    };
+    this.getEditorView = () => {
+      const {
+        isInModal,
+        value
+      } = this.props;
+      return !value || value.length === 0 || isInModal ? _constants.FILE_EDITOR_STATUS.ADDITION : _constants.FILE_EDITOR_STATUS.PREVIEWER;
+    };
+    this.deleteImage = function (index) {
+      let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      let uploadLocalImageValue = _this.state.uploadLocalImageValue.slice(0);
+      let value = _this.state.value.slice(0);
+      if (_this.state.editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER) {
+        value.splice(index, 1);
+      } else {
+        if (type === 'localPicture') {
+          uploadLocalImageValue.splice(index, 1);
+        }
+      }
+      _this.setState({
+        uploadLocalImageValue: uploadLocalImageValue,
+        isUpdated: true,
+        value: value
+      });
+    };
+    this.resetAdditionImage = () => {
+      this.setState({
+        uploadLocalImageValue: [],
+        imageLinkValue: []
+      });
+    };
+    this.toggle = e => {
+      e.stopPropagation();
+      if (this.state.isOpen && this.state.isUpdated) {
+        if (this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION) {
+          let {
+            value,
+            uploadLocalImageValue
+          } = this.state;
+          let newValue = value.concat(uploadLocalImageValue);
+          this.setState({
+            value: newValue
+          }, () => {
+            this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onCommit();
+          });
+          return;
+        }
+        this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onCommit();
+      }
+      if (this.props.isInModal) {
+        this.props.onToggle();
+      }
+      const nextIsOpen = !this.state.isOpen;
+      this.setState({
+        isOpen: nextIsOpen
+      }, () => {
+        if (!nextIsOpen) {
+          this.props.onCommitCancel && this.props.onCommitCancel();
+        }
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isOpen: false
+      });
+    };
+    this.togglePreviewer = type => {
+      this.setState({
+        editorView: type
+      });
+    };
+    this.fileUploadCompleted = fileMessage => {
+      let uploadLocalImageValue = this.state.uploadLocalImageValue.slice(0);
+      const imageUrl = fileMessage.url;
+      uploadLocalImageValue.push(imageUrl);
+      this.setState({
+        uploadLocalImageValue: uploadLocalImageValue,
+        isUpdated: true
+      });
+    };
+    this.addUploadedFile = fileMessageList => {
+      let uploadLocalImageValue = this.state.uploadLocalImageValue.slice(0);
+      // eslint-disable-next-line no-unused-vars
+      for (let fileMessage of fileMessageList) {
+        uploadLocalImageValue.push(fileMessage.url);
+      }
+      this.setState({
+        uploadLocalImageValue: uploadLocalImageValue,
+        isUpdated: true
+      });
+    };
+    this.renderHeader = () => {
+      let {
+        editorView
+      } = this.state;
+      if (this.props.isInModal) {
+        return /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Add_images'));
+      }
+      if (editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER) {
+        return /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('All_images'));
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        onClick: this.showImageListPreviewer
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-return mr-2"
+      }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Add_images')));
+    };
+    this.showImageListPreviewer = () => {
+      let {
+        value,
+        uploadLocalImageValue,
+        imageLinkValue
+      } = this.state;
+      let newValue = value.concat(uploadLocalImageValue, imageLinkValue);
+      this.setState({
+        value: newValue
+      });
+      this.togglePreviewer(_constants.FILE_EDITOR_STATUS.PREVIEWER);
+    };
+    this.saveImageLink = imageUrl => {
+      this.setState({
+        imageLinkValue: imageUrl,
+        isUpdated: true
+      });
+      this.showImageListPreviewer();
+    };
+    this.uploadFile = (file, callback) => {
+      return this.props.uploadFile(file, _constants2.IMAGES_FOLDER, callback);
+    };
+    this.state = {
+      value: props.value || [],
+      editorView: this.getEditorView(),
+      isOpen: true,
+      isShowFileChooser: false,
+      uploadLocalImageValue: [],
+      imageLinkValue: [],
+      isUpdated: false
+    };
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      className: "dtable-ui-image-editor-dialog",
+      contentClassName: "dtable-ui-image-editor-modal",
+      isOpen: this.state.isOpen,
+      toggle: this.toggle
+    }, /*#__PURE__*/_react.default.createElement(_DTableModalHeader.default, {
+      toggle: this.toggle
+    }, this.renderHeader()), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "p-0"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-editor-container"
+    }, this.state.editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER && /*#__PURE__*/_react.default.createElement(_imagesPreviewer.default, {
+      value: this.state.value,
+      togglePreviewer: this.togglePreviewer,
+      deleteImage: this.deleteImage,
+      resetAdditionImage: this.resetAdditionImage
+    }), this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION && /*#__PURE__*/_react.default.createElement(_additionPreviewer.default, {
+      deleteImage: this.deleteImage,
+      handleFilesChange: this.handleFilesChange,
+      uploadLocalImageValue: this.state.uploadLocalImageValue,
+      togglePreviewer: this.togglePreviewer,
+      saveImageLink: this.saveImageLink,
+      fileUploadCompleted: this.fileUploadCompleted,
+      addUploadedFile: this.addUploadedFile,
+      showImageListPreviewer: this.showImageListPreviewer,
+      uploadFile: this.uploadFile
+    }))));
+  }
+}
 var _default = exports.default = ImageEditor;

package/lib/ImageThumbnail/index.js

@@ -11,7 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
 var _url = require("../utils/url");
 var _lang = require("../lang");
-var _constants = require("../constants");
 require("./index.css");
 class ImageThumbnail extends _react.default.Component {
   constructor(props) {
@@ -122,7 +121,7 @@ class ImageThumbnail extends _react.default.Component {
       toggle: this.closeTip,
       handleDelete: this.deleteImage,
       deleteTip: this.props.deleteTip || (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-    }), !_constants.isMobile && this.ref && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+    }), this.ref && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
       placement: "bottom",
       isOpen: this.state.isTooltipOpen,
       toggle: this.toggle,

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;