dtable-ui-component 6.0.37 → 6.0.38-alpha.1

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

@@ -11,14 +11,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
 var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../../DepartmentSingleSelectEditor"));
 var _departments = require("../../../constants/departments");
+var _ModalPortal = _interopRequireDefault(require("../../../ModalPortal"));
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentSingleSelectFilter(props) {
   const {
     value,
     column,
-    departments,
-    userDepartmentIdsMap
+    isInModal,
+    userDepartmentIdsMap,
+    departments
   } = props;
   const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
   const [selectedDepartment, setSelectedDepartment] = (0, _react.useState)(value || '');
@@ -77,20 +79,30 @@ function DepartmentSingleSelectFilter(props) {
   }, value ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
   }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
-    value: selectedDepartmentIds,
-    departments: departments
+    value: selectedDepartmentIds
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+  })), isShowSelector && !isInModal && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
     enableSelectRange: false,
+    isInModal: isInModal,
     column: column,
     value: value,
     onCommit: onCommit,
     userDepartmentIdsMap: userDepartmentIdsMap,
     departments: departments,
     renderUserDepartmentOptions: renderUserDepartmentOptions
-  }));
+  }), isShowSelector && isInModal && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+    enableSelectRange: false,
+    isInModal: isInModal,
+    column: column,
+    value: value,
+    position: selectorRef.current.getBoundingClientRect(),
+    onCommit: onCommit,
+    userDepartmentIdsMap: userDepartmentIdsMap,
+    departments: departments,
+    renderUserDepartmentOptions: renderUserDepartmentOptions
+  })));
 }
 var _default = exports.default = DepartmentSingleSelectFilter;

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

@@ -0,0 +1,185 @@
+"use strict";
+
+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 _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _DTableCustomizeSelect = _interopRequireDefault(require("../../DTableCustomizeSelect"));
+var _filterItem = _interopRequireDefault(require("./filter-item"));
+var _filterItemUtils = _interopRequireDefault(require("../utils/filter-item-utils"));
+var _constants = require("../constants");
+var _utils = require("../utils");
+var _DTableCommonAddTool = _interopRequireDefault(require("../../DTableCommonAddTool"));
+var _lang = require("../../lang");
+class FilterGroup extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectGroupConjunction = conjunctionOption => {
+      const {
+        filterConjunction
+      } = this.props;
+      const {
+        filterConjunction: newConjunction
+      } = conjunctionOption;
+      if (newConjunction === filterConjunction) {
+        return;
+      }
+      this.props.modifyFilterConjunction(newConjunction);
+    };
+    this.deleteFilterGroup = event => {
+      event.nativeEvent.stopImmediatePropagation();
+      const {
+        index
+      } = this.props;
+      this.props.deleteFilterGroup(index);
+    };
+    this.modifyConjunctionInGroup = new_filter_conjunction => {
+      const {
+        index
+      } = this.props;
+      this.props.modifyConjunctionInGroup(index, new_filter_conjunction);
+    };
+    this.addFilterIntoGroup = () => {
+      const {
+        columns,
+        index
+      } = this.props;
+      const newFilter = (0, _utils.getDefaultFilter)(columns);
+      if (!newFilter) {
+        return;
+      }
+      this.props.addFilterIntoGroup(index, newFilter);
+    };
+    this.deleteFilterInGroup = filter_index => {
+      const {
+        index
+      } = this.props;
+      this.props.deleteFilterInGroup(index, filter_index);
+    };
+    this.updateFilterInGroup = (filter_index, new_filter) => {
+      const {
+        index
+      } = this.props;
+      this.props.updateFilterInGroup(index, filter_index, new_filter);
+    };
+    this.renderConjunction = () => {
+      const {
+        index,
+        filterConjunction,
+        conjunctionOptions
+      } = this.props;
+      switch (index) {
+        case 0:
+          {
+            return null;
+          }
+        case 1:
+          {
+            const activeConjunction = _filterItemUtils.default.getActiveConjunctionOption(filterConjunction, conjunctionOptions);
+            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+              value: activeConjunction,
+              options: conjunctionOptions,
+              onSelectOption: this.onSelectGroupConjunction
+            });
+          }
+        default:
+          {
+            return /*#__PURE__*/_react.default.createElement("span", {
+              className: "selected-conjunction-show"
+            }, (0, _lang.getLocale)(filterConjunction));
+          }
+      }
+    };
+    this.renderGroupFilters = () => {
+      const {
+        columns,
+        conjunctionOptions,
+        columnOptions,
+        filter,
+        index: groupIndex,
+        collaborators,
+        lang,
+        userDepartmentIdsMap,
+        departments,
+        firstDayOfWeek
+      } = 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 {
+          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__*/_react.default.createElement(_filterItem.default, {
+          key: "filter-in-group-".concat(groupIndex, "-").concat(subFilterIndex),
+          isInModal: this.props.isInModal,
+          lang: lang,
+          index: subFilterIndex,
+          filter: currentFilter,
+          errorMessage: error_message,
+          filterColumn: filterColumn,
+          filterConjunction: subFilterConjunction,
+          conjunctionOptions: conjunctionOptions,
+          filterColumnOptions: columnOptions,
+          collaborators: collaborators,
+          userDepartmentIdsMap: userDepartmentIdsMap,
+          departments: departments,
+          firstDayOfWeek: firstDayOfWeek,
+          updateConjunction: this.modifyConjunctionInGroup,
+          deleteFilter: this.deleteFilterInGroup,
+          updateFilter: this.updateFilterInGroup
+        });
+      });
+    };
+  }
+  render() {
+    const {
+      level,
+      index
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level))
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "delete-filter",
+      onClick: this.deleteFilterGroup,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": (0, _lang.getLocale)('Delete')
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-fork-number"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter-group-wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('filter-conjunction', {
+        'conjunction-text': index > 1
+      })
+    }, this.renderConjunction()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter-group-container"
+    }, this.renderGroupFilters(), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
+      className: "group-filter-add-tool",
+      callBack: this.addFilterIntoGroup,
+      footerName: (0, _lang.getLocale)('Add_filter'),
+      addIconClassName: "popover-add-icon"
+    }))));
+  }
+}
+FilterGroup.defaultProps = {
+  level: 1
+};
+var _default = exports.default = FilterGroup;

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

@@ -17,9 +17,13 @@ var _departmentSingleSelectFilter = _interopRequireDefault(require("./department
 var _departmentMultipleSelectFilter = _interopRequireDefault(require("./department-select-filter/department-multiple-select-filter"));
 var _rateItem = _interopRequireDefault(require("./rate-item"));
 var _filterCalendar = _interopRequireDefault(require("./filter-calendar"));
+var _filterItemUtils = _interopRequireDefault(require("../utils/filter-item-utils"));
 var _utils = require("../utils");
+var _columnUtils = require("../../utils/column-utils");
+var _CheckboxEditor = _interopRequireDefault(require("../../CheckboxEditor"));
+var _NumberEditor = _interopRequireDefault(require("../../NumberEditor"));
+var _constants = require("../constants");
 var _lang = require("../../lang");
-const EMPTY_PREDICATE = [_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_EMPTY];
 class FilterItem extends _react.default.Component {
   constructor(_props) {
     var _this;
@@ -28,16 +32,15 @@ class FilterItem extends _react.default.Component {
     this.initSelectOptions = props => {
       const {
         filter,
-        filterColumn,
-        value
+        filterColumn
       } = props;
       let {
         filterPredicateList,
         filterTermModifierList
-      } = (0, _utils.getColumnOptions)(filterColumn, value);
+      } = (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 _utils.FilterItemUtils.generatorPredicateOption(predicate);
+        return _filterItemUtils.default.generatorPredicateOption(predicate);
       }).filter(item => item) : [];
       const {
         filter_predicate
@@ -47,7 +50,7 @@ class FilterItem extends _react.default.Component {
           filterTermModifierList = _dtableUtils.filterTermModifierIsWithin;
         }
         this.filterTermModifierOptions = filterTermModifierList.map(termModifier => {
-          return _utils.FilterItemUtils.generatorTermModifierOption(termModifier);
+          return _filterItemUtils.default.generatorTermModifierOption(termModifier);
         });
       }
     };
@@ -180,12 +183,21 @@ class FilterItem extends _react.default.Component {
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
-    this.onFilterTermCheckboxChanged = e => {
-      this.onFilterTermChanged(e.target.checked);
+    this.onFilterTermCheckboxChanged = () => {
+      const {
+        filterColumn
+      } = this.props;
+      const value = this.checkboxEditor.getValue();
+      const checked = value[filterColumn.key];
+      this.onFilterTermChanged(checked);
     };
     this.onFilterTermTextChanged = value => {
       this.onFilterTermChanged(value);
     };
+    this.onFilterTermNumberChanged = () => {
+      const value = this.numberEditor.getValue();
+      this.onFilterTermChanged(Object.values(value)[0]);
+    };
     this.onFilterTermChanged = newFilterTerm => {
       const {
         index,
@@ -218,10 +230,13 @@ class FilterItem extends _react.default.Component {
       this.onFilterTermChanged(index);
     };
     this.getInputComponent = type => {
+      const {
+        filterColumn
+      } = this.props;
       const {
         filterTerm
       } = this.state;
-      if (type === 'text') {
+      if (type === _constants.INPUT_CMP_TYPE_MAP.TEXT) {
         return /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
           value: filterTerm,
           onChange: this.onFilterTermTextChanged,
@@ -229,10 +244,22 @@ class FilterItem extends _react.default.Component {
           className: (0, _classnames.default)('text-truncate')
         });
       } else if (type === 'checkbox') {
-        return /*#__PURE__*/_react.default.createElement("input", {
-          type: "checkbox",
-          checked: filterTerm,
-          onChange: this.onFilterTermCheckboxChanged
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "checkbox-filter-term"
+        }, /*#__PURE__*/_react.default.createElement(_CheckboxEditor.default, {
+          ref: ref => this.checkboxEditor = ref,
+          column: filterColumn,
+          value: filterTerm,
+          extraClassName: "filter-item-checkbox",
+          onChange: this.onFilterTermCheckboxChanged,
+          readOnly: false
+        }));
+      } else if (type === 'number') {
+        return /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+          ref: ref => this.numberEditor = ref,
+          column: filterColumn,
+          value: filterTerm,
+          onCommit: this.onFilterTermNumberChanged
         });
       }
     };
@@ -249,11 +276,12 @@ class FilterItem extends _react.default.Component {
           }
         case 1:
           {
-            const activeConjunction = _utils.FilterItemUtils.getActiveConjunctionOption(filterConjunction);
+            const activeConjunction = _filterItemUtils.default.getActiveConjunctionOption(filterConjunction);
             return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
               value: activeConjunction,
               options: conjunctionOptions,
-              onSelectOption: this.onSelectConjunction
+              onSelectOption: this.onSelectConjunction,
+              isInModal: this.props.isInModal
             });
           }
         default:
@@ -284,27 +312,32 @@ class FilterItem extends _react.default.Component {
       if (Array.isArray(options) && Array.isArray(filterTerm)) {
         filterTerm.forEach(item => {
           let inOption = options.find(option => option.id === item);
+          let optionStyle = {
+            margin: '0 10px 0 0'
+          };
+          let optionName = null;
           if (inOption) {
-            let optionStyle = {
-              margin: '0 10px 0 0',
-              background: inOption.color,
-              color: inOption.textColor || null
-            };
-            labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
-              className: className,
-              style: optionStyle,
-              key: 'option_' + item,
-              title: inOption.name,
-              "aria-label": inOption.name
-            }, inOption.name));
+            optionName = inOption.name;
+            optionStyle.background = inOption.color;
+            optionStyle.color = inOption.textColor || null;
+          } else {
+            optionStyle.background = _constants.DELETED_OPTION_BACKGROUND_COLOR;
+            optionName = (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
           }
+          labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
+            className: className,
+            style: optionStyle,
+            key: 'option_' + item,
+            title: optionName,
+            "aria-label": optionName
+          }, optionName));
         });
       }
       const selectedOptionNames = labelArray.length > 0 ? {
         label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, labelArray)
       } : {};
       const dataOptions = options.map(option => {
-        return _utils.FilterItemUtils.generatorMultipleSelectOption(option, filterTerm);
+        return _filterItemUtils.default.generatorMultipleSelectOption(option, filterTerm);
       });
       return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
         className: "selector-multiple-select",
@@ -315,7 +348,8 @@ class FilterItem extends _react.default.Component {
         searchable: true,
         searchPlaceholder: (0, _lang.getLocale)('Search_option'),
         noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available'),
-        supportMultipleSelect: isSupportMultipleSelect
+        supportMultipleSelect: isSupportMultipleSelect,
+        isInModal: _this.props.isInModal
       });
     };
     this.renderFilterTerm = filterColumn => {
@@ -337,7 +371,7 @@ class FilterItem extends _react.default.Component {
         filter_term_modifier
       } = filter;
       // predicate is empty or not empty
-      if (EMPTY_PREDICATE.includes(filter_predicate)) {
+      if (_constants.EMPTY_PREDICATE.includes(filter_predicate)) {
         return null;
       }
 
@@ -366,7 +400,6 @@ class FilterItem extends _react.default.Component {
         case _dtableUtils.CellType.TEXT:
         case _dtableUtils.CellType.LONG_TEXT:
         case _dtableUtils.CellType.GEOLOCATION:
-        case _dtableUtils.CellType.NUMBER:
         case _dtableUtils.CellType.AUTO_NUMBER:
         case _dtableUtils.CellType.DURATION:
         case _dtableUtils.CellType.EMAIL:
@@ -376,11 +409,15 @@ class FilterItem extends _react.default.Component {
             if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
               return null;
             }
-            return this.getInputComponent('text');
+            return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.TEXT);
+          }
+        case _dtableUtils.CellType.NUMBER:
+          {
+            return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.NUMBER);
           }
         case _dtableUtils.CellType.CHECKBOX:
           {
-            return this.getInputComponent('checkbox');
+            return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.CHECKBOX);
           }
         case _dtableUtils.CellType.SINGLE_SELECT:
           {
@@ -409,7 +446,7 @@ class FilterItem extends _react.default.Component {
               };
             }
             let dataOptions = options.map(option => {
-              return _utils.FilterItemUtils.generatorSingleSelectOption(option);
+              return _filterItemUtils.default.generatorSingleSelectOption(option);
             });
             return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
               className: "selector-single-select",
@@ -419,7 +456,8 @@ class FilterItem extends _react.default.Component {
               placeholder: (0, _lang.getLocale)('Select_an_option'),
               searchable: true,
               searchPlaceholder: (0, _lang.getLocale)('Search_option'),
-              noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available')
+              noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available'),
+              isInModal: this.props.isInModal
             });
           }
         case _dtableUtils.CellType.MULTIPLE_SELECT:
@@ -436,7 +474,8 @@ class FilterItem extends _react.default.Component {
                 value: filter_term || [],
                 userDepartmentIdsMap: userDepartmentIdsMap,
                 departments: departments,
-                onCommit: this.onSelectMultiple
+                onCommit: this.onSelectMultiple,
+                isInModal: this.props.isInModal
               });
             }
             return /*#__PURE__*/_react.default.createElement(_departmentSingleSelectFilter.default, {
@@ -444,7 +483,8 @@ class FilterItem extends _react.default.Component {
               value: filter_term || '',
               userDepartmentIdsMap: userDepartmentIdsMap,
               departments: departments,
-              onCommit: this.onSelectSingle
+              onCommit: this.onSelectSingle,
+              isInModal: this.props.isInModal
             });
           }
         case _dtableUtils.CellType.COLLABORATOR:
@@ -457,7 +497,8 @@ class FilterItem extends _react.default.Component {
               filterTerm: filter_term || [],
               filter_predicate: filter_predicate,
               collaborators: collaborators,
-              onSelectCollaborator: this.onSelectCollaborator
+              onSelectCollaborator: this.onSelectCollaborator,
+              isInModal: this.props.isInModal
             });
           }
         case _dtableUtils.CellType.CREATOR:
@@ -471,7 +512,8 @@ class FilterItem extends _react.default.Component {
               filterIndex: index,
               filterTerm: filter_term || [],
               collaborators: creators,
-              onSelectCollaborator: this.onSelectCreator
+              onSelectCollaborator: this.onSelectCreator,
+              isInModal: this.props.isInModal
             });
           }
         case _dtableUtils.CellType.RATE:
@@ -524,10 +566,19 @@ class FilterItem extends _react.default.Component {
       if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
         return null;
       }
+      if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.NUMBER) {
+        const {
+          format
+        } = filterColumn.data || {};
+        if (format === _dtableUtils.CellType.DURATION) {
+          return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.DURATION, filterColumn);
+        }
+        return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.NUMBER, filterColumn);
+      }
       if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
         return this.renderFilterTermByArrayType(filterPredicate, filterTerm, index, filterColumn);
       }
-      return this.getInputComponent('text');
+      return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.TEXT);
     };
     this.renderLinkFilterTerm = (filterPredicate, filterTerm, index, filterColumn) => {
       if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
@@ -564,7 +615,8 @@ class FilterItem extends _react.default.Component {
         return /*#__PURE__*/_react.default.createElement(_departmentMultipleSelectFilter.default, {
           value: filterTerm || [],
           departments: departments,
-          onCommit: this.onSelectMultiple
+          onCommit: this.onSelectMultiple,
+          isInModal: this.props.isInModal
         });
       }
       if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(array_type) || array_type === _dtableUtils.CellType.RATE || array_type === _dtableUtils.CellType.CHECKBOX) {
@@ -579,12 +631,22 @@ class FilterItem extends _react.default.Component {
           filterTerm: filterTerm || [],
           collaborators: collaborators,
           onSelectCollaborator: this.onSelectCollaborator,
-          placeholder: (0, _lang.getLocale)('Add_collaborator')
+          placeholder: (0, _lang.getLocale)('Add_collaborator'),
+          isInModal: this.props.isInModal
         });
       }
       return this.getInputComponent('text');
     };
+    this.isRenderErrorTips = () => {
+      const {
+        errMsg
+      } = this.props;
+      return errMsg && errMsg !== _dtableUtils.FILTER_ERR_MSG.INCOMPLETE_FILTER;
+    };
     this.renderErrorMessage = () => {
+      if (!this.isRenderErrorTips()) {
+        return null;
+      }
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "ml-2"
       }, /*#__PURE__*/_react.default.createElement("span", {
@@ -602,6 +664,7 @@ class FilterItem extends _react.default.Component {
     };
     this.filterPredicateOptions = null;
     this.filterTermModifierOptions = null;
+    this.filterToolTip = /*#__PURE__*/_react.default.createRef();
     this.invalidFilterTip = /*#__PURE__*/_react.default.createRef();
     this.initSelectOptions(_props);
   }
@@ -629,25 +692,31 @@ class FilterItem extends _react.default.Component {
     const {
       filter,
       filterColumn,
-      filterColumnOptions,
-      errMsg
+      filterColumnOptions
     } = this.props;
     const {
       filter_predicate,
       filter_term_modifier
     } = filter;
-    const activeColumn = _utils.FilterItemUtils.generatorColumnOption(filterColumn);
-    const activePredicate = _utils.FilterItemUtils.generatorPredicateOption(filter_predicate);
+    const activeColumn = _filterItemUtils.default.generatorColumnOption(filterColumn);
+    const activePredicate = _filterItemUtils.default.generatorPredicateOption(filter_predicate);
     let activeTermModifier = null;
     let _isCheckboxColumn = false;
     if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-      activeTermModifier = _utils.FilterItemUtils.generatorTermModifierOption(filter_term_modifier);
-    } else if ((0, _utils.isCheckboxColumn)(filterColumn)) {
+      activeTermModifier = _filterItemUtils.default.generatorTermModifierOption(filter_term_modifier);
+    } else if ((0, _columnUtils.isCheckboxColumn)(filterColumn)) {
       _isCheckboxColumn = true;
     }
+    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();
+    const showToolTip = computedColumnTypes.includes(type) && isContainPredicate && !isRenderErrorTips;
 
     // current predicate is not empty
-    const isNeedShowTermModifier = !EMPTY_PREDICATE.includes(filter_predicate);
+    const isNeedShowTermModifier = !_constants.EMPTY_PREDICATE.includes(filter_predicate);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-item"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -669,22 +738,38 @@ class FilterItem extends _react.default.Component {
       onSelectOption: this.onSelectColumn,
       searchable: true,
       searchPlaceholder: (0, _lang.getLocale)('Search_column'),
-      noOptionsPlaceholder: (0, _lang.getLocale)('No_results')
+      noOptionsPlaceholder: (0, _lang.getLocale)('No_results'),
+      isInModal: this.props.isInModal
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : '')
     }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
       value: activePredicate,
       options: filterPredicateOptions,
-      onSelectOption: this.onSelectPredicate
+      onSelectOption: this.onSelectPredicate,
+      isInModal: this.props.isInModal
     })), (0, _dtableUtils.isDateColumn)(filterColumn) && isNeedShowTermModifier && /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-term-modifier ml-2"
     }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
       value: activeTermModifier,
       options: filterTermModifierOptions,
-      onSelectOption: this.onSelectTermModifier
+      onSelectOption: this.onSelectTermModifier,
+      isInModal: this.props.isInModal
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-term ml-2"
-    }, this.renderFilterTerm(filterColumn)), errMsg && this.renderErrorMessage())));
+    }, this.renderFilterTerm(filterColumn)), showToolTip && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ml-2"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      ref: this.filterToolTip,
+      id: "filter_tool_tip",
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-exclamation-triangle",
+      style: {
+        color: '#FFC92C'
+      }
+    }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+      placement: "bottom",
+      target: this.filterToolTip
+    }, (0, _lang.getLocale)('filter_tip_message'))), this.renderErrorMessage())));
   }
 }
 var _default = exports.default = FilterItem;