dtable-ui-component 7.0.1-beta.select1 → 7.0.1

package/lib/DTableCustomizeSelect/index.js

@@ -8,10 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
-var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
-var _utils = require("../utils/utils");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableCustomizeSelect extends _react.Component {
@@ -24,8 +22,8 @@ class DTableCustomizeSelect extends _react.Component {
         so it can be closed when other select is clicked.
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
-      const eventClassName = (0, _utils.getEventClassName)(event);
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-select-search') return;
+      let eventClassName = event.target.className;
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
       // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
@@ -33,7 +31,7 @@ class DTableCustomizeSelect extends _react.Component {
       });
     };
     this.onClick = event => {
-      if (this.props.isShowSelected && (0, _utils.getEventClassName)(event).includes('icon-fork-number')) {
+      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
         return;
       }
       if (!this.selector.contains(event.target)) {
@@ -95,7 +93,7 @@ class DTableCustomizeSelect extends _react.Component {
       component = _this$props2.component;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
-      className: (0, _classnames.default)('seatable-customize-select custom-select', {
+      className: (0, _classnames.default)('dtable-select custom-select', {
         'focus': this.state.isShowSelectOptions
       }, {
         'disabled': isLocked
@@ -109,12 +107,8 @@ class DTableCustomizeSelect extends _react.Component {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "select-placeholder",
           children: placeholder
-        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "d-inline-flex align-items-center",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-            symbol: "down",
-            color: "var(--bs-icon-color)"
-          })
+        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-down3"
         })]
       }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
         value: value,

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

@@ -91,9 +91,9 @@ class FilterItemUtils {
       value: {
         columnOption: option
       },
-      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "select-option-name single-select-option-name",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-option",
           style: {
             background: option.color,
@@ -102,16 +102,23 @@ class FilterItemUtils {
           title: option.name,
           "aria-label": option.name,
           children: option.name
-        })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "single-select-check-icon",
+          children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "option-edit dtable-font dtable-icon-check-mark"
+          })
+        })]
       })
     };
   }
   static generatorMultipleSelectOption(option, filterTerm) {
     return {
-      value: option,
-      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      value: {
+        columnOption: option
+      },
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "select-option-name multiple-option-name",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-select-option",
           style: {
             background: option.color,
@@ -120,7 +127,12 @@ class FilterItemUtils {
           title: option.name,
           "aria-label": option.name,
           children: option.name
-        })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "multiple-check-icon",
+          children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "option-edit dtable-font dtable-icon-check-mark"
+          })
+        })]
       })
     };
   }

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

@@ -16,15 +16,16 @@ class CollaboratorFilter extends _react.Component {
     super(props);
     this.createCollaboratorOptions = (filterIndex, collaborators, filterTerm) => {
       return collaborators.map(collaborator => {
+        let isSelected = filterTerm.findIndex(item => item === collaborator.email) > -1;
         return {
           value: {
             filterIndex,
             columnOption: collaborator
           },
           label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "select-option-name option-collaborator",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-container",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                   className: "collaborator",
@@ -45,7 +46,12 @@ class CollaboratorFilter extends _react.Component {
                     children: collaborator.name
                   })]
                 })
-              })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "collaborator-check-icon",
+                children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  className: "option-edit dtable-font dtable-icon-check-mark"
+                })
+              })]
             })
           })
         };
@@ -100,9 +106,7 @@ class CollaboratorFilter extends _react.Component {
         })]
       }, item);
     });
-    let selectCollaborators = Array.isArray(filterTerm) && filterTerm.length > 0 ? collaborators.filter(col => filterTerm.includes(col.email)) : [];
     let value = selectedCollaborators ? {
-      value: selectCollaborators,
       label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: selectedCollaborators
       })

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

@@ -128,7 +128,8 @@ class FilterItem extends _react.default.Component {
       const _this$props5 = this.props,
         index = _this$props5.index,
         filter = _this$props5.filter;
-      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, value);
+      const option = value.columnOption;
+      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, option);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -136,7 +137,8 @@ class FilterItem extends _react.default.Component {
       const _this$props6 = this.props,
         index = _this$props6.index,
         filter = _this$props6.filter;
-      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, value);
+      const collaborator = value.columnOption;
+      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, collaborator);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -144,10 +146,7 @@ class FilterItem extends _react.default.Component {
       const _this$props7 = this.props,
         index = _this$props7.index,
         filter = _this$props7.filter;
-      const collaborator = value && (value.columnOption || value.value || value);
-      if (!collaborator || !collaborator.email) {
-        return;
-      }
+      const collaborator = value.columnOption;
       let newFilter = (0, _utils.getUpdatedFilterByCreator)(filter, collaborator);
       // the predicate is 'is' or 'is not'
       if (!newFilter) {
@@ -295,12 +294,11 @@ class FilterItem extends _react.default.Component {
       }
       const className = 'select-option-name multiple-select-option';
       let labelArray = [];
-      let valueArray = [];
       if (Array.isArray(options) && Array.isArray(filterTerm)) {
         filterTerm.forEach(item => {
           let inOption = options.find(option => option.id === item);
           let optionStyle = {
-            margin: '0 4px 0 0'
+            margin: '0 10px 0 0'
           };
           let optionName = null;
           if (inOption) {
@@ -311,7 +309,6 @@ class FilterItem extends _react.default.Component {
             optionStyle.background = _constants.DELETED_OPTION_BACKGROUND_COLOR;
             optionName = (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
           }
-          valueArray.push(inOption);
           labelArray.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: className,
             style: optionStyle,
@@ -322,7 +319,6 @@ class FilterItem extends _react.default.Component {
         });
       }
       const selectedOptionNames = labelArray.length > 0 ? {
-        value: valueArray,
         label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
           children: labelArray
         })
@@ -429,9 +425,6 @@ class FilterItem extends _react.default.Component {
                 color: selectedOption.textColor || null
               };
               selectedOptionName = {
-                value: {
-                  columnOption: selectedOption
-                },
                 label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: className,
                   style: style,
@@ -514,8 +507,7 @@ class FilterItem extends _react.default.Component {
               collaborators: creators,
               onSelectCollaborator: this.onSelectCreator,
               isInModal: this.props.isInModal,
-              readOnly: readOnly,
-              filter_predicate: filter_predicate
+              readOnly: readOnly
             });
           }
         case _dtableUtils.CellType.RATE:

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

@@ -333,7 +333,7 @@
   display: inline-flex;
   align-items: center;
   height: 20px;
-  margin-right: 4px;
+  margin-right: 10px;
   padding: 0 8px 0 2px;
   font-size: 13px;
   border-radius: 10px;
@@ -412,14 +412,14 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding-right: 0.5rem;
+  padding: 0 0.3125rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: var(--bs-icon-secondary-color);
+  color: #aaa;
   cursor: default;
 }
 

package/lib/DTableGroupSelect/index.css

@@ -0,0 +1,96 @@
+.group-select {
+  position: relative;
+}
+
+.group-select.custom-select {
+  display: flex;
+  padding: 5px 10px;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 900px;
+  user-select: none;
+  text-align: left;
+  border-color: 1px solid rgba(0, 40, 100, 0.12);
+  height: auto;
+  min-height: 38px;
+  cursor: pointer;
+}
+
+.group-select.custom-select:focus,
+.group-select.custom-select.focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.group-select.custom-select.disabled:focus,
+.group-select.custom-select.focus.disabled,
+.group-select.custom-select.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  box-shadow: unset;
+  cursor: default;
+}
+
+.group-select .sf3-font-down {
+  display: inline-block;
+  color: #999;
+  transform: translateY(2px);
+  transition: all 0.1s;
+  font-size: 14px !important;
+}
+
+.group-select .sf3-font-down:hover {
+  color: #666;
+}
+
+.group-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.group-select.dtable-ui-collaborator-selector .option-group .option-group-content {
+  padding: 10px;
+}
+
+.group-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
+  padding: 10px 0;
+}
+
+.group-select.custom-select.dtable-ui-collaborator-selector .option {
+  padding: 5px 0 5px 10px !important;
+  line-height: 20px;
+}
+
+.group-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.group-select .selected-option-show {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.group-select .selected-option-show .selected-option-item {
+  background-color: rgb(240, 240, 240);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.group-select .selected-option-show .selected-option-item .selected-option-item-name {
+  font-size: 13px;
+  color: #212529;
+}
+
+.group-select .selected-option-show .selected-option-item .dtable-icon-x {
+  cursor: pointer;
+  color: rgb(103, 103, 103);
+}

package/lib/DTableGroupSelect/index.js

@@ -0,0 +1,131 @@
+"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 _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
+var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+class DTableGroupSelect extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectToggle = event => {
+      event.preventDefault();
+      if (this.state.isShowSelectOptions) event.stopPropagation();
+      let eventClassName = event.target.className;
+      if (eventClassName.indexOf('dtable-icon-x') > -1 || eventClassName === 'option-group-search') return;
+      if (event.target.value === '') return;
+      this.setState({
+        isShowSelectOptions: !this.state.isShowSelectOptions
+      });
+    };
+    this.onClickOutside = event => {
+      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+      if (!this.selector.contains(event.target)) {
+        this.closeSelect();
+      }
+    };
+    this.closeSelect = () => {
+      this.setState({
+        isShowSelectOptions: false
+      });
+    };
+    this.getSelectedOptionTop = () => {
+      if (!this.selector) return 38;
+      const _this$selector$getBou = this.selector.getBoundingClientRect(),
+        height = _this$selector$getBou.height;
+      return height;
+    };
+    this.getFilterOptions = searchValue => {
+      const options = this.props.options;
+      const validSearchVal = searchValue.trim().toLowerCase();
+      if (!validSearchVal) return options || [];
+      return options.filter(option => option.name.toLowerCase().includes(validSearchVal));
+    };
+    this.state = {
+      isShowSelectOptions: false
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedOptions.length !== this.props.selectedOptions.length) {
+      // when selectedOptions change and dom rendered, calculate top
+      setTimeout(() => {
+        this.forceUpdate();
+      }, 1);
+    }
+  }
+  render() {
+    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', {
+        'focus': this.state.isShowSelectOptions
+      }, className),
+      onClick: this.onSelectToggle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "selected-option",
+        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 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 ml-1",
+              onClick: () => {
+                this.props.onDeleteOption(item);
+              }
+            })]
+          }, item.id))
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-placeholder",
+          children: placeholder
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "sf3-font-down sf3-font"
+        })]
+      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
+        selectedOptions: selectedOptions,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.props.onSelectOption,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClickOutside,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions
+      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
+          className: className,
+          selectedOptions: selectedOptions,
+          position: this.selector.getBoundingClientRect(),
+          isInModal: isInModal,
+          top: this.getSelectedOptionTop(),
+          options: options,
+          onSelectOption: this.props.onSelectOption,
+          searchPlaceholder: searchPlaceholder,
+          noOptionsPlaceholder: noOptionsPlaceholder,
+          onClickOutside: this.onClickOutside,
+          closeSelect: this.closeSelect,
+          getFilterOptions: this.getFilterOptions
+        })
+      })]
+    });
+  }
+}
+var _default = exports.default = DTableGroupSelect;

package/lib/DTableGroupSelect/option.js

@@ -0,0 +1,42 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+class Option extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectOption = e => {
+      e.stopPropagation();
+      this.props.onSelectOption(this.props.option);
+    };
+    this.onMouseEnter = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(this.props.index);
+      }
+    };
+    this.onMouseLeave = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(-1);
+      }
+    };
+  }
+  render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('d-flex option', {
+        'option-active': this.props.isActive
+      }),
+      onClick: this.onSelectOption,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      children: this.props.children
+    });
+  }
+}
+var _default = exports.default = Option;

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

@@ -0,0 +1,54 @@
+.group-selector .option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: 6px 10px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.group-selector .option .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.group-selector .option.option-active {
+  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;
+}
+
+.group-selector .option-group-dtable-ui-single-select-selector .select-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.group-selector .option-group-dtable-ui-single-select-selector .option:hover,
+.group-selector .option-group-dtable-ui-single-select-selector .option.option-active,
+.group-selector .option-group-dtable-ui-multiple-select-selector .option:hover,
+.group-selector .option-group-dtable-ui-multiple-select-selector .option.option-active {
+  background-color: #f5f5f5;
+}