dtable-ui-component 4.4.3-2 → 4.4.3-alpha1

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

@@ -1,26 +1,18 @@
-"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 _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-var _DTableCustomizeSelect = _interopRequireDefault(require("../../DTableCustomizeSelect"));
-var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
-var _collaboratorFilter = _interopRequireDefault(require("./collaborator-filter"));
-var _departmentSingleSelectFilter = _interopRequireDefault(require("./department-select-filter/department-single-select-filter"));
-var _departmentMultipleSelectFilter = _interopRequireDefault(require("./department-select-filter/department-multiple-select-filter"));
-var _rateItem = _interopRequireDefault(require("./rate-item"));
-var _filterCalendar = _interopRequireDefault(require("./filter-calendar"));
-var _utils = require("../utils");
-var _lang = require("../../lang");
-const EMPTY_PREDICATE = [_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_EMPTY];
-class FilterItem extends _react.default.Component {
+import React, { Fragment } from 'react';
+import classnames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
+import { CellType, COLLABORATOR_COLUMN_TYPES, DATE_COLUMN_OPTIONS, FORMULA_RESULT_TYPE, FILTER_PREDICATE_TYPE, FILTER_TERM_MODIFIER_TYPE, filterTermModifierIsWithin, isDateColumn } from 'dtable-utils';
+import DTableCustomizeSelect from '../../DTableCustomizeSelect';
+import DtableSearchInput from '../../DTableSearchInput';
+import CollaboratorFilter from './collaborator-filter';
+import DepartmentSingleSelectFilter from './department-select-filter/department-single-select-filter';
+import DepartmentMultipleSelectFilter from './department-select-filter/department-multiple-select-filter';
+import RateItem from './rate-item';
+import FilterCalendar from './filter-calendar';
+import { FilterItemUtils, getFilterByColumn, getUpdatedFilterBySelectSingle, getUpdatedFilterBySelectMultiple, getUpdatedFilterByCreator, getUpdatedFilterByCollaborator, getColumnOptions, getUpdatedFilterByPredicate, isCheckboxColumn, generateDefaultUser } from '../utils';
+import { getLocale } from '../../lang';
+const EMPTY_PREDICATE = [FILTER_PREDICATE_TYPE.EMPTY, FILTER_PREDICATE_TYPE.NOT_EMPTY];
+class FilterItem extends React.Component {
   constructor(_props) {
     var _this;
     super(_props);
@@ -34,20 +26,20 @@ class FilterItem extends _react.default.Component {
       let {
         filterPredicateList,
         filterTermModifierList
-      } = (0, _utils.getColumnOptions)(filterColumn, value);
+      } = getColumnOptions(filterColumn, value);
       // 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.generatorPredicateOption(predicate);
       }).filter(item => item) : [];
       const {
         filter_predicate
       } = filter;
-      if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-        if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_WITHIN) {
-          filterTermModifierList = _dtableUtils.filterTermModifierIsWithin;
+      if (isDateColumn(filterColumn)) {
+        if (filter_predicate === FILTER_PREDICATE_TYPE.IS_WITHIN) {
+          filterTermModifierList = filterTermModifierIsWithin;
         }
         this.filterTermModifierOptions = filterTermModifierList.map(termModifier => {
-          return _utils.FilterItemUtils.generatorTermModifierOption(termModifier);
+          return FilterItemUtils.generatorTermModifierOption(termModifier);
         });
       }
     };
@@ -81,7 +73,7 @@ class FilterItem extends _react.default.Component {
         column
       } = value;
       if (column.key === filter.column_key) return;
-      let newFilter = (0, _utils.getFilterByColumn)(column, filter);
+      let newFilter = getFilterByColumn(column, filter);
       if (!newFilter) return;
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
@@ -98,7 +90,7 @@ class FilterItem extends _react.default.Component {
       if (filter.filter_predicate === filterPredicate) {
         return;
       }
-      let newFilter = (0, _utils.getUpdatedFilterByPredicate)(filter, filterColumn, filterPredicate);
+      let newFilter = getUpdatedFilterByPredicate(filter, filterColumn, filterPredicate);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -110,7 +102,7 @@ class FilterItem extends _react.default.Component {
       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];
+      const inputRangeLabel = [FILTER_TERM_MODIFIER_TYPE.EXACT_DATE, FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO, FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW, FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS, FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS];
       if (filter.filter_term_modifier === filterTermModifier) {
         return;
       }
@@ -136,7 +128,7 @@ class FilterItem extends _react.default.Component {
       if (filter.filter_term === option.id) {
         return;
       }
-      let newFilter = (0, _utils.getUpdatedFilterBySelectSingle)(filter, option);
+      let newFilter = getUpdatedFilterBySelectSingle(filter, option);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -148,7 +140,7 @@ class FilterItem extends _react.default.Component {
       const {
         columnOption: option
       } = value;
-      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, option);
+      let newFilter = getUpdatedFilterBySelectMultiple(filter, option);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -160,7 +152,7 @@ class FilterItem extends _react.default.Component {
       const {
         columnOption: collaborator
       } = value;
-      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, collaborator);
+      let newFilter = getUpdatedFilterByCollaborator(filter, collaborator);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -172,7 +164,7 @@ class FilterItem extends _react.default.Component {
       const {
         columnOption: collaborator
       } = value;
-      let newFilter = (0, _utils.getUpdatedFilterByCreator)(filter, collaborator);
+      let newFilter = getUpdatedFilterByCreator(filter, collaborator);
       // the predicate is 'is' or 'is not'
       if (!newFilter) {
         return;
@@ -222,14 +214,14 @@ class FilterItem extends _react.default.Component {
         filterTerm
       } = this.state;
       if (type === 'text') {
-        return /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+        return /*#__PURE__*/React.createElement(DtableSearchInput, {
           value: filterTerm,
           onChange: this.onFilterTermTextChanged,
           autoFocus: false,
-          className: (0, _classnames.default)('text-truncate')
+          className: classnames('text-truncate')
         });
       } else if (type === 'checkbox') {
-        return /*#__PURE__*/_react.default.createElement("input", {
+        return /*#__PURE__*/React.createElement("input", {
           type: "checkbox",
           checked: filterTerm,
           onChange: this.onFilterTermCheckboxChanged
@@ -249,8 +241,8 @@ class FilterItem extends _react.default.Component {
           }
         case 1:
           {
-            const activeConjunction = _utils.FilterItemUtils.getActiveConjunctionOption(filterConjunction);
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+            const activeConjunction = FilterItemUtils.getActiveConjunctionOption(filterConjunction);
+            return /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
               value: activeConjunction,
               options: conjunctionOptions,
               onSelectOption: this.onSelectConjunction
@@ -258,9 +250,9 @@ class FilterItem extends _react.default.Component {
           }
         default:
           {
-            return /*#__PURE__*/_react.default.createElement("span", {
+            return /*#__PURE__*/React.createElement("span", {
               className: "selected-conjunction-show"
-            }, (0, _lang.getLocale)(filterConjunction));
+            }, getLocale(filterConjunction));
           }
       }
     };
@@ -275,7 +267,7 @@ class FilterItem extends _react.default.Component {
       } = 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];
+      const supportMultipleSelectOptions = [FILTER_PREDICATE_TYPE.IS_ANY_OF, FILTER_PREDICATE_TYPE.IS_NONE_OF, FILTER_PREDICATE_TYPE.HAS_ANY_OF, FILTER_PREDICATE_TYPE.HAS_ALL_OF, FILTER_PREDICATE_TYPE.HAS_NONE_OF, FILTER_PREDICATE_TYPE.IS_EXACTLY];
       if (supportMultipleSelectOptions.includes(filter_predicate)) {
         isSupportMultipleSelect = true;
       }
@@ -290,7 +282,7 @@ class FilterItem extends _react.default.Component {
               background: inOption.color,
               color: inOption.textColor || null
             };
-            labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
+            labelArray.push( /*#__PURE__*/React.createElement("span", {
               className: className,
               style: optionStyle,
               key: 'option_' + item,
@@ -301,20 +293,20 @@ class FilterItem extends _react.default.Component {
         });
       }
       const selectedOptionNames = labelArray.length > 0 ? {
-        label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, labelArray)
+        label: /*#__PURE__*/React.createElement(Fragment, null, labelArray)
       } : {};
       const dataOptions = options.map(option => {
-        return _utils.FilterItemUtils.generatorMultipleSelectOption(option, filterTerm);
+        return FilterItemUtils.generatorMultipleSelectOption(option, filterTerm);
       });
-      return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+      return /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
         className: "selector-multiple-select",
         value: selectedOptionNames,
         options: dataOptions,
         onSelectOption: _this.onSelectMultiple,
-        placeholder: (0, _lang.getLocale)('Select_option(s)'),
+        placeholder: getLocale('Select_option(s)'),
         searchable: true,
-        searchPlaceholder: (0, _lang.getLocale)('Find_an_option'),
-        noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available'),
+        searchPlaceholder: getLocale('Find_an_option'),
+        noOptionsPlaceholder: getLocale('No_options_available'),
         supportMultipleSelect: isSupportMultipleSelect
       });
     };
@@ -346,11 +338,11 @@ class FilterItem extends _react.default.Component {
       // 2. CTIME: create-time
       // 3. MTIME: modify-time
       // 4. FORMULA: result_type is date
-      if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-        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 (isDateColumn(filterColumn)) {
+        const inputRangeLabel = [FILTER_TERM_MODIFIER_TYPE.EXACT_DATE, FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO, FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW, FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS, FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS];
         if (inputRangeLabel.indexOf(filter_term_modifier) > -1) {
           if (filter_term_modifier === 'exact_date') {
-            return /*#__PURE__*/_react.default.createElement(_filterCalendar.default, {
+            return /*#__PURE__*/React.createElement(FilterCalendar, {
               lang: lang,
               value: this.state.filterTerm,
               filterColumn: filterColumn,
@@ -362,32 +354,32 @@ class FilterItem extends _react.default.Component {
         return null;
       }
       switch (type) {
-        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:
-        case _dtableUtils.CellType.URL:
+        case CellType.TEXT:
+        case CellType.LONG_TEXT:
+        case CellType.GEOLOCATION:
+        case CellType.NUMBER:
+        case CellType.AUTO_NUMBER:
+        case CellType.DURATION:
+        case CellType.EMAIL:
+        case CellType.URL:
           {
             // The data in the formula column is a date type that has been excluded
-            if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
+            if (filter_predicate === FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
               return null;
             }
             return this.getInputComponent('text');
           }
-        case _dtableUtils.CellType.CHECKBOX:
+        case CellType.CHECKBOX:
           {
             return this.getInputComponent('checkbox');
           }
-        case _dtableUtils.CellType.SINGLE_SELECT:
+        case CellType.SINGLE_SELECT:
           {
             // get options
             let {
               options = []
             } = filterColumn.data || {};
-            if ([_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
+            if ([FILTER_PREDICATE_TYPE.IS_ANY_OF, FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
               return this.renderMultipleSelectOption(options, filter_term);
             }
             let selectedOption = options.find(option => option.id === filter_term);
@@ -399,7 +391,7 @@ class FilterItem extends _react.default.Component {
                 color: selectedOption.textColor || null
               };
               selectedOptionName = {
-                label: /*#__PURE__*/_react.default.createElement("span", {
+                label: /*#__PURE__*/React.createElement("span", {
                   className: className,
                   style: style,
                   title: selectedOption.name,
@@ -408,30 +400,30 @@ class FilterItem extends _react.default.Component {
               };
             }
             let dataOptions = options.map(option => {
-              return _utils.FilterItemUtils.generatorSingleSelectOption(option);
+              return FilterItemUtils.generatorSingleSelectOption(option);
             });
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+            return /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
               className: "selector-single-select",
               value: selectedOptionName,
               options: dataOptions,
               onSelectOption: this.onSelectSingle,
-              placeholder: (0, _lang.getLocale)('Select_an_option'),
+              placeholder: getLocale('Select_an_option'),
               searchable: true,
-              searchPlaceholder: (0, _lang.getLocale)('Find_an_option'),
-              noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available')
+              searchPlaceholder: getLocale('Find_an_option'),
+              noOptionsPlaceholder: getLocale('No_options_available')
             });
           }
-        case _dtableUtils.CellType.MULTIPLE_SELECT:
+        case CellType.MULTIPLE_SELECT:
           {
             let {
               options = []
             } = filterColumn.data || {};
             return this.renderMultipleSelectOption(options, filter_term);
           }
-        case _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT:
+        case CellType.DEPARTMENT_SINGLE_SELECT:
           {
-            if ([_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
-              return /*#__PURE__*/_react.default.createElement(_departmentMultipleSelectFilter.default, {
+            if ([FILTER_PREDICATE_TYPE.IS_ANY_OF, FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
+              return /*#__PURE__*/React.createElement(DepartmentMultipleSelectFilter, {
                 column: filterColumn,
                 value: filter_term || [],
                 userDepartmentIdsMap: userDepartmentIdsMap,
@@ -439,7 +431,7 @@ class FilterItem extends _react.default.Component {
                 onCommit: this.onSelectMultiple
               });
             }
-            return /*#__PURE__*/_react.default.createElement(_departmentSingleSelectFilter.default, {
+            return /*#__PURE__*/React.createElement(DepartmentSingleSelectFilter, {
               roleId: roleId,
               column: filterColumn,
               value: filter_term || '',
@@ -448,43 +440,43 @@ class FilterItem extends _react.default.Component {
               onCommit: this.onSelectSingle
             });
           }
-        case _dtableUtils.CellType.COLLABORATOR:
+        case CellType.COLLABORATOR:
           {
-            if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
+            if (filter_predicate === FILTER_PREDICATE_TYPE.INCLUDE_ME) {
               return null;
             }
-            return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
+            return /*#__PURE__*/React.createElement(CollaboratorFilter, {
               filterIndex: index,
               filterTerm: filter_term || [],
               filter_predicate: filter_predicate,
               collaborators: collaborators,
               onSelectCollaborator: this.onSelectCollaborator,
-              placeholder: (0, _lang.getLocale)('Add_collaborator')
+              placeholder: getLocale('Add_collaborator')
             });
           }
-        case _dtableUtils.CellType.CREATOR:
-        case _dtableUtils.CellType.LAST_MODIFIER:
+        case CellType.CREATOR:
+        case CellType.LAST_MODIFIER:
           {
-            if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
+            if (filter_predicate === FILTER_PREDICATE_TYPE.INCLUDE_ME) {
               return null;
             }
-            const creators = collaborators.concat([(0, _utils.generateDefaultUser)('anonymous')]);
-            return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
+            const creators = collaborators.concat([generateDefaultUser('anonymous')]);
+            return /*#__PURE__*/React.createElement(CollaboratorFilter, {
               filterIndex: index,
               filterTerm: filter_term || [],
               collaborators: creators,
               onSelectCollaborator: this.onSelectCreator,
-              placeholder: type === _dtableUtils.CellType.CREATOR ? (0, _lang.getLocale)('Add_a_creator') : (0, _lang.getLocale)('Add_a_last_modifier')
+              placeholder: type === CellType.CREATOR ? getLocale('Add_a_creator') : getLocale('Add_a_last_modifier')
             });
           }
-        case _dtableUtils.CellType.RATE:
+        case CellType.RATE:
           {
             let {
               rate_max_number
             } = filterColumn.data || {};
             let rateList = [];
             for (let i = 0; i < rate_max_number; i++) {
-              let rateItem = /*#__PURE__*/_react.default.createElement(_rateItem.default, {
+              let rateItem = /*#__PURE__*/React.createElement(RateItem, {
                 key: i,
                 enterRateItemIndex: this.state.enterRateItemIndex,
                 rateItemIndex: i + 1,
@@ -498,16 +490,16 @@ class FilterItem extends _react.default.Component {
               });
               rateList.push(rateItem);
             }
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/React.createElement("div", {
               className: "filter-rate-list"
             }, rateList);
           }
-        case _dtableUtils.CellType.FORMULA:
-        case _dtableUtils.CellType.LINK_FORMULA:
+        case CellType.FORMULA:
+        case CellType.LINK_FORMULA:
           {
             return this.renderFormulaFilterTerm(filter_predicate, filter_term, index, filterColumn);
           }
-        case _dtableUtils.CellType.LINK:
+        case CellType.LINK:
           {
             return this.renderLinkFilterTerm(filter_predicate, filter_term, index, filterColumn);
           }
@@ -524,16 +516,16 @@ class FilterItem extends _react.default.Component {
       const {
         result_type
       } = data || {};
-      if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
+      if (filterPredicate === FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
         return null;
       }
-      if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
+      if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
         return this.renderFilterTermByArrayType(filterPredicate, filterTerm, index, filterColumn);
       }
       return this.getInputComponent('text');
     };
     this.renderLinkFilterTerm = (filterPredicate, filterTerm, index, filterColumn) => {
-      if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
+      if (filterPredicate === FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
         return null;
       }
       return this.renderFilterTermByArrayType(filterPredicate, filterTerm, index, filterColumn);
@@ -556,40 +548,40 @@ class FilterItem extends _react.default.Component {
         type: array_type,
         data: array_data
       };
-      if (array_type === _dtableUtils.CellType.SINGLE_SELECT || array_type === _dtableUtils.CellType.MULTIPLE_SELECT) {
+      if (array_type === CellType.SINGLE_SELECT || array_type === CellType.MULTIPLE_SELECT) {
         let {
           options = []
         } = array_data || {};
         return this.renderMultipleSelectOption(options, filterTerm);
       }
-      if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(array_type) || array_type === _dtableUtils.CellType.RATE || array_type === _dtableUtils.CellType.CHECKBOX) {
+      if (DATE_COLUMN_OPTIONS.includes(array_type) || array_type === CellType.RATE || array_type === CellType.CHECKBOX) {
         return this.renderFilterTerm(linkedColumn);
       }
-      if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
-        if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
+      if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+        if (filterPredicate === FILTER_PREDICATE_TYPE.INCLUDE_ME) {
           return null;
         }
-        return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
+        return /*#__PURE__*/React.createElement(CollaboratorFilter, {
           filterIndex: index,
           filterTerm: filterTerm || [],
           collaborators: collaborators,
           onSelectCollaborator: this.onSelectCollaborator,
-          placeholder: (0, _lang.getLocale)('Add_collaborator')
+          placeholder: getLocale('Add_collaborator')
         });
       }
       return this.getInputComponent('text');
     };
     this.renderErrorMessage = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "ml-2"
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         ref: this.invalidFilterTip,
         className: "dtable-font dtable-icon-exclamation-triangle invalid-filter"
-      }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+      }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
         target: this.invalidFilterTip,
         placement: "bottom",
         fade: false
-      }, (0, _lang.getLocale)('Invalid_filter')));
+      }, getLocale('Invalid_filter')));
     };
     this.state = {
       filterTerm: _props.filter.filter_term,
@@ -597,7 +589,7 @@ class FilterItem extends _react.default.Component {
     };
     this.filterPredicateOptions = null;
     this.filterTermModifierOptions = null;
-    this.invalidFilterTip = /*#__PURE__*/_react.default.createRef();
+    this.invalidFilterTip = React.createRef();
     this.initSelectOptions(_props);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -631,55 +623,55 @@ class FilterItem extends _react.default.Component {
       filter_predicate,
       filter_term_modifier
     } = filter;
-    const activeColumn = _utils.FilterItemUtils.generatorColumnOption(filterColumn);
-    const activePredicate = _utils.FilterItemUtils.generatorPredicateOption(filter_predicate);
+    const activeColumn = FilterItemUtils.generatorColumnOption(filterColumn);
+    const activePredicate = FilterItemUtils.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)) {
+    if (isDateColumn(filterColumn)) {
+      activeTermModifier = FilterItemUtils.generatorTermModifierOption(filter_term_modifier);
+    } else if (isCheckboxColumn(filterColumn)) {
       _isCheckboxColumn = true;
     }
 
     // current predicate is not empty
     const isNeedShowTermModifier = !EMPTY_PREDICATE.includes(filter_predicate);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "filter-item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "delete-filter",
       onClick: this.onDeleteFilter
-    }, /*#__PURE__*/_react.default.createElement("i", {
+    }, /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-fork-number"
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "condition"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "filter-conjunction"
-    }, this.renderConjunction()), /*#__PURE__*/_react.default.createElement("div", {
+    }, this.renderConjunction()), /*#__PURE__*/React.createElement("div", {
       className: "filter-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "filter-column"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
       value: activeColumn,
       options: filterColumnOptions,
       onSelectOption: this.onSelectColumn,
       searchable: true,
-      searchPlaceholder: (0, _lang.getLocale)('Find_column'),
-      noOptionsPlaceholder: (0, _lang.getLocale)('No_results')
-    })), /*#__PURE__*/_react.default.createElement("div", {
+      searchPlaceholder: getLocale('Find_column'),
+      noOptionsPlaceholder: getLocale('No_results')
+    })), /*#__PURE__*/React.createElement("div", {
       className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : '')
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
       value: activePredicate,
       options: filterPredicateOptions,
       onSelectOption: this.onSelectPredicate
-    })), (0, _dtableUtils.isDateColumn)(filterColumn) && isNeedShowTermModifier && /*#__PURE__*/_react.default.createElement("div", {
+    })), isDateColumn(filterColumn) && isNeedShowTermModifier && /*#__PURE__*/React.createElement("div", {
       className: "filter-term-modifier ml-2"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
+    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
       value: activeTermModifier,
       options: filterTermModifierOptions,
       onSelectOption: this.onSelectTermModifier
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "filter-term ml-2"
     }, this.renderFilterTerm(filterColumn)), errMsg && this.renderErrorMessage())));
   }
 }
-var _default = exports.default = FilterItem;
+export default FilterItem;