dtable-ui-component 7.0.0 → 7.0.1-beta.2

package/lib/AsyncUserSelect/index.css

@@ -3,10 +3,30 @@
   height: auto !important;
   min-height: 38px;
   max-width: calc(100% - 10px);
+  padding: .375rem 40px .375rem 1rem;
+  position: relative;
+}
+
+.dtable-ui-selected-users-container.focus {
+  border: 1px solid var(--bs-bg-border-color) !important;
 }
 
 .dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
-  color: #808080;
+  color: var(--bs-icon-color);
+}
+
+.select-dropdown-indicator {
+  margin-left: -2px;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%)
+}
+
+.select-dropdown-indicator .multicolor-icon {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 .dtable-ui-user-select-popover .popover {
@@ -23,34 +43,28 @@
   position: relative;
 }
 
-.dtable-ui-user-select-container .dtable-ui-user-search-container {
-  padding: 10px 10px 0 10px;
-}
-
-.dtable-ui-user-select-container .dtable-ui-user-search-container input {
-  height: 28px;
-}
-
 .dtable-ui-user-select-container .dtable-ui-user-list-container {
   min-height: 160px;
   max-height: 200px;
-  margin: 10px 0;
+  padding: 8px;
   overflow: auto;
+  position: relative;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 30px;
-  padding: 0 10px;
+  height: 32px;
+  padding: 0 8px;
   font-size: 14px;
   cursor: pointer;
+  border-radius: 4px;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
-  background: #f5f5f5;
+  background-color: var(--bs-btn-background-hover);
   cursor: pointer;
 }
 
@@ -66,16 +80,15 @@
   background: transparent;
 }
 
-.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
-  color: #798d99;
-  font-size: 12px;
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
+  color: #666666;
+  font-size: 14px;
 }
 
-/* user-item */
 .dtable-ui-user-item {
   display: inline-flex;
   align-items: center;
-  margin: 2px 10px 2px 0;
+  margin: 2px 4px 2px 0;
   padding: 0 8px 0 2px;
   height: 20px;
   font-size: 13px;
@@ -95,6 +108,7 @@
   justify-content: center;
   transform: translateY(0);
   flex-shrink: 0;
+  margin-right: 4px;
 }
 
 .dtable-ui-user-item .user-name {
@@ -125,3 +139,7 @@
   color: #666666;
   cursor: pointer;
 }
+
+.dtable-ui-selected-users-container .dtable-ui-users-input {
+  padding-right: 37px;
+}

package/lib/AsyncUserSelect/index.js

@@ -10,10 +10,11 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
 var _lang = require("../lang");
 var _keyCodes = _interopRequireDefault(require("../constants/key-codes"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const AsyncUserSelect = _ref => {
@@ -211,21 +212,30 @@ const AsyncUserSelect = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
     onClickOutside: onClickOutside,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
           'focus': isPopoverOpen
         }),
         onClick: onTogglePopover,
         ref: selectorRef,
-        children: [selectedUsers.map((user, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
-            user: user,
-            deleteUser: deselectUser
-          }, "dtable-ui-user-selector-selected-user-".concat(index));
-        }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "dtable-ui-user-select-placeholder",
-          children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
-        })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-users-input",
+          children: [selectedUsers.map((user, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+              user: user,
+              deleteUser: deselectUser
+            }, "dtable-ui-user-selector-selected-user-".concat(index));
+          }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-user-select-placeholder",
+            children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "select-dropdown-indicator d-inline-flex align-items-center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+              symbol: "down",
+              color: "var(--bs-icon-color)"
+            })
+          })]
+        })
       }), selectorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
         placement: "bottom-start",
         isOpen: isPopoverOpen,
@@ -238,14 +248,15 @@ const AsyncUserSelect = _ref => {
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-user-search-container",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-              autoFocus: true,
+            className: "seatable-option-group-search",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+              className: "option-search-control",
               placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
-              value: searchValue,
-              wait: 200,
               onChange: onSearchValueChanged,
-              onKeyDown: onKeyDown
+              clearValue: () => onSearchValueChanged(''),
+              autoFocus: true,
+              isClearable: true,
+              value: searchValue
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-user-list-container",
@@ -263,7 +274,7 @@ const AsyncUserSelect = _ref => {
                 }, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   className: "dtable-ui-collaborator-check-icon",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                    className: "dtable-font dtable-icon-check-mark",
+                    className: "dtable-font dtable-icon-check",
                     "aria-hidden": "true"
                   })
                 })]

package/lib/DTableCustomizeSearchInput/index.css

@@ -0,0 +1,81 @@
+
+.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: 100%;
+  border: none;
+  padding: .375rem 1rem;
+  cursor: pointer;
+}
+
+.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.75rem !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;
+  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.75rem !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/DTableCustomizeSearchInput/index.js

@@ -0,0 +1,136 @@
+"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 _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+class DTableCustomizeSearchInput extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onCompositionStart = () => {
+      this.isInputtingChinese = true;
+    };
+    this.onChange = e => {
+      this.timer && clearTimeout(this.timer);
+      const _this$props = this.props,
+        onChange = _this$props.onChange,
+        _this$props$wait = _this$props.wait,
+        wait = _this$props$wait === void 0 ? 100 : _this$props$wait;
+      let text = e.target.value;
+      this.setState({
+        searchValue: text || ''
+      }, () => {
+        if (this.isInputtingChinese) return;
+        this.timer = setTimeout(() => {
+          onChange && onChange(this.state.searchValue.trim());
+        }, wait);
+      });
+    };
+    this.onCompositionEnd = e => {
+      this.isInputtingChinese = false;
+      this.onChange(e);
+    };
+    this.clearSearch = e => {
+      e && e.stopPropagation && e.stopPropagation();
+      const clearValue = this.props.clearValue;
+      this.setState({
+        searchValue: ''
+      }, () => {
+        clearValue && clearValue();
+      });
+    };
+    this.setFocus = isSelectAllText => {
+      if (this.inputRef === document.activeElement) return;
+      this.inputRef.focus();
+      if (isSelectAllText) {
+        const txtLength = this.state.searchValue.length;
+        this.inputRef.setSelectionRange(0, txtLength);
+      }
+    };
+    this.renderClear = () => {
+      const _this$props2 = this.props,
+        isClearable = _this$props2.isClearable,
+        clearClassName = _this$props2.clearClassName;
+      const searchValue = this.state.searchValue;
+      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",
+          color: "var(--bs-icon-secondary-color)"
+        })
+      });
+    };
+    this.state = {
+      searchValue: props.value || ''
+    };
+    this.isInputtingChinese = false;
+    this.timer = null;
+    this.inputRef = null;
+  }
+  componentDidMount() {
+    if (this.props.autoFocus && this.inputRef && this.inputRef !== document.activeElement) {
+      setTimeout(() => {
+        this.inputRef.focus();
+      }, 0);
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({
+        searchValue: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    this.timer && clearTimeout(this.timer);
+    this.timer = null;
+    this.inputRef = null;
+  }
+  render() {
+    const _this$props3 = this.props,
+      placeholder = _this$props3.placeholder,
+      autoFocus = _this$props3.autoFocus,
+      className = _this$props3.className,
+      onKeyDown = _this$props3.onKeyDown,
+      _this$props3$disabled = _this$props3.disabled,
+      disabled = _this$props3$disabled === void 0 ? false : _this$props3$disabled,
+      _this$props3$style = _this$props3.style,
+      style = _this$props3$style === void 0 ? {} : _this$props3$style,
+      isClearable = _this$props3.isClearable,
+      _this$props3$isMultip = _this$props3.isMultiple,
+      isMultiple = _this$props3$isMultip === void 0 ? false : _this$props3$isMultip;
+    const searchValue = this.state.searchValue;
+    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", {
+        type: "text",
+        name: "search-input",
+        value: searchValue,
+        className: (0, _classnames.default)('form-control', className),
+        onChange: this.onChange,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd,
+        onKeyDown: onKeyDown,
+        disabled: disabled,
+        style: style,
+        ref: ref => this.inputRef = ref
+      }), this.renderClear()]
+    });
+  }
+}
+var _default = exports.default = DTableCustomizeSearchInput;

package/lib/DTableCustomizeSelect/index.css

@@ -1,100 +1,178 @@
-.dtable-select {
+.seatable-customize-select {
   position: relative;
-}
-
-.dtable-select.custom-select {
   display: flex;
-  padding: 0 10px;
-  border-radius: 3px;
+  padding: 0 16px;
+  border-radius: 4px;
   align-items: center;
   justify-content: space-between;
   max-width: 900px;
   user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
   text-align: left;
+  line-height: 1.5;
+  background-image: none;
+  font-size: 14px;
+  color: var(--bs-body-color);
+  border: 1px solid rgba(0, 40, 100, 0.12);
 }
 
-.dtable-select.custom-select:focus,
-.dtable-select.custom-select.focus {
-  border-color: #1991eb !important;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+.seatable-customize-select:focus,
+.seatable-customize-select.focus {
+  border: 1px solid var(--bs-bg-border-color) !important;
 }
 
-.dtable-select.custom-select.disabled:focus,
-.dtable-select.custom-select.focus.disabled,
-.dtable-select.custom-select.disabled:hover {
+.seatable-customize-select.disabled:focus,
+.seatable-customize-select.focus.disabled,
+.seatable-customize-select.disabled:hover {
   border-color: rgba(0, 40, 100, 0.12) !important;
   box-shadow: unset;
   cursor: default;
 }
 
-.dtable-select.custom-select:hover {
+.seatable-customize-select:hover {
   cursor: pointer;
-  border-color: rgb(179, 179, 179);
-}
-
-.dtable-select .dtable-icon-down3 {
-  display: inline-block;
-  font-size: 12px;
-  color: #999;
-  transition: all 0.1s;
+  border-color: var(--bs-border-color);
 }
 
-.dtable-select .dtable-icon-down3:hover {
-  color: #555;
+.seatable-customize-select .seatable-multicolor-icon-down {
+  width: 12px;
+  height: 12px;
+  color: var(--bs-icon-color);
 }
 
-.dtable-select .selected-option {
+.seatable-customize-select .selected-option {
   display: flex;
   flex: 1;
   overflow: hidden;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
+  background: inherit;
+  height: 20px;
+}
+
+.seatable-check-color {
+  color: var(--bs-icon-color);
 }
 
-.dtable-select.dtable-ui-collaborator-selector .option-group .option-group-content,
-.dtable-select.selector-group .option-group .option-group-content {
+.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;
 }
 
-.dtable-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
+.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content {
   padding: 10px 0;
 }
 
-.dtable-select.custom-select.dtable-ui-collaborator-selector .option {
+.seatable-customize-select.dtable-ui-collaborator-selector .option {
   padding: 5px 0 5px 10px !important;
   line-height: 20px;
 }
 
-.dtable-select.selector-group .option {
+.seatable-customize-select.selector-group .option {
   height: 30px;
   display: flex;
   align-items: center;
 }
 
-.dtable-select.selector-group .select-group-option {
+.seatable-customize-select.selector-group .select-group-option {
   justify-content: space-between;
 }
 
-.dtable-select.selector-group .selected-option .selected-group {
+.seatable-customize-select.selector-group .selected-option .selected-group {
   padding: 0 2px;
   background: #eceff4;
   border-radius: 3px;
 }
 
-.dtable-select .selected-option-show {
-  overflow: hidden;
+.seatable-customize-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  white-space: nowrap;
+  color: var(--bs-bg-placeholder-color);
+  margin-right: 8px;
+}
+
+.seatable-customize-select .disabled .select-placeholder {
+  opacity: 0.65;
+}
+
+.seatable-customize-select .selected-option-show {
+  height: 20px;
+  line-height: 20px;
+  margin-right: 8px;
+  width: calc(100% - 20px);
+  display: flex;
   text-overflow: ellipsis;
+  overflow: hidden;
   white-space: nowrap;
 }
 
-.dtable-select .select-placeholder {
-  line-height: 1;
+.seatable-customize-select .selected-option .multicolor-icon {
+  font-size: 12px;
+}
+
+.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;
-  white-space: nowrap;
+}
+
+.seatable-customize-select .header-icon {
+  display: inline-block;
+  padding: 0 .5rem 0 0!important;
+  margin-left: 0 !important;
+}
+
+.selector-group-select .selected-option-show .selected-option-item {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 4px;
+  padding: 0 6px 0 6px;
+  background-color: #f7f7f5;
+}
+
+.selector-group-select .selected-option-show .selected-option-item .selected-option-item-name {
+  color: #212519;
+  font-size: 14px;
+  margin-right: 8px
+}
+
+.selector-group-select .dtable-icon-x {
+  color: var(--bs-icon-color);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.selector-group-select .selected-option-show {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  height: auto;
+}
+
+.selector-group-select {
+  padding: 7px 16px 7px 8px;
+}
+
+.selector-group-select .selected-option {
+  align-items: center;
+  display: flex;
+  flex: 1 1;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  overflow: hidden;
+  height: auto;
+  min-height: 24px
+}
+
+.selector-group-select {
+  height: auto;
 }

package/lib/DTableCustomizeSelect/index.js

@@ -8,6 +8,7 @@ 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"));
 require("./index.css");
@@ -23,7 +24,7 @@ class DTableCustomizeSelect extends _react.Component {
       */
       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;
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-option-group-search') return;
       // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
@@ -93,7 +94,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 +108,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,