dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/DTableGroupSelect/select-option-group.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
 var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
 require("./select-option-group.css");
@@ -21,14 +21,12 @@ class SelectOptionGroup extends _react.Component {
       this.props.onClickOutside(e);
     };
     this.resetMenuStyle = () => {
-      const {
-        isInModal,
-        position
-      } = this.props;
-      const {
-        top,
-        height
-      } = this.optionGroupRef.getBoundingClientRect();
+      const _this$props = this.props,
+        isInModal = _this$props.isInModal,
+        position = _this$props.position;
+      const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
+        top = _this$optionGroupRef$.top,
+        height = _this$optionGroupRef$.height;
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
           this.optionGroupRef.style.top = position.y - height + 'px';
@@ -76,9 +74,7 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.onMouseDown = e => {
-      const {
-        isInModal
-      } = this.props;
+      const isInModal = this.props.isInModal;
       // prevent event propagation when click option or search input
       if (isInModal) {
         e.stopPropagation();
@@ -86,10 +82,9 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.scrollContent = () => {
-      const {
-        offsetHeight,
-        scrollTop
-      } = this.optionGroupContentRef;
+      const _this$optionGroupCont = this.optionGroupContentRef,
+        offsetHeight = _this$optionGroupCont.offsetHeight,
+        scrollTop = _this$optionGroupCont.scrollTop;
       this.setState({
         disableHover: true
       });
@@ -126,11 +121,10 @@ class SelectOptionGroup extends _react.Component {
       });
     };
     this.renderOptGroup = searchVal => {
-      let {
-        noOptionsPlaceholder,
-        onSelectOption,
-        selectedOptions
-      } = this.props;
+      let _this$props2 = this.props,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        onSelectOption = _this$props2.onSelectOption,
+        selectedOptions = _this$props2.selectedOptions;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -152,7 +146,7 @@ class SelectOptionGroup extends _react.Component {
             title: option.label,
             children: option.label
           }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check"
+            className: "dtable-font dtable-icon-check-mark"
           })]
         }, "".concat(option.id, "-").concat(index));
       });
@@ -180,18 +174,15 @@ class SelectOptionGroup extends _react.Component {
     document.removeEventListener('mousedown', this.handleDocumentClick);
   }
   render() {
-    const {
-      searchPlaceholder,
-      top,
-      left,
-      minWidth,
-      isInModal,
-      position,
-      className
-    } = this.props;
-    let {
-      searchVal
-    } = this.state;
+    const _this$props3 = this.props,
+      searchPlaceholder = _this$props3.searchPlaceholder,
+      top = _this$props3.top,
+      left = _this$props3.left,
+      minWidth = _this$props3.minWidth,
+      isInModal = _this$props3.isInModal,
+      position = _this$props3.position,
+      className = _this$props3.className;
+    let searchVal = this.state.searchVal;
     let style = {
       top: top || 0,
       left: left || 0
@@ -213,20 +204,17 @@ class SelectOptionGroup extends _react.Component {
       };
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('option-group group-selector seatable-group-select', className ? 'option-group-' + className : ''),
+      className: (0, _classnames.default)('option-group group-selector', className ? 'option-group-' + className : ''),
       ref: ref => this.optionGroupRef = ref,
       style: style,
       onMouseDown: this.onMouseDown,
-      children: [this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "seatable-search-input",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "option-group-search position-relative",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+          className: "option-search-control",
           placeholder: searchPlaceholder,
           onChange: this.onChangeSearch,
-          autoFocus: true,
-          value: searchVal,
-          clearValue: this.clearValue,
-          isClearable: true,
-          isLeftIcon: true
+          ref: this.searchInputRef
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "option-group-content",

package/lib/DTableIcon/index.js

@@ -11,13 +11,12 @@ var _svgIcon = _interopRequireDefault(require("./svg-icon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableIcon = _ref => {
-  let {
-    className,
-    symbol,
-    color,
-    ariaHidden = false,
-    getSvg
-  } = _ref;
+  let className = _ref.className,
+    symbol = _ref.symbol,
+    color = _ref.color,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? false : _ref$ariaHidden,
+    getSvg = _ref.getSvg;
   if (!symbol) return null;
   if (symbol.includes('dtable-icon')) {
     let customProps = {};

package/lib/DTableIcon/svg-icon.js

@@ -26,13 +26,11 @@ const getSvgIconComponents = () => {
   return svgIconComponents;
 };
 const SvgIcon = _ref => {
-  let {
-    className,
-    symbol,
-    color,
-    ariaHidden,
-    getSvg
-  } = _ref;
+  let className = _ref.className,
+    symbol = _ref.symbol,
+    color = _ref.color,
+    ariaHidden = _ref.ariaHidden,
+    getSvg = _ref.getSvg;
   if (!symbol) return null;
   let props = {
     style: {

package/lib/DTableModalHeader/index.js

@@ -14,9 +14,7 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const DTableModalHeader = _ref => {
-  let {
-      children
-    } = _ref,
+  let children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     type: "button",

package/lib/DTablePopover/index.js

@@ -18,10 +18,9 @@ class DTablePopover extends _react.default.Component {
       this.props.hideDTablePopover(e);
     };
     this.onKeyDown = e => {
-      const {
-        canHideDTablePopover,
-        hideDTablePopoverWithEsc
-      } = this.props;
+      const _this$props = this.props,
+        canHideDTablePopover = _this$props.canHideDTablePopover,
+        hideDTablePopoverWithEsc = _this$props.hideDTablePopoverWithEsc;
       if (e.keyCode === 27 && typeof hideDTablePopoverWithEsc === 'function') {
         e.preventDefault();
         hideDTablePopoverWithEsc();
@@ -32,9 +31,7 @@ class DTablePopover extends _react.default.Component {
       }
     };
     this.onMousedown = e => {
-      const {
-        canHideDTablePopover
-      } = this.props;
+      const canHideDTablePopover = this.props.canHideDTablePopover;
       if (!canHideDTablePopover) return;
       if (this.dtablePopoverRef && e && (0, _utils.getEventClassName)(e).indexOf('popover') === -1 && !this.dtablePopoverRef.contains(e.target)) {
         this.props.hideDTablePopover(e);
@@ -55,14 +52,13 @@ class DTablePopover extends _react.default.Component {
     window.removeEventListener('popstate', this.onHistoryState);
   }
   render() {
-    const {
-      target,
-      innerClassName,
-      popoverClassName,
-      hideArrow,
-      modifiers,
-      placement
-    } = this.props;
+    const _this$props2 = this.props,
+      target = _this$props2.target,
+      innerClassName = _this$props2.innerClassName,
+      popoverClassName = _this$props2.popoverClassName,
+      hideArrow = _this$props2.hideArrow,
+      modifiers = _this$props2.modifiers,
+      placement = _this$props2.placement;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
       placement: placement,
       isOpen: true,
@@ -70,11 +66,12 @@ class DTablePopover extends _react.default.Component {
       fade: false,
       hideArrow: hideArrow,
       innerClassName: innerClassName,
-      className: popoverClassName,
+      className: "dtable-popove ".concat(popoverClassName),
       modifiers: modifiers,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: ref => this.dtablePopoverRef = ref,
         onClick: this.onPopoverInsideClick,
+        className: "dtable-popover-container",
         children: this.props.children
       })
     });

package/lib/DTableRadio/index.js

@@ -10,15 +10,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function DTableRadio(_ref) {
-  let {
-    disabled = false,
-    name = 'dtable-radio-input',
-    onCheckedChange = () => {},
-    className,
-    isChecked,
-    value,
-    label
-  } = _ref;
+  let _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'dtable-radio-input' : _ref$name,
+    _ref$onCheckedChange = _ref.onCheckedChange,
+    onCheckedChange = _ref$onCheckedChange === void 0 ? () => {} : _ref$onCheckedChange,
+    className = _ref.className,
+    isChecked = _ref.isChecked,
+    value = _ref.value,
+    label = _ref.label;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     className: (0, _classnames.default)('dtable-radio w-100 align-items-center position-relative', {
       'dtable-radio-disable': disabled,

package/lib/DTableRadioGroup/index.js

@@ -28,9 +28,7 @@ class DTableRadioGroup extends _react.default.Component {
       this.setTransitionTimer = null;
     };
     this.onSelectChanged = event => {
-      const {
-        option
-      } = event.target.dataset;
+      const option = event.target.dataset.option;
       if (option === this.state.activeOption) return;
       this.setState({
         activeOption: option
@@ -45,17 +43,13 @@ class DTableRadioGroup extends _react.default.Component {
     this.setTransitionTimer = null;
   }
   componentDidMount() {
-    const {
-      options
-    } = this.props;
+    const options = this.props.options;
     if (!this.btn || !this.slider || !Array.isArray(options)) return;
     this.slider.style.width = "".concat(100 / options.length, "%");
     this.setSliderTransition();
   }
   componentDidUpdate(prevProps) {
-    const {
-      activeOption
-    } = this.props;
+    const activeOption = this.props.activeOption;
     if (activeOption !== prevProps.activeOption && activeOption !== this.state.activeOption) {
       this.setState({
         activeOption
@@ -66,14 +60,11 @@ class DTableRadioGroup extends _react.default.Component {
     this.clearTransitionTimer();
   }
   render() {
-    const {
-      options,
-      optionsDisplay,
-      readOnly
-    } = this.props;
-    const {
-      activeOption
-    } = this.state;
+    const _this$props = this.props,
+      options = _this$props.options,
+      optionsDisplay = _this$props.optionsDisplay,
+      readOnly = _this$props.readOnly;
+    const activeOption = this.state.activeOption;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "radio-group-wrapper",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/DTableSearchInput/index.js

@@ -18,10 +18,9 @@ class DtableSearchInput extends _react.Component {
     };
     this.onChange = e => {
       this.timer && clearTimeout(this.timer);
-      const {
-        onChange,
-        wait
-      } = this.props;
+      const _this$props = this.props,
+        onChange = _this$props.onChange,
+        wait = _this$props.wait;
       let text = e.target.value;
       this.setState({
         searchValue: text || ''
@@ -37,9 +36,7 @@ class DtableSearchInput extends _react.Component {
       this.onChange(e);
     };
     this.clearSearch = () => {
-      const {
-        clearValue
-      } = this.props;
+      const clearValue = this.props.clearValue;
       this.setState({
         searchValue: ''
       }, () => {
@@ -55,18 +52,14 @@ class DtableSearchInput extends _react.Component {
       }
     };
     this.renderClear = () => {
-      const {
-        isClearable,
-        clearClassName,
-        components = {}
-      } = this.props;
-      const {
-        searchValue
-      } = this.state;
+      const _this$props2 = this.props,
+        isClearable = _this$props2.isClearable,
+        clearClassName = _this$props2.clearClassName,
+        _this$props2$componen = _this$props2.components,
+        components = _this$props2$componen === void 0 ? {} : _this$props2$componen;
+      const searchValue = this.state.searchValue;
       if (!isClearable || !searchValue) return null;
-      const {
-        ClearIndicator
-      } = components;
+      const ClearIndicator = components.ClearIndicator;
       if (/*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
         return /*#__PURE__*/_react.default.cloneElement(ClearIndicator, {
           clearValue: this.clearSearch
@@ -102,17 +95,14 @@ class DtableSearchInput extends _react.Component {
     this.inputRef = null;
   }
   render() {
-    const {
-      placeholder,
-      autoFocus,
-      className,
-      onKeyDown,
-      disabled,
-      style
-    } = this.props;
-    const {
-      searchValue
-    } = this.state;
+    const _this$props3 = this.props,
+      placeholder = _this$props3.placeholder,
+      autoFocus = _this$props3.autoFocus,
+      className = _this$props3.className,
+      onKeyDown = _this$props3.onKeyDown,
+      disabled = _this$props3.disabled,
+      style = _this$props3.style;
+    const searchValue = this.state.searchValue;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         ref: ref => this.inputRef = ref,

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

@@ -1,10 +1,10 @@
 .dtable-select-check-icon {
-  width: 14px;
-  height: 14px;
+  width: 20px;
+  height: 20px;
   text-align: center;
 }
 
 .dtable-select-check-icon .dtable-font {
-  font-size: 14px;
-  color: #666;
+  font-size: 12px;
+  color: #798d99;
 }

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

@@ -9,11 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 require("./dtable-select-label.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function DTableSelectLabel(_ref) {
-  let {
-    classname = '',
-    name = '',
-    isSelect = false
-  } = _ref;
+  let _ref$classname = _ref.classname,
+    classname = _ref$classname === void 0 ? '' : _ref$classname,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$isSelect = _ref.isSelect,
+    isSelect = _ref$isSelect === void 0 ? false : _ref$isSelect;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "".concat(classname, " w-100 d-flex justify-content-between"),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -21,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"
+        className: "dtable-font dtable-icon-check-mark"
       })
     })]
   });

package/lib/DTableSelect/index.js

@@ -12,39 +12,37 @@ var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableSelect extends _react.default.Component {
   render() {
-    const {
-      options,
-      onChange,
-      value,
-      isSearchable,
-      placeholder,
-      isMulti,
-      menuPosition,
-      isClearable,
-      noOptionsMessage,
-      classNamePrefix,
-      style,
-      innerRef,
-      isDisabled,
-      form,
-      customFilterOption,
-      autoFocus,
-      className,
-      closeMenuOnSelect,
-      onMenuClose,
-      components: userComponents
-    } = this.props;
+    const _this$props = this.props,
+      options = _this$props.options,
+      onChange = _this$props.onChange,
+      value = _this$props.value,
+      isSearchable = _this$props.isSearchable,
+      placeholder = _this$props.placeholder,
+      isMulti = _this$props.isMulti,
+      menuPosition = _this$props.menuPosition,
+      isClearable = _this$props.isClearable,
+      noOptionsMessage = _this$props.noOptionsMessage,
+      classNamePrefix = _this$props.classNamePrefix,
+      style = _this$props.style,
+      innerRef = _this$props.innerRef,
+      isDisabled = _this$props.isDisabled,
+      form = _this$props.form,
+      customFilterOption = _this$props.customFilterOption,
+      autoFocus = _this$props.autoFocus,
+      className = _this$props.className,
+      closeMenuOnSelect = _this$props.closeMenuOnSelect,
+      onMenuClose = _this$props.onMenuClose,
+      userComponents = _this$props.components;
     const mergedComponents = (0, _objectSpread2.default)({
       Option: _utils.Option,
       DropdownIndicator: _utils.DropdownIndicator,
       MenuList: _utils.MenuList,
       ClearIndicator: _utils.ClearIndicator
     }, userComponents);
-    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: (0, _utils.createHandleChange)(onChange),
-      options: processedOptions,
+      onChange: onChange,
+      options: options,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
@@ -52,6 +50,7 @@ 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/user-select.css

@@ -1,12 +1,51 @@
-/* hide checkbox in select value container */
-.seatable-select-value-container .seatable-multicolor-icon-check {
-  display: none;
+.user-select .select-module-container {
+  display: flex;
+  align-items: center;
 }
 
-.seatable-select-value-container .select-option-label {
-  font-size: 14px !important;
+.user-select .select-module.select-module-avatar {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
 }
 
-.seatable-check-color {
-  color: var(--bs-icon-secondary-color);
+.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);
 }