dtable-ui-component 6.0.25-alpha.4 → 6.0.26-beta

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

@@ -0,0 +1,123 @@
+"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 _reactI18next = require("react-i18next");
+var _seafileEditor = require("@seafile/seafile-editor");
+var _toaster = _interopRequireDefault(require("../../../toaster"));
+var _Loading = _interopRequireDefault(require("../../../Loading"));
+var _constants = require("../../../constants");
+var _cell = require("../../../utils/cell");
+var _lang = require("../../../lang");
+require("./index.css");
+class Large 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 _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandLongTextEditor/sm/editor/index.css

@@ -0,0 +1,10 @@
+.mobile-dtable-ui-long-text-editor .mobile-dtable-ui-long-text-editor-container {
+  margin-top: 20px;
+  border-top: 1px solid #e9e9e9;
+}
+
+.mobile-dtable-ui-long-text-editor .mobile-dtable-ui-long-text-editor-container .am-textarea-item {
+  padding: 0 1rem;
+  border-bottom: 1px solid #e9e9e9;
+  height: unset;
+}

package/lib/RowExpandEditor/RowExpandLongTextEditor/sm/editor/index.js

@@ -0,0 +1,80 @@
+"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 _textareaItem = _interopRequireDefault(require("antd-mobile/lib/textarea-item"));
+var _react = _interopRequireWildcard(require("react"));
+var _seafileEditor = require("@seafile/seafile-editor");
+var _MobileFullScreenPage = _interopRequireDefault(require("../../../../MobileFullScreenPage"));
+var _lang = require("../../../../lang");
+require("./index.css");
+const Editor = _ref => {
+  let {
+    value: oldValue,
+    title,
+    onToggle,
+    onChange
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(oldValue || '');
+  const hasUnSaved = (0, _react.useRef)(false);
+  const timer = (0, _react.useRef)(null);
+  const rowCounts = (0, _react.useMemo)(() => document.body.offsetWidth < 767.8 ? 10 : 20, []);
+  const handleTextChange = (0, _react.useCallback)(newValue => {
+    if (value === newValue) return;
+    setValue(newValue);
+    hasUnSaved.current = true;
+  }, [value]);
+  const onSave = (0, _react.useCallback)(() => {
+    if (!hasUnSaved.current) return;
+    const {
+      previewText,
+      images,
+      links,
+      checklist
+    } = (0, _seafileEditor.getPreviewContent)(value);
+    const newValue = Object.assign({}, {
+      text: value,
+      preview: previewText,
+      images: images,
+      links: links,
+      checklist
+    });
+    onChange && onChange(newValue);
+    hasUnSaved.current = false;
+  }, [value, onChange]);
+  const handleSave = (0, _react.useCallback)(() => {
+    onSave();
+    onToggle();
+  }, [onSave, onToggle]);
+  (0, _react.useEffect)(() => {
+    timer.current = setInterval(() => {
+      onSave();
+    }, 60000);
+    return () => {
+      onSave();
+      clearInterval(timer.current);
+      timer.current = null;
+    };
+  }, [onSave]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    className: "mobile-dtable-ui-long-text-editor",
+    onLeftClick: onToggle,
+    onClose: onToggle,
+    onRightClick: handleSave
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#f09f3f'
+    }
+  }, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-long-text-editor-container"
+  }, /*#__PURE__*/_react.default.createElement(_textareaItem.default, {
+    rows: rowCounts,
+    value: value,
+    onChange: handleTextChange
+  }))));
+};
+var _default = exports.default = Editor;

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

@@ -0,0 +1,3 @@
+.mobile-dtable-ui-long-text-formatter {
+  min-height: 38px;
+}

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

@@ -0,0 +1,91 @@
+"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 _seafileEditor = require("@seafile/seafile-editor");
+var _lang = require("../../../lang");
+var _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+var _editor = _interopRequireDefault(require("./editor"));
+require("./index.css");
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.convertMarkdown = value => {
+      const newValue = value && typeof value === 'object' ? value.text : value;
+      _seafileEditor.processor.process(newValue).then(result => {
+        const innerHtml = String(result).replace(/<a /ig, '<a target="_blank" ');
+        this.setState({
+          innerHtml
+        });
+      });
+    };
+    this.onCommit = value => {
+      this.convertMarkdown(value.text);
+      this.props.onCommit(value);
+    };
+    this.openEditor = () => {
+      this.setState({
+        isShowEditor: true
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.state = {
+      innerHtml: null,
+      isShowEditor: false
+    };
+  }
+  componentDidMount() {
+    this.convertMarkdown(this.props.value);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    var _this$editorRef, _this$editorRef$curre;
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    const {
+      column: currentColumn,
+      row: currentRow
+    } = 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.convertMarkdown(value);
+    }
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      innerHtml,
+      isShowEditor
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, innerHtml ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-dtable-ui-long-text-formatter article py-2",
+      onClick: this.openEditor.bind(this),
+      dangerouslySetInnerHTML: {
+        __html: this.state.innerHtml
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+      className: "py-4",
+      onClick: this.openEditor,
+      text: (0, _lang.getLocale)('Edit_text')
+    }), isShowEditor && /*#__PURE__*/_react.default.createElement(_editor.default, {
+      onChange: this.onCommit,
+      value: innerHtml,
+      onToggle: this.closeEditor,
+      title: column.name
+    }));
+  }
+}
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/index.js

@@ -6,242 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("../../constants");
-var _MultipleSelectEditor = _interopRequireDefault(require("../../MultipleSelectEditor"));
-var _lang = require("../../lang");
-var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
-require("./index.css");
-class RowExpandMultipleSelectEditor extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.getOptions = props => {
-      const {
-        column
-      } = props;
-      return (0, _dtableUtils.getColumnOptions)(column);
-    };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showSelectPopover) {
-        this.setState({
-          showSelectPopover: true
-        });
-      }
-    };
-    this.toggleSingleSelect = value => {
-      this.setState({
-        showSelectPopover: value
-      }, () => {
-        var _this$selectRef;
-        if (value) return;
-        // eslint-disable-next-line no-unused-expressions
-        (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.focus();
-      });
-    };
-    this.hideDropDownMenu = event => {
-      if (!event.target) return;
-      if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
-        const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
-        if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
-        this.toggleSingleSelect(false);
-      }
-    };
-    this.onToggleSelect = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      const {
-        updateTabIndex,
-        columnIndex
-      } = this.props;
-      updateTabIndex && updateTabIndex(columnIndex);
-      this.toggleSingleSelect(true);
-    };
-    this.closeEditor = () => {
-      this.toggleSingleSelect(false);
-    };
-    this.onFocus = () => {
-      const {
-        updateTabIndex,
-        columnIndex
-      } = this.props;
-      updateTabIndex && updateTabIndex(columnIndex);
-    };
-    this.onChange = option => {
-      const optionKey = option[this.key];
-      let newValue = this.state.value.slice(0);
-      const optionKeyIndex = newValue.findIndex(o => o === optionKey);
-      if (optionKeyIndex === -1) {
-        newValue.push(optionKey);
-      } else {
-        newValue.splice(optionKeyIndex, 1);
-      }
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.removeOption = (option, event) => {
-      event.stopPropagation();
-      this.onChange(option);
-    };
-    this.getMultipleSelectList = () => {
-      const {
-        value
-      } = this.state;
-      if (!Array.isArray(value)) return [];
-      const selectedOptions = this.options.filter(option => value.includes(option[this.key]));
-      const selectedOptionIds = selectedOptions.map(option => option[this.key]);
-      const invalidOptionIds = value.filter(optionId => !selectedOptionIds.includes(optionId));
-      return selectedOptions.map((option, optionIdx) => {
-        let textColor = option.textColor || null;
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-select-option dtable-ui-multiple-select-option",
-          style: {
-            backgroundColor: option.color,
-            color: textColor
-          },
-          title: option.name,
-          key: optionIdx
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-ui-select-option-name"
-        }, option.name), /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-select-option-remove"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "remove-icon",
-          onClick: this.removeOption.bind(this, option),
-          "aria-label": (0, _lang.getLocale)('Delete')
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          className: "dtable-font dtable-icon-fork-number",
-          style: {
-            color: textColor === '#FFFFFF' ? textColor : null
-          },
-          "aria-hidden": "true"
-        }))));
-      }).concat(invalidOptionIds.map((optionId, index) => {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-select-option dtable-ui-multiple-select-option",
-          style: {
-            backgroundColor: _constants.DELETED_OPTION_BACKGROUND_COLOR
-          },
-          title: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS),
-          key: "deleted-multiple-select-".concat(index)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-ui-select-option-name"
-        }, (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS)), /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-select-option-remove"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "remove-icon",
-          onClick: this.removeOption.bind(this, {
-            id: optionId
-          }),
-          "aria-label": (0, _lang.getLocale)('Delete')
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          className: "dtable-font dtable-icon-fork-number",
-          "aria-hidden": "true"
-        }))));
-      }));
-    };
-    this.renderOptions = () => {
-      const {
-        isEditorFocus,
-        classNamePrefix,
-        placeholder
-      } = this.props;
-      const options = this.getMultipleSelectList();
-      return /*#__PURE__*/_react.default.createElement("div", {
-        tabIndex: 0,
-        onFocus: this.onFocus,
-        onClick: this.onToggleSelect,
-        ref: ref => this.multipleSelectOptionsRef = ref,
-        className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
-          'focus': isEditorFocus,
-          ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
-        })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
-          ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
-        })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('', {
-          ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
-        })
-      }, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
-          ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
-        })
-      }, options), options.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-down3"
-      })));
-    };
-    this.state = {
-      value: _props.value || [],
-      showSelectPopover: false
-    };
-    this.key = _props.valueKey === 'name' ? 'name' : 'id';
-    this.options = this.getOptions(_props);
-    this.selectRef = null;
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.hideDropDownMenu);
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      value,
-      column
-    } = nextProps;
-    if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
-      this.options = this.getOptions(nextProps);
-      this.setState({
-        value
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.showSelectPopover !== prevState.showSelectPopover) {
-      if (this.state.showSelectPopover === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.showSelectPopover === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.hideDropDownMenu);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      column,
-      isSupportNewOption,
-      onAddNewOption,
-      classNamePrefix
-    } = this.props;
-    const {
-      showSelectPopover,
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative w-100",
-      ref: ref => this.ref = ref
-    }, this.renderOptions(), /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.targetRef = ref
-    }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_MultipleSelectEditor.default, {
-      isInModal: true,
-      options: this.options,
-      column: column,
-      value: value,
-      valueKey: this.key,
-      target: this.targetRef,
-      classNamePrefix: classNamePrefix,
-      onCommit: this.onChange,
-      isSupportNewOption: isSupportNewOption,
-      onAddNewOption: onAddNewOption,
-      onClose: this.closeEditor
-    }));
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandMultipleSelectEditor = 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 = RowExpandMultipleSelectEditor;

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/{index.css → lg/index.css}

@@ -1,4 +1,4 @@
-@import url('../RowExpandSingleSelectorEditor/index.css');
+@import url('../../RowExpandSingleSelectorEditor/lg/index.css');
 
 .dtable-ui-row-expand-select-options {
   min-height: 30px;