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

package/lib/DTableFiltersPopover/utils/index.js

@@ -18,8 +18,10 @@ const isArrayFilterTermByArrayType = array_type => {
   return _dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type) || array_type === _dtableUtils.CellType.SINGLE_SELECT || array_type === _dtableUtils.CellType.MULTIPLE_SELECT;
 };
 const isFilterTermArray = (column, filterPredicate) => {
-  const type = column.type,
-    data = column.data;
+  const {
+    type,
+    data
+  } = column;
   if (_constants.MULTIPLE_SELECTOR_COLUMNS.includes(type)) {
     return true;
   }
@@ -27,15 +29,17 @@ const isFilterTermArray = (column, filterPredicate) => {
     return true;
   }
   if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
-    const _ref = data || {},
-      result_type = _ref.result_type,
-      array_type = _ref.array_type;
+    const {
+      result_type,
+      array_type
+    } = data || {};
     if (result_type !== _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) return false;
     return isArrayFilterTermByArrayType(array_type);
   }
   if (type === _dtableUtils.CellType.LINK) {
-    const _ref2 = data || {},
-      array_type = _ref2.array_type;
+    const {
+      array_type
+    } = data || {};
     return isArrayFilterTermByArrayType(array_type);
   }
   return false;
@@ -43,8 +47,10 @@ const isFilterTermArray = (column, filterPredicate) => {
 exports.isFilterTermArray = isFilterTermArray;
 const getUpdatedFilterByCreator = (filter, collaborator) => {
   const multipleSelectType = [_dtableUtils.FILTER_PREDICATE_TYPE.CONTAINS, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_CONTAIN];
-  let filter_predicate = filter.filter_predicate,
-    filterTerm = filter.filter_term;
+  let {
+    filter_predicate,
+    filter_term: filterTerm
+  } = filter;
   if (multipleSelectType.includes(filter_predicate)) {
     filterTerm = filterTerm ? filter.filter_term.slice(0) : [];
     let selectedEmail = collaborator.email;
@@ -118,15 +124,18 @@ const getUpdatedFilterByRate = (filter, value) => {
 };
 exports.getUpdatedFilterByRate = getUpdatedFilterByRate;
 const getColumnOptions = column => {
-  const type = column.type,
-    data = column.data;
+  const {
+    type,
+    data
+  } = column;
   if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
     return getFormulaColumnFilterOptions(column);
   }
   if (type === _dtableUtils.CellType.LINK) {
-    const _ref3 = data || {},
-      array_type = _ref3.array_type,
-      array_data = _ref3.array_data;
+    const {
+      array_type,
+      array_data
+    } = data || {};
     if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
       return (0, _dtableUtils.getColumnFilterOptions)({
         type: _dtableUtils.CellType.CHECKBOX
@@ -143,11 +152,14 @@ const getColumnOptions = column => {
 };
 exports.getColumnOptions = getColumnOptions;
 const getFormulaColumnFilterOptions = column => {
-  const data = column.data;
-  const _ref4 = data || {},
-    result_type = _ref4.result_type,
-    array_type = _ref4.array_type,
-    array_data = _ref4.array_data;
+  const {
+    data
+  } = column;
+  const {
+    result_type,
+    array_type,
+    array_data
+  } = data || {};
   if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
     return (0, _dtableUtils.getColumnFilterOptions)({
       type: _dtableUtils.CellType.CHECKBOX
@@ -203,7 +215,9 @@ const getFilterOptionsByArrayType = (array_type, array_data) => {
     type: _dtableUtils.CellType.TEXT,
     data: array_data
   });
-  const filterPredicateList = filterOptions.filterPredicateList;
+  const {
+    filterPredicateList
+  } = filterOptions;
   if (filterPredicateList && !filterPredicateList.includes(_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY)) {
     filterPredicateList.push(_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY);
   }
@@ -214,10 +228,13 @@ const getFilterOptionsByArrayType = (array_type, array_data) => {
 };
 const getFilterByColumn = function (column) {
   let filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let columnType = column.type,
-    columnData = column.data;
-  let _getColumnOptions = getColumnOptions(column),
-    filterPredicateList = _getColumnOptions.filterPredicateList;
+  let {
+    type: columnType,
+    data: columnData
+  } = column;
+  let {
+    filterPredicateList
+  } = getColumnOptions(column);
   if (!filterPredicateList) return;
   let filterPredicate = filterPredicateList[0];
   let updatedFilter = Object.assign({}, filter, {
@@ -236,7 +253,9 @@ const getFilterByColumn = function (column) {
   }
   // rate
   if (columnType === _dtableUtils.CellType.RATE) {
-    const rate_max_number = columnData.rate_max_number;
+    const {
+      rate_max_number
+    } = columnData;
     updatedFilter.filter_term = rate_max_number;
     return updatedFilter;
   }
@@ -262,9 +281,10 @@ const getFilterByColumn = function (column) {
   }
   // link
   if (columnType === _dtableUtils.CellType.LINK) {
-    let _ref5 = columnData || {},
-      array_type = _ref5.array_type,
-      array_data = _ref5.array_data;
+    let {
+      array_type,
+      array_data
+    } = columnData || {};
     if (array_type) {
       if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
         array_type = _dtableUtils.CellType.CHECKBOX;
@@ -288,11 +308,14 @@ const getFilterByColumn = function (column) {
 };
 exports.getFilterByColumn = getFilterByColumn;
 const getFormulaColumnFilter = (column, filter) => {
-  const data = column.data;
-  let _ref6 = data || {},
-    result_type = _ref6.result_type,
-    array_type = _ref6.array_type,
-    array_data = _ref6.array_data;
+  const {
+    data
+  } = column;
+  let {
+    result_type,
+    array_type,
+    array_data
+  } = data || {};
   if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
     const linkedColumn = {
       key: column.key,
@@ -333,7 +356,9 @@ const getUpdatedFilterByPredicate = (filter, column, filterPredicate) => {
   let updatedFilter = Object.assign({}, filter, {
     filter_predicate: filterPredicate
   });
-  let columnType = column.type;
+  let {
+    type: columnType
+  } = column;
   if (columnType === _dtableUtils.CellType.CHECKBOX) {
     updatedFilter.filter_term = false;
     return updatedFilter;
@@ -416,7 +441,9 @@ const getFormulaAndLinkFilters = (filters, columns) => {
   let formulaFilters = [];
   filters.forEach(filter => {
     const filterColumn = columns.find(column => column.key === (filter === null || filter === void 0 ? void 0 : filter.column_key));
-    const type = filterColumn.type;
+    const {
+      type
+    } = filterColumn;
     if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type] || type === _dtableUtils.CellType.LINK) {
       formulaFilters.push(filter);
     }
@@ -426,8 +453,10 @@ const getFormulaAndLinkFilters = (filters, columns) => {
 exports.getFormulaAndLinkFilters = getFormulaAndLinkFilters;
 const getFilterColumns = columns => {
   return columns.filter(column => {
-    const data = column.data,
-      type = column.type;
+    const {
+      data,
+      type
+    } = column;
     if (data && (type === _dtableUtils.CellType.LINK || _dtableUtils.FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY)) {
       return (0, _dtableUtils.checkColumnHasFilterOptions)({
         type: data.array_type,
@@ -439,14 +468,18 @@ const getFilterColumns = columns => {
 };
 exports.getFilterColumns = getFilterColumns;
 const applyFilterOperation = operation => {
-  const type = operation.type,
-    filter_conjunction = operation.filter_conjunction,
-    filters = operation.filters,
-    payload = operation.payload;
+  const {
+    type,
+    filter_conjunction,
+    filters,
+    payload
+  } = operation;
   switch (type) {
     case _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION:
       {
-        const new_filter_conjunction = payload.new_filter_conjunction;
+        const {
+          new_filter_conjunction
+        } = payload;
         return {
           filter_conjunction: new_filter_conjunction,
           filters
@@ -454,7 +487,9 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.DELETE_FILTER:
       {
-        const filter_index = payload.filter_index;
+        const {
+          filter_index
+        } = payload;
         let updatedFilters = [...filters];
         if (!updatedFilters[filter_index]) {
           return {
@@ -470,8 +505,10 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER:
       {
-        const filter_index = payload.filter_index,
-          new_filter = payload.new_filter;
+        const {
+          filter_index,
+          new_filter
+        } = payload;
         let updatedFilters = [...filters];
         if (!updatedFilters[filter_index]) {
           return {
@@ -487,10 +524,12 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.MOVE_FILTER:
       {
-        const source_filter_index = payload.source_filter_index,
-          target_filter_index = payload.target_filter_index,
-          source_group_index = payload.source_group_index,
-          target_group_index = payload.target_group_index;
+        const {
+          source_filter_index,
+          target_filter_index,
+          source_group_index,
+          target_group_index
+        } = payload;
         const isFromFilterGroup = typeof source_group_index === 'number';
         const isToFilterGroup = typeof target_group_index === 'number';
         let updatedFilters = [...filters];
@@ -551,8 +590,10 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP:
       {
-        const filter = payload.filter,
-          group_index = payload.group_index;
+        const {
+          filter,
+          group_index
+        } = payload;
         let updatedFilters = [...filters];
         let updatedFilterGroup = updatedFilters[group_index];
         if (!updatedFilterGroup) {
@@ -573,8 +614,10 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP:
       {
-        const group_index = payload.group_index,
-          new_filter_conjunction = payload.new_filter_conjunction;
+        const {
+          group_index,
+          new_filter_conjunction
+        } = payload;
         let updatedFilters = [...filters];
         let updatedFilterGroup = updatedFilters[group_index];
         if (!updatedFilterGroup) {
@@ -591,8 +634,10 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP:
       {
-        const group_index = payload.group_index,
-          filter_index = payload.filter_index;
+        const {
+          group_index,
+          filter_index
+        } = payload;
         let updatedFilters = [...filters];
         let updatedFilterGroup = updatedFilters[group_index];
         if (!updatedFilterGroup || !updatedFilterGroup.filters || !updatedFilterGroup.filters[filter_index]) {
@@ -611,9 +656,11 @@ const applyFilterOperation = operation => {
       }
     case _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP:
       {
-        const group_index = payload.group_index,
-          filter_index = payload.filter_index,
-          new_filter = payload.new_filter;
+        const {
+          group_index,
+          filter_index,
+          new_filter
+        } = payload;
         let updatedFilters = [...filters];
         let updatedFilterGroup = updatedFilters[group_index];
         if (!updatedFilterGroup || !updatedFilterGroup.filters || !updatedFilterGroup.filters[filter_index]) {
@@ -674,15 +721,18 @@ const getCreatorUpdatedFilterTerm = (filterTerm, filterPredicate, collaborator)
 };
 exports.getCreatorUpdatedFilterTerm = getCreatorUpdatedFilterTerm;
 const getFilterConfigOptions = column => {
-  const type = column.type,
-    data = column.data;
+  const {
+    type,
+    data
+  } = column;
   if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
     return getFormulaColumnFilterOptions(column);
   }
   if (type === _dtableUtils.CellType.LINK) {
-    const _ref7 = data || {},
-      array_type = _ref7.array_type,
-      array_data = _ref7.array_data;
+    const {
+      array_type,
+      array_data
+    } = data || {};
     if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
       return (0, _dtableUtils.getColumnFilterOptions)({
         type: _dtableUtils.CellType.CHECKBOX

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

@@ -66,14 +66,15 @@ class CollaboratorFilter extends _react.Component {
     this.supportMultipleSelectOptions = [_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];
   }
   render() {
-    let _this$props = this.props,
-      filterIndex = _this$props.filterIndex,
-      filterTerm = _this$props.filterTerm,
-      collaborators = _this$props.collaborators,
-      placeholder = _this$props.placeholder,
-      filter_predicate = _this$props.filter_predicate,
-      isInModal = _this$props.isInModal,
-      readOnly = _this$props.readOnly;
+    let {
+      filterIndex,
+      filterTerm,
+      collaborators,
+      placeholder,
+      filter_predicate,
+      isInModal,
+      readOnly
+    } = this.props;
     let isSupportMultipleSelect = this.supportMultipleSelectOptions.indexOf(filter_predicate) > -1 ? true : false;
     let selectedCollaborators = Array.isArray(filterTerm) && filterTerm.length > 0 && filterTerm.map(item => {
       let collaborator = collaborators.find(c => c.email === item);

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../../../ModalPortal"));
@@ -17,18 +16,14 @@ var _lang = require("../../../lang");
 var _departments = require("../../../constants/departments");
 var _jsxRuntime = require("react/jsx-runtime");
 function DepartmentMultipleSelectFilter(props) {
-  const value = props.value,
-    isInModal = props.isInModal,
-    readOnly = props.readOnly,
-    departments = props.departments;
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isShowSelector = _useState2[0],
-    setIsShowSelector = _useState2[1];
-  const _useState3 = (0, _react.useState)(value || []),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    selectedDepartments = _useState4[0],
-    setSelectedDepartments = _useState4[1];
+  const {
+    value,
+    isInModal,
+    readOnly,
+    departments
+  } = props;
+  const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
+  const [selectedDepartments, setSelectedDepartments] = (0, _react.useState)(value || []);
   const selectorRef = (0, _react.useRef)(null);
   (0, _commonHooks.useClickOutside)({
     currDOM: selectorRef.current,
@@ -36,8 +31,10 @@ function DepartmentMultipleSelectFilter(props) {
   }, [selectedDepartments]);
   function renderUserDepartmentOptions() {
     return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
-      const type = option.type,
-        name = option.name;
+      const {
+        type,
+        name
+      } = option;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "department-item",
         onClick: event => selectDepartment(event, type),

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
@@ -17,20 +16,16 @@ var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 function DepartmentSingleSelectFilter(props) {
-  const value = props.value,
-    column = props.column,
-    isInModal = props.isInModal,
-    userDepartmentIdsMap = props.userDepartmentIdsMap,
-    departments = props.departments,
-    readOnly = props.readOnly;
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isShowSelector = _useState2[0],
-    setIsShowSelector = _useState2[1];
-  const _useState3 = (0, _react.useState)(value || ''),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    selectedDepartment = _useState4[0],
-    setSelectedDepartment = _useState4[1];
+  const {
+    value,
+    column,
+    isInModal,
+    userDepartmentIdsMap,
+    departments,
+    readOnly
+  } = props;
+  const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
+  const [selectedDepartment, setSelectedDepartment] = (0, _react.useState)(value || '');
   const selectorRef = (0, _react.useRef)(null);
   let selectedDepartmentIds = [];
   selectedDepartmentIds.push(value);
@@ -41,8 +36,10 @@ function DepartmentSingleSelectFilter(props) {
   function renderUserDepartmentOptions(onSelect) {
     if (!departments || departments.length === 0) return [];
     return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
-      const type = option.type,
-        name = option.name;
+      const {
+        type,
+        name
+      } = option;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "department-item",
         onClick: event => onSelect(event, type),

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

@@ -24,7 +24,9 @@ class FilterCalendar extends _react.Component {
       e.preventDefault();
     };
     this.onChange = value => {
-      const onChange = this.props.onChange;
+      const {
+        onChange
+      } = this.props;
       const searchFormat = 'YYYY-MM-DD';
       this.setState({
         value
@@ -86,9 +88,10 @@ class FilterCalendar extends _react.Component {
     this.defaultCalendarValue = null;
   }
   componentDidMount() {
-    const _this$props = this.props,
-      value = _this$props.value,
-      lang = _this$props.lang;
+    const {
+      value,
+      lang
+    } = this.props;
     const iszhcn = lang === 'zh-cn';
     if (iszhcn) {
       now = now.locale('zh-cn');
@@ -104,9 +107,10 @@ class FilterCalendar extends _react.Component {
     }
   }
   render() {
-    const _this$props2 = this.props,
-      isReadOnly = _this$props2.isReadOnly,
-      firstDayOfWeek = _this$props2.firstDayOfWeek;
+    const {
+      isReadOnly,
+      firstDayOfWeek
+    } = this.props;
     const state = this.state;
     if (isReadOnly) return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       className: "ant-calendar-picker-input ant-input form-control",
@@ -152,7 +156,9 @@ class FilterCalendar extends _react.Component {
           zIndex: 1001
         },
         children: _ref => {
-          let value = _ref.value;
+          let {
+            value
+          } = _ref;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             tabIndex: "0",
             onFocus: this.onReadOnlyFocus,

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

@@ -21,8 +21,12 @@ class FilterGroup extends _react.Component {
   constructor() {
     super(...arguments);
     this.onSelectGroupConjunction = conjunctionOption => {
-      const filterConjunction = this.props.filterConjunction;
-      const newConjunction = conjunctionOption.filterConjunction;
+      const {
+        filterConjunction
+      } = this.props;
+      const {
+        filterConjunction: newConjunction
+      } = conjunctionOption;
       if (newConjunction === filterConjunction) {
         return;
       }
@@ -30,17 +34,22 @@ class FilterGroup extends _react.Component {
     };
     this.deleteFilterGroup = event => {
       event.nativeEvent.stopImmediatePropagation();
-      const index = this.props.index;
+      const {
+        index
+      } = this.props;
       this.props.deleteFilterGroup(index);
     };
     this.modifyConjunctionInGroup = new_filter_conjunction => {
-      const index = this.props.index;
+      const {
+        index
+      } = this.props;
       this.props.modifyConjunctionInGroup(index, new_filter_conjunction);
     };
     this.addFilterIntoGroup = () => {
-      const _this$props = this.props,
-        columns = _this$props.columns,
-        index = _this$props.index;
+      const {
+        columns,
+        index
+      } = this.props;
       const newFilter = (0, _utils.getDefaultFilter)(columns);
       if (!newFilter) {
         return;
@@ -48,18 +57,23 @@ class FilterGroup extends _react.Component {
       this.props.addFilterIntoGroup(index, newFilter);
     };
     this.deleteFilterInGroup = filter_index => {
-      const index = this.props.index;
+      const {
+        index
+      } = this.props;
       this.props.deleteFilterInGroup(index, filter_index);
     };
     this.updateFilterInGroup = (filter_index, new_filter) => {
-      const index = this.props.index;
+      const {
+        index
+      } = this.props;
       this.props.updateFilterInGroup(index, filter_index, new_filter);
     };
     this.renderConjunction = () => {
-      const _this$props2 = this.props,
-        index = _this$props2.index,
-        filterConjunction = _this$props2.filterConjunction,
-        conjunctionOptions = _this$props2.conjunctionOptions;
+      const {
+        index,
+        filterConjunction,
+        conjunctionOptions
+      } = this.props;
       switch (index) {
         case 0:
           {
@@ -84,29 +98,35 @@ class FilterGroup extends _react.Component {
       }
     };
     this.renderGroupFilters = () => {
-      const _this$props3 = this.props,
-        columns = _this$props3.columns,
-        conjunctionOptions = _this$props3.conjunctionOptions,
-        columnOptions = _this$props3.columnOptions,
-        filter = _this$props3.filter,
-        groupIndex = _this$props3.index,
-        collaborators = _this$props3.collaborators,
-        lang = _this$props3.lang,
-        userDepartmentIdsMap = _this$props3.userDepartmentIdsMap,
-        departments = _this$props3.departments,
-        firstDayOfWeek = _this$props3.firstDayOfWeek,
-        readOnly = _this$props3.readOnly;
-      const subFilters = filter.filters,
-        filter_conjunction = filter.filter_conjunction;
+      const {
+        columns,
+        conjunctionOptions,
+        columnOptions,
+        filter,
+        index: groupIndex,
+        collaborators,
+        lang,
+        userDepartmentIdsMap,
+        departments,
+        firstDayOfWeek,
+        readOnly
+      } = this.props;
+      const {
+        filters: subFilters,
+        filter_conjunction
+      } = filter;
       const subFilterConjunction = _constants.SUPPORT_CONJUNCTIONS.includes(filter_conjunction) ? filter_conjunction : _dtableUtils.FILTER_CONJUNCTION_TYPE.AND;
       const subFiltersLength = Array.isArray(subFilters) ? subFilters.length : 0;
       if (subFiltersLength === 0) {
         return null;
       }
       return subFilters.map((currentFilter, subFilterIndex) => {
-        const sub_filter_column_key = currentFilter.column_key;
-        const _ValidateFilter$valid = _dtableUtils.ValidateFilter.validate(currentFilter, columns),
-          error_message = _ValidateFilter$valid.error_message;
+        const {
+          column_key: sub_filter_column_key
+        } = currentFilter;
+        const {
+          error_message
+        } = _dtableUtils.ValidateFilter.validate(currentFilter, columns);
         const filterColumn = columns.find(column => column.key === sub_filter_column_key) || {};
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterItem.default, {
           isInModal: this.props.isInModal,
@@ -131,14 +151,15 @@ class FilterGroup extends _react.Component {
     };
   }
   render() {
-    const _this$props4 = this.props,
-      level = _this$props4.level,
-      index = _this$props4.index,
-      readOnly = _this$props4.readOnly;
+    const {
+      level,
+      index,
+      readOnly
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter",
+        className: "delete-filter seatable-icon-btn",
         onClick: this.deleteFilterGroup,
         role: "button",
         tabIndex: 0,