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

package/lib/DTableCustomizeSelect/index.js

@@ -8,8 +8,10 @@ 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 {
@@ -22,8 +24,8 @@ class DTableCustomizeSelect extends _react.Component {
         so it can be closed when other select is clicked.
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
-      let eventClassName = event.target.className;
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
+      const eventClassName = (0, _utils.getEventClassName)(event);
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-select-search') return;
       // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
@@ -31,7 +33,7 @@ class DTableCustomizeSelect extends _react.Component {
       });
     };
     this.onClick = event => {
-      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+      if (this.props.isShowSelected && (0, _utils.getEventClassName)(event).includes('icon-fork-number')) {
         return;
       }
       if (!this.selector.contains(event.target)) {
@@ -93,7 +95,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)('dtable-select custom-select', {
+      className: (0, _classnames.default)('seatable-customize-select custom-select', {
         'focus': this.state.isShowSelectOptions
       }, {
         'disabled': isLocked
@@ -107,8 +109,12 @@ class DTableCustomizeSelect extends _react.Component {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "select-placeholder",
           children: placeholder
-        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-down3"
+        }), !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)"
+          })
         })]
       }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
         value: value,

package/lib/DTableFiltersPopover/index.js

@@ -147,29 +147,28 @@ var _jsxRuntime = require("react/jsx-runtime");
           addIconClassName: "popover-add-icon"
         }), isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "add-buttons",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
-            className: "mr-4",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "btn-add-filter mr-4",
             onClick: canAddFilter ? () => this.addFilter() : () => {},
+            role: "button",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter'),
-            color: "filled",
-            size: "middle",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table"
+              className: "dtable-font dtable-icon-add-table popover-add-icon"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter')
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "btn-add-filter-group",
             onClick: canAddFilter ? () => this.addFilterGroup() : () => {},
-            color: "filled",
-            size: "middle",
+            role: "button",
             tabIndex: 0,
             "aria-label": (0, _lang.getLocale)('Add_filter_group'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
-              className: "dtable-font dtable-icon-add-table"
+              className: "dtable-font dtable-icon-add-table popover-add-icon"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "add-new-option",
               children: (0, _lang.getLocale)('Add_filter_group')

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

@@ -91,9 +91,9 @@ class FilterItemUtils {
       value: {
         columnOption: option
       },
-      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("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,23 +102,16 @@ 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: {
-        columnOption: option
-      },
-      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      value: option,
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("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,
@@ -127,12 +120,7 @@ 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,16 +16,15 @@ 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.jsxs)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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",
@@ -46,12 +45,7 @@ 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"
-                })
-              })]
+              })
             })
           })
         };
@@ -106,7 +100,9 @@ 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-group.js

@@ -138,7 +138,7 @@ class FilterGroup extends _react.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter seatable-icon-btn",
+        className: "delete-filter",
         onClick: this.deleteFilterGroup,
         role: "button",
         tabIndex: 0,

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

@@ -128,8 +128,7 @@ class FilterItem extends _react.default.Component {
       const _this$props5 = this.props,
         index = _this$props5.index,
         filter = _this$props5.filter;
-      const option = value.columnOption;
-      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, option);
+      let newFilter = (0, _utils.getUpdatedFilterBySelectMultiple)(filter, value);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -137,8 +136,7 @@ class FilterItem extends _react.default.Component {
       const _this$props6 = this.props,
         index = _this$props6.index,
         filter = _this$props6.filter;
-      const collaborator = value.columnOption;
-      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, collaborator);
+      let newFilter = (0, _utils.getUpdatedFilterByCollaborator)(filter, value);
       this.resetState(newFilter);
       this.props.updateFilter(index, newFilter);
     };
@@ -146,7 +144,10 @@ class FilterItem extends _react.default.Component {
       const _this$props7 = this.props,
         index = _this$props7.index,
         filter = _this$props7.filter;
-      const collaborator = value.columnOption;
+      const collaborator = value && (value.columnOption || value.value || value);
+      if (!collaborator || !collaborator.email) {
+        return;
+      }
       let newFilter = (0, _utils.getUpdatedFilterByCreator)(filter, collaborator);
       // the predicate is 'is' or 'is not'
       if (!newFilter) {
@@ -294,11 +295,12 @@ 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 10px 0 0'
+            margin: '0 4px 0 0'
           };
           let optionName = null;
           if (inOption) {
@@ -309,6 +311,7 @@ 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,
@@ -319,6 +322,7 @@ class FilterItem extends _react.default.Component {
         });
       }
       const selectedOptionNames = labelArray.length > 0 ? {
+        value: valueArray,
         label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
           children: labelArray
         })
@@ -425,6 +429,9 @@ class FilterItem extends _react.default.Component {
                 color: selectedOption.textColor || null
               };
               selectedOptionName = {
+                value: {
+                  columnOption: selectedOption
+                },
                 label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: className,
                   style: style,
@@ -507,7 +514,8 @@ class FilterItem extends _react.default.Component {
               collaborators: creators,
               onSelectCollaborator: this.onSelectCreator,
               isInModal: this.props.isInModal,
-              readOnly: readOnly
+              readOnly: readOnly,
+              filter_predicate: filter_predicate
             });
           }
         case _dtableUtils.CellType.RATE:
@@ -701,7 +709,7 @@ class FilterItem extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filter-item",
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "delete-filter seatable-icon-btn",
+        className: "delete-filter",
         onClick: this.onDeleteFilter,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font dtable-icon-fork-number"

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

@@ -289,6 +289,8 @@
 }
 
 .dtable-ui-filters-list .delete-filter {
+  width: 12px;
+  height: 20px;
   margin-right: 14px;
   text-align: center;
 }
@@ -299,8 +301,8 @@
 
 .dtable-ui-filters-list .delete-filter .dtable-icon-fork-number {
   display: inline-block;
-  font-size: 16px;
-  color: var(--bs-icon-color);
+  font-size: 12px;
+  color: #999;
 }
 
 .dtable-ui-filters-list .multiple-option-name {
@@ -331,7 +333,7 @@
   display: inline-flex;
   align-items: center;
   height: 20px;
-  margin-right: 10px;
+  margin-right: 4px;
   padding: 0 8px 0 2px;
   font-size: 13px;
   border-radius: 10px;
@@ -386,7 +388,7 @@
 }
 
 .dtable-ui-filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: var(--bs-icon-color);
+  color: #555555;
 }
 
 .dtable-ui-filters-list .filter-container-readonly .dtable-select .selected-option-show,
@@ -410,14 +412,14 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding: 0 0.3125rem;
+  padding-right: 0.5rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #aaa;
+  color: var(--bs-icon-secondary-color);
   cursor: default;
 }
 

package/lib/DTableModalHeader/index.css

@@ -0,0 +1,22 @@
+.modal-header .dtable-modal-close.close {
+  padding: 14px 16px;
+  opacity: 1;
+  margin: -1rem -1rem -1rem auto;
+  background-color: transparent;
+  border: 0;
+  float: right;
+  font-size: 1.40625rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+}
+
+.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
+  opacity: 1;
+}
+
+.modal-header .dtable-modal-close .dtable-modal-close-inner {
+  width: 28px;
+  height: 28px;
+  font-size: 22.5px; /* same with Seafile close icon */
+}

package/lib/DTableModalHeader/index.js

@@ -10,15 +10,22 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const DTableModalHeader = _ref => {
   let children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-    icon: "x",
+  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    type: "button",
+    className: "close dtable-modal-close",
+    "data-dismiss": "modal",
     "aria-label": "Close",
-    onClick: props.toggle
+    onClick: props.toggle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      icon: "x",
+      className: "dtable-modal-close-inner"
+    })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     close: customCloseBtn,

package/lib/DTableSelect/dtable-select-label.css

@@ -1,10 +1,15 @@
 .dtable-select-check-icon {
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 14px;
   text-align: center;
 }
 
 .dtable-select-check-icon .dtable-font {
+  font-size: 14px;
+  color: var(--bs-icon-color);
+}
+
+.seatable-option .select-option-name .seatable-tip-default {
   font-size: 12px;
-  color: #798d99;
+  margin-top: 4px
 }

package/lib/DTableSelect/dtable-select-label.js

@@ -22,7 +22,7 @@ function DTableSelectLabel(_ref) {
     }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-select-check-icon",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-check-mark"
+        className: "dtable-font dtable-icon-check"
       })
     })]
   });

package/lib/DTableSelect/index.js

@@ -39,10 +39,11 @@ class DTableSelect extends _react.default.Component {
       MenuList: _utils.MenuList,
       ClearIndicator: _utils.ClearIndicator
     }, userComponents);
+    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: onChange,
-      options: options,
+      onChange: (0, _utils.createHandleChange)(onChange),
+      options: processedOptions,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
@@ -50,7 +51,6 @@ class DTableSelect extends _react.default.Component {
       components: mergedComponents,
       placeholder: placeholder,
       isSearchable: isSearchable,
-      isClearable: isClearable,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -0,0 +1,16 @@
+.select-dropdown-indicator {
+  position: absolute;
+  top: 50%;
+  right: 18px;
+  transform: translateY(-50%);
+  margin-left: -2px;
+}
+
+.select-dropdown-indicator svg {
+  width: 12px;
+  height: 12px;
+}
+
+.dis-multicolor-icon-down {
+  opacity: 0.65 !important;
+}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const SelectDropdownIndicator = _ref => {
+  let isDisabled = _ref.isDisabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "select-dropdown-indicator d-flex align-items-center",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      symbol: "down",
+      color: "var(--bs-icon-color)",
+      className: isDisabled ? 'dis-multicolor-icon-down' : ''
+    })
+  });
+};
+var _default = exports.default = SelectDropdownIndicator;

package/lib/DTableSelect/user-select.css

@@ -1,51 +1,12 @@
-.user-select .select-module-container {
-  display: flex;
-  align-items: center;
+/* hide checkbox in select value container */
+.seatable-select-value-container .seatable-multicolor-icon-check {
+  display: none;
 }
 
-.user-select .select-module.select-module-avatar {
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
+.seatable-select-value-container .select-option-label {
+  font-size: 14px !important;
 }
 
-.user-select .select-module.select-module-name {
-  color: #212529;
-  font-size: 14px;
-}
-
-.user-select .true__value-container .select-module-container {
-  display: block;
-}
-
-.user-select .true__value-container .select-module.select-module-avatar {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-}
-
-.user-select .true__value-container .true__multi-value__label {
-  padding: 0px;
-}
-
-.user-select .true__value-container .true__multi-value__label .select-module.select-module-avatar {
-  transform: translateY(-2px);
-}
-
-.user-select .true__value-container .select-module.select-module-name {
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1;
-  line-height: 20px;
-  margin-left: 5px;
-}
-
-.user-select .true__control.true__control--is-focused,
-.user-select .true__control.true__control--is-focused:hover {
-  background-color: #ffffff;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+.seatable-check-color {
+  color: var(--bs-icon-secondary-color);
 }