@seafile/sdoc-editor 1.0.4 → 1.0.5

package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.js

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { ElementPopover } from '../../../commons';
+import TableSettings from '../seatable-settings';
 import './index.css';
 export default function OpMenu(_ref) {
   let {
@@ -7,11 +8,23 @@ export default function OpMenu(_ref) {
     element,
     menuPosition
   } = _ref;
-  const [isShowSettingPanel, setIsShowSettingPanel] = useState(false);
+  const [isShowSeaTableSetting, setIsShowSeaTableSetting] = useState(false);
+  const onShowSettings = useCallback(() => {
+    setIsShowSeaTableSetting(true);
+  }, []);
+  const onHideSettings = useCallback(() => {
+    setIsShowSeaTableSetting(false);
+  }, []);
+  console.log(isShowSeaTableSetting);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
     className: "seatable-op-menu",
     style: menuPosition
   }, /*#__PURE__*/React.createElement("span", {
-    className: "sdocfont sdoc-settings"
-  }))));
+    className: "sdocfont sdoc-settings",
+    onClick: onShowSettings
+  }))), isShowSeaTableSetting && /*#__PURE__*/React.createElement(TableSettings, {
+    editor: editor,
+    element: element,
+    onHideSettings: onHideSettings
+  }));
 }

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

@@ -0,0 +1,28 @@
+.document-plugin .widget-table-switch-properties .custom-switch-description {
+  margin-left: 0;
+  white-space: normal;
+  flex: 1;
+  margin-right: .5rem;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch {
+  width: 100%;
+  justify-content: space-between;
+  cursor: pointer;
+  padding-left: 0;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/custom-switch/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DTableSwitch } from 'dtable-ui-component';
+import './index.css';
+function CustomSwitch(props) {
+  const {
+    isLocked,
+    checked,
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement(DTableSwitch, {
+    checked: checked,
+    disabled: isLocked,
+    switchClassName: "widget-table-switch-properties w-100",
+    placeholder: title,
+    onChange: () => props.onPropertiesChanged(!checked)
+  });
+}
+export default CustomSwitch;

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

@@ -0,0 +1,8 @@
+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"));
+}

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

@@ -0,0 +1,8 @@
+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"));
+}

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

@@ -0,0 +1,66 @@
+.document-seatable-settings-wrapper {
+  position: fixed;
+  right: 0;
+  top: 200px;
+  width: 300px;
+  bottom: 0;
+  background-color: #fff;
+  border-left: 1px solid #e4e4e4;
+  transition: width .25s ease-in-out 0s;
+  z-index: 4;
+  display: flex;
+}
+
+.document-seatable-settings-container {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.document-seatable-settings-container .document-seatable-settings-header {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e4e4e4;
+}
+
+.document-seatable-settings-container .document-seatable-settings-content {
+  height: calc(100% - 49px);
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px 50px;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item {
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.document-plugin .document-seatable-settings-container .setting-divide-line {
+  border-bottom: 1px solid #e2e2e2;
+  margin: 14px 0;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item.table-setting {
+  margin-bottom: 0;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item-btn {
+  display: flex;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 22px;
+  padding: 3px 4px;
+  width: 100%;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item-btn .dtable-font {
+  color: #666;
+  font-size: 14px;
+}

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

@@ -0,0 +1,73 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CustomSwitch from './custom-switch';
+import './index.css';
+import TableSetting from './table-setting';
+import FilterSetter from './filter-setter';
+import SortSetter from './sort-setter';
+import HideColumnSetter from './hide-column-setter';
+export default function TableSettings(_ref) {
+  let {
+    editor,
+    element,
+    onHideSettings
+  } = _ref;
+  const [settings, updateSettings] = useState(element);
+  const {
+    t
+  } = useTranslation();
+  const onTableChange = useCallback(option => {
+    console.log(option);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-header"
+  }, /*#__PURE__*/React.createElement("span", null, t('SeaTable_settings')), /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-x",
+    onClick: onHideSettings
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-content"
+  }, /*#__PURE__*/React.createElement(TableSetting, {
+    tables: editor.tables,
+    element: settings,
+    onTableChange: onTableChange
+  }), /*#__PURE__*/React.createElement("div", {
+    class: "setting-divide-line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, "Data settings"), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item filter-setter"
+  }, /*#__PURE__*/React.createElement(FilterSetter, null)), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item sort-setter"
+  }, /*#__PURE__*/React.createElement(SortSetter, null)), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item hide-column-setter"
+  }, /*#__PURE__*/React.createElement(HideColumnSetter, null)), /*#__PURE__*/React.createElement("div", {
+    class: "setting-divide-line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, "Style Settings"), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['show_record_numbers'],
+    isLocked: false,
+    title: t('Show_record_numbers'),
+    onPropertiesChanged: value => this.onSwitchPropertiesChanged('showRowNumber', value)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['alternate_color'],
+    isLocked: false,
+    title: t('Alternate_color'),
+    onPropertiesChanged: value => this.onSwitchPropertiesChanged('applyBandedTableDesign', value)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['select_column_display_option_color'] === false ? false : true,
+    isLocked: false,
+    title: t('Select_column_display_option_color_tip'),
+    onPropertiesChanged: value => this.onSwitchPropertiesChanged('select_column_display_option_color', value)
+  })))));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function SortSetter() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "setting-item-btn sorts-setting"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-sort mr-2"
+  }), /*#__PURE__*/React.createElement("div", null, "Sort setter"));
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/table-setting/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { Label } from 'reactstrap';
+import { DTableSelect } from 'dtable-ui-component';
+class TableSetting extends React.Component {
+  render() {
+    const {
+      tables,
+      element,
+      t
+    } = this.props;
+    const {
+      table_id
+    } = element;
+    const options = tables.map(item => {
+      let value = item._id;
+      let label = item.name;
+      return {
+        value,
+        label
+      };
+    });
+    let selectedOption;
+    if (table_id) {
+      selectedOption = options.find(option => option.value === table_id);
+    }
+    if (!selectedOption) {
+      selectedOption = options[0];
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "setting-item table-setting"
+    }, /*#__PURE__*/React.createElement(Label, null, t('Table')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedOption,
+      options: options,
+      onChange: this.props.onTableChange,
+      menuPortalTarget: "element-settings"
+    }));
+  }
+}
+export default withTranslation('sdoc-editor')(TableSetting);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/cs/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/de/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/en/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/es/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/fr/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/it/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/ru/sdoc-editor.json

@@ -463,6 +463,9 @@
   "Horizontal_align": "Горизонтальное выравнивание",
   "SeaTable_column": "Столбец SeaTable",
   "SeaTable_table": "Таблица SeaTable",
-  "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "And_x_more_records": "и ещё {{count}} записей",
+  "Print_limit_exceeded": "При превышении лимита печати будут напечатаны только первые 200 строк",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable 列",
   "SeaTable_table": "SeaTable 子表",
   "And_x_more_records": "以及另外 {{count}} 条记录",
-  "Print_limit_exceeded": "超过打印限制, 只会打印前 200 行"
+  "Print_limit_exceeded": "超过打印限制, 只会打印前 200 行",
+  "Show_record_numbers": "显示记录编号",
+  "Alternate_color": "单双行不同背景色",
+  "Select_column_display_option_color_tip": "单选列和多选列显示选项颜色"
 }