dtable-ui-component 6.0.38-alpha.2 → 6.0.39

package/lib/CheckboxEditor/index.css

@@ -1,15 +1,16 @@
 .dtable-ui-checkbox-editor {
+  position: relative;
   width: 24px;
   height: 24px;
-  border: 2px solid #e0e0e0;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .dtable-ui-checkbox-editor .dtable-ui-checkbox-check-mark {
-  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #20c933;
 }
 
 .dtable-ui-checkbox-check-svg {

package/lib/DTableFiltersPopover/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+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;
 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,32 +67,4 @@ 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

@@ -3,12 +3,7 @@
   min-width: 300px;
 }
 
-.dtable-filter-popover .popover .filters-list {
-  max-height: calc(100vh - 170px);
-  overflow: auto;
-}
-
-.dtable-filter-popover .filter-popover-footer {
+.dtable-filter-popover .dtable-filter-popover-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -16,59 +11,28 @@
   border-top: 1px solid #e9ecef;
 }
 
-.dtable-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 {
+  border-top: none;
+  color: #666666;
 }
 
-.dtable-filter-popover .add-buttons .btn-add-filter,
-.dtable-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 {
+  color: #c2c2c2;
 }
 
-.dtable-filter-popover .add-buttons .btn-add-filter:hover,
-.dtable-filter-popover .add-buttons .btn-add-filter-group:hover {
-  background-color: #f5f5f5;
+.dtable-filter-popover .popover-add-tool.disabled:hover {
+  cursor: not-allowed;
+  background: #fff;
 }
 
-.dtable-filter-popover .add-buttons .popover-add-icon {
-  font-size: 12px;
-  font-weight: 600;
+.dtable-filter-popover .popover-add-tool .popover-add-icon {
   margin-right: 14px;
 }
 
-.dtable-filter-popover .filter-term .checkbox-filter-term {
+.dtable-filter-popover .dtable-filter-popover-footer {
   display: flex;
-  height: 100%;
   align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
 }
-
-.dtable-filter-popover .filter-term .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,18 +7,19 @@ 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");
+var _utils = require("../utils/utils");
+var _utils2 = require("./utils");
 var _filterList = _interopRequireDefault(require("./widgets/filter-list"));
-var _DTablePopover = _interopRequireDefault(require("../DTablePopover"));
-var _constants = require("./constants");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _constants = require("../constants");
 var _lang = require("../lang");
 require("./index.css");
 /**
- * filter data structure
- * let filter = {
+ * filter = {
  *  column_key: '',
  *  filter_predicate: '',
  *  filter_term: '',
@@ -28,60 +29,93 @@ require("./index.css");
 class DTableFiltersPopover extends _react.Component {
   constructor(props) {
     super(props);
-    this.updateFilters = _ref => {
-      let {
-        filter_conjunction,
-        filters
-      } = _ref;
-      const filterConjunction = filter_conjunction || this.state.filterConjunction;
-      if (this.isNeedSubmit) {
+    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()) {
         const isSubmitDisabled = false;
         this.setState({
           filters,
-          filterConjunction,
           isSubmitDisabled
         });
         return;
       }
       this.setState({
-        filters,
-        filterConjunction
+        filters
       }, () => {
-        this.props.update({
+        const update = {
           filters,
-          filter_conjunction: filterConjunction
-        });
+          filter_conjunction: this.state.filterConjunction
+        };
+        this.props.update(update);
       });
     };
-    this.addFilter = () => {
-      const {
-        columns
-      } = this.props;
-      const {
-        filters
-      } = this.state;
-      const newFilter = (0, _utils.getDefaultFilter)(columns);
-      if (!newFilter) {
+    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
+        });
         return;
       }
-      this.updateFilters({
-        filters: [...filters, newFilter]
+      this.setState({
+        filterConjunction: conjunction
+      }, () => {
+        const update = {
+          filters: this.state.filters,
+          filter_conjunction: conjunction
+        };
+        this.props.update(update);
       });
     };
-    this.addFilterGroup = () => {
-      const {
+    this.addFilter = scheduleUpdate => {
+      let {
         columns
       } = this.props;
-      const {
-        filters
-      } = this.state;
-      const newFilterGroup = (0, _utils.getDefaultFilterGroup)(columns);
-      if (!newFilterGroup) {
-        return;
+      let defaultColumn = columns[0];
+      if (!_dtableUtils.FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
+        defaultColumn = columns.find(c => _dtableUtils.FILTER_COLUMN_OPTIONS[c.type]);
       }
-      this.updateFilters({
-        filters: [...filters, newFilterGroup]
-      });
+      if (!defaultColumn) return;
+      let filter = (0, _utils2.getFilterByColumn)(defaultColumn);
+      const filters = this.state.filters.slice(0);
+      if (filters.length === 0) {
+        scheduleUpdate();
+      }
+      filters.push(filter);
+      this.update(filters);
     };
     this.onClosePopover = () => {
       this.props.hidePopover();
@@ -101,29 +135,31 @@ 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)(_filters, _columns),
-      filterConjunction: _constants.SUPPORT_CONJUNCTIONS.includes(_filterConjunction) ? _filterConjunction : _dtableUtils.FILTER_CONJUNCTION_TYPE.AND,
-      isSubmitDisabled: true
+      filters: (0, _dtableUtils.getValidFilters)(props.filters, props.columns),
+      filterConjunction: props.filterConjunction || 'And'
     };
-    this.isNeedSubmit = isNeedSubmit;
+    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();
   }
   render() {
     const {
       target,
       columns,
-      placement,
-      isSupportAdvanced,
+      className,
+      userDepartmentIdsMap,
       departments,
       lang,
-      readonly,
-      userDepartmentIdsMap,
+      readOnly,
       firstDayOfWeek
     } = this.props;
     const {
@@ -131,75 +167,57 @@ class DTableFiltersPopover extends _react.Component {
       filterConjunction
     } = this.state;
     const canAddFilter = columns.length > 0;
-    return /*#__PURE__*/_react.default.createElement(_DTablePopover.default, {
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+      placement: "auto-start",
+      isOpen: true,
       target: target,
-      placement: placement,
-      popoverClassName: "dtable-filter-popover",
-      hideDTablePopover: this.props.hidePopover,
-      hideDTablePopoverWithEsc: this.props.hidePopover,
+      fade: false,
+      hideArrow: true,
+      className: "dtable-filter-popover",
       boundariesElement: document.body
-    }, /*#__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')))));
+    }, _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'))));
+    });
   }
 }
 DTableFiltersPopover.defaultProps = {
   className: '',
-  placement: 'auto-start',
-  isSupportAdvanced: false
+  readOnly: false
 };
 var _default = exports.default = DTableFiltersPopover;

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

@@ -24,9 +24,7 @@ class FilterItemUtils {
       }, /*#__PURE__*/_react.default.createElement("i", {
         className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
       })), /*#__PURE__*/_react.default.createElement("span", {
-        className: "select-option-name",
-        title: name,
-        "aria-label": name
+        className: "select-option-name"
       }, name))
     };
   }
@@ -73,13 +71,13 @@ class FilterItemUtils {
       }, FILTER_TERM_MODIFIER_SHOW[filterTermModifier])
     };
   }
-  static generatorSingleSelectOption(option, selectedOption) {
+  static generatorSingleSelectOption(option) {
     return {
       value: {
         columnOption: option
       },
       label: /*#__PURE__*/_react.default.createElement("div", {
-        className: "select-option-name single-option-name"
+        className: "select-option-name"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "single-select-option",
         style: {
@@ -88,11 +86,7 @@ class FilterItemUtils {
         },
         title: option.name,
         "aria-label": option.name
-      }, option.name), /*#__PURE__*/_react.default.createElement("div", {
-        className: "single-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"
-      })))
+      }, option.name))
     };
   }
   static generatorMultipleSelectOption(option, filterTerm) {