dtable-ui-component 6.0.110-oot.2 → 6.0.110-oot.20

package/lib/DTableCustomizeSearchInput/index.css

@@ -0,0 +1,83 @@
+
+.seatable-search-input {
+  width: 100%;
+  padding: 6px 10px;
+  min-width: 170px;
+  position: relative;
+  padding: 0;
+  height: 32px;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.seatable-search-input .form-control {
+  height: 32px;
+  border: none;
+  padding: .375rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.seatable-search-input-multiple .form-control:focus,
+.seatable-search-input .form-control:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.seatable-search-input .input-icon-addon {
+  z-index: 1;
+  pointer-events: auto;
+  min-width: 2.5rem !important;
+}
+
+.seatable-search-input .input-icon-addon svg {
+   color: var(--bs-body-secondary-color);
+  cursor: pointer;
+}
+
+.seatable-search-input .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  color: var(--bs-body-secondary-color);
+}
+
+
+.seatable-search-input-multiple {
+  width: 100%;
+  padding: 6px 10px;
+  min-width: 170px;
+  position: relative;
+  padding: 0;
+  height: 40px;
+}
+
+.seatable-search-input-multiple .form-control {
+  height: 30px;
+  padding: .375rem 2.5rem .375rem 1rem;
+  cursor: pointer;
+}
+
+.seatable-search-input-multiple .input-icon-addon {
+  z-index: 1;
+  pointer-events: auto;
+  min-width: 2.5rem !important;
+  top: 10px;
+  height: 30px;
+  right: 10px;
+}
+
+.seatable-search-input-multiple .input-icon-addon svg {
+  color: var(--bs-body-secondary-color);
+  cursor: pointer;
+}
+
+.seatable-search-input-multiple .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  color: var(--bs-body-secondary-color);
+}
+
+.multiple-selects-editor-list .seatable-search-input-multiple {
+  padding: 10px 10px 0;
+}

package/lib/{DTableCustomizeSelect/select-option-group/search-input.js → DTableCustomizeSearchInput/index.js}

@@ -8,9 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-class SearchInput extends _react.Component {
+class DTableCustomizeSearchInput extends _react.Component {
   constructor(props) {
     super(props);
     this.onCompositionStart = () => {
@@ -66,9 +67,13 @@ class SearchInput extends _react.Component {
       if (!isClearable || !searchValue) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _classnames.default)('search-text-clear input-icon-addon', clearClassName),
+        style: {
+          fontSize: '12px'
+        },
         onClick: this.clearSearch,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-          symbol: "close"
+          symbol: "close",
+          color: "var(--bs-icon-secondary-color)"
         })
       });
     };
@@ -106,12 +111,13 @@ class SearchInput extends _react.Component {
       onKeyDown,
       disabled = false,
       style = {},
-      isClearable
+      isClearable,
+      isMultiple = false
     } = this.props;
     const {
       searchValue
     } = this.state;
-    const inputWidth = isClearable && searchValue ? 'calc(100% - 40px)' : '100%';
+    const inputWidth = isClearable && searchValue && !isMultiple ? 'calc(100% - 40px)' : '100%';
     style.width = inputWidth;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
@@ -132,4 +138,4 @@ class SearchInput extends _react.Component {
     });
   }
 }
-var _default = exports.default = SearchInput;
+var _default = exports.default = DTableCustomizeSearchInput;

package/lib/DTableCustomizeSelect/index.css

@@ -49,6 +49,10 @@
   background: inherit;
 }
 
+.seatable-check-color {
+  color: var(--bs-icon-color);
+}
+
 .seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content,
 .seatable-customize-select.selector-group .seatable-option-group .seatable-option-group-content {
   padding: 10px;
@@ -79,10 +83,25 @@
   border-radius: 3px;
 }
 
-
 .seatable-customize-select .select-placeholder {
   line-height: 1;
   font-size: 14px;
   white-space: nowrap;
   color: #868E96;
 }
+
+.seatable-customize-select .selected-option-show {
+  height: 20px;
+  line-height: 20px;
+  margin-right: 8px;
+  width: calc(100% - 20px);
+  white-space: nowrap;
+}
+
+.seatable-customize-select .multiple-check-icon,
+.seatable-customize-select .header-icon .dtable-font,
+.seatable-option-group .select-label .header-icon .dtable-font {
+  color: var(--bs-icon-secondary-color) !important;
+  cursor: default;
+  font-size: 14px;
+}

package/lib/DTableCustomizeSelect/index.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _util = require("./util");
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableCustomizeSelect extends _react.Component {
@@ -115,8 +116,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/DTableCustomizeSelect/select-option-group/index.css

@@ -23,10 +23,11 @@
 }
 
 .seatable-option-group .seatable-option-group-search .form-control {
-  height: 31px;
+  height: 32px;
   border: none;
   padding: .375rem 1rem;
   cursor: pointer;
+  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-option-group .seatable-option-group-search .form-control:focus {
@@ -65,7 +66,7 @@
   align-items: center;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -75,6 +76,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   border-radius: 4px;
+  height: 32px;
 }
 
 .seatable-select-option.seatable-select-option-active {
@@ -96,18 +98,20 @@
   color: #aaa;
 } */
 
-.seatable-select-option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
-}
 
 .seatable-select-option .select-option-name .multiple-select-option {
   margin: 0;
 }
 
 .seatable-option-group .dtable-icon-check {
-  color:'var(--bs-icon-color)'
+  color: var(--bs-icon-color);
+}
+
+.select-label {
+  width: 100%;
 }
 
+.seatable-option-group-selector-multiple-select .select-label,
 .seatable-option-group-selector-single-select .select-option-name,
 .seatable-option-group-selector-multiple-select .multiple-option-name {
   display: flex;
@@ -119,11 +123,11 @@
   display: inline-flex;
   width: 20px;
   text-align: center;
+  color: var(--bs-icon-color);
 }
 
-.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check-mark {
+.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check {
   font-size: 12px;
-  color: #798d99;
 }
 
 .seatable-option-group-selector-single-select .seatable-select-option:hover,

package/lib/DTableCustomizeSelect/select-option-group/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ClickOutside = _interopRequireDefault(require("../../ClickOutside"));
-var _searchInput = _interopRequireDefault(require("./search-input"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../../DTableCustomizeSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
 require("./index.css");
@@ -154,9 +154,10 @@ class SelectOptionGroup extends _react.Component {
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "select-label",
             children: opt.label
           }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check"
+            className: "dtable-font dtable-icon-check seatable-check-color"
           })]
         }, key);
       });
@@ -232,7 +233,7 @@ class SelectOptionGroup extends _react.Component {
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "seatable-option-group-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchInput.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,

package/lib/DTableSelect/index.js

@@ -129,24 +129,7 @@ class DTableSelect extends _react.default.Component {
         options.shift();
       }
     }
-    const optionsWithCheck = options.map(option => {
-      const isSelected = value && value.value === option.value;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
-        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          className: "d-flex align-items-center justify-content-between",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "select-option-label",
-            children: option.label
-          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "dtable-font dtable-icon-check",
-            style: {
-              width: '12px',
-              height: '12px'
-            }
-          })]
-        })
-      });
-    });
+    const optionsWithCheck = options.map(option => (0, _objectSpread2.default)({}, option));
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
       isDisabled: isDisabled,
@@ -177,7 +160,32 @@ class DTableSelect extends _react.default.Component {
       filterOption: customFilterOption,
       autoFocus: autoFocus,
       form: form,
-      menuIsOpen: true
+      formatOptionLabel: (option, _ref3) => {
+        let {
+          context
+        } = _ref3;
+        const isSelected = value && value.value === option.value;
+        if (context === 'menu') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "d-flex align-items-center justify-content-between",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "select-option-label",
+              children: option.label
+            }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "dtable-font dtable-icon-check seatable-check-color",
+              style: {
+                width: '12px',
+                height: '12px'
+              }
+            })]
+          });
+        }
+        // context === 'value'
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-option-label",
+          children: option.label
+        });
+      }
     });
   }
 }

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

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = () => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: "select-dropdown-indicator d-flex align-items-center",
     "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-down3"
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      symbol: "down",
+      color: "var(--bs-icon-color)"
     })
   });
 };

package/lib/DTableSelect/user-select.css

@@ -2,3 +2,7 @@
 .seatable-select-value-container .seatable-multicolor-icon-check {
   display: none;
 }
+
+.seatable-check-color {
+  color: var(--bs-icon-secondary-color);
+}

package/lib/assets/icons/down.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.27148 11.2718L6.09991 8.44336L15.9994 18.3429L25.8989 8.44336L28.7273 11.2718L15.9994 23.9997L3.27148 11.2718Z" fill="currentColor"/>
+</svg>

package/lib/index.js

@@ -124,6 +124,12 @@ Object.defineProperty(exports, "DTableCustomizeCollaboratorSelect", {
     return _DTableCustomizeCollaboratorSelect.default;
   }
 });
+Object.defineProperty(exports, "DTableCustomizeSearchInput", {
+  enumerable: true,
+  get: function () {
+    return _DTableCustomizeSearchInput.default;
+  }
+});
 Object.defineProperty(exports, "DTableCustomizeSelect", {
   enumerable: true,
   get: function () {
@@ -693,6 +699,7 @@ var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
 var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));
 var _DTableCustomizeCollaboratorSelect = _interopRequireDefault(require("./DTableCustomizeCollaboratorSelect"));
 var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("./DTableCustomizeSearchInput"));
 var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
 var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
 var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110oot.2",
+  "version": "6.0.110oot.20",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",