dtable-ui-component 5.3.6 → 5.3.7

package/lib/RowExpandEditor/RowExpandFileEditor/index.js

@@ -0,0 +1,147 @@
+"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 _ImageThumbnail = _interopRequireDefault(require("../../ImageThumbnail"));
+var _url = require("../../utils/url");
+var _FileEditor = _interopRequireDefault(require("../../FileEditor"));
+require("./index.css");
+class RowExpandFileEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowFileEditor) {
+        this.setState({
+          isShowFileEditor: 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({
+        isShowFileEditor: !this.state.isShowFileEditor
+      });
+    };
+    this.onCommit = value => {
+      this.setState({
+        fileContainer: value,
+        isShowFileEditor: !this.state.isShowFileEditor
+      });
+      this.props.onCommit(value);
+    };
+    this.deleteFile = index => {
+      const {
+        column,
+        row,
+        onCommit
+      } = this.props;
+      let {
+        fileContainer
+      } = this.state;
+      let value = fileContainer || row[column.key];
+      let updatedValue = value.slice(0);
+      updatedValue.splice(index, 1);
+      this.setState({
+        fileContainer: updatedValue
+      });
+      onCommit(updatedValue);
+    };
+    this.onClickFile = () => {
+      this.openEditorMode = null;
+      this.onToggle();
+    };
+    this.state = {
+      isShowFileEditor: false,
+      fileContainer: null
+    };
+    this.openEditorMode = null;
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        fileContainer: row[column[valueKey]] || [],
+        isShowFileEditor: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowFileEditor !== prevState.isShowFileEditor) {
+      if (this.state.isShowFileEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowFileEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    let fileArr = [];
+    const {
+      column,
+      row,
+      config,
+      valueKey,
+      isEditorFocus
+    } = this.props;
+    let value = this.state.fileContainer !== null ? this.state.fileContainer : row[column[valueKey]];
+    if (value && value.length > 0) {
+      fileArr = value.map((file, index) => {
+        const {
+          fileIconUrl
+        } = (0, _url.getFileThumbnailInfo)(file, config);
+        return /*#__PURE__*/_react.default.createElement(_ImageThumbnail.default, {
+          key: 'file-' + index,
+          src: fileIconUrl,
+          index: index,
+          config: config,
+          deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_file'),
+          deleteImage: this.deleteFile,
+          onClick: this.onClickFile
+        });
+      });
+    }
+    return /*#__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_files'),
+      onFocus: this.onFocus,
+      onClick: this.onToggle
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-image-container"
+    }, fileArr), this.state.isShowFileEditor && /*#__PURE__*/_react.default.createElement(_FileEditor.default, {
+      value: value,
+      isInModal: true,
+      onToggle: this.onToggle,
+      onCommit: this.onCommit,
+      config: this.props.config,
+      uploadFile: this.props.uploadFile
+    }));
+  }
+}
+var _default = exports.default = RowExpandFileEditor;

package/lib/RowExpandEditor/RowExpandGeolocationEditor/index.css

@@ -0,0 +1,17 @@
+.dtable-ui-row-expand-geolocation-value {
+  min-width: 80px;
+  max-width: 100%;
+  height: 28px;
+  line-height: 24px;
+  border: 2px solid transparent;
+  padding: 0 10px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  font-size: 14px;
+  text-align: center;
+  display: inline-flex;
+  cursor: pointer;
+  width: fit-content;
+  justify-content: center;
+  color: #212529;
+}

package/lib/RowExpandEditor/RowExpandGeolocationEditor/index.js

@@ -0,0 +1,165 @@
+"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 _constants = require("../../constants");
+var _RowExpandAddBtn = _interopRequireDefault(require("../RowExpandAddBtn"));
+var _lang = require("../../lang");
+var _GeolocationEditor = _interopRequireDefault(require("../../GeolocationEditor"));
+require("./index.css");
+class RowExpandGeolocationEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
+        this.setState({
+          isShowEditor: true
+        });
+      }
+    };
+    this.hideEditor = event => {
+      if (!this.state.isShowEditor || !event.target || event.target.tagName.toUpperCase() === 'INPUT' || this.editorContainer.contains(event.target)) return;
+      if (this.state.isShowEditor && this.geoEditor.getLargeEditorState()) return;
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    this.toggleEditor = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      }, () => {
+        if (!this.state.isShowEditor) {
+          if ((0, _dtableUtils.isEmptyObject)(this.state.value)) {
+            var _this$addBtnRef$curre;
+            // eslint-disable-next-line no-unused-expressions
+            (_this$addBtnRef$curre = this.addBtnRef.current) === null || _this$addBtnRef$curre === void 0 ? void 0 : _this$addBtnRef$curre.focus();
+          } else {
+            this.geoLocationRef.focus();
+          }
+        }
+      });
+    };
+    this.onFocus = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value
+      });
+      this.toggleEditor();
+    };
+    this.renderGeoLocation = () => {
+      let {
+        isEditorFocus
+      } = this.props;
+      let {
+        value
+      } = this.state;
+      if (!(0, _dtableUtils.isEmptyObject)(value)) {
+        const displayContent = this.getLocationInfo(value);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          tabIndex: 0,
+          style: isEditorFocus ? _constants.ROW_EXPAND_BTN_FOCUS_STYLE : {},
+          onFocus: this.onFocus,
+          role: "button",
+          ref: ref => this.geoLocationRef = ref,
+          className: "dtable-ui-row-expand-geolocation-value",
+          onClick: this.toggleEditor
+        }, displayContent);
+      }
+      return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+        ref: this.addBtnRef,
+        onFocus: this.onFocus,
+        onClick: this.toggleEditor,
+        isFocus: isEditorFocus,
+        text: (0, _lang.getLocale)('Edit_Location')
+      });
+    };
+    this.getLocationInfo = value => {
+      const {
+        column
+      } = this.props;
+      const {
+        dtableBaiduMapKey,
+        dtableMineMapKey
+      } = window.dtable;
+      const isBaiduMap = !!(dtableBaiduMapKey || dtableMineMapKey);
+      return (0, _dtableUtils.getGeolocationDisplayString)(value, column.data, {
+        isBaiduMap,
+        hyphen: ' '
+      });
+    };
+    const {
+      row,
+      column: _column,
+      valueKey
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[_column[valueKey]] || {}
+    };
+    this.addBtnRef = /*#__PURE__*/_react.default.createRef();
+    this.isGeolocationLargeMapOpen = false;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideEditor);
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row,
+      valueKey
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column[valueKey]] || {},
+        isShowEditor: false
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.isShowEditor !== prevState.isShowEditor) {
+      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.isShowEditor === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideEditor);
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      column,
+      row
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.editorContainer = ref,
+      className: "mt-2"
+    }, this.renderGeoLocation(), this.state.isShowEditor && /*#__PURE__*/_react.default.createElement(_GeolocationEditor.default, {
+      ref: ref => this.geoEditor = ref,
+      isInModal: true,
+      column: column,
+      row: row,
+      value: value,
+      onCommit: this.onCommit,
+      onCommitCancel: this.toggleEditor,
+      onPressTab: this.props.onPressTab
+    }));
+  }
+}
+var _default = exports.default = RowExpandGeolocationEditor;

package/lib/RowExpandEditor/RowExpandImageEditor/index.css

@@ -0,0 +1,6 @@
+.dtable-ui-row-expand-image-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -5px;
+  margin-right: -5px;
+}

package/lib/RowExpandEditor/RowExpandImageEditor/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 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 _default = exports.default = RowExpandImageEditor;

package/lib/RowExpandEditor/RowExpandLongTextEditor/index.css

@@ -0,0 +1,6 @@
+.sf-long-text-inline-editor-container:not(.preview) {
+  height: 300px;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, .25);
+}

package/lib/RowExpandEditor/RowExpandLongTextEditor/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 _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 _default = exports.default = RowExpandLongTextEditor;

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/index.css

@@ -0,0 +1,44 @@
+@import url('../RowExpandSingleSelectorEditor/index.css');
+
+.dtable-ui-row-expand-select-options {
+  min-height: 30px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.dtable-ui-row-expand-select-options .dtable-ui-select-option.dtable-ui-multiple-select-option {
+  margin-right: 10px !important;
+  display: inline-flex;
+  max-width: 250px;
+}
+
+.dtable-ui-row-expand-select-options .dtable-ui-multiple-select-option .dtable-ui-select-option-name {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dtable-ui-row-expand-select-options .dtable-ui-multiple-select-option .dtable-ui-select-option-remove {
+  width: 16px;
+  text-align: right;
+}
+
+.dtable-ui-row-expand-select-options .dtable-ui-multiple-select-option .dtable-ui-select-option-remove .remove-icon {
+  display: inline-block;
+  position: relative;
+  right: -2px;
+  width: 14px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.dtable-ui-row-expand-select-options .dtable-ui-multiple-select-option .dtable-ui-select-option-remove .dtable-font {
+  display: inline-block;
+  font-size: 12px;
+  color: #999;
+  transform: scale(0.8);
+}