dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/RowExpandEditor/RowExpandImageEditor/index.js

@@ -6,165 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../constants");
-var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
-var _lang = require("../../lang");
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
-var _ImageEditor = _interopRequireDefault(require("../../ImageEditor"));
-require("./index.css");
-class RowExpandImageEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowImageEditor) {
-        this.setState({
-          isShowImageEditor: true
-        });
-      }
-    };
-    this.onFocus = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-    };
-    this.onToggle = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-      this.setState({
-        isShowImageEditor: !this.state.isShowImageEditor
-      });
-    };
-    this.onCommit = value => {
-      this.setState({
-        imageContainer: value,
-        isShowImageEditor: !this.state.isShowImageEditor
-      });
-      this.props.onCommit(value);
-    };
-    this.setLargeImageIndex = index => {
-      this.setState({
-        largeImageIndex: index
-      });
-    };
-    this.moveToNextImage = () => {
-      let value = this.getValue();
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + 1) % value.length
-      }));
-    };
-    this.moveToPrevImage = () => {
-      let value = this.getValue();
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + value.length - 1) % value.length
-      }));
-    };
-    this.hideLargeImage = () => {
-      this.setLargeImageIndex(-1);
-    };
-    this.getValue = () => {
-      let {
-        column,
-        row,
-        valueKey
-      } = this.props;
-      let {
-        imageContainer
-      } = this.state;
-      return imageContainer ? imageContainer : row[column[valueKey]];
-    };
-    this.deleteImage = index => {
-      let value = this.getValue();
-      let updatedValue = value.slice(0);
-      updatedValue.splice(index, 1);
-      this.setState({
-        imageContainer: updatedValue
-      });
-      this.props.onCommit(updatedValue);
-    };
-    this.getImageArray = value => {
-      const {
-        config
-      } = this.props;
-      return value.map((imageSrc, index) => {
-        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
-          key: "image-".concat(index),
-          index: index,
-          src: imageSrc,
-          onClick: this.setLargeImageIndex,
-          deleteImage: this.deleteImage,
-          config: config
-        });
-      });
-    };
-    this.state = {
-      isShowImageEditor: false,
-      imageContainer: null,
-      largeImageIndex: -1
-    };
-  }
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        imageContainer: row[column[valueKey]] || [],
-        isShowImageEditor: false,
-        largeImageIndex: -1
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.isShowImageEditor !== prevState.isShowImageEditor) {
-      if (this.state.isShowImageEditor === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.isShowImageEditor === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      isEditorFocus
-    } = this.props;
-    let {
-      isShowImageEditor,
-      largeImageIndex
-    } = this.state;
-    let value = this.getValue();
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-editor mt-2"
-    }, /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
-      isFocus: isEditorFocus,
-      text: (0, _lang.getLocale)('Add_images'),
-      onFocus: this.onFocus,
-      onClick: this.onToggle
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-image-container"
-    }, Array.isArray(value) && value.length > 0 && this.getImageArray(value))), isShowImageEditor && /*#__PURE__*/_react.default.createElement(_ImageEditor.default, {
-      value: value,
-      isInModal: true,
-      onToggle: this.onToggle,
-      onCommit: this.onCommit,
-      uploadFile: this.props.uploadFile
-    }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: value,
-      imageIndex: largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.moveToPrevImage,
-      moveToNextImage: this.moveToNextImage
-    }));
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandImageEditor = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandImageEditor;

package/lib/RowExpandEditor/RowExpandImageEditor/lg/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../../constants");
+var _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+var _lang = require("../../../lang");
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../../../ImagePreviewerLightbox"));
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _ImageEditor = _interopRequireDefault(require("../../../ImageEditor"));
+require("./index.css");
+class Large extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowImageEditor) {
+        this.setState({
+          isShowImageEditor: true
+        });
+      }
+    };
+    this.onFocus = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+    };
+    this.onToggle = () => {
+      if (this.props.updateTabIndex) {
+        this.props.updateTabIndex(this.props.columnIndex);
+      }
+      this.setState({
+        isShowImageEditor: !this.state.isShowImageEditor
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        imageContainer: value,
+        isShowImageEditor: !this.state.isShowImageEditor
+      });
+      this.props.onCommit(value);
+    };
+    this.setLargeImageIndex = index => {
+      this.setState({
+        largeImageIndex: index
+      });
+    };
+    this.moveToNextImage = () => {
+      let value = this.getValue();
+      this.setState(prevState => ({
+        largeImageIndex: (prevState.largeImageIndex + 1) % value.length
+      }));
+    };
+    this.moveToPrevImage = () => {
+      let value = this.getValue();
+      this.setState(prevState => ({
+        largeImageIndex: (prevState.largeImageIndex + value.length - 1) % value.length
+      }));
+    };
+    this.hideLargeImage = () => {
+      this.setLargeImageIndex(-1);
+    };
+    this.getValue = () => {
+      let {
+        column,
+        row,
+        valueKey
+      } = this.props;
+      let {
+        imageContainer
+      } = this.state;
+      return imageContainer ? imageContainer : row[column[valueKey]];
+    };
+    this.deleteImage = index => {
+      let value = this.getValue();
+      let updatedValue = value.slice(0);
+      updatedValue.splice(index, 1);
+      this.setState({
+        imageContainer: updatedValue
+      });
+      this.props.onCommit(updatedValue);
+    };
+    this.getImageArray = value => {
+      const {
+        config
+      } = this.props;
+      return value.map((imageSrc, index) => {
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: "image-".concat(index),
+          index: index,
+          src: imageSrc,
+          onClick: this.setLargeImageIndex,
+          deleteImage: this.deleteImage,
+          config: config
+        });
+      });
+    };
+    this.state = {
+      isShowImageEditor: false,
+      imageContainer: null,
+      largeImageIndex: -1
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        imageContainer: row[column[valueKey]] || [],
+        isShowImageEditor: false,
+        largeImageIndex: -1
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowImageEditor !== prevState.isShowImageEditor) {
+      if (this.state.isShowImageEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowImageEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      isEditorFocus
+    } = this.props;
+    let {
+      isShowImageEditor,
+      largeImageIndex
+    } = this.state;
+    let value = this.getValue();
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-image-editor mt-2"
+    }, /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      isFocus: isEditorFocus,
+      text: (0, _lang.getLocale)('Add_images'),
+      onFocus: this.onFocus,
+      onClick: this.onToggle
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-image-container"
+    }, Array.isArray(value) && value.length > 0 && this.getImageArray(value))), isShowImageEditor && /*#__PURE__*/_react.default.createElement(_ImageEditor.default, {
+      value: value,
+      isInModal: true,
+      onToggle: this.onToggle,
+      onCommit: this.onCommit,
+      uploadFile: this.props.uploadFile
+    }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      imageItems: value,
+      imageIndex: largeImageIndex,
+      closeImagePopup: this.hideLargeImage,
+      moveToPrevImage: this.moveToPrevImage,
+      moveToNextImage: this.moveToNextImage
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandImageEditor/sm/index.css

@@ -0,0 +1,25 @@
+.mobile-dtable-ui-row-expand-image {
+  margin: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  min-height: 50px;
+}
+
+.mobile-dtable-ui-row-expand-image .mobile-dtable-ui-row-expand-add-btn {
+  height: 100%;
+  line-height: 50px;
+}
+
+.mobile-dtable-ui-row-expand-image .mobile-dtable-ui-row-expand-img-item {
+  height: auto;
+  max-height: 150px;
+  width: calc(50% - 10px);
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.mobile-dtable-ui-row-expand-image .mobile-dtable-ui-row-expand-img-item:nth-child(even) {
+  margin-left: 20px;
+}

package/lib/RowExpandEditor/RowExpandImageEditor/sm/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+var _lang = require("../../../lang");
+var _ImageThumbnail = _interopRequireDefault(require("../../../ImageThumbnail"));
+var _ImageEditor = _interopRequireDefault(require("../../../ImageEditor"));
+require("./index.css");
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        value: value
+      });
+      this.props.onCommit(value);
+    };
+    this.deleteImage = index => {
+      let value = this.state.value;
+      let updatedValue = value.slice(0);
+      updatedValue.splice(index, 1);
+      this.setState({
+        value: updatedValue
+      });
+      this.props.onCommit(updatedValue);
+    };
+    this.renderImages = () => {
+      const {
+        value
+      } = this.state;
+      const {
+        config
+      } = this.props;
+      return value.map((src, index) => {
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: "image-".concat(index),
+          index: index,
+          src: src,
+          className: "mobile-dtable-ui-row-expand-img-item",
+          config: config,
+          onClick: this.toggleEditor,
+          deleteImage: this.deleteImage
+        });
+      });
+    };
+    const {
+      column,
+      row,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column[valueKey]] || []
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || [],
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      config,
+      uploadFile
+    } = this.props;
+    const {
+      isShowEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-dtable-ui-row-expand-image position-relative"
+    }, value.length === 0 ? /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      onClick: this.toggleEditor,
+      text: (0, _lang.getLocale)('Add_images')
+    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderImages())), isShowEditor && /*#__PURE__*/_react.default.createElement(_ImageEditor.default, {
+      value: value,
+      column: column,
+      config: config,
+      onToggle: this.closeEditor,
+      onCommit: this.onCommit,
+      uploadFile: uploadFile
+    }));
+  }
+}
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RowExpandLongTextEditor/index.js

@@ -1,123 +1,19 @@
 "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 _toaster = _interopRequireDefault(require("../../toaster"));
-var _Loading = _interopRequireDefault(require("../../Loading"));
-var _reactI18next = require("react-i18next");
-var _seafileEditor = require("@seafile/seafile-editor");
-var _constants = require("../../constants");
-var _cell = require("../../utils/cell");
-var _lang = require("../../lang");
-require("./index.css");
-class RowExpandLongTextEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.convertMarkdown = value => {
-      const newValue = value && typeof value === 'object' ? value.text : value;
-      this.setState({
-        value: newValue,
-        isLoading: false
-      });
-    };
-    this.onSaveEditorValue = value => {
-      if ((0, _cell.isLongTextValueExceedLimit)(value)) {
-        _toaster.default.closeAll();
-        _toaster.default.danger((0, _lang.getLocale)(_constants.LONG_TEXT_EXCEED_LIMIT_MESSAGE), {
-          duration: null
-        });
-        return;
-      }
-      this.onCommit(value);
-      this.isLongTextValueChanged = false;
-    };
-    this.onCommit = value => {
-      this.props.onCommit(value);
-    };
-    this.openEditor = () => {
-      this.editorRef.current.openEditor();
-    };
-    this.closeEditor = () => {
-      this.editorRef.current.closeEditor();
-    };
-    this.onClick = () => {
-      const {
-        columnIndex
-      } = this.props;
-      this.props.updateTabIndex && this.props.updateTabIndex(columnIndex);
-    };
-    this.state = {
-      isLoading: true,
-      value: ''
-    };
-    this.editorRef = /*#__PURE__*/(0, _react.createRef)();
-  }
-  componentDidMount() {
-    this.convertMarkdown(this.props.value);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    var _this$editorRef, _this$editorRef$curre;
-    const {
-      column,
-      row,
-      isEditorFocus: nextIsEditorFocus,
-      valueKey
-    } = nextProps;
-    const {
-      column: currentColumn,
-      row: currentRow,
-      isEditorFocus
-    } = this.props;
-    const value = row[column[valueKey]];
-    const currentValue = currentRow[currentColumn[valueKey]];
-    if (value !== currentValue && !((_this$editorRef = this.editorRef) !== null && _this$editorRef !== void 0 && (_this$editorRef$curre = _this$editorRef.current) !== null && _this$editorRef$curre !== void 0 && _this$editorRef$curre.enableEdit)) {
-      this.setState({
-        isLoading: true
-      }, () => {
-        this.convertMarkdown(value);
-      });
-    }
-    if (isEditorFocus && !nextIsEditorFocus) {
-      this.closeEditor();
-    }
-    if (!isEditorFocus && nextIsEditorFocus) {
-      this.openEditor();
-    }
-  }
-  render() {
-    const {
-      column,
-      longTextEditorAPI,
-      longTextEditorI18n
-    } = this.props;
-    const {
-      isLoading,
-      value
-    } = this.state;
-    if (isLoading) return null;
-    return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-      fallback: /*#__PURE__*/_react.default.createElement("div", {
-        className: "d-center-middle"
-      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null))
-    }, /*#__PURE__*/_react.default.createElement(_reactI18next.I18nextProvider, {
-      i18n: longTextEditorI18n
-    }, /*#__PURE__*/_react.default.createElement(_seafileEditor.LongTextInlineEditor, {
-      ref: this.editorRef,
-      lang: _lang.LANGUAGE,
-      headerName: column.name,
-      value: value || '',
-      autoSave: true,
-      saveDelay: 20 * 1000,
-      isCheckBrowser: true,
-      onClick: this.onClick,
-      editorApi: longTextEditorAPI,
-      onSaveEditorValue: this.onSaveEditorValue
-    })));
-  }
-}
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandLongTextEditor = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandLongTextEditor;