@seafile/sdoc-editor 1.0.17 → 1.0.18

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/filter-setter/index.js

@@ -1,8 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
-export default function FilterSetter() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "setting-item-btn filters-setting"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "dtable-font dtable-icon-filter mr-2"
-  }), /*#__PURE__*/React.createElement("div", null, "FilterSetter"));
-}
+import deepCopy from 'deep-copy';
+import { withTranslation } from 'react-i18next';
+import { getValidFilters } from 'dtable-utils';
+import FilterPopover from './filter-popover';
+class FilterSetter extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onFilterSetterToggle", () => {
+      this.setState({
+        isShowFilterPopover: !this.state.isShowFilterPopover
+      });
+    });
+    _defineProperty(this, "update", update => {
+      const {
+        filters,
+        filter_conjunction
+      } = update || {};
+      const {
+        columns
+      } = this.props;
+      const valid_filters = getValidFilters(filters, columns);
+      this.props.onFiltersChange(valid_filters, filter_conjunction);
+    });
+    this.state = {
+      isShowFilterPopover: false
+    };
+  }
+  render() {
+    const {
+      wrapperClass,
+      filtersClassName,
+      filterConjunction,
+      filters,
+      columns,
+      collaborators,
+      isNeedSubmit,
+      t
+    } = this.props;
+    if (!columns) return null;
+    const {
+      isShowFilterPopover
+    } = this.state;
+    const validFilters = deepCopy(getValidFilters(filters || [], columns));
+    const filtersLength = validFilters ? validFilters.length : 0;
+    let filterMessage = t('Filter');
+    if (filtersLength === 1) {
+      filterMessage = t('1 Filter');
+    } else if (filtersLength > 1) {
+      filterMessage = t('Filters');
+      filterMessage = filtersLength + ' ' + filterMessage;
+    }
+    let labelClass = wrapperClass || '';
+    labelClass = labelClass && filtersLength > 0 ? labelClass + ' active' : labelClass;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "setting-item ".concat(labelClass ? 'mr-2' : 'mb-1')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "setting-item-btn filters-setting-btn ".concat(labelClass),
+      onClick: this.onFilterSetterToggle
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-filter mr-2",
+      id: this.props.target
+    }), /*#__PURE__*/React.createElement("span", null, filterMessage))), isShowFilterPopover && /*#__PURE__*/React.createElement(FilterPopover, {
+      filtersClassName: filtersClassName,
+      target: this.props.target,
+      isNeedSubmit: isNeedSubmit,
+      columns: columns,
+      collaborators: collaborators,
+      filterConjunction: filterConjunction,
+      filters: validFilters,
+      hidePopover: this.onFilterSetterToggle,
+      update: this.update,
+      isPre: this.props.isPre
+    }));
+  }
+}
+_defineProperty(FilterSetter, "defaultProps", {
+  target: 'dtable-filter-popover',
+  isNeedSubmit: false
+});
+export default withTranslation('sdoc-editor')(FilterSetter);

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/hide-column-item.js

@@ -0,0 +1,54 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+class HideColumnItem extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onUpdateFieldSetting", event => {
+      event.nativeEvent.stopImmediatePropagation();
+      const value = event.target.checked;
+      const {
+        setting
+      } = this.state;
+      if (setting.isChecked === value) {
+        return;
+      }
+      const newSetting = Object.assign({}, setting, {
+        isChecked: value
+      });
+      this.setState({
+        setting: newSetting
+      }, () => {
+        this.props.onUpdateFieldSetting(newSetting);
+      });
+    });
+    this.state = {
+      setting: null
+    };
+  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (JSON.stringify(nextProps.setting) !== JSON.stringify(prevState.setting)) {
+      return {
+        setting: nextProps.setting
+      };
+    }
+    return null;
+  }
+  render() {
+    const {
+      setting
+    } = this.state;
+    const placeholder = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font ".concat(setting.columnIcon)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-truncate"
+    }, setting.columnName));
+    return /*#__PURE__*/React.createElement(_DTableSwitch, {
+      checked: setting.isChecked,
+      placeholder: placeholder,
+      onChange: this.onUpdateFieldSetting,
+      switchClassName: "dropdown-item"
+    });
+  }
+}
+export default HideColumnItem;

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/hide-column-popover.js

@@ -0,0 +1,203 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { UncontrolledPopover } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import isHotkey from 'is-hotkey';
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import { getEventClassName } from '../utils/utils';
+import HideColumnItem from './hide-column-item';
+class HideColumnPopover extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "hidePopover", e => {
+      if (this.popoverRef && !getEventClassName(e).includes('popover') && !this.popoverRef.contains(e.target)) {
+        this.props.onPopoverToggle(e);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    });
+    _defineProperty(this, "onHotKey", e => {
+      if (isHotkey('esc', e)) {
+        e.preventDefault();
+        this.props.onPopoverToggle();
+      }
+    });
+    _defineProperty(this, "onChooseAllColumns", () => {
+      const {
+        columns
+      } = this.props;
+      let shownColumnKeys = [];
+      const {
+        fieldSettings
+      } = this.state;
+      const newFieldSettings = fieldSettings.map(setting => {
+        setting.isChecked = true;
+        shownColumnKeys.push(setting.key);
+        return setting;
+      });
+      shownColumnKeys.unshift(columns[0].key);
+      this.setState({
+        fieldSettings: newFieldSettings
+      }, () => {
+        this.props.modifyHiddenColumns(shownColumnKeys);
+      });
+    });
+    _defineProperty(this, "onHideAllColumns", () => {
+      const {
+        columns
+      } = this.props;
+      const newFieldSettings = this.state.fieldSettings.map(setting => {
+        setting.isChecked = false;
+        return setting;
+      });
+      // table page cannot hide first column
+      const shownColumnKeys = [columns[0].key];
+      this.setState({
+        fieldSettings: newFieldSettings
+      }, () => {
+        this.props.modifyHiddenColumns(shownColumnKeys);
+      });
+    });
+    _defineProperty(this, "onUpdateFieldSetting", columnSetting => {
+      const {
+        columns
+      } = this.props;
+      const {
+        fieldSettings
+      } = this.state;
+      let shownColumnKeys = [];
+      const newFieldSettings = fieldSettings.map(setting => {
+        if (setting.key === columnSetting.key) {
+          setting = columnSetting;
+        }
+        if (setting.isChecked) {
+          shownColumnKeys.push(setting.key);
+        }
+        return setting;
+      });
+      // table page cannot hide first column
+      if (!shownColumnKeys.includes(columns[0].key)) {
+        shownColumnKeys.unshift(columns[0].key);
+      }
+      this.setState({
+        fieldSettings: newFieldSettings
+      }, () => {
+        this.props.modifyHiddenColumns(shownColumnKeys);
+      });
+    });
+    _defineProperty(this, "onPopoverInsideClick", e => {
+      e.stopPropagation();
+    });
+    _defineProperty(this, "onChangeSearch", event => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === event.target.value) {
+        return;
+      }
+      searchVal = event.target.value;
+      this.setState({
+        searchVal
+      });
+    });
+    _defineProperty(this, "getFilteredColumns", () => {
+      let {
+        searchVal,
+        fieldSettings
+      } = this.state;
+      searchVal = searchVal.toLowerCase();
+      if (!searchVal) {
+        return fieldSettings;
+      }
+      return fieldSettings.filter(setting => {
+        return setting.columnName.toLowerCase().includes(searchVal);
+      });
+    });
+    this.state = {
+      fieldSettings: [],
+      searchVal: ''
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('click', this.hidePopover, true);
+    document.addEventListener('keydown', this.onHotKey);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.hidePopover, true);
+    document.removeEventListener('keydown', this.onHotKey);
+  }
+  static getDerivedStateFromProps(nextProps, preState) {
+    const {
+      columns,
+      shownColumnKeys
+    } = nextProps;
+    let fieldSettings = columns.map(column => {
+      return {
+        key: column.key,
+        isChecked: shownColumnKeys.includes(column.key),
+        columnName: column.name,
+        columnIcon: COLUMNS_ICON_CONFIG[column.type]
+      };
+    });
+    // table page cannot hide first column
+    fieldSettings.shift();
+    return {
+      fieldSettings: fieldSettings
+    };
+  }
+  render() {
+    const {
+      target,
+      t
+    } = this.props;
+    const fieldSettings = this.getFilteredColumns();
+    const isEmpty = fieldSettings.length === 0 ? true : false;
+    return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      placement: "auto-start",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true,
+      className: "hidden-column-popover",
+      boundariesElement: document.body
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.popoverRef = ref,
+      onClick: this.onPopoverInsideClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "field-settings ".concat(isEmpty ? 'empty' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "search-column"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: t('Search_column'),
+      value: this.state.searchVal,
+      onChange: this.onChangeSearch
+    })), isEmpty && /*#__PURE__*/React.createElement("div", {
+      className: "empty-hidden-columns-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "empty-hidden-columns-list"
+    }, t('No_columns_available_to_be_hidden'))), !isEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "field-settings-body",
+      style: {
+        maxHeight: window.innerHeight - 400 + 'px'
+      }
+    }, fieldSettings.map(setting => {
+      return /*#__PURE__*/React.createElement(HideColumnItem, {
+        key: setting.key,
+        setting: setting,
+        onUpdateFieldSetting: this.onUpdateFieldSetting
+      });
+    })), !this.state.searchVal && /*#__PURE__*/React.createElement("div", {
+      className: "field-settings-header"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hide-all px-2",
+      onClick: this.onHideAllColumns
+    }, t('Hide_all')), /*#__PURE__*/React.createElement("div", {
+      className: "show-all px-2",
+      onClick: this.onChooseAllColumns
+    }, t('Show_all')))))));
+  }
+}
+export default withTranslation('sdoc-editor')(HideColumnPopover);

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/index.css

@@ -0,0 +1,105 @@
+.field-settings {
+  margin: 8px 0;
+}
+
+.field-settings .search-column {
+  height: 28px;
+  padding: 0 10px;
+}
+
+.field-settings .search-column input {
+  width: 100%;
+  height: 28px;
+}
+
+.field-settings .field-settings-header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 17px;
+}
+
+.field-settings-header .hide-all,
+.field-settings-header .show-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  background: #f5f5f5;
+  color: #999;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.field-settings-header .hide-all:hover,
+.field-settings-header .show-all:hover {
+  background: #e9e9e9;
+  color: #333;
+}
+
+.field-settings .field-settings-body {
+  padding: 0.5rem 0;
+  max-height: 300px;
+  overflow-x: auto;
+  min-width: 260px;
+}
+
+.field-settings .field-settings-body .custom-switch {
+  cursor: pointer;
+}
+
+.field-settings .field-settings-body>div {
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  cursor: pointer;
+}
+
+.field-settings .field-settings-body>div:hover {
+  background: #f5f5f5;
+}
+
+.field-settings .empty-hidden-columns-container {
+  height: 80px;
+  width: 270px;
+  padding: 10px;
+}
+
+.field-settings .empty-hidden-columns-list {
+  padding: 0.25rem;
+  font-size: 13px;
+  color: #999;
+}
+
+/* switch component */
+.field-settings .custom-switch {
+  padding-left: 0;
+}
+
+.field-settings .custom-switch .dtable-font {
+  color: #666;
+  display: inline-block;
+  line-height: 24px;
+  margin-right: 8px;
+  transform: scale(.8);
+}
+
+.field-settings .custom-switch .custom-switch-description {
+  width: 192px;
+}
+
+.field-settings .custom-switch .custom-switch-indicator {
+  border-radius: 6px;
+  height: 12px;
+  width: 22px;
+}
+
+.field-settings .custom-switch .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.field-settings .custom-switch .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/index.js

@@ -1,8 +1,89 @@
-import React from 'react';
-export default function HideColumnSetter() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "setting-item-btn columns-setting"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "dtable-font dtable-icon-hide mr-2"
-  }), /*#__PURE__*/React.createElement("div", null, "Hide column setter"));
-}
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import isEqual from 'lodash.isequal';
+import HideColumnPopover from './hide-column-popover';
+import './index.css';
+class HideColumnSetter extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onHideColumnToggle", () => {
+      const {
+        isShowHideColumnSetter
+      } = this.state;
+      if (isShowHideColumnSetter) {
+        const {
+          shownColumnKeys
+        } = this.state;
+        this.props.onSettingUpdate(shownColumnKeys);
+      }
+      this.setState({
+        isShowHideColumnSetter: !isShowHideColumnSetter
+      });
+    });
+    _defineProperty(this, "modifyHiddenColumns", shownColumnKeys => {
+      this.setState({
+        shownColumnKeys
+      });
+    });
+    this.state = {
+      isShowHideColumnSetter: false,
+      shownColumnKeys: props.shownColumnKeys || []
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      shownColumnKeys: oldShownColumnKeys
+    } = this.props;
+    const {
+      shownColumnKeys: newShownColumnKeys
+    } = nextProps;
+    if (!isEqual(oldShownColumnKeys, newShownColumnKeys)) {
+      this.setState({
+        isShowHideColumnSetter: false,
+        shownColumnKeys: newShownColumnKeys
+      });
+    }
+  }
+  render() {
+    const {
+      target,
+      columns,
+      wrapperClass,
+      t
+    } = this.props;
+    const {
+      shownColumnKeys
+    } = this.state;
+    if (!columns) return null;
+    let message = t('Hide_columns');
+    const hiddenColumns = columns.filter(column => !shownColumnKeys.includes(column.key));
+    const hiddenColumnsLength = hiddenColumns.length;
+    if (hiddenColumnsLength === 1) {
+      message = t('1_hidden_column');
+    } else if (hiddenColumnsLength > 1) {
+      message = hiddenColumnsLength + ' ' + t('hidden_columns');
+    }
+    let labelClass = wrapperClass || '';
+    labelClass = labelClass && hiddenColumnsLength > 0 ? labelClass + ' active' : labelClass;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "setting-item ".concat(labelClass ? '' : 'mb-1')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 setting-item-btn filters-setting-btn ".concat(labelClass),
+      onClick: this.onHideColumnToggle
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-hide mr-2",
+      id: target
+    }), /*#__PURE__*/React.createElement("span", null, message))), this.state.isShowHideColumnSetter && /*#__PURE__*/React.createElement(HideColumnPopover, {
+      target: target,
+      columns: columns,
+      shownColumnKeys: shownColumnKeys,
+      modifyHiddenColumns: this.modifyHiddenColumns,
+      onPopoverToggle: this.onHideColumnToggle
+    }));
+  }
+}
+_defineProperty(HideColumnSetter, "defaultProps", {
+  target: 'hide-column-popover'
+});
+export default withTranslation('sdoc-editor')(HideColumnSetter);

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/index.css

@@ -60,6 +60,10 @@
   width: 100%;
 }
 
+.document-plugin .document-seatable-settings-container .setting-item-btn:hover {
+  background-color: #efefef;
+}
+
 .document-plugin .document-seatable-settings-container .setting-item-btn .dtable-font {
   color: #666;
   font-size: 14px;