dtable-ui-component 6.0.42 → 6.0.44

package/lib/CheckboxEditor/mb-editor.js

@@ -28,6 +28,10 @@ class MBCheckboxEditor extends _react.Component {
       });
     };
     this.onChangeCheckboxValue = event => {
+      const {
+        readOnly
+      } = this.props;
+      if (readOnly) return;
       if (event) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();

package/lib/CheckboxEditor/pc-editor.js

@@ -39,6 +39,10 @@ class PCCheckboxEditor extends _react.Component {
       });
     };
     this.onChangeCheckboxValue = event => {
+      const {
+        readOnly
+      } = this.props;
+      if (readOnly) return;
       if (event) {
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();

package/lib/DTableCommonAddTool/index.js

@@ -23,7 +23,7 @@ function DTableCommonAddTool(_ref) {
   }, !hideIcon && /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "text-truncate"
+    className: "add-new-option text-truncate"
   }, footerName));
 }
 var _default = exports.default = DTableCommonAddTool;

package/lib/DTableCustomizeSelect/index.css

@@ -57,16 +57,16 @@
   background: #fff;
 }
 
-.dtable-select.selector-collaborator .option-group .option-group-content,
+.dtable-select.dtable-ui-collaborator-selector .option-group .option-group-content,
 .dtable-select.selector-group .option-group .option-group-content {
   padding: 10px;
 }
 
-.dtable-select.custom-select.selector-collaborator .option-group .option-group-content {
+.dtable-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
   padding: 10px 0;
 }
 
-.dtable-select.custom-select.selector-collaborator .option {
+.dtable-select.custom-select.dtable-ui-collaborator-selector .option {
   padding: 5px 0 5px 10px !important;
   line-height: 20px;
 }

package/lib/DTableFiltersPopover/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STRING_PREDICATE = exports.SPECIAL_TERM_TYPE = exports.SIMPLE_TEXT_INPUT_COLUMNS_MAP = exports.MULTIPLE_SELECTOR_COLUMNS = exports.FORMULA_COLUMN_TYPES = exports.FILTER_TERM_MODIFIER_SHOW = exports.DATE_LABEL_MAP = exports.DATE_EMPTY_LABEL_MAP = exports.ARRAY_PREDICATE = void 0;
+exports.SUPPORT_CONJUNCTIONS = exports.STRING_PREDICATE = exports.SPECIAL_TERM_TYPE = exports.SIMPLE_TEXT_INPUT_COLUMNS_MAP = exports.MULTIPLE_SELECTOR_COLUMNS = exports.INPUT_CMP_TYPE_MAP = exports.FORMULA_COLUMN_TYPES = exports.FILTER_TERM_MODIFIER_SHOW = exports.FILTER_OPERATION_TYPE = exports.FILTER_ERR_MSG_LIST = exports.FILTER_ACTION_TYPE = exports.EMPTY_PREDICATE = exports.DELETED_OPTION_TIPS = exports.DELETED_OPTION_BACKGROUND_COLOR = exports.DATE_LABEL_MAP = exports.DATE_EMPTY_LABEL_MAP = exports.ARRAY_PREDICATE = void 0;
 var _dtableUtils = require("dtable-utils");
 const FORMULA_COLUMN_TYPES = exports.FORMULA_COLUMN_TYPES = [_dtableUtils.CellType.FORMULA, _dtableUtils.CellType.LINK_FORMULA];
 const SPECIAL_TERM_TYPE = exports.SPECIAL_TERM_TYPE = {
@@ -67,4 +67,32 @@ const FILTER_TERM_MODIFIER_SHOW = exports.FILTER_TERM_MODIFIER_SHOW = {
   'this_week': 'This_week',
   'this_month': 'This_month',
   'this_year': 'This_year'
-};
+};
+const FILTER_ACTION_TYPE = exports.FILTER_ACTION_TYPE = {
+  DELETE: 'delete',
+  ADD: 'add',
+  UPDATE_FILTER_CONJUNCTION: 'update_filter_conjunction',
+  UPDATE_FILTER: 'update_filter'
+};
+const FILTER_ERR_MSG_LIST = exports.FILTER_ERR_MSG_LIST = [_dtableUtils.FILTER_ERR_MSG.INVALID_FILTER, _dtableUtils.FILTER_ERR_MSG.INCOMPLETE_FILTER, _dtableUtils.FILTER_ERR_MSG.COLUMN_MISSING, _dtableUtils.FILTER_ERR_MSG.COLUMN_NOT_SUPPORTED, _dtableUtils.FILTER_ERR_MSG.UNMATCHED_PREDICATE, _dtableUtils.FILTER_ERR_MSG.UNMATCHED_MODIFIER, _dtableUtils.FILTER_ERR_MSG.INVALID_TERM];
+const FILTER_OPERATION_TYPE = exports.FILTER_OPERATION_TYPE = {
+  MODIFY_CONJUNCTION: 'MODIFY_CONJUNCTION',
+  DELETE_FILTER: 'DELETE_FILTER',
+  UPDATE_FILTER: 'UPDATE_FILTER',
+  ADD_FILTER: 'ADD_FILTER',
+  MOVE_FILTER: 'MOVE_FILTER',
+  MODIFY_CONJUNCTION_IN_GROUP: 'MODIFY_CONJUNCTION_IN_GROUP',
+  ADD_FILTER_INTO_GROUP: 'ADD_FILTER_INTO_GROUP',
+  DELETE_FILTER_IN_GROUP: 'DELETE_FILTER_IN_GROUP',
+  UPDATE_FILTER_IN_GROUP: 'UPDATE_FILTER_IN_GROUP'
+};
+const INPUT_CMP_TYPE_MAP = exports.INPUT_CMP_TYPE_MAP = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  DURATION: 'duration',
+  CHECKBOX: 'checkbox'
+};
+const SUPPORT_CONJUNCTIONS = exports.SUPPORT_CONJUNCTIONS = [_dtableUtils.FILTER_CONJUNCTION_TYPE.AND, _dtableUtils.FILTER_CONJUNCTION_TYPE.OR];
+const EMPTY_PREDICATE = exports.EMPTY_PREDICATE = [_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_EMPTY];
+const DELETED_OPTION_BACKGROUND_COLOR = exports.DELETED_OPTION_BACKGROUND_COLOR = '#eaeaea';
+const DELETED_OPTION_TIPS = exports.DELETED_OPTION_TIPS = 'deleted_option';

package/lib/DTableFiltersPopover/index.css

@@ -1,9 +1,18 @@
-.dtable-filter-popover .popover {
+.dtable-ui-filter-popover .popover {
   max-width: none;
   min-width: 300px;
 }
 
-.dtable-filter-popover .dtable-filter-popover-footer {
+.dtable-ui-filter-popover .popover .dtable-ui-filters-list {
+  max-height: calc(100vh - 170px);
+  overflow: auto;
+}
+
+.dtable-ui-filter-popover .dtable-ui-filters-list .filter-container .filter-term .filter-popover-duration-editor {
+  width: 100% !important;
+}
+
+.dtable-ui-filter-popover .filter-popover-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -11,28 +20,58 @@
   border-top: 1px solid #e9ecef;
 }
 
-.dtable-filter-popover .popover-add-tool {
-  border-top: none;
-  color: #666666;
+.dtable-ui-filter-popover .add-buttons {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 1rem;
+  font-size: 14px;
+  font-weight: 500;
+  background: #fff;
+  color: #666;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  position: relative;
 }
 
-.dtable-filter-popover .popover-add-tool.disabled {
-  color: #c2c2c2;
+.dtable-ui-filter-popover .add-buttons .btn-add-filter,
+.dtable-ui-filter-popover .add-buttons .btn-add-filter-group {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  margin-left: -10px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #666;
+  cursor: pointer;
 }
 
-.dtable-filter-popover .popover-add-tool.disabled:hover {
-  cursor: not-allowed;
-  background: #fff;
+.dtable-ui-filter-popover .add-buttons .btn-add-filter:hover,
+.dtable-ui-filter-popover .add-buttons .btn-add-filter-group:hover {
+  background-color: #f5f5f5;
 }
 
-.dtable-filter-popover .popover-add-tool .popover-add-icon {
+.dtable-ui-filter-popover .add-buttons .popover-add-icon {
+  font-size: 12px;
+  font-weight: 600;
   margin-right: 14px;
 }
 
-.dtable-filter-popover .dtable-filter-popover-footer {
+.dtable-ui-filter-popover .filter-term .checkbox-filter-term {
   display: flex;
+  height: 100%;
   align-items: center;
-  justify-content: flex-end;
-  padding: 1rem;
-  border-top: 1px solid #e9ecef;
+}
+
+.dtable-ui-filter-popover .filter-term .dtable-ui-filter-item-checkbox {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #e0e0e0;
+  border-radius: 3px;
+  cursor: pointer;
 }

package/lib/DTableFiltersPopover/index.js

@@ -7,19 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
 var _DTableCommonAddTool = _interopRequireDefault(require("../DTableCommonAddTool"));
-var _utils = require("../utils/utils");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 var _filterList = _interopRequireDefault(require("./widgets/filter-list"));
-var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
-var _constants = require("../constants");
+var _DTablePopover = _interopRequireDefault(require("../DTablePopover"));
+var _constants = require("./constants");
 var _lang = require("../lang");
 require("./index.css");
 /**
- * filter = {
+ * filter data structure
+ * let filter = {
  *  column_key: '',
  *  filter_predicate: '',
  *  filter_term: '',
@@ -29,93 +28,60 @@ require("./index.css");
 class DTableFiltersPopover extends _react.Component {
   constructor(props) {
     super(props);
-    this.onHotKey = e => {
-      if ((0, _isHotkey.default)('esc', e) && !this.isSelectOpen) {
-        e.preventDefault();
-        this.props.hidePopover();
-      }
-    };
-    this.setSelectStatus = status => {
-      this.isSelectOpen = status;
-    };
-    this.hideDTablePopover = e => {
-      if (this.dtablePopoverRef && !(0, _utils.getEventClassName)(e).includes('popover') && !this.dtablePopoverRef.contains(e.target)) {
-        this.props.hidePopover(e);
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-    };
-    this.isNeedSubmit = () => {
-      return this.props.isNeedSubmit;
-    };
-    this.update = filters => {
-      if (this.isNeedSubmit()) {
+    this.updateFilters = _ref => {
+      let {
+        filter_conjunction,
+        filters
+      } = _ref;
+      const filterConjunction = filter_conjunction || this.state.filterConjunction;
+      if (this.isNeedSubmit) {
         const isSubmitDisabled = false;
         this.setState({
           filters,
+          filterConjunction,
           isSubmitDisabled
         });
         return;
       }
       this.setState({
-        filters
+        filters,
+        filterConjunction
       }, () => {
-        const update = {
+        this.props.update({
           filters,
-          filter_conjunction: this.state.filterConjunction
-        };
-        this.props.update(update);
+          filter_conjunction: filterConjunction
+        });
       });
     };
-    this.deleteFilter = (filterIndex, scheduleUpdate) => {
-      const filters = this.state.filters.slice(0);
-      filters.splice(filterIndex, 1);
-      if (filters.length === 0) {
-        scheduleUpdate();
-      }
-      this.update(filters);
-    };
-    this.updateFilter = (filterIndex, updated) => {
-      const filters = this.state.filters.slice(0);
-      filters[filterIndex] = updated;
-      this.update(filters);
-    };
-    this.updateFilterConjunction = conjunction => {
-      if (this.isNeedSubmit()) {
-        const isSubmitDisabled = false;
-        this.setState({
-          filterConjunction: conjunction,
-          isSubmitDisabled
-        });
+    this.addFilter = () => {
+      const {
+        columns
+      } = this.props;
+      const {
+        filters
+      } = this.state;
+      const newFilter = (0, _utils.getDefaultFilter)(columns);
+      if (!newFilter) {
         return;
       }
-      this.setState({
-        filterConjunction: conjunction
-      }, () => {
-        const update = {
-          filters: this.state.filters,
-          filter_conjunction: conjunction
-        };
-        this.props.update(update);
+      this.updateFilters({
+        filters: [...filters, newFilter]
       });
     };
-    this.addFilter = scheduleUpdate => {
-      let {
+    this.addFilterGroup = () => {
+      const {
         columns
       } = this.props;
-      let defaultColumn = columns[0];
-      if (!_dtableUtils.FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
-        defaultColumn = columns.find(c => _dtableUtils.FILTER_COLUMN_OPTIONS[c.type]);
-      }
-      if (!defaultColumn) return;
-      let filter = (0, _utils2.getFilterByColumn)(defaultColumn);
-      const filters = this.state.filters.slice(0);
-      if (filters.length === 0) {
-        scheduleUpdate();
+      const {
+        filters
+      } = this.state;
+      const newFilterGroup = (0, _utils.getDefaultFilterGroup)(columns);
+      if (!newFilterGroup) {
+        return;
       }
-      filters.push(filter);
-      this.update(filters);
+      this.updateFilters({
+        filters: [...filters, newFilterGroup]
+      });
     };
     this.onClosePopover = () => {
       this.props.hidePopover();
@@ -135,31 +101,29 @@ class DTableFiltersPopover extends _react.Component {
     this.onPopoverInsideClick = e => {
       e.stopPropagation();
     };
+    const {
+      filterConjunction: _filterConjunction,
+      filters: _filters,
+      columns: _columns,
+      isNeedSubmit
+    } = props;
     this.state = {
-      filters: (0, _dtableUtils.getValidFilters)(props.filters, props.columns),
-      filterConjunction: props.filterConjunction || 'And'
+      filters: (0, _dtableUtils.getValidFilters)(_filters, _columns),
+      filterConjunction: _constants.SUPPORT_CONJUNCTIONS.includes(_filterConjunction) ? _filterConjunction : _dtableUtils.FILTER_CONJUNCTION_TYPE.AND,
+      isSubmitDisabled: true
     };
-    this.isSelectOpen = false;
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.hideDTablePopover, true);
-    document.addEventListener('keydown', this.onHotKey);
-    this.unsubscribeOpenSelect = _eventBus.default.subscribe(_constants.EVENT_BUS_TYPE.OPEN_SELECT, this.setSelectStatus);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.hideDTablePopover, true);
-    document.removeEventListener('keydown', this.onHotKey);
-    this.unsubscribeOpenSelect();
+    this.isNeedSubmit = isNeedSubmit;
   }
   render() {
     const {
       target,
       columns,
-      className,
-      userDepartmentIdsMap,
+      placement,
+      isSupportAdvanced,
       departments,
       lang,
       readOnly,
+      userDepartmentIdsMap,
       firstDayOfWeek
     } = this.props;
     const {
@@ -167,57 +131,75 @@ class DTableFiltersPopover extends _react.Component {
       filterConjunction
     } = this.state;
     const canAddFilter = columns.length > 0;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
-      placement: "auto-start",
-      isOpen: true,
+    return /*#__PURE__*/_react.default.createElement(_DTablePopover.default, {
       target: target,
-      fade: false,
-      hideArrow: true,
-      className: "dtable-filter-popover",
+      placement: placement,
+      popoverClassName: "dtable-ui-filter-popover",
+      hideDTablePopover: this.props.hidePopover,
+      hideDTablePopoverWithEsc: this.props.hidePopover,
       boundariesElement: document.body
-    }, _ref => {
-      let {
-        update: scheduleUpdate
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: ref => this.dtablePopoverRef = ref,
-        onClick: this.onPopoverInsideClick,
-        className: className
-      }, /*#__PURE__*/_react.default.createElement(_filterList.default, {
-        filterConjunction: filterConjunction,
-        filters: filters,
-        columns: columns,
-        emptyPlaceholder: (0, _lang.getLocale)('No_filters'),
-        collaborators: this.props.collaborators,
-        readOnly: readOnly,
-        scheduleUpdate: scheduleUpdate,
-        userDepartmentIdsMap: userDepartmentIdsMap,
-        departments: departments,
-        lang: lang,
-        updateFilter: this.updateFilter,
-        deleteFilter: this.deleteFilter,
-        updateFilterConjunction: this.updateFilterConjunction,
-        firstDayOfWeek: firstDayOfWeek
-      }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-        className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
-        callBack: canAddFilter ? () => this.addFilter(scheduleUpdate) : () => {},
-        footerName: (0, _lang.getLocale)('Add_filter'),
-        addIconClassName: "popover-add-icon"
-      }), this.isNeedSubmit() && /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-filter-popover-footer"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-        className: "mr-2",
-        onClick: this.onClosePopover
-      }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-        color: "primary",
-        disabled: this.state.isSubmitDisabled,
-        onClick: this.onSubmitFilters
-      }, (0, _lang.getLocale)('Submit'))));
-    });
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.dtablePopoverRef = ref,
+      onClick: this.onPopoverInsideClick,
+      className: this.props.className
+    }, /*#__PURE__*/_react.default.createElement(_filterList.default, {
+      isInModal: true,
+      filterConjunction: filterConjunction,
+      filters: filters,
+      columns: columns,
+      emptyPlaceholder: (0, _lang.getLocale)('No_filters'),
+      collaborators: this.props.collaborators,
+      readOnly: readOnly,
+      userDepartmentIdsMap: userDepartmentIdsMap,
+      departments: departments,
+      lang: lang,
+      firstDayOfWeek: firstDayOfWeek,
+      updateFilters: this.updateFilters
+    }), !isSupportAdvanced && !readOnly && /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
+      className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
+      callBack: canAddFilter ? () => this.addFilter() : () => {},
+      footerName: (0, _lang.getLocale)('Add_filter'),
+      addIconClassName: "popover-add-icon"
+    }), isSupportAdvanced && !readOnly && /*#__PURE__*/_react.default.createElement("div", {
+      className: "add-buttons"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "btn-add-filter mr-4",
+      onClick: canAddFilter ? () => this.addFilter() : () => {},
+      role: "button",
+      tabIndex: 0,
+      "aria-label": (0, _lang.getLocale)('Add_filter')
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-add-table popover-add-icon"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "add-new-option"
+    }, (0, _lang.getLocale)('Add_filter'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "btn-add-filter-group",
+      onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
+      role: "button",
+      tabIndex: 0,
+      "aria-label": (0, _lang.getLocale)('Add_filter_group')
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-add-table popover-add-icon"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "add-new-option"
+    }, (0, _lang.getLocale)('Add_filter_group')))), this.isNeedSubmit && /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter-popover-footer"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      disabled: readOnly,
+      className: "mr-2",
+      onClick: this.onClosePopover
+    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      disabled: this.state.isSubmitDisabled || readOnly,
+      color: "primary",
+      onClick: this.onSubmitFilters
+    }, (0, _lang.getLocale)('Submit')))));
   }
 }
 DTableFiltersPopover.defaultProps = {
   className: '',
-  readOnly: false
+  placement: 'auto-start',
+  isSupportAdvanced: false
 };
 var _default = exports.default = DTableFiltersPopover;

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

@@ -24,7 +24,9 @@ class FilterItemUtils {
       }, /*#__PURE__*/_react.default.createElement("i", {
         className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
       })), /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name"
+        className: "select-option-name",
+        title: name,
+        "aria-label": name
       }, name))
     };
   }
@@ -71,13 +73,13 @@ class FilterItemUtils {
       }, FILTER_TERM_MODIFIER_SHOW[filterTermModifier])
     };
   }
-  static generatorSingleSelectOption(option) {
+  static generatorSingleSelectOption(option, selectedOption) {
     return {
       value: {
         columnOption: option
       },
       label: /*#__PURE__*/_react.default.createElement("div", {
-        className: "select-option-name"
+        className: "select-option-name single-select-option-name"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "single-select-option",
         style: {
@@ -86,7 +88,11 @@ class FilterItemUtils {
         },
         title: option.name,
         "aria-label": option.name
-      }, option.name))
+      }, option.name), /*#__PURE__*/_react.default.createElement("div", {
+        className: "single-select-check-icon"
+      }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/_react.default.createElement("i", {
+        className: "option-edit dtable-font dtable-icon-check-mark"
+      })))
     };
   }
   static generatorMultipleSelectOption(option, filterTerm) {