@seafile/sdoc-editor 0.3.25 → 0.3.26-2

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/filter-popover-widgets/filters-list.css

@@ -0,0 +1,320 @@
+.filters-list {
+  min-height: 120px;
+  max-height: 100%;
+  padding: 15px;
+}
+
+.filters-list.empty-filters-container {
+  min-height: 80px;
+  padding: 16px;
+}
+
+.filters-list.empty-filters-container .empty-filters-list {
+  padding-left: 0;
+}
+
+.filters-list .empty-filters-list {
+  padding: .25rem;
+  font-size: 14px;
+  opacity: .5;
+}
+
+.filters-list .filter-item {
+  display: flex;
+  align-items: center;
+  padding: .25rem 0;
+}
+
+.filters-list .filter-item .condition {
+  display: flex;
+  flex: 1;
+}
+
+.filters-list .filter-item .condition>div {
+  height: 38px;
+  line-height: 38px;
+  margin-left: .5rem;
+}
+
+.filters-list .filter-item .condition>div:first-child {
+  margin-left: 0;
+}
+
+.filters-list .filter-item .filter-term {
+  max-width: 300px;
+}
+
+.filters-list .filter-item .filter-term .option-group-content .option.option-active .dtable-font {
+  color: #798d99;
+}
+
+.filters-list .filter-conjunction {
+  width: 72px;
+}
+
+.filters-list .filter-conjunction-readonly {
+  width: 52px;
+}
+
+.filters-list .filter-container {
+  width : calc(100% - 72px);
+  display: flex;
+}
+
+.filters-list .dtable-select .selected-option-show {
+  width: calc(100% - 20px);
+  height: 20px;
+}
+
+.filters-list .dtable-select .selected-option {
+  width: auto;
+  overflow-x: auto;
+}
+
+.filters-list .dtable-select .dtable-icon-drop-down {
+  margin-left: .5rem;
+}
+
+.filters-list .selected-conjunction-show {
+  padding: 0 10px;
+  color: #999;
+}
+
+.filters-list .filter-column {
+  max-width: 150px;
+}
+
+.filter-term .selector-multiple-select .option,
+.filter-term .selector-single-select .option {
+  height: 30px;
+  padding: 0 10px;
+}
+
+.filter-term .selector-multiple-select .select-option-name,
+.filter-term .selector-single-select .select-option-name {
+  margin-top: 5px;
+}
+
+.filter-term .selector-single-select .option:hover {
+  color: #212529;
+  background-color: #f7f7f7;
+}
+
+.filter-term .selector-single-select .option:hover .select-option-name,
+.filter-term .selector-multiple-select .option:hover .select-option-name,
+.filter-term .selector-collaborator .option:hover .select-option-name {
+  color: unset;
+}
+
+.filter-term .selector-collaborator .dtable-icon-drop-down {
+  padding-left: 5px;
+}
+
+.filters-list .selector-collaborator .selected-option-show {
+  text-overflow: unset;
+}
+
+.filters-list .selector-multiple-select .option:hover,
+.filters-list .selector-multiple-select .option.option-active,
+.filters-list .selector-collaborator .option:hover,
+.filters-list .selector-collaborator .option.option-active {
+  color: #212529;
+  background-color: #f7f7f7;
+}
+
+.filters-list .selector-multiple-select .option.option-active .select-option-name,
+.filters-list .selector-collaborator .option.option-active .select-option-name {
+  color: #212529;
+}
+
+.filters-list .selected-option .multiple-select-option,
+.filters-list .selected-option .single-select-option {
+  margin: 0;
+  display: inline-block;
+}
+
+.filters-list .filter-term input {
+  display: flex;
+  width: 100%;
+  height: 38px;
+  background-color: #ffffff;
+  padding-left: 8px;
+  padding-right: 8px;
+  outline: none;
+  border-radius: 3px;
+  font-size: 0.875rem;
+}
+
+.filters-list .filter-term input:hover {
+  border-color: rgb(179, 179, 179);
+}
+
+.filters-list .filter-term input.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12);
+}
+
+.filters-list .filter-term input:hover:focus {
+  border-color: #1991eb;
+}
+
+.filters-list .filter-term input:focus {
+  color: #495057;
+  background-color: #fff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.filters-list .filter-term .date-picker-container input:focus {
+  color: #495057;
+  background-color: #fff;
+  border: 1px solid #fff;
+  outline: 0;
+}
+
+.filters-list .filter-term .date-picker-container table tr {
+  height: 30px;
+}
+
+.filters-list .filter-term input[type='checkbox'] {
+  width: inherit;
+}
+
+.filters-list .filter-term input[type='checkbox']:focus {
+  border: 0;
+  box-shadow: none;
+}
+
+.filter-term .filter-rate-list {
+  display: flex;
+  padding: 0 5px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+}
+
+.filters-list .delete-filter {
+  width: 12px;
+  height: 20px;
+  margin-right: 14px;
+  text-align: center;
+}
+
+.filters-list .delete-filter:hover {
+  cursor: pointer;
+}
+
+.filters-list .delete-filter .dtable-icon-fork-number {
+  display: inline-block;
+  font-size: 12px;
+  color: #949494;
+}
+
+.filters-list .multiple-option-name {
+  display: flex;
+  align-items: center;
+}
+
+.filters-list .multiple-check-icon,
+.filters-list .collaborator-check-icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  text-align: center;
+}
+
+.filters-list .multiple-check-icon .dtable-icon-check-mark,
+.filters-list .collaborator-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.user-select-item, .collaborator {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.filters-list .collaborator-show {
+  flex: 1;
+}
+
+.filters-list .collaborator-avatar-container {
+  width: 16px;
+}
+
+.filters-list .collaborator-avatar {
+  width: 16px;
+  height: 16px;
+  transform: translateY(-1px);
+  border-radius: 50%;
+}
+
+.filters-list .option .collaborator-avatar {
+  transform: translateY(-2px);
+}
+
+.filters-list .collaborator-name {
+  margin-left: 5px;
+  max-width: 200px;
+}
+
+.filters-list .option-collaborator {
+  display: flex;
+}
+
+.filters-list .collaborator-container {
+  flex: 1;
+}
+
+.filters-list .popover-add-tool {
+  border-top: none;
+  color: #555555;
+}
+
+.filters-list .popover-add-tool .popover-add-icon {
+  margin-right: 14px;
+}
+
+.filters-list .option-group {
+  max-height: 360px;
+  overflow: auto;
+}
+
+.filters-list .filter-item .dtable-icon-fork-number:hover {
+  color: #5a5a5a;
+}
+
+.filters-list .filter-container-readonly .dtable-select .selected-option-show,
+.filters-list .filter-conjunction-readonly .dtable-select .selected-option-show {
+  width: 100%;
+}
+
+.filters-list .filter-checkbox-predicate  .dtable-select .selected-option-show {
+  width: 100%;
+}
+
+.dropdown-item .collaborator,
+.filters-list .option-group .option-group-content .collaborator {
+  background-color: unset;
+}
+
+.filters-list .dtable-select .selected-option-show .remove-container {
+  display: none;
+}
+
+.filter-header-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.filter-header-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/filter-popover-widgets/filters-list.js

@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { withTranslation } from 'react-i18next';
+import { CellType, FILTER_COLUMN_OPTIONS, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, ValidateFilter } from 'dtable-utils';
+import FilterItemUtils from './filter-item-utils';
+import FilterItem from './filter-item';
+import { getColumnByKey } from '../utils';
+import './filters-list.css';
+class FiltersList extends Component {
+  constructor(props) {
+    super(props);
+    this.updateFilter = (filterIndex, updatedFilter) => {
+      if (!updatedFilter) return;
+      this.props.updateFilter(filterIndex, updatedFilter);
+    };
+    this.deleteFilter = index => {
+      const {
+        scheduleUpdate
+      } = this.props;
+      this.props.deleteFilter(index, scheduleUpdate);
+    };
+    this.updateConjunction = filterConjunction => {
+      this.props.updateFilterConjunction(filterConjunction);
+    };
+    this.getConjunctionOptions = () => {
+      const {
+        t
+      } = this.props;
+      if (!this.conjunctionOptions) {
+        this.conjunctionOptions = FilterItemUtils.generatorConjunctionOptions(t);
+      }
+      return this.conjunctionOptions;
+    };
+    this.getFilterColumns = () => {
+      const {
+        columns
+      } = this.props;
+      return columns.filter(column => {
+        const {
+          data
+        } = column;
+        let {
+          type
+        } = column;
+        if (data && (type === CellType.LINK || FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === FORMULA_RESULT_TYPE.ARRAY)) {
+          type = data.array_type;
+        }
+        return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, type);
+      });
+    };
+    this.getColumnOptions = () => {
+      if (!this.columnOptions) {
+        const filterColumns = this.getFilterColumns();
+        this.columnOptions = filterColumns.map(column => {
+          return FilterItemUtils.generatorColumnOption(column);
+        });
+      }
+      return this.columnOptions;
+    };
+    this.renderFilterItem = (filter, index, errMsg, filterColumn) => {
+      const {
+        filterConjunction,
+        value
+      } = this.props;
+      const conjunctionOptions = this.getConjunctionOptions();
+      const columnOptions = this.getColumnOptions();
+      return /*#__PURE__*/React.createElement(FilterItem, {
+        key: index,
+        isLocked: this.props.isLocked,
+        index: index,
+        filter: filter,
+        errMsg: errMsg,
+        filterColumn: filterColumn,
+        filterConjunction: filterConjunction,
+        conjunctionOptions: conjunctionOptions,
+        filterColumnOptions: columnOptions,
+        value: value,
+        deleteFilter: this.deleteFilter,
+        updateFilter: this.updateFilter,
+        updateConjunction: this.updateConjunction,
+        collaborators: this.props.collaborators,
+        isPre: this.props.isPre
+      });
+    };
+    this.conjunctionOptions = null;
+    this.columnOptions = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.columns !== this.props.columns) {
+      this.columnOptions = null;
+    }
+  }
+  render() {
+    let {
+      filters,
+      className,
+      emptyPlaceholder,
+      columns
+    } = this.props;
+    const isEmpty = filters.length === 0;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('filters-list', {
+        'empty-filters-container': isEmpty
+      }, {
+        [className]: className
+      })
+    }, isEmpty && /*#__PURE__*/React.createElement("div", {
+      className: "empty-filters-list"
+    }, emptyPlaceholder), !isEmpty && filters.map((filter, index) => {
+      const {
+        column_key
+      } = filter;
+      const {
+        error_message
+      } = ValidateFilter.validateColumn(column_key, columns);
+      const filterColumn = getColumnByKey(column_key, columns) || {};
+      return this.renderFilterItem(filter, index, error_message, filterColumn);
+    }));
+  }
+}
+export default withTranslation('sdoc-editor')(FiltersList);

package/dist/basic-sdk/extension/plugins/chart/chart-components/data-filter-setting/filter-popover-widgets/rate-item.js

@@ -0,0 +1,72 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+class RateItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onMouseEnterRateItem = () => {
+      const {
+        rateItemIndex
+      } = this.props;
+      this.props.onMouseEnterRateItem(rateItemIndex);
+    };
+    this.onMouseLeaveRateItem = () => {
+      this.props.onMouseLeaveRateItem();
+    };
+    this.onChangeRateNumber = () => {
+      const {
+        onChangeRateNumber,
+        rateItemIndex,
+        editable
+      } = this.props;
+      if (onChangeRateNumber && editable) {
+        onChangeRateNumber(rateItemIndex);
+      }
+    };
+    this.tooltipRef = React.createRef();
+    this.state = {
+      isOpen: false
+    };
+  }
+  render() {
+    const {
+      enterRateItemIndex,
+      rateItemIndex,
+      value,
+      column,
+      isShowRateItem,
+      editable
+    } = this.props;
+    const {
+      rate_style_color,
+      rate_style_type
+    } = column.data || {};
+    const rateShowType = rate_style_type ? rate_style_type : 'dtable-icon-rate';
+    if (!isShowRateItem && rateItemIndex > value) return null;
+    let itemStyle = {
+      cursor: editable ? 'pointer' : 'default',
+      color: value >= rateItemIndex ? rate_style_color : '#e5e5e5'
+    };
+    let style = itemStyle;
+    if (enterRateItemIndex >= rateItemIndex) {
+      style = _objectSpread(_objectSpread({}, itemStyle), {}, {
+        color: rate_style_color,
+        opacity: 0.4
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: this.onMouseEnterRateItem,
+      onMouseLeave: this.onMouseLeaveRateItem,
+      style: style,
+      onClick: this.onChangeRateNumber,
+      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : '')
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font ".concat(rateShowType),
+      ref: this.tooltipRef
+    }), editable && /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+      placement: "bottom",
+      target: this.tooltipRef
+    }, rateItemIndex));
+  }
+}
+export default RateItem;

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

@@ -0,0 +1,208 @@
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Button, UncontrolledPopover } from 'reactstrap';
+import isHotkey from 'is-hotkey';
+import { FILTER_COLUMN_OPTIONS, getValidFilters } from 'dtable-utils';
+import CommonAddTool from './common-add-tool';
+import { getEventClassName } from './utils';
+import { getFilterByColumn } from './utils';
+import FiltersList from './filter-popover-widgets/filters-list';
+import EventBus from '../../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../../../basic-sdk/constants';
+import './filters-popover.css';
+
+/**
+ * filter = {
+ *  column_key: '',
+ *  filter_predicate: '',
+ *  filter_term: '',
+ *  filter_term_modifier: '',
+ * }
+ */
+class FilterPopover extends Component {
+  constructor(props) {
+    super(props);
+    this.onHotKey = e => {
+      if (isHotkey('esc', e) && !this.isSelectOpen) {
+        e.preventDefault();
+        this.props.hidePopover();
+      }
+    };
+    this.setSelectStatus = status => {
+      this.isSelectOpen = status;
+    };
+    this.hideDTablePopover = e => {
+      if (this.dtablePopoverRef && !getEventClassName(e).includes('popover') && !this.dtablePopoverRef.contains(e.target)) {
+        this.props.hidePopover(e);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    };
+    this.isNeedSubmit = () => {
+      return this.props.isNeedSubmit;
+    };
+    this.update = filters => {
+      if (this.isNeedSubmit()) {
+        const isSubmitDisabled = false;
+        this.setState({
+          filters,
+          isSubmitDisabled
+        });
+        return;
+      }
+      this.setState({
+        filters
+      }, () => {
+        const update = {
+          filters,
+          filter_conjunction: this.state.filterConjunction
+        };
+        this.props.update(update);
+      });
+    };
+    this.deleteFilter = (filterIndex, scheduleUpdate) => {
+      const filters = this.state.filters.slice(0);
+      filters.splice(filterIndex, 1);
+      if (filters.length === 0) {
+        scheduleUpdate();
+      }
+      this.update(filters);
+    };
+    this.updateFilter = (filterIndex, updated) => {
+      const filters = this.state.filters.slice(0);
+      filters[filterIndex] = updated;
+      this.update(filters);
+    };
+    this.updateFilterConjunction = conjunction => {
+      if (this.isNeedSubmit()) {
+        const isSubmitDisabled = false;
+        this.setState({
+          filterConjunction: conjunction,
+          isSubmitDisabled
+        });
+        return;
+      }
+      this.setState({
+        filterConjunction: conjunction
+      }, () => {
+        const update = {
+          filters: this.state.filters,
+          filter_conjunction: conjunction
+        };
+        this.props.update(update);
+      });
+    };
+    this.addFilter = scheduleUpdate => {
+      let {
+        columns
+      } = this.props;
+      let defaultColumn = columns[0];
+      if (!FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
+        defaultColumn = columns.find(c => FILTER_COLUMN_OPTIONS[c.type]);
+      }
+      if (!defaultColumn) return;
+      let filter = getFilterByColumn(defaultColumn);
+      const filters = this.state.filters.slice(0);
+      if (filters.length === 0) {
+        scheduleUpdate();
+      }
+      filters.push(filter);
+      this.update(filters);
+    };
+    this.onClosePopover = () => {
+      this.props.hidePopover();
+    };
+    this.onSubmitFilters = () => {
+      const {
+        filters,
+        filterConjunction
+      } = this.state;
+      const update = {
+        filters,
+        filter_conjunction: filterConjunction
+      };
+      this.props.update(update);
+      this.props.hidePopover();
+    };
+    this.onPopoverInsideClick = e => {
+      e.stopPropagation();
+    };
+    this.state = {
+      filters: getValidFilters(props.filters, props.columns),
+      filterConjunction: props.filterConjunction || 'And'
+    };
+    this.isSelectOpen = false;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideDTablePopover, true);
+    document.addEventListener('keydown', this.onHotKey);
+    const eventBus = EventBus.getInstance();
+    this.unsubscribeOpenSelect = eventBus.subscribe(INTERNAL_EVENT.OPEN_SELECT, this.setSelectStatus);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideDTablePopover, true);
+    document.removeEventListener('keydown', this.onHotKey);
+    this.unsubscribeOpenSelect();
+  }
+  render() {
+    const {
+      target,
+      columns,
+      t
+    } = this.props;
+    const {
+      filters,
+      filterConjunction
+    } = this.state;
+    const canAddFilter = columns.length > 0;
+    return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      placement: "auto-start",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true,
+      className: "filter-popover",
+      boundariesElement: document.body
+    }, _ref => {
+      let {
+        scheduleUpdate
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: ref => this.dtablePopoverRef = ref,
+        onClick: this.onPopoverInsideClick,
+        className: this.props.filtersClassName
+      }, /*#__PURE__*/React.createElement(FiltersList, {
+        filterConjunction: filterConjunction,
+        filters: filters,
+        columns: columns,
+        emptyPlaceholder: t('No_filters'),
+        updateFilter: this.updateFilter,
+        deleteFilter: this.deleteFilter,
+        updateFilterConjunction: this.updateFilterConjunction,
+        collaborators: this.props.collaborators,
+        readOnly: false,
+        scheduleUpdate: scheduleUpdate,
+        isPre: this.props.isPre
+      }), /*#__PURE__*/React.createElement(CommonAddTool, {
+        className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
+        callBack: canAddFilter ? () => this.addFilter(scheduleUpdate) : () => {},
+        footerName: t('Add_filter'),
+        addIconClassName: "popover-add-icon"
+      }), this.isNeedSubmit() && /*#__PURE__*/React.createElement("div", {
+        className: "filter-popover-footer"
+      }, /*#__PURE__*/React.createElement(Button, {
+        className: "mr-2",
+        onClick: this.onClosePopover
+      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        disabled: this.state.isSubmitDisabled,
+        onClick: this.onSubmitFilters
+      }, t('Submit'))));
+    });
+  }
+}
+FilterPopover.defaultProps = {
+  filtersClassName: ''
+};
+export default withTranslation('sdoc-editor')(FilterPopover);