dtable-ui-component 7.0.0-ahn.1 → 7.0.0-iam.2

package/lib/AsyncUserSelect/index.css

@@ -3,30 +3,10 @@
   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: 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;
+  color: #808080;
 }
 
 .dtable-ui-user-select-popover .popover {
@@ -43,28 +23,34 @@
   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;
-  padding: 8px;
+  margin: 10px 0;
   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: 32px;
-  padding: 0 8px;
+  height: 30px;
+  padding: 0 10px;
   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-color: var(--bs-btn-background-hover);
+  background: #f5f5f5;
   cursor: pointer;
 }
 
@@ -80,15 +66,16 @@
   background: transparent;
 }
 
-.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
-  color: #666666;
-  font-size: 14px;
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
+  color: #798d99;
+  font-size: 12px;
 }
 
+/* user-item */
 .dtable-ui-user-item {
   display: inline-flex;
   align-items: center;
-  margin: 2px 4px 2px 0;
+  margin: 2px 10px 2px 0;
   padding: 0 8px 0 2px;
   height: 20px;
   font-size: 13px;
@@ -108,7 +95,6 @@
   justify-content: center;
   transform: translateY(0);
   flex-shrink: 0;
-  margin-right: 4px;
 }
 
 .dtable-ui-user-item .user-name {
@@ -139,7 +125,3 @@
   color: #666666;
   cursor: pointer;
 }
-
-.dtable-ui-selected-users-container .dtable-ui-users-input {
-  padding-right: 37px;
-}

package/lib/AsyncUserSelect/index.js

@@ -10,11 +10,10 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
-var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 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 => {
@@ -212,30 +211,21 @@ const AsyncUserSelect = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
     onClickOutside: onClickOutside,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("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: /*#__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)"
-            })
-          })]
-        })
+        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')
+        })]
       }), selectorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
         placement: "bottom-start",
         isOpen: isPopoverOpen,
@@ -248,15 +238,14 @@ const AsyncUserSelect = _ref => {
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "seatable-option-group-search",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
-              className: "option-search-control",
+            className: "dtable-ui-user-search-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+              autoFocus: true,
               placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
+              value: searchValue,
+              wait: 200,
               onChange: onSearchValueChanged,
-              clearValue: () => onSearchValueChanged(''),
-              autoFocus: true,
-              isClearable: true,
-              value: searchValue
+              onKeyDown: onKeyDown
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-user-list-container",
@@ -274,7 +263,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",
+                    className: "dtable-font dtable-icon-check-mark",
                     "aria-hidden": "true"
                   })
                 })]

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -0,0 +1,86 @@
+.dtable-customize-collaborator-select.dtable-select {
+  position: unset;
+}
+
+.dtable-customize-collaborator-select .collaborator-avatar {
+  width: 16px;
+  height: 16px;
+  transform: translateY(-1px);
+}
+
+.dtable-customize-collaborator-select .selected-option-show {
+  width: calc(100% - 20px);
+  height: 20px;
+}
+
+.dtable-customize-collaborator-select .selected-option {
+  width: auto;
+  overflow-x: auto;
+}
+
+.dtable-customize-collaborator-select .dtable-icon-down3 {
+  margin-left: .5rem;
+}
+
+.dtable-customize-collaborator-select .option-collaborator {
+  display: flex;
+}
+
+.dtable-customize-collaborator-select .collaborator-container {
+  flex: 1 1;
+}
+
+.dtable-customize-collaborator-select .editor-list-delete .collaborator-container {
+  flex: 1 1;
+  display: inline;
+}
+
+.dtable-customize-collaborator-select .multiple-check-icon {
+  display: inline-flex;
+  width: 20px;
+  text-align: center;
+}
+
+.dtable-customize-collaborator-select .collaborator-check-icon .dtable-icon-check-mark,
+.dtable-customize-collaborator-select .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.dtable-customize-collaborator-select.dtable-select .option-active,
+.dtable-customize-collaborator-select.dtable-select .option:hover {
+  color: #212529;
+  background-color: #f5f5f5;
+}
+
+.dtable-customize-collaborator-select.dtable-select .option.option-active .select-option-name {
+  color: #212529;
+}
+
+.collaborator-select .option-group-content .collaborator,
+.dtable-customize-collaborator-select .option-group .option-group-content .collaborator {
+  background: none;
+}
+
+.dtable-customize-collaborator-select .collaborator-avatar-container {
+  width: 16px;
+}
+
+.dtable-customize-collaborator-select .option-group-content .remove-container {
+  display: none;
+}
+
+.dtable-customize-collaborator-select .collaborator-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.collaborator-container .collaborator-name {
+  margin-left: 5px;
+  max-width: 200px;
+  color: #212529;
+}
+
+.collaborator-select .option-group {
+  max-height: fit-content;
+}

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -0,0 +1,158 @@
+"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 _reactstrap = require("reactstrap");
+var _dtableUtils = require("dtable-utils");
+var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+class CollaboratorSelect extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectToggle = event => {
+      event.preventDefault();
+      /*
+        if select is showing, click events do not need to be monitored by other click events,
+        so it can be closed when other select is clicked.
+      */
+      if (this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
+      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.selectedOptionWidth = this.selectedOptionRef.clientWidth;
+      this.setState({
+        isShowSelectOptions: !this.state.isShowSelectOptions
+      });
+    };
+    this.onMousedown = event => {
+      const name = event.target.className;
+      if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
+        return;
+      }
+      if (!this.selector.contains(event.target)) {
+        this.closeSelect();
+      }
+    };
+    this.closeSelect = () => {
+      this.setState({
+        isShowSelectOptions: false
+      });
+    };
+    this.getFilterOptions = searchValue => {
+      const _this$props = this.props,
+        options = _this$props.options,
+        searchable = _this$props.searchable;
+      if (!searchable) return options || [];
+      return (0, _dtableUtils.searchCollaborators)(options, searchValue);
+    };
+    this.renderOptionGroup = () => {
+      const _this$props2 = this.props,
+        value = _this$props2.value,
+        options = _this$props2.options,
+        searchable = _this$props2.searchable,
+        searchPlaceholder = _this$props2.searchPlaceholder,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        top = _this$props2.top,
+        left = _this$props2.left,
+        isUsePopover = _this$props2.isUsePopover;
+      if (!isUsePopover) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
+          value: value,
+          top: top,
+          left: left,
+          minWidth: this.btnWidth + 8 // 8px is padding
+          ,
+          options: options,
+          onSelectOption: this.props.onSelectOption,
+          searchable: searchable,
+          searchPlaceholder: searchPlaceholder,
+          noOptionsPlaceholder: noOptionsPlaceholder,
+          closeSelect: this.closeSelect,
+          getFilterOptions: this.getFilterOptions,
+          supportMultipleSelect: this.props.supportMultipleSelect,
+          stopClickEvent: true,
+          isShowSelected: true
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+        placement: "bottom",
+        isOpen: true,
+        target: this.id,
+        fade: false,
+        hideArrow: true,
+        className: "dtable-customize-collaborator-select dtable-select",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
+          value: value,
+          top: top,
+          left: left,
+          minWidth: this.btnWidth + 8 // 8px is padding
+          ,
+          options: options,
+          onSelectOption: this.props.onSelectOption,
+          searchable: searchable,
+          searchPlaceholder: searchPlaceholder,
+          noOptionsPlaceholder: noOptionsPlaceholder,
+          closeSelect: this.closeSelect,
+          getFilterOptions: this.getFilterOptions,
+          supportMultipleSelect: this.props.supportMultipleSelect,
+          stopClickEvent: true,
+          isShowSelected: true
+        })
+      });
+    };
+    this.state = {
+      isShowSelectOptions: false
+    };
+    this.id = 'collaborator-select-' + Math.trunc(Math.random() * 10000);
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onMousedown);
+    this.btnWidth = this.selector.clientWidth;
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onMousedown);
+  }
+  render() {
+    let _this$props3 = this.props,
+      className = _this$props3.className,
+      value = _this$props3.value,
+      placeholder = _this$props3.placeholder,
+      isLocked = _this$props3.isLocked;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      ref: node => this.selector = node,
+      className: (0, _classnames.default)('dtable-select custom-select collaborator-select', {
+        'focus': this.state.isShowSelectOptions
+      }, {
+        'disabled': isLocked
+      }, className),
+      id: this.id,
+      onClick: this.onSelectToggle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "selected-option",
+        ref: node => this.selectedOptionRef = node,
+        children: [value.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "selected-option-show",
+          children: value.label
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-placeholder",
+          children: placeholder
+        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-down3"
+        })]
+      }), this.state.isShowSelectOptions && this.renderOptionGroup()]
+    });
+  }
+}
+CollaboratorSelect.defaultProps = {
+  top: -3,
+  left: -3
+};
+var _default = exports.default = CollaboratorSelect;

package/lib/DTableCustomizeSelect/index.css

@@ -1,178 +1,100 @@
-.seatable-customize-select {
+.dtable-select {
   position: relative;
+}
+
+.dtable-select.custom-select {
   display: flex;
-  padding: 0 16px;
-  border-radius: 4px;
+  padding: 0 10px;
+  border-radius: 3px;
   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);
 }
 
-.seatable-customize-select:focus,
-.seatable-customize-select.focus {
-  border: 1px solid var(--bs-bg-border-color) !important;
+.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.disabled:focus,
-.seatable-customize-select.focus.disabled,
-.seatable-customize-select.disabled:hover {
+.dtable-select.custom-select.disabled:focus,
+.dtable-select.custom-select.focus.disabled,
+.dtable-select.custom-select.disabled:hover {
   border-color: rgba(0, 40, 100, 0.12) !important;
   box-shadow: unset;
   cursor: default;
 }
 
-.seatable-customize-select:hover {
+.dtable-select.custom-select:hover {
   cursor: pointer;
-  border-color: var(--bs-border-color);
+  border-color: rgb(179, 179, 179);
+}
+
+.dtable-select .dtable-icon-down3 {
+  display: inline-block;
+  font-size: 12px;
+  color: #999;
+  transition: all 0.1s;
 }
 
-.seatable-customize-select .seatable-multicolor-icon-down {
-  width: 12px;
-  height: 12px;
-  color: var(--bs-icon-color);
+.dtable-select .dtable-icon-down3:hover {
+  color: #555;
 }
 
-.seatable-customize-select .selected-option {
+.dtable-select .selected-option {
   display: flex;
   flex: 1;
   overflow: hidden;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  background: inherit;
-  height: 20px;
-}
-
-.seatable-check-color {
-  color: var(--bs-icon-color);
+  background: #fff;
 }
 
-.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 {
+.dtable-select.dtable-ui-collaborator-selector .option-group .option-group-content,
+.dtable-select.selector-group .option-group .option-group-content {
   padding: 10px;
 }
 
-.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content {
+.dtable-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
   padding: 10px 0;
 }
 
-.seatable-customize-select.dtable-ui-collaborator-selector .option {
+.dtable-select.custom-select.dtable-ui-collaborator-selector .option {
   padding: 5px 0 5px 10px !important;
   line-height: 20px;
 }
 
-.seatable-customize-select.selector-group .option {
+.dtable-select.selector-group .option {
   height: 30px;
   display: flex;
   align-items: center;
 }
 
-.seatable-customize-select.selector-group .select-group-option {
+.dtable-select.selector-group .select-group-option {
   justify-content: space-between;
 }
 
-.seatable-customize-select.selector-group .selected-option .selected-group {
+.dtable-select.selector-group .selected-option .selected-group {
   padding: 0 2px;
   background: #eceff4;
   border-radius: 3px;
 }
 
-.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;
+.dtable-select .selected-option-show {
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.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;
-}
-
-.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;
+.dtable-select .select-placeholder {
+  line-height: 1;
   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;
+  white-space: nowrap;
 }