dtable-ui-component 6.0.126 → 7.0.0-xia.1

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -20,19 +20,21 @@ class FiltersList extends _react.Component {
   constructor(props) {
     super(props);
     this.modifyFilterConjunction = new_filter_conjunction => {
-      const _this$props = this.props,
-        filter_conjunction = _this$props.filterConjunction,
-        filters = _this$props.filters;
-      const _applyFilterOperation = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION,
-          filter_conjunction,
-          filters,
-          payload: {
-            new_filter_conjunction
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation.filter_conjunction,
-        next_filters = _applyFilterOperation.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION,
+        filter_conjunction,
+        filters,
+        payload: {
+          new_filter_conjunction
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -40,88 +42,98 @@ class FiltersList extends _react.Component {
     };
     this.updateFilter = (filter_index, new_filter) => {
       if (!new_filter) return;
-      const _this$props2 = this.props,
-        filter_conjunction = _this$props2.filterConjunction,
-        filters = _this$props2.filters;
-      const _applyFilterOperation2 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER,
-          filter_conjunction,
-          filters,
-          payload: {
-            filter_index,
-            new_filter
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation2.filter_conjunction,
-        next_filters = _applyFilterOperation2.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER,
+        filter_conjunction,
+        filters,
+        payload: {
+          filter_index,
+          new_filter
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.deleteFilter = filter_index => {
-      const _this$props3 = this.props,
-        filter_conjunction = _this$props3.filterConjunction,
-        filters = _this$props3.filters;
-      const _applyFilterOperation3 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER,
-          filter_conjunction,
-          filters,
-          payload: {
-            filter_index
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation3.filter_conjunction,
-        next_filters = _applyFilterOperation3.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER,
+        filter_conjunction,
+        filters,
+        payload: {
+          filter_index
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.moveFilter = _ref => {
-      let source_filter_index = _ref.source_filter_index,
-        target_filter_index = _ref.target_filter_index,
-        source_group_index = _ref.source_group_index,
-        target_group_index = _ref.target_group_index;
+      let {
+        source_filter_index,
+        target_filter_index,
+        source_group_index,
+        target_group_index
+      } = _ref;
       if (source_filter_index === target_filter_index && source_group_index === target_group_index) {
         return;
       }
-      const _this$props4 = this.props,
-        filter_conjunction = _this$props4.filterConjunction,
-        filters = _this$props4.filters;
-      const _applyFilterOperation4 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.MOVE_FILTER,
-          filter_conjunction,
-          filters,
-          payload: {
-            source_filter_index,
-            target_filter_index,
-            source_group_index,
-            target_group_index
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation4.filter_conjunction,
-        next_filters = _applyFilterOperation4.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.MOVE_FILTER,
+        filter_conjunction,
+        filters,
+        payload: {
+          source_filter_index,
+          target_filter_index,
+          source_group_index,
+          target_group_index
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.modifyConjunctionInGroup = (group_index, new_filter_conjunction) => {
-      const _this$props5 = this.props,
-        filter_conjunction = _this$props5.filterConjunction,
-        filters = _this$props5.filters;
-      const _applyFilterOperation5 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP,
-          filter_conjunction,
-          filters,
-          payload: {
-            group_index,
-            new_filter_conjunction
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation5.filter_conjunction,
-        next_filters = _applyFilterOperation5.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          new_filter_conjunction
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -129,40 +141,44 @@ class FiltersList extends _react.Component {
     };
     this.addFilterIntoGroup = (group_index, filter) => {
       if (!filter) return;
-      const _this$props6 = this.props,
-        filter_conjunction = _this$props6.filterConjunction,
-        filters = _this$props6.filters;
-      const _applyFilterOperation6 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP,
-          filter_conjunction,
-          filters,
-          payload: {
-            group_index,
-            filter
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation6.filter_conjunction,
-        next_filters = _applyFilterOperation6.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          filter
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.deleteFilterInGroup = (group_index, filter_index) => {
-      const _this$props7 = this.props,
-        filter_conjunction = _this$props7.filterConjunction,
-        filters = _this$props7.filters;
-      const _applyFilterOperation7 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP,
-          filter_conjunction,
-          filters,
-          payload: {
-            group_index,
-            filter_index
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation7.filter_conjunction,
-        next_filters = _applyFilterOperation7.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          filter_index
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -170,21 +186,23 @@ class FiltersList extends _react.Component {
     };
     this.updateFilterInGroup = (group_index, filter_index, new_filter) => {
       if (!new_filter) return;
-      const _this$props8 = this.props,
-        filter_conjunction = _this$props8.filterConjunction,
-        filters = _this$props8.filters;
-      const _applyFilterOperation8 = (0, _utils.applyFilterOperation)({
-          type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP,
-          filter_conjunction,
-          filters,
-          payload: {
-            group_index,
-            filter_index,
-            new_filter
-          }
-        }),
-        next_filter_conjunction = _applyFilterOperation8.filter_conjunction,
-        next_filters = _applyFilterOperation8.filters;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          filter_index,
+          new_filter
+        }
+      });
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -197,7 +215,9 @@ class FiltersList extends _react.Component {
       return this.conjunctionOptions;
     };
     this.getColumnOptions = () => {
-      const columns = this.props.columns;
+      const {
+        columns
+      } = this.props;
       if (!this.columnOptions) {
         const filterColumns = (0, _utils.getFilterColumns)(columns);
         this.columnOptions = filterColumns.map(column => {
@@ -207,16 +227,17 @@ class FiltersList extends _react.Component {
       return this.columnOptions;
     };
     this.renderFilter = (filter, index, filterColumn) => {
-      const _this$props9 = this.props,
-        filterConjunction = _this$props9.filterConjunction,
-        isInModal = _this$props9.isInModal,
-        columns = _this$props9.columns,
-        collaborators = _this$props9.collaborators,
-        userDepartmentIdsMap = _this$props9.userDepartmentIdsMap,
-        departments = _this$props9.departments,
-        lang = _this$props9.lang,
-        firstDayOfWeek = _this$props9.firstDayOfWeek,
-        readOnly = _this$props9.readOnly;
+      const {
+        filterConjunction,
+        isInModal,
+        columns,
+        collaborators,
+        userDepartmentIdsMap,
+        departments,
+        lang,
+        firstDayOfWeek,
+        readOnly
+      } = this.props;
       const conjunctionOptions = this.getConjunctionOptions();
       const columnOptions = this.getColumnOptions();
       if ((0, _dtableUtils.checkIsFilterGroup)(filter)) {
@@ -242,8 +263,9 @@ class FiltersList extends _react.Component {
           updateFilterInGroup: this.updateFilterInGroup
         }, "filter-group-".concat(index));
       }
-      const _ValidateFilter$valid = _dtableUtils.ValidateFilter.validate(filter, columns),
-        error_message = _ValidateFilter$valid.error_message;
+      const {
+        error_message
+      } = _dtableUtils.ValidateFilter.validate(filter, columns);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterItem.default, {
         isInModal: isInModal,
         lang: lang,
@@ -273,11 +295,12 @@ class FiltersList extends _react.Component {
     }
   }
   render() {
-    let _this$props0 = this.props,
-      filters = _this$props0.filters,
-      className = _this$props0.className,
-      emptyPlaceholder = _this$props0.emptyPlaceholder,
-      columns = _this$props0.columns;
+    let {
+      filters,
+      className,
+      emptyPlaceholder,
+      columns
+    } = this.props;
     const isEmpty = filters.length === 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('dtable-ui-filters-list', {
@@ -289,7 +312,9 @@ class FiltersList extends _react.Component {
         className: "empty-filters-list",
         children: emptyPlaceholder
       }), !isEmpty && filters.map((filter, index) => {
-        const column_key = filter.column_key;
+        const {
+          column_key
+        } = filter;
         const filterColumn = (0, _utils.getColumnByKey)(column_key, columns) || {};
         return this.renderFilter(filter, index, filterColumn);
       })]

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -13,17 +13,20 @@ class RateItem extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onMouseEnterRateItem = () => {
-      const rateItemIndex = this.props.rateItemIndex;
+      const {
+        rateItemIndex
+      } = this.props;
       this.props.onMouseEnterRateItem(rateItemIndex);
     };
     this.onMouseLeaveRateItem = () => {
       this.props.onMouseLeaveRateItem();
     };
     this.onChangeRateNumber = () => {
-      const _this$props = this.props,
-        onChangeRateNumber = _this$props.onChangeRateNumber,
-        rateItemIndex = _this$props.rateItemIndex,
-        editable = _this$props.editable;
+      const {
+        onChangeRateNumber,
+        rateItemIndex,
+        editable
+      } = this.props;
       if (onChangeRateNumber && editable) {
         onChangeRateNumber(rateItemIndex);
       }
@@ -34,16 +37,18 @@ class RateItem extends _react.default.Component {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      enterRateItemIndex = _this$props2.enterRateItemIndex,
-      rateItemIndex = _this$props2.rateItemIndex,
-      value = _this$props2.value,
-      column = _this$props2.column,
-      isShowRateItem = _this$props2.isShowRateItem,
-      editable = _this$props2.editable;
-    const _ref = column.data || {},
-      rate_style_color = _ref.rate_style_color,
-      rate_style_type = _ref.rate_style_type;
+    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 = {

package/lib/DTableGroupSelect/index.js

@@ -40,12 +40,15 @@ class DTableGroupSelect extends _react.Component {
     };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
-      const _this$selector$getBou = this.selector.getBoundingClientRect(),
-        height = _this$selector$getBou.height;
+      const {
+        height
+      } = this.selector.getBoundingClientRect();
       return height;
     };
     this.getFilterOptions = searchValue => {
-      const options = this.props.options;
+      const {
+        options
+      } = this.props;
       const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
       return options.filter(option => option.name.toLowerCase().includes(validSearchVal));
@@ -63,14 +66,15 @@ class DTableGroupSelect extends _react.Component {
     }
   }
   render() {
-    let _this$props = this.props,
-      className = _this$props.className,
-      selectedOptions = _this$props.selectedOptions,
-      options = _this$props.options,
-      placeholder = _this$props.placeholder,
-      searchPlaceholder = _this$props.searchPlaceholder,
-      noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
-      isInModal = _this$props.isInModal;
+    let {
+      className,
+      selectedOptions,
+      options,
+      placeholder,
+      searchPlaceholder,
+      noOptionsPlaceholder,
+      isInModal
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('group-select custom-select', {

package/lib/DTableGroupSelect/select-option-group.js

@@ -21,12 +21,14 @@ class SelectOptionGroup extends _react.Component {
       this.props.onClickOutside(e);
     };
     this.resetMenuStyle = () => {
-      const _this$props = this.props,
-        isInModal = _this$props.isInModal,
-        position = _this$props.position;
-      const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
-        top = _this$optionGroupRef$.top,
-        height = _this$optionGroupRef$.height;
+      const {
+        isInModal,
+        position
+      } = this.props;
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
           this.optionGroupRef.style.top = position.y - height + 'px';
@@ -74,7 +76,9 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.onMouseDown = e => {
-      const isInModal = this.props.isInModal;
+      const {
+        isInModal
+      } = this.props;
       // prevent event propagation when click option or search input
       if (isInModal) {
         e.stopPropagation();
@@ -82,9 +86,10 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.scrollContent = () => {
-      const _this$optionGroupCont = this.optionGroupContentRef,
-        offsetHeight = _this$optionGroupCont.offsetHeight,
-        scrollTop = _this$optionGroupCont.scrollTop;
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.optionGroupContentRef;
       this.setState({
         disableHover: true
       });
@@ -121,10 +126,11 @@ class SelectOptionGroup extends _react.Component {
       });
     };
     this.renderOptGroup = searchVal => {
-      let _this$props2 = this.props,
-        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        onSelectOption = _this$props2.onSelectOption,
-        selectedOptions = _this$props2.selectedOptions;
+      let {
+        noOptionsPlaceholder,
+        onSelectOption,
+        selectedOptions
+      } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -174,15 +180,18 @@ class SelectOptionGroup extends _react.Component {
     document.removeEventListener('mousedown', this.handleDocumentClick);
   }
   render() {
-    const _this$props3 = this.props,
-      searchPlaceholder = _this$props3.searchPlaceholder,
-      top = _this$props3.top,
-      left = _this$props3.left,
-      minWidth = _this$props3.minWidth,
-      isInModal = _this$props3.isInModal,
-      position = _this$props3.position,
-      className = _this$props3.className;
-    let searchVal = this.state.searchVal;
+    const {
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      isInModal,
+      position,
+      className
+    } = this.props;
+    let {
+      searchVal
+    } = this.state;
     let style = {
       top: top || 0,
       left: left || 0

package/lib/DTableIcon/index.js

@@ -11,12 +11,13 @@ var _svgIcon = _interopRequireDefault(require("./svg-icon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableIcon = _ref => {
-  let className = _ref.className,
-    symbol = _ref.symbol,
-    color = _ref.color,
-    _ref$ariaHidden = _ref.ariaHidden,
-    ariaHidden = _ref$ariaHidden === void 0 ? false : _ref$ariaHidden,
-    getSvg = _ref.getSvg;
+  let {
+    className,
+    symbol,
+    color,
+    ariaHidden = false,
+    getSvg
+  } = _ref;
   if (!symbol) return null;
   if (symbol.includes('dtable-icon')) {
     let customProps = {};

package/lib/DTableIcon/svg-icon.js

@@ -26,11 +26,13 @@ const getSvgIconComponents = () => {
   return svgIconComponents;
 };
 const SvgIcon = _ref => {
-  let className = _ref.className,
-    symbol = _ref.symbol,
-    color = _ref.color,
-    ariaHidden = _ref.ariaHidden,
-    getSvg = _ref.getSvg;
+  let {
+    className,
+    symbol,
+    color,
+    ariaHidden,
+    getSvg
+  } = _ref;
   if (!symbol) return null;
   let props = {
     style: {

package/lib/DTableModalHeader/index.css

@@ -1,22 +1,5 @@
-.modal-header .dtable-modal-close.close {
-  padding: 14px 16px;
-  opacity: 1;
-  margin: -1rem -1rem -1rem auto;
-  background-color: transparent;
-  border: 0;
-  float: right;
-  font-size: 1.40625rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #000;
-}
-
-.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
-  opacity: 1;
-}
-
 .modal-header .dtable-modal-close .dtable-modal-close-inner {
-  width: 28px;
-  height: 28px;
-  font-size: 22.5px; /* same with Seafile close icon */
+  width: 24px;
+  height: 24px;
+  font-size: 16px; /* same with Seafile close icon */
 }

package/lib/DTableModalHeader/index.js

@@ -14,7 +14,9 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const DTableModalHeader = _ref => {
-  let children = _ref.children,
+  let {
+      children
+    } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     type: "button",