dtable-ui-component 6.0.110-apv.2 → 6.0.110-ast.2

package/lib/DTableColorPicker/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
@@ -179,10 +180,9 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setSpecColor(value[specColor]);
       return;
     }
-    const newValue = {
-      ...value,
+    const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
       [specColor]: val
-    };
+    });
     updateValue(newValue);
   };
   const updateValue = newValue => {
@@ -195,10 +195,9 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setAlphaVal((0, _utils.toPercentage)(value.a));
       return;
     }
-    const newValue = {
-      ...value,
+    const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
       a: parseFloat(alphaVal) / 100
-    };
+    });
     updateValue(newValue);
   };
   const onKeyDown = (event, callBack) => {
@@ -246,18 +245,18 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         children: colors.map((color, index) => {
           const isLight = (0, _utils.isLightColor)(color);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
+            className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
             onClick: () => onSelectDefaultColor(color),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "colorinput-color d-flex align-items-center justify-content-center",
               style: {
                 backgroundColor: color
               },
-              children: color === `${(0, _utils.rgbaToHex)(value)}` && alphaVal === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              children: color === "".concat((0, _utils.rgbaToHex)(value)) && alphaVal === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
                 className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
               })
             })
-          }, `default-color-${index}`);
+          }, "default-color-".concat(index));
         })
       })]
     });
@@ -271,7 +270,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         color: value,
         onChange: onChangeChromePicker
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `color-setting d-flex align-items-center ${colorMode}`,
+        className: "color-setting d-flex align-items-center ".concat(colorMode),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           className: "mode-btn d-flex",
           onClick: onChangeMode,
@@ -345,7 +344,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           children: currentUsedColors.map((color, index) => {
             const isLight = (0, _utils.isLightColor)(color);
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
+              className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
               onClick: () => onSelectDefaultColor(color),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "colorinput-color d-flex align-items-center justify-content-center",
@@ -353,7 +352,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                   backgroundColor: color
                 }
               })
-            }, `default-color-${index}`);
+            }, "default-color-".concat(index));
           })
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "blank-placeholder d-flex align-items-center justify-content-center",

package/lib/DTableColorPicker/utils.js

@@ -54,7 +54,7 @@ const rgbaToHex = function (color) {
     return hex.length === 1 ? '0' + hex : hex;
   };
   const alpha = a !== undefined && a !== 1 ? toHex(Math.round(a * 255)) : '';
-  return `${isNeedPrefix ? '#' : ''}${toHex(r)}${toHex(g)}${toHex(b)}${isNeedAlpha ? alpha : ''}`;
+  return "".concat(isNeedPrefix ? '#' : '').concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).concat(isNeedAlpha ? alpha : '');
 };
 exports.rgbaToHex = rgbaToHex;
 const isLightColor = color => {

package/lib/DTableCommonAddTool/index.js

@@ -18,11 +18,11 @@ function DTableCommonAddTool(_ref) {
     style
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: `dtable-ui add-item-btn ${className ? className : ''}`,
+    className: "dtable-ui add-item-btn ".concat(className ? className : ''),
     style: style,
     onClick: e => callBack(e),
     children: [!hideIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: `dtable-font dtable-icon-add-table ${addIconClassName || ''}`
+      className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "add-new-option text-truncate",
       children: footerName

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -32,6 +32,22 @@ class CollaboratorSelect extends _react.Component {
         isShowSelectOptions: !this.state.isShowSelectOptions
       });
     };
+    this.onClick = event => {
+      const target = event.target;
+      const name = target.className;
+      const {
+        isShowSelectOptions
+      } = this.state;
+      if (!isShowSelectOptions || name === 'select-placeholder' || name.includes('icon-fork-number') || this.selector.contains(target)) {
+        return;
+      }
+      const {
+        isUsePopover
+      } = this.props;
+      if (isUsePopover && !this.collaboratorSelectPopoverRef.contains(target) || !isUsePopover && !this.selector.contains(target)) {
+        this.closeSelect();
+      }
+    };
     this.onMousedown = event => {
       const name = event.target.className;
       if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
@@ -81,7 +97,8 @@ class CollaboratorSelect extends _react.Component {
           getFilterOptions: this.getFilterOptions,
           supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
-          isShowSelected: true
+          isShowSelected: true,
+          onClickOutside: this.onClick
         });
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
@@ -106,7 +123,8 @@ class CollaboratorSelect extends _react.Component {
           getFilterOptions: this.getFilterOptions,
           supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
-          isShowSelected: true
+          isShowSelected: true,
+          onClickOutside: this.onClick
         })
       });
     };

package/lib/DTableCustomizeSearchInput/index.css

@@ -0,0 +1,82 @@
+
+.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 0 .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.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,141 @@
+"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 {
+        onChange,
+        wait = 100
+      } = this.props;
+      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;
+      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 {
+        isClearable,
+        clearClassName
+      } = this.props;
+      const {
+        searchValue
+      } = this.state;
+      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 {
+      placeholder,
+      autoFocus,
+      className,
+      onKeyDown,
+      disabled = false,
+      style = {},
+      isClearable,
+      isMultiple = false
+    } = this.props;
+    const {
+      searchValue
+    } = this.state;
+    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,117 +1,108 @@
-.dtable-select {
+.seatable-customize-select {
   position: relative;
-}
-
-.dtable-select.custom-select {
   display: flex;
   padding: 0 16px;
-  border-radius: 3px;
+  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-color: #3E84F7 !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);
+  border-color: var(--bs-border-color);
 }
 
-.dtable-select .dtable-icon-down3 {
-  display: inline-block;
-  font-size: 12px;
-  color: #666666;
-  transition: all 0.1s;
+.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;
 }
 
-.dtable-select.dtable-ui-collaborator-selector .option-group .option-group-content,
-.dtable-select.selector-group .option-group .option-group-content {
+.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;
 }
 
-.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;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dtable-select .select-placeholder {
+.seatable-customize-select .select-placeholder {
   line-height: 1;
   font-size: 14px;
   white-space: nowrap;
+  color: #868E96;
+  margin-right: 8px;
 }
 
-.option-group .option-group-selector-multiple-select .option-group-search,
-.option-group .option-group-selector-single-select .option-group-search {
-  padding: 0 0 8px 0 !important;
-}
-
-.option-group-selector-multiple-select .form-control,
-.option-group-selector-single-select .form-control {
-  border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
-  border-radius: 4px 4px 0 0;
-  padding: .375rem .5rem !important;
-  height: 32px;
+.seatable-customize-select .selected-option-show {
+  height: 20px;
+  line-height: 20px;
+  margin-right: 8px;
+  width: calc(100% - 20px);
+  white-space: nowrap;
 }
 
-.option-group-selector-multiple-select .form-control:focus,
-.option-group-selector-single-select .form-control:focus {
-  border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
-  box-shadow: none !important;
+.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

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
 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 {
@@ -23,8 +25,8 @@ 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;
-      // Prevent closing by pressing the spacebar in the search input
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-option-group-search') return;
+      // Prevent closing by pressing the space bar in the search input
       if (event.target.value === '') return;
       this.setState({
         isShowSelectOptions: !this.state.isShowSelectOptions
@@ -83,7 +85,7 @@ class DTableCustomizeSelect extends _react.Component {
     };
   }
   render() {
-    let {
+    const {
       className,
       value,
       options,
@@ -93,17 +95,19 @@ class DTableCustomizeSelect extends _react.Component {
       noOptionsPlaceholder,
       isLocked,
       isInModal,
-      addOptionAble,
       component
     } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      tabIndex: "0",
+      role: "button",
       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
       }, className),
       onClick: this.onSelectToggle,
+      onKeyDown: _util.onKeyDown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "selected-option",
         children: [value && value.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -112,12 +116,15 @@ 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, {
+      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
         value: value,
-        addOptionAble: addOptionAble,
         component: component,
         isShowSelected: this.props.isShowSelected,
         top: this.getSelectedOptionTop(),
@@ -131,10 +138,9 @@ class DTableCustomizeSelect extends _react.Component {
         getFilterOptions: this.getFilterOptions,
         supportMultipleSelect: this.props.supportMultipleSelect
       }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
           className: className,
           value: value,
-          addOptionAble: addOptionAble,
           component: component,
           isShowSelected: this.props.isShowSelected,
           position: this.selector.getBoundingClientRect(),