dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/DTableFiltersPopover/utils/index.js

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

@@ -49,7 +49,7 @@ class CollaboratorFilter extends _react.Component {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-check-icon",
                 children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: "option-edit dtable-font dtable-icon-check"
+                  className: "option-edit dtable-font dtable-icon-check-mark"
                 })
               })]
             })
@@ -66,15 +66,14 @@ 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 {
-      filterIndex,
-      filterTerm,
-      collaborators,
-      placeholder,
-      filter_predicate,
-      isInModal,
-      readOnly
-    } = this.props;
+    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 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,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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"));
@@ -16,14 +17,18 @@ var _lang = require("../../../lang");
 var _departments = require("../../../constants/departments");
 var _jsxRuntime = require("react/jsx-runtime");
 function DepartmentMultipleSelectFilter(props) {
-  const {
-    value,
-    isInModal,
-    readOnly,
-    departments
-  } = props;
-  const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
-  const [selectedDepartments, setSelectedDepartments] = (0, _react.useState)(value || []);
+  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 selectorRef = (0, _react.useRef)(null);
   (0, _commonHooks.useClickOutside)({
     currDOM: selectorRef.current,
@@ -31,10 +36,8 @@ function DepartmentMultipleSelectFilter(props) {
   }, [selectedDepartments]);
   function renderUserDepartmentOptions() {
     return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
-      const {
-        type,
-        name
-      } = option;
+      const type = option.type,
+        name = option.name;
       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,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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"));
@@ -16,16 +17,20 @@ var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 function DepartmentSingleSelectFilter(props) {
-  const {
-    value,
-    column,
-    isInModal,
-    userDepartmentIdsMap,
-    departments,
-    readOnly
-  } = props;
-  const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
-  const [selectedDepartment, setSelectedDepartment] = (0, _react.useState)(value || '');
+  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 selectorRef = (0, _react.useRef)(null);
   let selectedDepartmentIds = [];
   selectedDepartmentIds.push(value);
@@ -36,10 +41,8 @@ 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,
-        name
-      } = option;
+      const type = option.type,
+        name = option.name;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "department-item",
         onClick: event => onSelect(event, type),

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

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

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

@@ -21,12 +21,8 @@ class FilterGroup extends _react.Component {
   constructor() {
     super(...arguments);
     this.onSelectGroupConjunction = conjunctionOption => {
-      const {
-        filterConjunction
-      } = this.props;
-      const {
-        filterConjunction: newConjunction
-      } = conjunctionOption;
+      const filterConjunction = this.props.filterConjunction;
+      const newConjunction = conjunctionOption.filterConjunction;
       if (newConjunction === filterConjunction) {
         return;
       }
@@ -34,22 +30,17 @@ class FilterGroup extends _react.Component {
     };
     this.deleteFilterGroup = event => {
       event.nativeEvent.stopImmediatePropagation();
-      const {
-        index
-      } = this.props;
+      const index = this.props.index;
       this.props.deleteFilterGroup(index);
     };
     this.modifyConjunctionInGroup = new_filter_conjunction => {
-      const {
-        index
-      } = this.props;
+      const index = this.props.index;
       this.props.modifyConjunctionInGroup(index, new_filter_conjunction);
     };
     this.addFilterIntoGroup = () => {
-      const {
-        columns,
-        index
-      } = this.props;
+      const _this$props = this.props,
+        columns = _this$props.columns,
+        index = _this$props.index;
       const newFilter = (0, _utils.getDefaultFilter)(columns);
       if (!newFilter) {
         return;
@@ -57,23 +48,18 @@ class FilterGroup extends _react.Component {
       this.props.addFilterIntoGroup(index, newFilter);
     };
     this.deleteFilterInGroup = filter_index => {
-      const {
-        index
-      } = this.props;
+      const index = this.props.index;
       this.props.deleteFilterInGroup(index, filter_index);
     };
     this.updateFilterInGroup = (filter_index, new_filter) => {
-      const {
-        index
-      } = this.props;
+      const index = this.props.index;
       this.props.updateFilterInGroup(index, filter_index, new_filter);
     };
     this.renderConjunction = () => {
-      const {
-        index,
-        filterConjunction,
-        conjunctionOptions
-      } = this.props;
+      const _this$props2 = this.props,
+        index = _this$props2.index,
+        filterConjunction = _this$props2.filterConjunction,
+        conjunctionOptions = _this$props2.conjunctionOptions;
       switch (index) {
         case 0:
           {
@@ -98,35 +84,29 @@ class FilterGroup extends _react.Component {
       }
     };
     this.renderGroupFilters = () => {
-      const {
-        columns,
-        conjunctionOptions,
-        columnOptions,
-        filter,
-        index: groupIndex,
-        collaborators,
-        lang,
-        userDepartmentIdsMap,
-        departments,
-        firstDayOfWeek,
-        readOnly
-      } = this.props;
-      const {
-        filters: subFilters,
-        filter_conjunction
-      } = filter;
+      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 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 {
-          column_key: sub_filter_column_key
-        } = currentFilter;
-        const {
-          error_message
-        } = _dtableUtils.ValidateFilter.validate(currentFilter, columns);
+        const sub_filter_column_key = currentFilter.column_key;
+        const _ValidateFilter$valid = _dtableUtils.ValidateFilter.validate(currentFilter, columns),
+          error_message = _ValidateFilter$valid.error_message;
         const filterColumn = columns.find(column => column.key === sub_filter_column_key) || {};
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterItem.default, {
           isInModal: this.props.isInModal,
@@ -151,11 +131,10 @@ class FilterGroup extends _react.Component {
     };
   }
   render() {
-    const {
-      level,
-      index,
-      readOnly
-    } = this.props;
+    const _this$props4 = this.props,
+      level = _this$props4.level,
+      index = _this$props4.index,
+      readOnly = _this$props4.readOnly;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {