dtable-ui-component 6.0.29-beta → 6.0.29-beta10

package/lib/RowExpandEditor/long-text-editor/mb-editor/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 < 768 ? 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: "dtable-ui-mobile-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: "dtable-ui-mobile-long-text-editor-container"
+  }, /*#__PURE__*/_react.default.createElement(_textareaItem.default, {
+    rows: rowCounts,
+    value: value,
+    onChange: handleTextChange
+  }))));
+};
+var _default = exports.default = Editor;

package/lib/RowExpandEditor/long-text-editor/mb-editor/index.css

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

package/lib/RowExpandEditor/long-text-editor/mb-editor/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 _addBtn = _interopRequireDefault(require("../../add-btn"));
+var _editor = _interopRequireDefault(require("./editor"));
+require("./index.css");
+class RowExpandMBLongTextEditor 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: "dtable-ui-mobile-long-text-formatter article py-2",
+      onClick: this.openEditor.bind(this),
+      dangerouslySetInnerHTML: {
+        __html: this.state.innerHtml
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+      className: "py-4",
+      onClick: this.openEditor,
+      text: (0, _lang.getLocale)('Edit_long_text')
+    }), isShowEditor && /*#__PURE__*/_react.default.createElement(_editor.default, {
+      onChange: this.onCommit,
+      value: innerHtml,
+      onToggle: this.closeEditor,
+      title: column.name
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBLongTextEditor;

package/lib/RowExpandEditor/{RowExpandLongTextEditor → long-text-editor/pc-editor}/index.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
+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 RowExpandLongTextEditor extends _react.default.Component {
+class RowExpandPCLongTextEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.convertMarkdown = value => {
@@ -120,4 +120,4 @@ class RowExpandLongTextEditor extends _react.default.Component {
     })));
   }
 }
-var _default = exports.default = RowExpandLongTextEditor;
+var _default = exports.default = RowExpandPCLongTextEditor;

package/lib/RowExpandEditor/multiple-select-editor/index.js

@@ -0,0 +1,24 @@
+"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"));
+const RowExpandMultipleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((props, 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
+  }))));
+});
+var _default = exports.default = RowExpandMultipleSelectEditor;

package/lib/RowExpandEditor/multiple-select-editor/mb-editor/index.js

@@ -0,0 +1,154 @@
+"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 _dtableUtils = require("dtable-utils");
+var _MultipleSelectEditor = _interopRequireDefault(require("../../../MultipleSelectEditor"));
+var _SelectItem = _interopRequireDefault(require("../../../SelectItem"));
+var _lang = require("../../../lang");
+var _rightAngle = _interopRequireDefault(require("../../right-angle"));
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
+var _constants = require("../../../constants");
+var _addBtn = _interopRequireDefault(require("../../add-btn"));
+class RowExpandMBMultipleSelectEditor extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.getOptions = props => {
+      const {
+        column
+      } = props;
+      return (0, _dtableUtils.getColumnOptions)(column);
+    };
+    this.toggleEditor = value => {
+      this.setState({
+        showEditor: value
+      });
+    };
+    this.openEditor = event => {
+      event.stopPropagation();
+      this.toggleEditor(true);
+    };
+    this.closeEditor = () => {
+      this.toggleEditor(false);
+    };
+    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();
+      event && event.nativeEvent.stopImmediatePropagation();
+      const optionKey = option[this.key];
+      let newValue = this.state.value.slice(0);
+      const optionKeyIndex = newValue.findIndex(o => o === optionKey);
+      if (optionKeyIndex !== -1) {
+        newValue.splice(optionKeyIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.renderOptions = () => {
+      const {
+        value
+      } = this.state;
+      let displayOptions = [];
+      if (Array.isArray(value)) {
+        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));
+        displayOptions = selectedOptions.map((option, optionIdx) => {
+          return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+            option: option,
+            key: optionIdx,
+            isShowRemove: true,
+            onRemove: this.removeOption.bind(this, option)
+          });
+        }).concat(invalidOptionIds.map((optionId, index) => {
+          const option = {
+            name: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS),
+            color: _constants.DELETED_OPTION_BACKGROUND_COLOR
+          };
+          return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+            option: option,
+            key: "deleted-".concat(index),
+            isShowRemove: true,
+            onRemove: this.removeOption.bind(this, {
+              [this.key]: optionId
+            })
+          });
+        }));
+      }
+      if (displayOptions.length === 0) return /*#__PURE__*/_react.default.createElement(_addBtn.default, {
+        text: (0, _lang.getLocale)('Select_option(s)')
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          minHeight: 50,
+          padding: '10px 0',
+          display: 'flex',
+          flexWrap: 'wrap'
+        }
+      }, displayOptions);
+    };
+    this.state = {
+      value: _props.value || [],
+      isShowEditor: false
+    };
+    this.key = _props.valueKey === 'name' ? 'name' : 'id';
+    this.options = this.getOptions(_props);
+  }
+  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,
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      isSupportNewOption,
+      onAddNewOption
+    } = this.props;
+    const {
+      showEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui dtable-ui-mobile-row-expand-options-editor position-relative",
+      onClick: this.openEditor
+    }, this.renderOptions(), /*#__PURE__*/_react.default.createElement(_rightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_MultipleSelectEditor.default, {
+      value: value,
+      column: column,
+      valueKey: this.key,
+      options: this.options,
+      onCommit: this.onChange,
+      onClose: this.closeEditor,
+      isSupportNewOption: isSupportNewOption,
+      onAddNewOption: onAddNewOption
+    }));
+  }
+}
+var _default = exports.default = RowExpandMBMultipleSelectEditor;

package/lib/RowExpandEditor/{RowExpandMultipleSelectEditor → multiple-select-editor/pc-editor}/index.css

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

package/lib/RowExpandEditor/{RowExpandMultipleSelectEditor → multiple-select-editor/pc-editor}/index.js

@@ -8,12 +8,12 @@ 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"));
+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 {
+class RowExpandPCMultipleSelectEditor extends _react.default.Component {
   constructor(_props) {
     super(_props);
     this.getOptions = props => {
@@ -244,4 +244,4 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = RowExpandMultipleSelectEditor;
+var _default = exports.default = RowExpandPCMultipleSelectEditor;

package/lib/RowExpandEditor/number-editor/index.js

@@ -0,0 +1,24 @@
+"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"));
+const RowExpandNumberEditor = /*#__PURE__*/(0, _react.forwardRef)((props, 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
+  }))));
+});
+var _default = exports.default = RowExpandNumberEditor;

package/lib/RowExpandEditor/number-editor/mb-editor/index.css

@@ -0,0 +1,3 @@
+.dtable-ui-mobile-row-expand-number-editor-container .form-control {
+  width: 100% !important;
+}

package/lib/RowExpandEditor/number-editor/mb-editor/index.js

@@ -0,0 +1,76 @@
+"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 _dtableUtils = require("dtable-utils");
+var _NumberEditor = _interopRequireDefault(require("../../../NumberEditor"));
+require("./index.css");
+class RowExpandMBNumberEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      if (this.props.readOnly) return;
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      console.log(value);
+      this.props.onCommit(value);
+      this.setState({
+        value
+      }, () => {
+        this.setState({
+          isShowEditor: false
+        });
+      });
+    };
+    this.onBlur = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    const {
+      column,
+      row
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column.key]
+    };
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      value,
+      isShowEditor
+    } = this.state;
+    let formatValue = '';
+    if (!isShowEditor && (0, _dtableUtils.isNumber)(value)) {
+      const {
+        data = {}
+      } = column;
+      formatValue = (0, _dtableUtils.getNumberDisplayString)(value, data);
+    }
+    const dom = isShowEditor ? /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+      isInModal: true,
+      column: column,
+      value: value,
+      onBlur: this.onBlur,
+      onCommit: this.onCommit
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100 h-100",
+      onClick: this.toggleEditor
+    }, formatValue);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-row-expand-input-editor-container dtable-ui-mobile-row-expand-number-editor-container"
+    }, dom);
+  }
+}
+var _default = exports.default = RowExpandMBNumberEditor;

package/lib/RowExpandEditor/{RowExpandNumberEditor/index.js → number-editor/pc-editor.js}

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _NumberEditor = _interopRequireDefault(require("../../NumberEditor"));
-class RowExpandNumberEditor extends _react.default.Component {
+class RowExpandPCNumberEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.toggleEditor = () => {
@@ -102,4 +102,4 @@ class RowExpandNumberEditor extends _react.default.Component {
     }, formatValue);
   }
 }
-var _default = exports.default = RowExpandNumberEditor;
+var _default = exports.default = RowExpandPCNumberEditor;

package/lib/RowExpandEditor/rate-editor/index.css

@@ -0,0 +1,34 @@
+.dtable-ui.dtable-ui-row-expand-rate-editor {
+  display: flex;
+}
+
+.dtable-ui.dtable-ui-row-expand-rate-editor > div {
+  padding-right: 5px;
+  cursor: pointer;
+  line-height: 1.5;
+}
+
+.dtable-ui.dtable-ui-row-expand-rate-editor .rate-item-active {
+  opacity: 1 !important;
+}
+
+.dtable-ui-mobile-row-expand-rate-editor {
+  min-height: 50px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10px 0;
+}
+
+.dtable-ui-mobile-row-expand-rate-editor .dtable-ui-mobile-row-expand-rate-item {
+  height: 24px;
+  width: 24px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  margin-right: 0.25rem;
+  padding-right: 0 !important;
+}
+
+.dtable-ui-mobile-row-expand-rate-editor .dtable-ui-mobile-row-expand-rate-item .dtable-font {
+  font-size: 24px;
+  line-height: 1;
+}

package/lib/RowExpandEditor/rate-editor/index.js

@@ -0,0 +1,25 @@
+"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"));
+require("./index.css");
+const RowExpandRateEditor = /*#__PURE__*/(0, _react.forwardRef)((props, 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
+  }))));
+});
+var _default = exports.default = RowExpandRateEditor;