@seafile/sdoc-editor 0.3.26-1 → 0.3.26-2

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

@@ -91,7 +91,7 @@ const SdocEditor = forwardRef((_ref, ref) => {
 
   // useMount: get dtable bases
   useEffect(() => {
-    getDtableBases(editor);
+    getDtableBases(validEditor);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

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

@@ -5,7 +5,7 @@
   padding-left: 8px;
   padding-right: 3px;
   justify-content: space-between;
-  background-color: hsl(0, 0%, 90%);
+  background-color: #f5f5f5;
 }
 
 .sdoc-chart-switch-type-container {

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

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { COLUMN_OPTIONS } from 'dtable-sdk';
+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';

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/common-add-tool.js

@@ -0,0 +1,23 @@
+import React from 'react';
+function CommonAddTool(_ref) {
+  let {
+    callBack,
+    footerName,
+    className,
+    addIconClassName,
+    hideIcon,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "add-item-btn ".concat(className ? className : ''),
+    style: style,
+    onClick: e => {
+      callBack(e);
+    }
+  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-truncate"
+  }, footerName));
+}
+export default CommonAddTool;

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/common-hooks.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+function useClickOutsideEffect(ref, callback) {
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [ref, callback]);
+}
+export { useClickOutsideEffect };

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/constants.js

@@ -0,0 +1,10 @@
+export const DEPARTMENT_SELECT_RANGE_OPTIONS = [{
+  name: 'Current_user_department',
+  type: 'current_user_department'
+}, {
+  name: 'Current_user_department_and_sub',
+  type: 'current_user_department_and_sub'
+}, {
+  name: 'Specific_departments',
+  type: 'specific_departments'
+}];

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/custom-select/index.js

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import OptGroup from './option-group';
+import EventBus from '../../../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../../../../basic-sdk/constants';
+import './select.css';
+class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.onSelectToggle = event => {
+      event.preventDefault();
+      /*
+        if select is showing, click events do not need to be monitored by other click events,
+        so it can be closed when other select is clicked.
+      */
+      if (this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
+      let eventClassName = event.target.className;
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
+      // Prevent closing by pressing the spacebar in the search input
+      if (event.target.value === '') return;
+      this.setState({
+        isShowSelectOptions: !this.state.isShowSelectOptions
+      });
+      const eventBus = EventBus.getInstance();
+      eventBus.dispatch(INTERNAL_EVENT.OPEN_SELECT, !this.state.isShowSelectOptions);
+    };
+    this.onClick = event => {
+      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+      if (!this.selector.contains(event.target)) {
+        this.closeSelect();
+      }
+    };
+    this.closeSelect = () => {
+      this.setState({
+        isShowSelectOptions: false
+      });
+    };
+    this.getSelectedOptionTop = () => {
+      if (!this.selector) return 38;
+      const {
+        height
+      } = this.selector.getBoundingClientRect();
+      return height;
+    };
+    this.state = {
+      isShowSelectOptions: false
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('click', this.onClick);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onClick);
+  }
+  render() {
+    let {
+      className,
+      value,
+      options,
+      placeholder,
+      searchable,
+      searchPlaceholder,
+      noOptionsPlaceholder,
+      isLocked
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: node => this.selector = node,
+      className: classnames('dtable-select custom-select', {
+        'focus': this.state.isShowSelectOptions
+      }, {
+        'disabled': isLocked
+      }, className),
+      onClick: this.onSelectToggle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "selected-option"
+    }, value && value.label ? /*#__PURE__*/React.createElement("span", {
+      className: "selected-option-show"
+    }, value.label) : /*#__PURE__*/React.createElement("span", {
+      className: "select-placeholder"
+    }, placeholder), !isLocked && /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-drop-down"
+    })), this.state.isShowSelectOptions && /*#__PURE__*/React.createElement(OptGroup, {
+      value: value,
+      isShowSelected: this.props.isShowSelected,
+      top: this.getSelectedOptionTop(),
+      options: options,
+      onSelectOption: this.props.onSelectOption,
+      searchable: searchable,
+      searchPlaceholder: searchPlaceholder,
+      noOptionsPlaceholder: noOptionsPlaceholder,
+      closeSelect: this.closeSelect,
+      supportMultipleSelect: this.props.supportMultipleSelect
+    }));
+  }
+}
+export default Select;

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/custom-select/option-group.js

@@ -0,0 +1,236 @@
+import React, { Component } from 'react';
+import { KeyCodes } from '../../../../../../../constants';
+import Option from './option';
+import EventBus from '../../../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../../../constants';
+const OPTION_HEIGHT = 32;
+class OptGroup extends Component {
+  constructor(props) {
+    super(props);
+    this.resetMenuStyle = () => {
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
+      if (height + top > window.innerHeight) {
+        const borderWidth = 2;
+        this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+      }
+    };
+    this.onClick = e => {
+      if (this.props.stopClickEvent && this.optionGroupRef.contains(e.target) && !e.target.className.includes('dtable-font')) {
+        e.stopPropagation();
+      }
+    };
+    this.onHotKey = e => {
+      const keyCode = e.keyCode;
+      if (keyCode === KeyCodes.UpArrow) {
+        this.onPressUp();
+      } else if (keyCode === KeyCodes.DownArrow) {
+        this.onPressDown();
+      } else if (keyCode === KeyCodes.Enter) {
+        this.onPressEnter();
+      } else if (keyCode === KeyCodes.Tab) {
+        this.props.closeSelect();
+      } else if (keyCode === KeyCodes.Escape) {
+        this.props.closeSelect();
+        const eventBus = EventBus.getInstance();
+        eventBus.dispatch(INTERNAL_EVENT.OPEN_SELECT, false);
+        e.stopPropagation();
+      }
+    };
+    this.onPressEnter = () => {
+      const {
+        options
+      } = this.props;
+      const {
+        activeIndex
+      } = this.state;
+      const option = options && options[activeIndex];
+      if (option) {
+        this.props.onSelectOption(option.value);
+        if (!this.props.supportMultipleSelect) {
+          this.props.closeSelect();
+        }
+      }
+    };
+    this.onPressUp = () => {
+      if (this.state.activeIndex > 0) {
+        this.setState({
+          activeIndex: this.state.activeIndex - 1
+        }, () => {
+          this.scrollContent();
+        });
+      }
+    };
+    this.onPressDown = () => {
+      const {
+        options
+      } = this.props;
+      if (options && this.state.activeIndex < options.length - 1) {
+        this.setState({
+          activeIndex: this.state.activeIndex + 1
+        }, () => {
+          this.scrollContent();
+        });
+      }
+    };
+    this.scrollContent = () => {
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.optionGroupContentRef;
+      this.setState({
+        disableHover: true
+      });
+      this.timer = setTimeout(() => {
+        this.setState({
+          disableHover: false
+        });
+      }, 500);
+      if (this.state.activeIndex * OPTION_HEIGHT === 0) {
+        this.optionGroupContentRef.scrollTop = 0;
+        return;
+      }
+      if (this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    };
+    this.changeIndex = index => {
+      this.setState({
+        activeIndex: index
+      });
+    };
+    this.onChangeSearch = e => {
+      let value = e.target.value;
+      if (value !== this.state.searchVal) {
+        this.setState({
+          searchVal: value,
+          activeIndex: -1
+        });
+      }
+    };
+    this.renderOptGroup = searchVal => {
+      const {
+        options,
+        searchable,
+        noOptionsPlaceholder,
+        onSelectOption
+      } = this.props;
+      let filterOptions = options || [];
+      if (searchable) {
+        let validSearchVal = searchVal.trim().toLowerCase();
+        if (validSearchVal) {
+          filterOptions = options.filter(option => {
+            const {
+              value,
+              name
+            } = option;
+            if (typeof name === 'string') {
+              return name.toLowerCase().indexOf(validSearchVal) > -1;
+            } else if (typeof value === 'object') {
+              if (value.column) {
+                return value.column.name.toLowerCase().indexOf(validSearchVal) > -1;
+              }
+              if (value.name) {
+                return value.name.toLowerCase().indexOf(validSearchVal) > -1;
+              }
+              return value.columnOption && value.columnOption.name.toLowerCase().indexOf(validSearchVal) > -1;
+            } else {
+              return false;
+            }
+          });
+        }
+      }
+      if (filterOptions.length > 0) {
+        return filterOptions.map((opt, i) => {
+          let key = opt.value.column ? opt.value.column.key : i;
+          let isActive = this.state.activeIndex === i;
+          return /*#__PURE__*/React.createElement(Option, {
+            key: key,
+            index: i,
+            isActive: isActive,
+            value: opt.value,
+            onSelectOption: onSelectOption,
+            changeIndex: this.changeIndex,
+            supportMultipleSelect: this.props.supportMultipleSelect,
+            disableHover: this.state.disableHover
+          }, opt.label);
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "none-search-result"
+      }, noOptionsPlaceholder);
+    };
+    this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    this.timer = null;
+  }
+  componentDidMount() {
+    window.addEventListener('click', this.onClick, true);
+    document.addEventListener('keydown', this.onHotKey);
+    this.resetMenuStyle();
+  }
+  componentWillUnmount() {
+    window.removeEventListener('click', this.onClick, true);
+    document.removeEventListener('keydown', this.onHotKey);
+    this.timer && clearTimeout(this.timer);
+  }
+  render() {
+    const {
+      searchable,
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      value,
+      isShowSelected,
+      addOptionAble,
+      component
+    } = this.props;
+    const {
+      AddOption
+    } = component || {};
+    let {
+      searchVal
+    } = this.state;
+    let style = {
+      top: top || 0,
+      left: left || 0,
+      minHeight: 50
+    };
+    if (minWidth) {
+      style = {
+        top: top || 0,
+        left: left || 0,
+        minWidth
+      };
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(addOptionAble ? 'create-new-option-group' : ''),
+      ref: ref => this.optionGroupRef = ref,
+      style: style
+    }, isShowSelected && /*#__PURE__*/React.createElement("div", {
+      className: "editor-list-delete mb-2",
+      onClick: e => e.stopPropagation()
+    }, value.label || ''), searchable && /*#__PURE__*/React.createElement("div", {
+      className: "option-group-search"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control option-search-control",
+      type: "text",
+      placeholder: searchPlaceholder,
+      value: searchVal,
+      onChange: this.onChangeSearch,
+      autoFocus: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "option-group-content",
+      ref: ref => this.optionGroupContentRef = ref
+    }, this.renderOptGroup(searchVal)), addOptionAble && AddOption);
+  }
+}
+export default OptGroup;

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/custom-select/option.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+class Option extends Component {
+  constructor() {
+    super(...arguments);
+    this.onClick = event => {
+      const {
+        value
+      } = this.props;
+      if (this.props.supportMultipleSelect) {
+        event.stopPropagation();
+      }
+      this.props.onSelectOption(value, event);
+    };
+    this.onMouseEnter = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(this.props.index);
+      }
+    };
+    this.onMouseLeave = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(-1);
+      }
+    };
+  }
+  render() {
+    const {
+      isActive
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('option', {
+        'option-active': isActive
+      }),
+      onClick: this.onClick,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, this.props.children);
+  }
+}
+export default Option;

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/custom-select/select.css

@@ -0,0 +1,135 @@
+.dtable-select {
+  position: relative;
+}
+
+.dtable-select.custom-select {
+  display: flex;
+  padding: 0 10px;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dtable-select.custom-select.focus {
+  border-color: #1991eb;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.dtable-select.custom-select.focus:hover {
+  border-color: #1991eb;
+}
+
+.dtable-select.custom-select:hover {
+  cursor: pointer;
+  border-color: rgb(179, 179, 179);
+}
+
+.dtable-select .dtable-icon-drop-down:hover {
+  color: #000;
+}
+
+.dtable-select.custom-select.disabled:focus,
+.dtable-select.custom-select.focus.disabled,
+.dtable-select.custom-select.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  box-shadow: unset;
+  cursor: default;
+}
+
+.dtable-select .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  color: #b5b5b5 !important;
+  transform: scale(.8) translateY(2px);
+  transition: all .1s;
+}
+
+.dtable-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.dtable-select .option-group {
+  position: absolute;
+  left: 0;
+  overflow-y: auto;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 14rem;
+  padding: .5rem 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+.dtable-select .option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px 6px 10px;
+  min-width: 170px;
+}
+
+.dtable-select .option-group-search .form-control {
+  height: 31px;
+}
+
+.dtable-select .option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.dtable-select .option-group .option-group-content {
+  overflow-y: scroll;
+}
+
+.dtable-select .option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: .25rem 10px;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select .option-group-content .option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.dtable-select .option-group-content .option.option-active .dtable-font {
+  color: #fff;
+}
+
+.dtable-select .option:not(.option-active):hover .dtable-font {
+  color: #aaa;
+}
+
+.dtable-select .selected-option-show {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  color: #949494;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/date-translate.js

@@ -0,0 +1,54 @@
+import context from '../../../../../../context';
+const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
+const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
+const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
+const frFR = require('@seafile/seafile-calendar/lib/locale/fr_FR');
+const deDE = require('@seafile/seafile-calendar/lib/locale/de_DE');
+const esES = require('@seafile/seafile-calendar/lib/locale/es_ES');
+const plPL = require('@seafile/seafile-calendar/lib/locale/pl_PL');
+const csCZ = require('@seafile/seafile-calendar/lib/locale/cs_CZ');
+const ruRU = require('@seafile/seafile-calendar/lib/locale/ru_RU');
+function translateCalendar() {
+  const lang = context.getSetting('lang');
+  const locale = lang ? lang : 'en';
+  let language;
+  switch (locale) {
+    case 'zh-cn':
+      language = zhCN;
+      break;
+    case 'zh-tw':
+      language = zhTW;
+      break;
+    case 'en':
+      language = enUS;
+      break;
+    case 'fr':
+      language = frFR;
+      break;
+    case 'de':
+      language = deDE;
+      break;
+    case 'es':
+      language = esES;
+      break;
+    case 'es-ar':
+      language = esES;
+      break;
+    case 'es-mx':
+      language = esES;
+      break;
+    case 'pl':
+      language = plPL;
+      break;
+    case 'cs':
+      language = csCZ;
+      break;
+    case 'ru':
+      language = ruRU;
+      break;
+    default:
+      language = enUS;
+  }
+  return language;
+}
+export { translateCalendar };