@seafile/sdoc-editor 0.3.25 → 0.3.26-2

package/dist/api/seafile-api.js

@@ -199,5 +199,25 @@ class SeafileAPI {
       data: params
     });
   }
+  getFileDownloadLink(repoID, filePath) {
+    const path = encodeURIComponent(filePath);
+    const url = '/api2/repos/' + repoID + '/file/?p=' + path + '&dl=1';
+    return this.req.get(url);
+  }
+  getFileContentByLink(downloadLink) {
+    return this.req.get(downloadLink);
+  }
+  getDtableServer(url) {
+    return this.req.get(url);
+  }
+  getDtables(url) {
+    return this.req.get(url);
+  }
+  getDtableMetaData(url, tableName) {
+    return this.req.post(url, {
+      'sql': "select * from ".concat(tableName),
+      'convert_keys': true
+    });
+  }
 }
 export default SeafileAPI;

package/dist/basic-sdk/constants/index.js

@@ -14,7 +14,8 @@ export const INTERNAL_EVENT = {
   UPDATE_TAG_VIEW: 'update_tag_view',
   COMMENT_LIST_CLICK: 'comment_list_click',
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
-  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker'
+  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker',
+  OPEN_SELECT: 'open_select'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react';
+import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo, useCallback } from 'react';
 import { Editor } from '@seafile/slate';
 import deepCopy from 'deep-copy';
 import context from '../../context';
@@ -17,6 +17,9 @@ import { HeaderToolbar } from '../extension';
 import ReadOnlyArticle from '../views/readonly-article';
 import { isMobile } from '../../utils';
 import { CollaboratorsProvider } from '../../hooks';
+import { EventBus } from '../../basic-sdk';
+import { EXTERNAL_EVENT } from '../../constants';
+import { getDtableBases } from '../extension/plugins/chart/helpers';
 const SdocEditor = forwardRef((_ref, ref) => {
   let {
     editor,
@@ -42,7 +45,7 @@ const SdocEditor = forwardRef((_ref, ref) => {
   const [slateValue, setSlateValue] = useState(document.children);
   useEffect(() => {
     validEditor.readonly = false;
-  }, []);
+  }, [validEditor.readonly]);
 
   // useMount: init socket connection
   useEffect(() => {
@@ -76,6 +79,21 @@ const SdocEditor = forwardRef((_ref, ref) => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const onRefreshDocument = useCallback(() => {
+    window.location.reload();
+  }, []);
+
+  // useMount: refresh document
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.subscribe(EXTERNAL_EVENT.REFRESH_DOCUMENT, onRefreshDocument);
+  }, [onRefreshDocument]);
+
+  // useMount: get dtable bases
+  useEffect(() => {
+    getDtableBases(validEditor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // The parent component can call the method of this component through ref
   useImperativeHandle(ref, () => ({

package/dist/basic-sdk/extension/constants/element-type.js

@@ -23,6 +23,7 @@ export const SDOC_LINK = 'sdoc_link';
 export const FILE_LINK = 'file_link';
 export const IMAGE = 'image';
 export const CALL_OUT = 'callout';
+export const CHART = 'chart';
 
 // font
 export const FONT_SIZE = 'font-size';

package/dist/basic-sdk/extension/constants/index.js

@@ -1,6 +1,6 @@
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT } from './element-type';
+import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, CHART, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT } from './element-type';
 export { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR } from './color';
 export { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 export { DIFF_TYPE, ADDED_STYLE, DELETED_STYLE } from './diff-view';
@@ -55,4 +55,4 @@ export const MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [HEADER6]: [CALL_OUT],
   [CALL_OUT]: [CALL_OUT]
 };
-export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT };
+export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, CHART, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT };

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -1,5 +1,5 @@
 import { RECENT_USED_HIGHLIGHT_COLORS_KEY, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, RECENT_USED_FONT_COLORS_KEY, DEFAULT_FONT_COLOR, DEFAULT_LAST_USED_FONT_COLOR } from './color';
-import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH, CALL_OUT } from './element-type';
+import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, CHART, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH, CALL_OUT } from './element-type';
 export const UNDO = 'undo';
 export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
@@ -80,6 +80,11 @@ export const MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-image',
     text: 'Insert_image'
   },
+  [CHART]: {
+    id: "sdoc_".concat(CHART),
+    iconClass: 'sdocfont sdoc-chart',
+    text: 'Insert_chart'
+  },
   [TABLE]: {
     id: "sdoc_".concat(TABLE),
     iconClass: 'sdocfont sdoc-table',

package/dist/basic-sdk/extension/plugins/chart/chart-components/base-setting/index.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { withTranslation } from 'react-i18next';
+import DtableSelect from '../common-settings/dtable-select-setting';
+const BaseSetting = _ref => {
+  let {
+    tables,
+    activeTableId,
+    onSelectedBaseChanged,
+    t
+  } = _ref;
+  const getTablesOptions = useCallback(() => {
+    return Array.isArray(tables) && tables.map(table => {
+      return {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, table.base_name),
+        value: {
+          name: table.base_name,
+          id: table.base_api_token
+        }
+      };
+    });
+  }, [tables]);
+  const getActiveTableOption = useCallback(() => {
+    if (!activeTableId) return null;
+    const tablesOptions = getTablesOptions();
+    return tablesOptions.find(option => {
+      const {
+        id
+      } = option.value;
+      return activeTableId === id;
+    });
+  }, [activeTableId, getTablesOptions]);
+  const activeTableOption = getActiveTableOption();
+  const tablesOptions = getTablesOptions();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-chart-setting-item"
+  }, /*#__PURE__*/React.createElement("label", null, t('Base')), /*#__PURE__*/React.createElement(DtableSelect, {
+    value: activeTableOption,
+    options: tablesOptions,
+    onChange: option => {
+      onSelectedBaseChanged(option);
+    }
+  }));
+};
+export default withTranslation('sdoc-editor')(BaseSetting);

package/dist/basic-sdk/extension/plugins/chart/chart-components/chart-type-setting/index.css

@@ -0,0 +1,29 @@
+.sdoc-chart-selected-type-container {
+  height: 38px;
+  border: 1px solid hsl(0, 0%, 80%);
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 3px;
+  justify-content: space-between;
+  background-color: #f5f5f5;
+}
+
+.sdoc-chart-switch-type-container {
+  height: 24px;
+  width: 24px;
+  text-align: center;
+  line-height: 24px;
+  margin-left: 10px;
+}
+
+.sdoc-chart-switch-type-container:hover {
+  cursor: pointer;
+}
+
+.sdoc-chart-switch-type-container .sdoc-chart-type-switch-icon {
+  color: hsl(0, 0%, 80%);
+}
+
+.sdoc-chart-switch-type-container:hover .sdoc-chart-type-switch-icon {
+  color: hsl(0, 0%, 60%);
+}

package/dist/basic-sdk/extension/plugins/chart/chart-components/chart-type-setting/index.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import { STATISTIC_TYPE_SHOW } from '../../constants';
+import './index.css';
+class ChartTypeSetting extends Component {
+  render() {
+    const {
+      element,
+      t
+    } = this.props;
+    const {
+      statItem
+    } = element;
+    const {
+      type
+    } = statItem;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, t('Chart_type')), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-chart-selected-type-container d-flex align-items-center"
+    }, /*#__PURE__*/React.createElement("span", null, t(STATISTIC_TYPE_SHOW[type])))));
+  }
+}
+export default withTranslation('sdoc-editor')(ChartTypeSetting);

package/dist/basic-sdk/extension/plugins/chart/chart-components/common-settings/column-setting.js

@@ -0,0 +1,119 @@
+import React, { Fragment } from 'react';
+import { COLUMN_OPTIONS } from 'dtable-utils';
+import { withTranslation } from 'react-i18next';
+import DtableSelect from './dtable-select-setting';
+import DtableUtils from '../../chart-utils/common-utils/dtable-utils';
+class ColumnSetting extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.getColumnsOptions = () => {
+      const {
+        columns,
+        specifiedColumnType
+      } = this.props;
+      if (!columns || columns.length === 0) return [];
+      let validColumns = columns;
+      if (specifiedColumnType) {
+        validColumns = columns.filter(column => {
+          if (specifiedColumnType === 'text') {
+            return DtableUtils.isTextColumn(column);
+          }
+          if (specifiedColumnType === 'date') {
+            return DtableUtils.isDateColumn(column);
+          }
+          if (specifiedColumnType === 'number') {
+            return DtableUtils.isNumericColumn(column);
+          }
+          if (specifiedColumnType === 'geolocation') {
+            return column.type === 'geolocation';
+          }
+          if (specifiedColumnType === 'dateAndNumber') {
+            return DtableUtils.isDateColumn(column) || DtableUtils.isNumericColumn(column);
+          }
+          return false;
+        });
+      }
+      return validColumns.map(column => {
+        const {
+          name,
+          key,
+          type
+        } = column;
+        const option = COLUMN_OPTIONS.find(o => o.type === type) || {};
+        if (key === null) {
+          return {
+            label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+              className: "column-header-icon"
+            }, /*#__PURE__*/React.createElement("i", {
+              className: option.iconClass
+            })), /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#999999'
+              },
+              className: "select-option-name"
+            }, name)),
+            value: {
+              name,
+              key,
+              type
+            }
+          };
+        }
+        return {
+          label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "column-header-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: option.iconClass
+          })), /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, name)),
+          value: {
+            name,
+            key,
+            type
+          }
+        };
+      });
+    };
+    this.getActiveColumnOption = columnsOptions => {
+      const {
+        activeColumnKey
+      } = this.props;
+      if (!activeColumnKey) return null;
+      return columnsOptions.find(option => {
+        const {
+          key
+        } = option.value;
+        return activeColumnKey === key;
+      });
+    };
+    this.onSelectedColumnChanged = option => {
+      const {
+        key
+      } = option && option.value;
+      const {
+        activeColumnKey
+      } = this.props;
+      if (key === activeColumnKey) return;
+      this.props.onSelectedColumnChanged(option);
+    };
+  }
+  render() {
+    const {
+      noOptionsMessage
+    } = this.props;
+    const columnsOptions = this.getColumnsOptions();
+    const activeColumnOption = this.getActiveColumnOption(columnsOptions);
+    return /*#__PURE__*/React.createElement(DtableSelect, {
+      value: activeColumnOption,
+      options: columnsOptions,
+      placeholder: this.props.t('Select_a_column'),
+      onChange: this.onSelectedColumnChanged,
+      noOptionsMessage: noOptionsMessage
+    });
+  }
+}
+ColumnSetting.defaultProps = {
+  specifiedColumnType: ''
+};
+export default withTranslation('sdoc-editor')(ColumnSetting);

package/dist/basic-sdk/extension/plugins/chart/chart-components/common-settings/data-sort-setting.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import SeaTableRadio from '../seatable-radio';
+import { DATA_SORT_TYPES, DATA_SORT_TYPE, DATA_SORT_TYPE_LABEL } from '../../constants';
+class DataSort extends Component {
+  constructor(props) {
+    super(props);
+    this.onChangeSortType = type => {
+      const {
+        settingKey,
+        settingValue: sortType
+      } = this.props;
+      if (type === sortType) return;
+      this.setState({
+        sortType: type
+      }, () => {
+        const newType = type === DATA_SORT_TYPE.NOT_SORTED ? '' : type;
+        const newSetting = {
+          [settingKey]: newType
+        };
+        this.props.updateSetting(newSetting);
+      });
+    };
+    const {
+      settingValue: _sortType
+    } = props;
+    this.state = {
+      sortType: _sortType || DATA_SORT_TYPE.NOT_SORTED
+    };
+  }
+  render() {
+    const {
+      sortType
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-chart-setting-item"
+    }, /*#__PURE__*/React.createElement("label", null, this.props.t('Data_sorting')), DATA_SORT_TYPES.map((item, index) => {
+      const isChecked = sortType === item;
+      return /*#__PURE__*/React.createElement("div", {
+        key: 'chart-group-item-' + index,
+        className: 'chart-group-item'
+      }, /*#__PURE__*/React.createElement(SeaTableRadio, {
+        isChecked: isChecked,
+        onCheckedChange: this.onChangeSortType.bind(this, item),
+        label: this.props.t(DATA_SORT_TYPE_LABEL[item])
+      }));
+    }));
+  }
+}
+DataSort.defaultProps = {
+  settingKey: 'sort_type',
+  settingValue: ''
+};
+export default withTranslation('sdoc-editor')(DataSort);

package/dist/basic-sdk/extension/plugins/chart/chart-components/common-settings/date-granularities.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import DTableSelect from './dtable-select-setting';
+import { DATE_GRANULARITIES } from '../../constants/date-constants';
+import { STATISTICS_COUNT_SHOW } from '../../constants';
+class DateGranularities extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getDateGranularitiesOptions = () => {
+      return DATE_GRANULARITIES.map(g => {
+        return {
+          value: g,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, this.props.t(STATISTICS_COUNT_SHOW[g]))
+        };
+      });
+    };
+    this.getActiveDateGranularityOption = () => {
+      const {
+        settingValue
+      } = this.props;
+      if (!settingValue) return null;
+      return this.dateGranularitiesOptions.find(item => item.value === settingValue);
+    };
+    this.onSelectDateGranularity = option => {
+      const {
+        settingKey,
+        settingValue
+      } = this.props;
+      const {
+        value
+      } = option;
+      if (value === settingValue) return;
+      this.props.updateSetting({
+        [settingKey]: value
+      });
+    };
+    this.dateGranularitiesOptions = this.getDateGranularitiesOptions();
+  }
+  render() {
+    const activeValue = this.getActiveDateGranularityOption();
+    return /*#__PURE__*/React.createElement("div", {
+      className: "mt-1"
+    }, /*#__PURE__*/React.createElement(DTableSelect, {
+      value: activeValue,
+      options: this.dateGranularitiesOptions,
+      onChange: this.onSelectDateGranularity
+    }));
+  }
+}
+DateGranularities.defaultProps = {
+  settingKey: ''
+};
+export default withTranslation('sdoc-editor')(DateGranularities);

package/dist/basic-sdk/extension/plugins/chart/chart-components/common-settings/dtable-select-setting.js

@@ -0,0 +1,86 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import Select, { components } from 'react-select';
+const DropdownIndicator = props => {
+  return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-drop-down parameter-icon"
+  }));
+};
+const PluginSelectStyle = {
+  control: styles => _objectSpread(_objectSpread({}, styles), {}, {
+    fontSize: '14px',
+    cursor: 'pointer',
+    lineHeight: '1.5'
+  }),
+  indicatorSeparator: () => {},
+  option: (provided, state) => {
+    const {
+      isDisabled,
+      isSelected,
+      isFocused
+    } = state;
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isSelected ? '#20a0ff' : isFocused ? '#f5f5f5' : '#fff',
+      '.dtable-font': {
+        color: isSelected ? '#fff' : '#aaa'
+      },
+      fontSize: '14px',
+      wordBreak: 'break-all'
+    });
+  }
+};
+class DTableSelect extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.getMenuPortalTarget = () => {
+      return document.querySelector('.modal');
+    };
+  }
+  componentDidMount() {
+    this.forceUpdate();
+  }
+  render() {
+    const {
+      options,
+      onChange,
+      value,
+      isSearchable,
+      placeholder,
+      classNamePrefix
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      value: value,
+      onChange: onChange,
+      options: options,
+      styles: PluginSelectStyle,
+      components: {
+        DropdownIndicator,
+        NoOptionsMessage: props => {
+          return /*#__PURE__*/React.createElement("div", Object.assign({}, props.innerProps, {
+            className: "d-flex align-items-center justify-content-center",
+            style: {
+              margin: '6px 10px',
+              color: '#c2c2c2'
+            }
+          }), this.props.t('No_options'));
+        }
+      },
+      placeholder: placeholder,
+      isSearchable: isSearchable,
+      menuPosition: 'fixed',
+      menuShouldScrollIntoView: true,
+      menuPortalTarget: this.getMenuPortalTarget(),
+      classNamePrefix: classNamePrefix
+    });
+  }
+}
+DTableSelect.defaultProps = {
+  options: [],
+  value: null,
+  isSearchable: false,
+  placeholder: '',
+  classNamePrefix: ''
+};
+export default withTranslation('sdoc-editor')(DTableSelect);

package/dist/basic-sdk/extension/plugins/chart/chart-components/common-settings/geolocation-granularities.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import DTableSelect from './dtable-select-setting';
+import { GEOLOCATION_GRANULARITIES } from '../../constants/geolocation-constants';
+import { STATISTICS_COUNT_SHOW } from '../../constants';
+class GeolocationGranlarities extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getGranularitiesOptions = () => {
+      let types = GEOLOCATION_GRANULARITIES;
+      const {
+        supportGeolocationTypes
+      } = this.props;
+      if (supportGeolocationTypes && supportGeolocationTypes.length > 0) {
+        types = GEOLOCATION_GRANULARITIES.filter(item => supportGeolocationTypes.includes(item));
+      }
+      return types.map(g => {
+        return {
+          value: g,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, this.props.t(STATISTICS_COUNT_SHOW[g]))
+        };
+      });
+    };
+    this.getGeolocationGranularitiesOptions = () => {
+      const {
+        groupbyColumn: column,
+        supportGeolocationTypes
+      } = this.props;
+      // custom defined
+      if (supportGeolocationTypes && supportGeolocationTypes.length > 0) {
+        return this.geolocationGranularitiesOptions;
+      }
+      let geolocationGranularitiesOptions = this.geolocationGranularitiesOptions;
+      if (column) {
+        const {
+          geo_format
+        } = column.data || {};
+        if (geo_format === 'province') {
+          geolocationGranularitiesOptions = geolocationGranularitiesOptions.filter(option => option.value === 'province');
+        }
+        if (geo_format === 'province_city') {
+          geolocationGranularitiesOptions = geolocationGranularitiesOptions.filter(option => option.value !== 'district');
+        }
+        if (geo_format === 'country_region' || geo_format === 'lng_lat') {
+          geolocationGranularitiesOptions = [];
+        }
+      }
+      return geolocationGranularitiesOptions;
+    };
+    this.getActiveGeolocationGranularity = () => {
+      const {
+        settingValue,
+        supportGeolocationTypes
+      } = this.props;
+      const {
+        geolocationGranularitiesOptions
+      } = this;
+
+      // custom define
+      if (supportGeolocationTypes && supportGeolocationTypes.length > 0) {
+        return geolocationGranularitiesOptions.find(g => g.value === settingValue) || geolocationGranularitiesOptions[0];
+      }
+      return geolocationGranularitiesOptions.find(g => g.value === settingValue) || geolocationGranularitiesOptions[2];
+    };
+    this.onSelectGeolocationGranularity = option => {
+      const {
+        settingKey,
+        settingValue
+      } = this.props;
+      const {
+        value
+      } = option;
+      if (value === settingValue) return;
+      this.props.updateSetting({
+        [settingKey]: value
+      });
+    };
+    this.geolocationGranularitiesOptions = this.getGranularitiesOptions();
+  }
+  render() {
+    const activeValue = this.getActiveGeolocationGranularity();
+    const geolocationGranularitiesOptions = this.getGeolocationGranularitiesOptions();
+    return /*#__PURE__*/React.createElement("div", {
+      className: "mt-1"
+    }, /*#__PURE__*/React.createElement(DTableSelect, {
+      value: activeValue,
+      options: geolocationGranularitiesOptions,
+      onChange: this.onSelectGeolocationGranularity
+    }));
+  }
+}
+GeolocationGranlarities.defaultProps = {
+  settingKey: ''
+};
+export default withTranslation('sdoc-editor')(GeolocationGranlarities);