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

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

@@ -32,16 +32,21 @@ class FilterItem extends _react.default.Component {
     super(_props);
     _this = this;
     this.initSelectOptions = props => {
-      const filter = props.filter,
-        filterColumn = props.filterColumn;
-      let _getColumnOptions = (0, _utils.getColumnOptions)(filterColumn),
-        filterPredicateList = _getColumnOptions.filterPredicateList,
-        filterTermModifierList = _getColumnOptions.filterTermModifierList;
+      const {
+        filter,
+        filterColumn
+      } = props;
+      let {
+        filterPredicateList,
+        filterTermModifierList
+      } = (0, _utils.getColumnOptions)(filterColumn);
       // The value of the calculation formula column does not exist in the shared view
       this.filterPredicateOptions = filterPredicateList ? filterPredicateList.map(predicate => {
         return _filterItemUtils.default.generatorPredicateOption(predicate);
       }).filter(item => item) : [];
-      const filter_predicate = filter.filter_predicate;
+      const {
+        filter_predicate
+      } = filter;
       if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
         if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_WITHIN) {
           filterTermModifierList = _dtableUtils.filterTermModifierIsWithin;
@@ -53,7 +58,9 @@ class FilterItem extends _react.default.Component {
     };
     this.onDeleteFilter = event => {
       event.nativeEvent.stopImmediatePropagation();
-      const index = this.props.index;
+      const {
+        index
+      } = this.props;
       this.props.deleteFilter(index);
     };
     this.resetState = filter => {
@@ -62,17 +69,22 @@ class FilterItem extends _react.default.Component {
       });
     };
     this.onSelectConjunction = value => {
-      const filterConjunction = this.props.filterConjunction;
+      const {
+        filterConjunction
+      } = this.props;
       if (filterConjunction === value.filterConjunction) {
         return;
       }
       this.props.updateConjunction(value.filterConjunction);
     };
     this.onSelectColumn = value => {
-      const _this$props = this.props,
-        index = _this$props.index,
-        filter = _this$props.filter;
-      const column = value.column;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        column
+      } = value;
       if (column.key === filter.column_key) return;
       let newFilter = (0, _utils.getFilterByColumn)(column, filter);
       if (!newFilter) return;
@@ -80,11 +92,14 @@ class FilterItem extends _react.default.Component {
       this.props.updateFilter(index, newFilter);
     };
     this.onSelectPredicate = value => {
-      const _this$props2 = this.props,
-        index = _this$props2.index,
-        filter = _this$props2.filter,
-        filterColumn = _this$props2.filterColumn;
-      const filterPredicate = value.filterPredicate;
+      const {
+        index,
+        filter,
+        filterColumn
+      } = this.props;
+      const {
+        filterPredicate
+      } = value;
       if (filter.filter_predicate === filterPredicate) {
         return;
       }
@@ -93,10 +108,13 @@ class FilterItem extends _react.default.Component {
       this.props.updateFilter(index, newFilter);
     };
     this.onSelectTermModifier = value => {
-      const _this$props3 = this.props,
-        index = _this$props3.index,
-        filter = _this$props3.filter;
-      const filterTermModifier = value.filterTermModifier;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        filterTermModifier
+      } = value;
       const inputRangeLabel = [_dtableUtils.FILTER_TERM_MODIFIER_TYPE.EXACT_DATE, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS];
       if (filter.filter_term_modifier === filterTermModifier) {
         return;
@@ -113,10 +131,13 @@ class FilterItem extends _react.default.Component {
       this.props.updateFilter(index, newFilter);
     };
     this.onSelectSingle = value => {
-      const _this$props4 = this.props,
-        index = _this$props4.index,
-        filter = _this$props4.filter;
-      const option = value.columnOption;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        columnOption: option
+      } = value;
       if (filter.filter_term === option.id) {
         return;
       }
@@ -125,28 +146,37 @@ class FilterItem extends _react.default.Component {
       this.props.updateFilter(index, newFilter);
     };
     this.onSelectMultiple = value => {
-      const _this$props5 = this.props,
-        index = _this$props5.index,
-        filter = _this$props5.filter;
-      const option = value.columnOption;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        columnOption: option
+      } = value;
       let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, option);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
     this.onSelectCollaborator = value => {
-      const _this$props6 = this.props,
-        index = _this$props6.index,
-        filter = _this$props6.filter;
-      const collaborator = value.columnOption;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        columnOption: collaborator
+      } = value;
       let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, collaborator);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
     this.onSelectCreator = value => {
-      const _this$props7 = this.props,
-        index = _this$props7.index,
-        filter = _this$props7.filter;
-      const collaborator = value.columnOption;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        columnOption: collaborator
+      } = value;
       let newFilter = (0, _utils.getUpdatedFilterByCreator)(filter, collaborator);
       // the predicate is 'is' or 'is not'
       if (!newFilter) {
@@ -173,10 +203,13 @@ class FilterItem extends _react.default.Component {
       this.onFilterTermChanged(value);
     };
     this.onFilterTermChanged = newFilterTerm => {
-      const _this$props8 = this.props,
-        index = _this$props8.index,
-        filter = _this$props8.filter;
-      const filterTerm = this.state.filterTerm;
+      const {
+        index,
+        filter
+      } = this.props;
+      const {
+        filterTerm
+      } = this.state;
       if (newFilterTerm !== filterTerm) {
         this.setState({
           filterTerm: newFilterTerm
@@ -201,11 +234,14 @@ class FilterItem extends _react.default.Component {
       this.onFilterTermChanged(index);
     };
     this.getInputComponent = type => {
-      const _this$props9 = this.props,
-        filterColumn = _this$props9.filterColumn,
-        readOnly = _this$props9.readOnly,
-        isInModal = _this$props9.isInModal;
-      const filterTerm = this.state.filterTerm;
+      const {
+        filterColumn,
+        readOnly,
+        isInModal
+      } = this.props;
+      const {
+        filterTerm
+      } = this.state;
       if (type === _constants.INPUT_CMP_TYPE_MAP.TEXT) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
           value: filterTerm,
@@ -248,12 +284,13 @@ class FilterItem extends _react.default.Component {
       }
     };
     this.renderConjunction = () => {
-      const _this$props0 = this.props,
-        index = _this$props0.index,
-        filterConjunction = _this$props0.filterConjunction,
-        conjunctionOptions = _this$props0.conjunctionOptions,
-        readOnly = _this$props0.readOnly,
-        isInModal = _this$props0.isInModal;
+      const {
+        index,
+        filterConjunction,
+        conjunctionOptions,
+        readOnly,
+        isInModal
+      } = this.props;
       switch (index) {
         case 0:
           {
@@ -282,10 +319,13 @@ class FilterItem extends _react.default.Component {
     this.renderMultipleSelectOption = function () {
       let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       let filterTerm = arguments.length > 1 ? arguments[1] : undefined;
-      const _this$props1 = _this.props,
-        filter = _this$props1.filter,
-        readOnly = _this$props1.readOnly;
-      const filter_predicate = filter.filter_predicate;
+      const {
+        filter,
+        readOnly
+      } = _this.props;
+      const {
+        filter_predicate
+      } = filter;
       let isSupportMultipleSelect = false;
       // The first two options are used for single selection, and the last four options are used for multiple selection
       const supportMultipleSelectOptions = [_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_ALL_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_NONE_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_EXACTLY];
@@ -341,19 +381,24 @@ class FilterItem extends _react.default.Component {
       });
     };
     this.renderFilterTerm = filterColumn => {
-      const _this$props10 = this.props,
-        index = _this$props10.index,
-        filter = _this$props10.filter,
-        collaborators = _this$props10.collaborators,
-        userDepartmentIdsMap = _this$props10.userDepartmentIdsMap,
-        departments = _this$props10.departments,
-        lang = _this$props10.lang,
-        firstDayOfWeek = _this$props10.firstDayOfWeek,
-        readOnly = _this$props10.readOnly;
-      const type = filterColumn.type;
-      const filter_term = filter.filter_term,
-        filter_predicate = filter.filter_predicate,
-        filter_term_modifier = filter.filter_term_modifier;
+      const {
+        index,
+        filter,
+        collaborators,
+        userDepartmentIdsMap,
+        departments,
+        lang,
+        firstDayOfWeek,
+        readOnly
+      } = this.props;
+      const {
+        type
+      } = filterColumn;
+      const {
+        filter_term,
+        filter_predicate,
+        filter_term_modifier
+      } = filter;
       // predicate is empty or not empty
       if (_constants.EMPTY_PREDICATE.includes(filter_predicate)) {
         return null;
@@ -410,9 +455,9 @@ class FilterItem extends _react.default.Component {
         case _dtableUtils.CellType.SINGLE_SELECT:
           {
             // get options
-            let _ref = filterColumn.data || {},
-              _ref$options = _ref.options,
-              options = _ref$options === void 0 ? [] : _ref$options;
+            let {
+              options = []
+            } = filterColumn.data || {};
             if ([_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
               return this.renderMultipleSelectOption(options, filter_term);
             }
@@ -452,9 +497,9 @@ class FilterItem extends _react.default.Component {
           }
         case _dtableUtils.CellType.MULTIPLE_SELECT:
           {
-            let _ref2 = filterColumn.data || {},
-              _ref2$options = _ref2.options,
-              options = _ref2$options === void 0 ? [] : _ref2$options;
+            let {
+              options = []
+            } = filterColumn.data || {};
             return this.renderMultipleSelectOption(options, filter_term);
           }
         case _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT:
@@ -512,8 +557,9 @@ class FilterItem extends _react.default.Component {
           }
         case _dtableUtils.CellType.RATE:
           {
-            let _ref3 = filterColumn.data || {},
-              rate_max_number = _ref3.rate_max_number;
+            let {
+              rate_max_number
+            } = filterColumn.data || {};
             let rateList = [];
             for (let i = 0; i < rate_max_number; i++) {
               let rateItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_rateItem.default, {
@@ -550,16 +596,19 @@ class FilterItem extends _react.default.Component {
       }
     };
     this.renderFormulaFilterTerm = (filterPredicate, filterTerm, index, filterColumn) => {
-      const _ref4 = filterColumn || {},
-        data = _ref4.data;
-      const _ref5 = data || {},
-        result_type = _ref5.result_type;
+      const {
+        data
+      } = filterColumn || {};
+      const {
+        result_type
+      } = data || {};
       if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
         return null;
       }
       if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.NUMBER) {
-        const _ref6 = filterColumn.data || {},
-          format = _ref6.format;
+        const {
+          format
+        } = filterColumn.data || {};
         if (format === _dtableUtils.CellType.DURATION) {
           return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.DURATION, filterColumn);
         }
@@ -577,15 +626,18 @@ class FilterItem extends _react.default.Component {
       return this.renderFilterTermByArrayType(filterPredicate, filterTerm, index, filterColumn);
     };
     this.renderFilterTermByArrayType = (filterPredicate, filterTerm, index, filterColumn) => {
-      const _this$props11 = this.props,
-        collaborators = _this$props11.collaborators,
-        departments = _this$props11.departments,
-        readOnly = _this$props11.readOnly;
-      const _ref7 = filterColumn || {},
-        data = _ref7.data;
-      const _ref8 = data || {},
-        array_type = _ref8.array_type,
-        array_data = _ref8.array_data;
+      const {
+        collaborators,
+        departments,
+        readOnly
+      } = this.props;
+      const {
+        data
+      } = filterColumn || {};
+      const {
+        array_type,
+        array_data
+      } = data || {};
       if (!array_type) {
         return null;
       }
@@ -594,9 +646,9 @@ class FilterItem extends _react.default.Component {
         data: array_data
       };
       if (array_type === _dtableUtils.CellType.SINGLE_SELECT || array_type === _dtableUtils.CellType.MULTIPLE_SELECT) {
-        let _ref9 = array_data || {},
-          _ref9$options = _ref9.options,
-          options = _ref9$options === void 0 ? [] : _ref9$options;
+        let {
+          options = []
+        } = array_data || {};
         return this.renderMultipleSelectOption(options, filterTerm);
       }
       if (array_type === _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT) {
@@ -628,7 +680,9 @@ class FilterItem extends _react.default.Component {
       return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.TEXT);
     };
     this.isRenderErrorTips = () => {
-      const errMsg = this.props.errMsg;
+      const {
+        errMsg
+      } = this.props;
       return errMsg && errMsg !== _dtableUtils.FILTER_ERR_MSG.INCOMPLETE_FILTER;
     };
     this.renderErrorMessage = () => {
@@ -658,7 +712,9 @@ class FilterItem extends _react.default.Component {
     this.initSelectOptions(_props);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const filter = this.props.filter;
+    const {
+      filter
+    } = this.props;
     if (nextProps.filter !== filter) {
       this.initSelectOptions(nextProps);
       this.setState({
@@ -672,15 +728,20 @@ class FilterItem extends _react.default.Component {
     return shouldUpdated;
   }
   render() {
-    const filterPredicateOptions = this.filterPredicateOptions,
-      filterTermModifierOptions = this.filterTermModifierOptions;
-    const _this$props12 = this.props,
-      filter = _this$props12.filter,
-      filterColumn = _this$props12.filterColumn,
-      filterColumnOptions = _this$props12.filterColumnOptions,
-      readOnly = _this$props12.readOnly;
-    const filter_predicate = filter.filter_predicate,
-      filter_term_modifier = filter.filter_term_modifier;
+    const {
+      filterPredicateOptions,
+      filterTermModifierOptions
+    } = this;
+    const {
+      filter,
+      filterColumn,
+      filterColumnOptions,
+      readOnly
+    } = this.props;
+    const {
+      filter_predicate,
+      filter_term_modifier
+    } = filter;
     const activeColumn = _filterItemUtils.default.generatorColumnOption(filterColumn);
     const activePredicate = _filterItemUtils.default.generatorPredicateOption(filter_predicate, true);
     let activeTermModifier = null;
@@ -690,7 +751,9 @@ class FilterItem extends _react.default.Component {
     } else if ((0, _columnUtils.isCheckboxColumn)(filterColumn)) {
       _isCheckboxColumn = true;
     }
-    const type = filterColumn.type;
+    const {
+      type
+    } = filterColumn;
     const computedColumnTypes = [_dtableUtils.CellType.FORMULA, _dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.LINK];
     const isContainPredicate = [_dtableUtils.FILTER_PREDICATE_TYPE.CONTAINS, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_CONTAIN].includes(filter_predicate);
     const isRenderErrorTips = this.isRenderErrorTips();
@@ -701,7 +764,7 @@ class FilterItem extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filter-item",
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.onDeleteFilter,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font dtable-icon-fork-number"

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

@@ -289,8 +289,8 @@
 }
 
 .dtable-ui-filters-list .delete-filter {
-  width: 12px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin-right: 14px;
   text-align: center;
 }
@@ -301,8 +301,8 @@
 
 .dtable-ui-filters-list .delete-filter .dtable-icon-fork-number {
   display: inline-block;
-  font-size: 12px;
-  color: #999;
+  font-size: 16px;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .multiple-option-name {
@@ -388,7 +388,7 @@
 }
 
 .dtable-ui-filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: #555555;
+  color: var(--bs-icon-color);
 }
 
 .dtable-ui-filters-list .filter-container-readonly .dtable-select .selected-option-show,