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

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

@@ -11,16 +11,14 @@ 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,
-    isInModal,
-    userDepartmentIdsMap,
-    departments
+    departments,
+    userDepartmentIdsMap
   } = props;
   const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
   const [selectedDepartment, setSelectedDepartment] = (0, _react.useState)(value || '');
@@ -79,30 +77,20 @@ function DepartmentSingleSelectFilter(props) {
   }, value ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
   }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
-    value: selectedDepartmentIds
+    value: selectedDepartmentIds,
+    departments: departments
   })) : /*#__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 && !isInModal && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+  })), isShowSelector && /*#__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-item.js

@@ -17,13 +17,9 @@ 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;
@@ -32,15 +28,16 @@ class FilterItem extends _react.default.Component {
     this.initSelectOptions = props => {
       const {
         filter,
-        filterColumn
+        filterColumn,
+        value
       } = props;
       let {
         filterPredicateList,
         filterTermModifierList
-      } = (0, _utils.getColumnOptions)(filterColumn);
+      } = (0, _utils.getColumnOptions)(filterColumn, value);
       // The value of the calculation formula column does not exist in the shared view
       this.filterPredicateOptions = filterPredicateList ? filterPredicateList.map(predicate => {
-        return _filterItemUtils.default.generatorPredicateOption(predicate);
+        return _utils.FilterItemUtils.generatorPredicateOption(predicate);
       }).filter(item => item) : [];
       const {
         filter_predicate
@@ -50,7 +47,7 @@ class FilterItem extends _react.default.Component {
           filterTermModifierList = _dtableUtils.filterTermModifierIsWithin;
         }
         this.filterTermModifierOptions = filterTermModifierList.map(termModifier => {
-          return _filterItemUtils.default.generatorTermModifierOption(termModifier);
+          return _utils.FilterItemUtils.generatorTermModifierOption(termModifier);
         });
       }
     };
@@ -183,21 +180,12 @@ class FilterItem extends _react.default.Component {
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
-    this.onFilterTermCheckboxChanged = () => {
-      const {
-        filterColumn
-      } = this.props;
-      const value = this.checkboxEditor.getValue();
-      const checked = value[filterColumn.key];
-      this.onFilterTermChanged(checked);
+    this.onFilterTermCheckboxChanged = e => {
+      this.onFilterTermChanged(e.target.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,
@@ -230,13 +218,10 @@ class FilterItem extends _react.default.Component {
       this.onFilterTermChanged(index);
     };
     this.getInputComponent = type => {
-      const {
-        filterColumn
-      } = this.props;
       const {
         filterTerm
       } = this.state;
-      if (type === _constants.INPUT_CMP_TYPE_MAP.TEXT) {
+      if (type === 'text') {
         return /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
           value: filterTerm,
           onChange: this.onFilterTermTextChanged,
@@ -244,22 +229,10 @@ class FilterItem extends _react.default.Component {
           className: (0, _classnames.default)('text-truncate')
         });
       } else if (type === 'checkbox') {
-        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
+        return /*#__PURE__*/_react.default.createElement("input", {
+          type: "checkbox",
+          checked: filterTerm,
+          onChange: this.onFilterTermCheckboxChanged
         });
       }
     };
@@ -276,12 +249,11 @@ class FilterItem extends _react.default.Component {
           }
         case 1:
           {
-            const activeConjunction = _filterItemUtils.default.getActiveConjunctionOption(filterConjunction);
+            const activeConjunction = _utils.FilterItemUtils.getActiveConjunctionOption(filterConjunction);
             return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
               value: activeConjunction,
               options: conjunctionOptions,
-              onSelectOption: this.onSelectConjunction,
-              isInModal: this.props.isInModal
+              onSelectOption: this.onSelectConjunction
             });
           }
         default:
@@ -312,32 +284,27 @@ 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) {
-            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);
+            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));
           }
-          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 _filterItemUtils.default.generatorMultipleSelectOption(option, filterTerm);
+        return _utils.FilterItemUtils.generatorMultipleSelectOption(option, filterTerm);
       });
       return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
         className: "selector-multiple-select",
@@ -348,8 +315,7 @@ class FilterItem extends _react.default.Component {
         searchable: true,
         searchPlaceholder: (0, _lang.getLocale)('Search_option'),
         noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available'),
-        supportMultipleSelect: isSupportMultipleSelect,
-        isInModal: _this.props.isInModal
+        supportMultipleSelect: isSupportMultipleSelect
       });
     };
     this.renderFilterTerm = filterColumn => {
@@ -371,7 +337,7 @@ class FilterItem extends _react.default.Component {
         filter_term_modifier
       } = filter;
       // predicate is empty or not empty
-      if (_constants.EMPTY_PREDICATE.includes(filter_predicate)) {
+      if (EMPTY_PREDICATE.includes(filter_predicate)) {
         return null;
       }
 
@@ -400,6 +366,7 @@ 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:
@@ -409,15 +376,11 @@ class FilterItem extends _react.default.Component {
             if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
               return null;
             }
-            return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.TEXT);
-          }
-        case _dtableUtils.CellType.NUMBER:
-          {
-            return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.NUMBER);
+            return this.getInputComponent('text');
           }
         case _dtableUtils.CellType.CHECKBOX:
           {
-            return this.getInputComponent(_constants.INPUT_CMP_TYPE_MAP.CHECKBOX);
+            return this.getInputComponent('checkbox');
           }
         case _dtableUtils.CellType.SINGLE_SELECT:
           {
@@ -446,7 +409,7 @@ class FilterItem extends _react.default.Component {
               };
             }
             let dataOptions = options.map(option => {
-              return _filterItemUtils.default.generatorSingleSelectOption(option);
+              return _utils.FilterItemUtils.generatorSingleSelectOption(option);
             });
             return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
               className: "selector-single-select",
@@ -456,8 +419,7 @@ 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'),
-              isInModal: this.props.isInModal
+              noOptionsPlaceholder: (0, _lang.getLocale)('No_options_available')
             });
           }
         case _dtableUtils.CellType.MULTIPLE_SELECT:
@@ -474,8 +436,7 @@ class FilterItem extends _react.default.Component {
                 value: filter_term || [],
                 userDepartmentIdsMap: userDepartmentIdsMap,
                 departments: departments,
-                onCommit: this.onSelectMultiple,
-                isInModal: this.props.isInModal
+                onCommit: this.onSelectMultiple
               });
             }
             return /*#__PURE__*/_react.default.createElement(_departmentSingleSelectFilter.default, {
@@ -483,8 +444,7 @@ class FilterItem extends _react.default.Component {
               value: filter_term || '',
               userDepartmentIdsMap: userDepartmentIdsMap,
               departments: departments,
-              onCommit: this.onSelectSingle,
-              isInModal: this.props.isInModal
+              onCommit: this.onSelectSingle
             });
           }
         case _dtableUtils.CellType.COLLABORATOR:
@@ -497,8 +457,7 @@ class FilterItem extends _react.default.Component {
               filterTerm: filter_term || [],
               filter_predicate: filter_predicate,
               collaborators: collaborators,
-              onSelectCollaborator: this.onSelectCollaborator,
-              isInModal: this.props.isInModal
+              onSelectCollaborator: this.onSelectCollaborator
             });
           }
         case _dtableUtils.CellType.CREATOR:
@@ -512,8 +471,7 @@ class FilterItem extends _react.default.Component {
               filterIndex: index,
               filterTerm: filter_term || [],
               collaborators: creators,
-              onSelectCollaborator: this.onSelectCreator,
-              isInModal: this.props.isInModal
+              onSelectCollaborator: this.onSelectCreator
             });
           }
         case _dtableUtils.CellType.RATE:
@@ -566,19 +524,10 @@ 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(_constants.INPUT_CMP_TYPE_MAP.TEXT);
+      return this.getInputComponent('text');
     };
     this.renderLinkFilterTerm = (filterPredicate, filterTerm, index, filterColumn) => {
       if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
@@ -615,8 +564,7 @@ class FilterItem extends _react.default.Component {
         return /*#__PURE__*/_react.default.createElement(_departmentMultipleSelectFilter.default, {
           value: filterTerm || [],
           departments: departments,
-          onCommit: this.onSelectMultiple,
-          isInModal: this.props.isInModal
+          onCommit: this.onSelectMultiple
         });
       }
       if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(array_type) || array_type === _dtableUtils.CellType.RATE || array_type === _dtableUtils.CellType.CHECKBOX) {
@@ -631,22 +579,12 @@ class FilterItem extends _react.default.Component {
           filterTerm: filterTerm || [],
           collaborators: collaborators,
           onSelectCollaborator: this.onSelectCollaborator,
-          placeholder: (0, _lang.getLocale)('Add_collaborator'),
-          isInModal: this.props.isInModal
+          placeholder: (0, _lang.getLocale)('Add_collaborator')
         });
       }
       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", {
@@ -664,7 +602,6 @@ 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);
   }
@@ -692,31 +629,25 @@ class FilterItem extends _react.default.Component {
     const {
       filter,
       filterColumn,
-      filterColumnOptions
+      filterColumnOptions,
+      errMsg
     } = this.props;
     const {
       filter_predicate,
       filter_term_modifier
     } = filter;
-    const activeColumn = _filterItemUtils.default.generatorColumnOption(filterColumn);
-    const activePredicate = _filterItemUtils.default.generatorPredicateOption(filter_predicate);
+    const activeColumn = _utils.FilterItemUtils.generatorColumnOption(filterColumn);
+    const activePredicate = _utils.FilterItemUtils.generatorPredicateOption(filter_predicate);
     let activeTermModifier = null;
     let _isCheckboxColumn = false;
     if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-      activeTermModifier = _filterItemUtils.default.generatorTermModifierOption(filter_term_modifier);
-    } else if ((0, _columnUtils.isCheckboxColumn)(filterColumn)) {
+      activeTermModifier = _utils.FilterItemUtils.generatorTermModifierOption(filter_term_modifier);
+    } else if ((0, _utils.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 = !_constants.EMPTY_PREDICATE.includes(filter_predicate);
+    const isNeedShowTermModifier = !EMPTY_PREDICATE.includes(filter_predicate);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-item"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -738,38 +669,22 @@ class FilterItem extends _react.default.Component {
       onSelectOption: this.onSelectColumn,
       searchable: true,
       searchPlaceholder: (0, _lang.getLocale)('Search_column'),
-      noOptionsPlaceholder: (0, _lang.getLocale)('No_results'),
-      isInModal: this.props.isInModal
+      noOptionsPlaceholder: (0, _lang.getLocale)('No_results')
     })), /*#__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,
-      isInModal: this.props.isInModal
+      onSelectOption: this.onSelectPredicate
     })), (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,
-      isInModal: this.props.isInModal
+      onSelectOption: this.onSelectTermModifier
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "filter-term ml-2"
-    }, 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())));
+    }, this.renderFilterTerm(filterColumn)), errMsg && this.renderErrorMessage())));
   }
 }
 var _default = exports.default = FilterItem;