dtable-ui-component 6.0.42 → 6.0.44

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

@@ -11,14 +11,17 @@ 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,
-    userDepartmentIdsMap
+    readOnly
   } = props;
   const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
   const [selectedDepartment, setSelectedDepartment] = (0, _react.useState)(value || '');
@@ -52,6 +55,9 @@ function DepartmentSingleSelectFilter(props) {
     });
   }
   function onSelectToggle(event) {
+    if (readOnly) {
+      return;
+    }
     event.preventDefault();
     setIsShowSelector(!isShowSelector);
   }
@@ -77,20 +83,33 @@ function DepartmentSingleSelectFilter(props) {
   }, value ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
   }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
-    value: selectedDepartmentIds,
-    departments: departments
+    departments: departments,
+    value: selectedDepartmentIds
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
-  }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _lang.getLocale)('Select_department')), !readOnly && /*#__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, {
+    target: selectorRef.current,
+    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, {
+    target: selectorRef.current,
     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-calendar.js

@@ -119,7 +119,7 @@ class FilterCalendar extends _react.Component {
     const calendarFormat = this.getCalendarFormat();
     const clearStyle = {
       position: 'absolute',
-      top: '15px',
+      top: '8px',
       left: '225px',
       color: 'gray',
       fontSize: '12px'

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

@@ -0,0 +1,188 @@
+"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,
+        readOnly
+      } = this.props;
+      const {
+        filters: subFilters,
+        filter_conjunction
+      } = filter;
+      const subFilterConjunction = _constants.SUPPORT_CONJUNCTIONS.includes(filter_conjunction) ? filter_conjunction : _dtableUtils.FILTER_CONJUNCTION_TYPE.AND;
+      const subFiltersLength = Array.isArray(subFilters) ? subFilters.length : 0;
+      if (subFiltersLength === 0) {
+        return null;
+      }
+      return subFilters.map((currentFilter, subFilterIndex) => {
+        const {
+          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,
+          errMsg: error_message,
+          filterColumn: filterColumn,
+          filterConjunction: subFilterConjunction,
+          conjunctionOptions: conjunctionOptions,
+          filterColumnOptions: columnOptions,
+          collaborators: collaborators,
+          userDepartmentIdsMap: userDepartmentIdsMap,
+          departments: departments,
+          firstDayOfWeek: firstDayOfWeek,
+          readOnly: readOnly,
+          updateConjunction: this.modifyConjunctionInGroup,
+          deleteFilter: this.deleteFilterInGroup,
+          updateFilter: this.updateFilterInGroup
+        });
+      });
+    };
+  }
+  render() {
+    const {
+      level,
+      index,
+      readOnly
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level))
+    }, !readOnly && /*#__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(), !readOnly && /*#__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;