dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -20,21 +20,19 @@ class FiltersList extends _react.Component {
   constructor(props) {
     super(props);
     this.modifyFilterConjunction = new_filter_conjunction => {
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION,
-        filter_conjunction,
-        filters,
-        payload: {
-          new_filter_conjunction
-        }
-      });
+      const _this$props = this.props,
+        filter_conjunction = _this$props.filterConjunction,
+        filters = _this$props.filters;
+      const _applyFilterOperation = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION,
+          filter_conjunction,
+          filters,
+          payload: {
+            new_filter_conjunction
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation.filter_conjunction,
+        next_filters = _applyFilterOperation.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -42,98 +40,88 @@ class FiltersList extends _react.Component {
     };
     this.updateFilter = (filter_index, new_filter) => {
       if (!new_filter) return;
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER,
-        filter_conjunction,
-        filters,
-        payload: {
-          filter_index,
-          new_filter
-        }
-      });
+      const _this$props2 = this.props,
+        filter_conjunction = _this$props2.filterConjunction,
+        filters = _this$props2.filters;
+      const _applyFilterOperation2 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER,
+          filter_conjunction,
+          filters,
+          payload: {
+            filter_index,
+            new_filter
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation2.filter_conjunction,
+        next_filters = _applyFilterOperation2.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.deleteFilter = filter_index => {
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER,
-        filter_conjunction,
-        filters,
-        payload: {
-          filter_index
-        }
-      });
+      const _this$props3 = this.props,
+        filter_conjunction = _this$props3.filterConjunction,
+        filters = _this$props3.filters;
+      const _applyFilterOperation3 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER,
+          filter_conjunction,
+          filters,
+          payload: {
+            filter_index
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation3.filter_conjunction,
+        next_filters = _applyFilterOperation3.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.moveFilter = _ref => {
-      let {
-        source_filter_index,
-        target_filter_index,
-        source_group_index,
-        target_group_index
-      } = _ref;
+      let source_filter_index = _ref.source_filter_index,
+        target_filter_index = _ref.target_filter_index,
+        source_group_index = _ref.source_group_index,
+        target_group_index = _ref.target_group_index;
       if (source_filter_index === target_filter_index && source_group_index === target_group_index) {
         return;
       }
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.MOVE_FILTER,
-        filter_conjunction,
-        filters,
-        payload: {
-          source_filter_index,
-          target_filter_index,
-          source_group_index,
-          target_group_index
-        }
-      });
+      const _this$props4 = this.props,
+        filter_conjunction = _this$props4.filterConjunction,
+        filters = _this$props4.filters;
+      const _applyFilterOperation4 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.MOVE_FILTER,
+          filter_conjunction,
+          filters,
+          payload: {
+            source_filter_index,
+            target_filter_index,
+            source_group_index,
+            target_group_index
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation4.filter_conjunction,
+        next_filters = _applyFilterOperation4.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.modifyConjunctionInGroup = (group_index, new_filter_conjunction) => {
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP,
-        filter_conjunction,
-        filters,
-        payload: {
-          group_index,
-          new_filter_conjunction
-        }
-      });
+      const _this$props5 = this.props,
+        filter_conjunction = _this$props5.filterConjunction,
+        filters = _this$props5.filters;
+      const _applyFilterOperation5 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP,
+          filter_conjunction,
+          filters,
+          payload: {
+            group_index,
+            new_filter_conjunction
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation5.filter_conjunction,
+        next_filters = _applyFilterOperation5.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -141,44 +129,40 @@ class FiltersList extends _react.Component {
     };
     this.addFilterIntoGroup = (group_index, filter) => {
       if (!filter) return;
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP,
-        filter_conjunction,
-        filters,
-        payload: {
-          group_index,
-          filter
-        }
-      });
+      const _this$props6 = this.props,
+        filter_conjunction = _this$props6.filterConjunction,
+        filters = _this$props6.filters;
+      const _applyFilterOperation6 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP,
+          filter_conjunction,
+          filters,
+          payload: {
+            group_index,
+            filter
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation6.filter_conjunction,
+        next_filters = _applyFilterOperation6.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
       });
     };
     this.deleteFilterInGroup = (group_index, filter_index) => {
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP,
-        filter_conjunction,
-        filters,
-        payload: {
-          group_index,
-          filter_index
-        }
-      });
+      const _this$props7 = this.props,
+        filter_conjunction = _this$props7.filterConjunction,
+        filters = _this$props7.filters;
+      const _applyFilterOperation7 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP,
+          filter_conjunction,
+          filters,
+          payload: {
+            group_index,
+            filter_index
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation7.filter_conjunction,
+        next_filters = _applyFilterOperation7.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -186,23 +170,21 @@ class FiltersList extends _react.Component {
     };
     this.updateFilterInGroup = (group_index, filter_index, new_filter) => {
       if (!new_filter) return;
-      const {
-        filterConjunction: filter_conjunction,
-        filters
-      } = this.props;
-      const {
-        filter_conjunction: next_filter_conjunction,
-        filters: next_filters
-      } = (0, _utils.applyFilterOperation)({
-        type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP,
-        filter_conjunction,
-        filters,
-        payload: {
-          group_index,
-          filter_index,
-          new_filter
-        }
-      });
+      const _this$props8 = this.props,
+        filter_conjunction = _this$props8.filterConjunction,
+        filters = _this$props8.filters;
+      const _applyFilterOperation8 = (0, _utils.applyFilterOperation)({
+          type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP,
+          filter_conjunction,
+          filters,
+          payload: {
+            group_index,
+            filter_index,
+            new_filter
+          }
+        }),
+        next_filter_conjunction = _applyFilterOperation8.filter_conjunction,
+        next_filters = _applyFilterOperation8.filters;
       this.props.updateFilters({
         filter_conjunction: next_filter_conjunction,
         filters: next_filters
@@ -215,9 +197,7 @@ class FiltersList extends _react.Component {
       return this.conjunctionOptions;
     };
     this.getColumnOptions = () => {
-      const {
-        columns
-      } = this.props;
+      const columns = this.props.columns;
       if (!this.columnOptions) {
         const filterColumns = (0, _utils.getFilterColumns)(columns);
         this.columnOptions = filterColumns.map(column => {
@@ -227,17 +207,16 @@ class FiltersList extends _react.Component {
       return this.columnOptions;
     };
     this.renderFilter = (filter, index, filterColumn) => {
-      const {
-        filterConjunction,
-        isInModal,
-        columns,
-        collaborators,
-        userDepartmentIdsMap,
-        departments,
-        lang,
-        firstDayOfWeek,
-        readOnly
-      } = this.props;
+      const _this$props9 = this.props,
+        filterConjunction = _this$props9.filterConjunction,
+        isInModal = _this$props9.isInModal,
+        columns = _this$props9.columns,
+        collaborators = _this$props9.collaborators,
+        userDepartmentIdsMap = _this$props9.userDepartmentIdsMap,
+        departments = _this$props9.departments,
+        lang = _this$props9.lang,
+        firstDayOfWeek = _this$props9.firstDayOfWeek,
+        readOnly = _this$props9.readOnly;
       const conjunctionOptions = this.getConjunctionOptions();
       const columnOptions = this.getColumnOptions();
       if ((0, _dtableUtils.checkIsFilterGroup)(filter)) {
@@ -263,9 +242,8 @@ class FiltersList extends _react.Component {
           updateFilterInGroup: this.updateFilterInGroup
         }, "filter-group-".concat(index));
       }
-      const {
-        error_message
-      } = _dtableUtils.ValidateFilter.validate(filter, columns);
+      const _ValidateFilter$valid = _dtableUtils.ValidateFilter.validate(filter, columns),
+        error_message = _ValidateFilter$valid.error_message;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterItem.default, {
         isInModal: isInModal,
         lang: lang,
@@ -295,12 +273,11 @@ class FiltersList extends _react.Component {
     }
   }
   render() {
-    let {
-      filters,
-      className,
-      emptyPlaceholder,
-      columns
-    } = this.props;
+    let _this$props0 = this.props,
+      filters = _this$props0.filters,
+      className = _this$props0.className,
+      emptyPlaceholder = _this$props0.emptyPlaceholder,
+      columns = _this$props0.columns;
     const isEmpty = filters.length === 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('dtable-ui-filters-list', {
@@ -312,9 +289,7 @@ class FiltersList extends _react.Component {
         className: "empty-filters-list",
         children: emptyPlaceholder
       }), !isEmpty && filters.map((filter, index) => {
-        const {
-          column_key
-        } = filter;
+        const column_key = filter.column_key;
         const filterColumn = (0, _utils.getColumnByKey)(column_key, columns) || {};
         return this.renderFilter(filter, index, filterColumn);
       })]

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

@@ -13,20 +13,17 @@ class RateItem extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onMouseEnterRateItem = () => {
-      const {
-        rateItemIndex
-      } = this.props;
+      const rateItemIndex = this.props.rateItemIndex;
       this.props.onMouseEnterRateItem(rateItemIndex);
     };
     this.onMouseLeaveRateItem = () => {
       this.props.onMouseLeaveRateItem();
     };
     this.onChangeRateNumber = () => {
-      const {
-        onChangeRateNumber,
-        rateItemIndex,
-        editable
-      } = this.props;
+      const _this$props = this.props,
+        onChangeRateNumber = _this$props.onChangeRateNumber,
+        rateItemIndex = _this$props.rateItemIndex,
+        editable = _this$props.editable;
       if (onChangeRateNumber && editable) {
         onChangeRateNumber(rateItemIndex);
       }
@@ -37,18 +34,16 @@ class RateItem extends _react.default.Component {
     };
   }
   render() {
-    const {
-      enterRateItemIndex,
-      rateItemIndex,
-      value,
-      column,
-      isShowRateItem,
-      editable
-    } = this.props;
-    const {
-      rate_style_color,
-      rate_style_type
-    } = column.data || {};
+    const _this$props2 = this.props,
+      enterRateItemIndex = _this$props2.enterRateItemIndex,
+      rateItemIndex = _this$props2.rateItemIndex,
+      value = _this$props2.value,
+      column = _this$props2.column,
+      isShowRateItem = _this$props2.isShowRateItem,
+      editable = _this$props2.editable;
+    const _ref = column.data || {},
+      rate_style_color = _ref.rate_style_color,
+      rate_style_type = _ref.rate_style_type;
     const rateShowType = rate_style_type ? rate_style_type : 'dtable-icon-rate';
     if (!isShowRateItem && rateItemIndex > value) return null;
     let itemStyle = {

package/lib/DTableGroupSelect/index.css

@@ -4,7 +4,7 @@
 
 .group-select.custom-select {
   display: flex;
-  padding: 7px 8px !important;
+  padding: 5px 10px;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -79,44 +79,18 @@
 }
 
 .group-select .selected-option-show .selected-option-item {
-  background-color: #F7F7F5;
-  border-radius: 4px !important;
+  background-color: rgb(240, 240, 240);
+  border-radius: 16px;
   display: flex;
   align-items: center;
-  height: 24px;
 }
 
 .group-select .selected-option-show .selected-option-item .selected-option-item-name {
-  font-size: 14px !important;
+  font-size: 13px;
   color: #212529;
-  margin-left: 6px;
-  margin-right: 8px
 }
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
   cursor: pointer;
-  color: var(--bs-icon-color);
-  font-size: 12px;
-  margin-right: 6px;
-}
-
-.seatable-group-select .option-group-search {
-  padding: 0 !important;
-}
-
-.seatable-group-select .form-control {
-  border: none;
-  border-radius: 4px 4px 0 0;
-  padding: .375rem 0 .375rem 1rem;
-  height: 100%;
-}
-
-.seatable-group-select .form-control:focus {
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-
-.option-group-content .dtable-icon-check {
-  color: var(--bs-icon-color);
-  font-size: 14px;
+  color: rgb(103, 103, 103);
 }

package/lib/DTableGroupSelect/index.js

@@ -40,15 +40,12 @@ class DTableGroupSelect extends _react.Component {
     };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
-      const {
-        height
-      } = this.selector.getBoundingClientRect();
+      const _this$selector$getBou = this.selector.getBoundingClientRect(),
+        height = _this$selector$getBou.height;
       return height;
     };
     this.getFilterOptions = searchValue => {
-      const {
-        options
-      } = this.props;
+      const options = this.props.options;
       const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
       return options.filter(option => option.name.toLowerCase().includes(validSearchVal));
@@ -66,15 +63,14 @@ class DTableGroupSelect extends _react.Component {
     }
   }
   render() {
-    let {
-      className,
-      selectedOptions,
-      options,
-      placeholder,
-      searchPlaceholder,
-      noOptionsPlaceholder,
-      isInModal
-    } = this.props;
+    let _this$props = this.props,
+      className = _this$props.className,
+      selectedOptions = _this$props.selectedOptions,
+      options = _this$props.options,
+      placeholder = _this$props.placeholder,
+      searchPlaceholder = _this$props.searchPlaceholder,
+      noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
+      isInModal = _this$props.isInModal;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('group-select custom-select', {
@@ -86,12 +82,12 @@ class DTableGroupSelect extends _react.Component {
         children: [selectedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "selected-option-show",
           children: selectedOptions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "selected-option-item",
+            className: "selected-option-item mr-1 pr-1 pl-2",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "selected-option-item-name",
               children: item.name
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-x",
+              className: "dtable-font dtable-icon-x ml-1",
               onClick: () => {
                 this.props.onDeleteOption(item);
               }

package/lib/DTableGroupSelect/select-option-group.css

@@ -2,6 +2,7 @@
   display: block;
   width: 100%;
   line-height: 24px;
+  padding: 6px 10px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -13,25 +14,28 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.25rem 8px;
-  border-radius: 4px;
 }
 
-.group-selector .option .dtable-icon-check{
-  font-size: 14px;
-  color: var(--bs-icon-color);
-  height: 14px !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.group-selector .option .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
 }
 
 .group-selector .option.option-active {
-  background-color: #f5f5f5;
-  color: #212529;
+  background-color: #20a0ff;
+  color: #fff;
   cursor: pointer;
 }
 
+.group-selector .option.option-active .dtable-icon-check-mark,
+.group-selector .option.option-active .select-option-name {
+  color: #fff !important;
+}
+
+.group-selector .option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
+}
+
 .group-selector .option .select-option-name .multiple-select-option {
   margin: 0;
 }