dtable-ui-component 6.0.110-hap.1 → 6.0.110-hum.4

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

@@ -0,0 +1,252 @@
+"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 _ClickOutside = _interopRequireDefault(require("../../ClickOutside"));
+var _searchInput = _interopRequireDefault(require("./search-input"));
+var _option = _interopRequireDefault(require("./option"));
+var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const OPTION_HEIGHT = 32;
+class SelectOptionGroup extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.resetMenuStyle = () => {
+      const {
+        isInModal,
+        position
+      } = this.props;
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
+      if (isInModal) {
+        if (position.y + position.height + height > window.innerHeight) {
+          this.optionGroupRef.style.top = position.y - height + 'px';
+        }
+        this.optionGroupRef.style.opacity = 1;
+      } else {
+        if (height + top > window.innerHeight) {
+          const borderWidth = 2;
+          this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
+      }
+    };
+    this.onHotKey = event => {
+      const keyCode = event.keyCode;
+      if (keyCode === _KeyCodes.default.UpArrow) {
+        this.onPressUp();
+      } else if (keyCode === _KeyCodes.default.DownArrow) {
+        this.onPressDown();
+      } else if (keyCode === _KeyCodes.default.Enter) {
+        let option = this.filterOptions && this.filterOptions[this.state.activeIndex];
+        if (option) {
+          this.props.onSelectOption(option.value);
+          if (!this.props.supportMultipleSelect) {
+            this.props.closeSelect();
+          }
+        }
+      } else if (keyCode === _KeyCodes.default.Tab || keyCode === _KeyCodes.default.Escape) {
+        this.props.closeSelect();
+      }
+    };
+    this.onPressUp = () => {
+      if (this.state.activeIndex > 0) {
+        this.setState({
+          activeIndex: this.state.activeIndex - 1
+        }, () => {
+          this.scrollContent();
+        });
+      }
+    };
+    this.onPressDown = () => {
+      if (this.filterOptions && this.state.activeIndex < this.filterOptions.length - 1) {
+        this.setState({
+          activeIndex: this.state.activeIndex + 1
+        }, () => {
+          this.scrollContent();
+        });
+      }
+    };
+    this.onMouseDown = e => {
+      const {
+        isInModal
+      } = this.props;
+      // prevent event propagation when click option or search input
+      if (isInModal) {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    };
+    this.scrollContent = () => {
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.optionGroupContentRef;
+      this.setState({
+        disableHover: true
+      });
+      this.timer = setTimeout(() => {
+        this.setState({
+          disableHover: false
+        });
+      }, 500);
+      if (this.state.activeIndex * OPTION_HEIGHT === 0) {
+        this.optionGroupContentRef.scrollTop = 0;
+        return;
+      }
+      if (this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    };
+    this.changeIndex = index => {
+      this.setState({
+        activeIndex: index
+      });
+    };
+    this.onChangeSearch = searchVal => {
+      let value = searchVal || '';
+      if (value !== this.state.searchVal) {
+        this.setState({
+          searchVal: value,
+          activeIndex: -1
+        });
+      }
+    };
+    this.clearSearch = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
+    this.renderOptGroup = searchVal => {
+      let {
+        noOptionsPlaceholder,
+        onSelectOption,
+        value
+      } = this.props;
+      this.filterOptions = this.props.getFilterOptions(searchVal);
+      if (this.filterOptions.length === 0) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "none-search-result",
+          children: noOptionsPlaceholder
+        });
+      }
+      return this.filterOptions.map((opt, i) => {
+        let key = opt.value.column ? opt.value.column.key : i;
+        let isActive = this.state.activeIndex === i;
+        const isSelected = value && (opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value));
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
+          index: i,
+          isActive: isActive,
+          value: opt.value,
+          onSelectOption: onSelectOption,
+          changeIndex: this.changeIndex,
+          supportMultipleSelect: this.props.supportMultipleSelect,
+          disableHover: this.state.disableHover,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: opt.label
+          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-check"
+          })]
+        }, key);
+      });
+    };
+    this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    this.filterOptions = null;
+    this.timer = null;
+  }
+  componentDidMount() {
+    window.addEventListener('keydown', this.onHotKey);
+    setTimeout(() => {
+      this.resetMenuStyle();
+    }, 1);
+  }
+  componentWillUnmount() {
+    this.filterOptions = null;
+    this.timer && clearTimeout(this.timer);
+    window.removeEventListener('keydown', this.onHotKey);
+  }
+  render() {
+    const {
+      searchable,
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      value,
+      isShowSelected,
+      isInModal,
+      position,
+      className
+    } = this.props;
+    let {
+      searchVal
+    } = this.state;
+    let style = {
+      top: top || 0,
+      left: left || 0
+    };
+    if (minWidth) {
+      style = {
+        top: top || 0,
+        left: left || 0,
+        minWidth
+      };
+    }
+    if (isInModal) {
+      style = {
+        position: 'fixed',
+        left: position.x,
+        top: position.y + position.height,
+        minWidth: position.width,
+        opacity: 0
+      };
+    }
+    style.top = style.top + 4;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
+      onClickOutside: this.props.onClickOutside,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
+          'pt-0': isShowSelected
+        }),
+        ref: ref => this.optionGroupRef = ref,
+        style: style,
+        onMouseDown: this.onMouseDown,
+        children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "editor-list-delete mb-2",
+          onClick: e => e.stopPropagation(),
+          children: value.label || ''
+        }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "seatable-option-group-search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchInput.default, {
+            className: "option-search-control",
+            placeholder: searchPlaceholder,
+            onChange: this.onChangeSearch,
+            clearValue: this.clearSearch,
+            autoFocus: true,
+            isClearable: true
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "seatable-option-group-content",
+          ref: ref => this.optionGroupContentRef = ref,
+          children: this.renderOptGroup(searchVal)
+        })]
+      })
+    });
+  }
+}
+var _default = exports.default = SelectOptionGroup;

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

@@ -0,0 +1,48 @@
+"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 _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+class Option extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectOption = event => {
+      if (this.props.supportMultipleSelect) {
+        event.stopPropagation();
+      }
+      this.props.onSelectOption(this.props.value, event);
+    };
+    this.onMouseEnter = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(this.props.index);
+      }
+    };
+    this.onMouseLeave = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(-1);
+      }
+    };
+  }
+  render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('seatable-select-option', {
+        'seatable-select-option-active': this.props.isActive
+      }),
+      tabIndex: "0",
+      role: "menuitem",
+      onClick: this.onSelectOption,
+      onKeyDown: _util.onKeyDown,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      children: this.props.children
+    });
+  }
+}
+var _default = exports.default = Option;

package/lib/DTableCustomizeSelect/select-option-group/search-input.js

@@ -0,0 +1,135 @@
+"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"));
+var _jsxRuntime = require("react/jsx-runtime");
+class SearchInput 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),
+        onClick: this.clearSearch,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+          symbol: "close"
+        })
+      });
+    };
+    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
+    } = this.props;
+    const {
+      searchValue
+    } = this.state;
+    const inputWidth = isClearable && searchValue ? '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 = SearchInput;

package/lib/DTableCustomizeSelect/util.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onKeyDown = void 0;
+const onKeyDown = e => {
+  if (e.key === 'Enter' || e.key === 'Space') {
+    e.target.click();
+  }
+};
+exports.onKeyDown = onKeyDown;

package/lib/DTableFiltersPopover/index.js

@@ -156,7 +156,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           firstDayOfWeek: firstDayOfWeek,
           updateFilters: this.updateFilters
         }), !isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCommonAddTool.default, {
-          className: `popover-add-tool ${canAddFilter ? '' : 'disabled'}`,
+          className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
           callBack: canAddFilter ? () => this.addFilter() : () => {},
           footerName: (0, _lang.getLocale)('Add_filter'),
           addIconClassName: "popover-add-icon"

package/lib/DTableFiltersPopover/utils/filter-item-utils.js

@@ -107,7 +107,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-check-icon",
           children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })
@@ -132,7 +132,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-check-icon",
           children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })

package/lib/DTableFiltersPopover/utils/index.js

@@ -407,7 +407,7 @@ const getMediaUrl = () => {
 };
 const generateDefaultUser = name => {
   const mediaUrl = getMediaUrl();
-  const defaultAvatarUrl = `${mediaUrl}avatars/default.png`;
+  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
   return {
     name,
     email: name,

package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js

@@ -49,7 +49,7 @@ class CollaboratorFilter extends _react.Component {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-check-icon",
                 children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: "option-edit dtable-font dtable-icon-check-mark"
+                  className: "option-edit dtable-font dtable-icon-check"
                 })
               })]
             })

package/lib/DTableFiltersPopover/widgets/filter-group.js

@@ -146,7 +146,7 @@ class FilterGroup extends _react.Component {
           updateConjunction: this.modifyConjunctionInGroup,
           deleteFilter: this.deleteFilterInGroup,
           updateFilter: this.updateFilterInGroup
-        }, `filter-in-group-${groupIndex}-${subFilterIndex}`);
+        }, "filter-in-group-".concat(groupIndex, "-").concat(subFilterIndex));
       });
     };
   }
@@ -157,7 +157,7 @@ class FilterGroup extends _react.Component {
       readOnly
     } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('filter-item', 'filter-group', `level-${level}`),
+      className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "delete-filter",
         onClick: this.deleteFilterGroup,

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -790,7 +790,7 @@ class FilterItem extends _react.default.Component {
               isLocked: readOnly
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `filter-predicate ml-2 ${_isCheckboxColumn ? 'filter-checkbox-predicate' : ''}`,
+            className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : ''),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               value: activePredicate,
               options: filterPredicateOptions,

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -412,20 +412,20 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding: 0 0.3125rem;
+  padding-right: 0.5rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #aaa;
+  color: #999;
   cursor: default;
 }
 
 .option.option-active .filter-header-icon .dtable-font,
 .option.option-active .filter-header-icon .multicolor-icon {
-  color: #fff;
+  color: #999;
 }
 
 .dtable-ui-filters-list .single-select-option,

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -261,7 +261,7 @@ class FiltersList extends _react.Component {
           modifyConjunctionInGroup: this.modifyConjunctionInGroup,
           deleteFilterInGroup: this.deleteFilterInGroup,
           updateFilterInGroup: this.updateFilterInGroup
-        }, `filter-group-${index}`);
+        }, "filter-group-".concat(index));
       }
       const {
         error_message

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -56,20 +57,19 @@ class RateItem extends _react.default.Component {
     };
     let style = itemStyle;
     if (enterRateItemIndex >= rateItemIndex) {
-      style = {
-        ...itemStyle,
+      style = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemStyle), {}, {
         color: rate_style_color,
         opacity: 0.4
-      };
+      });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       onMouseEnter: this.onMouseEnterRateItem,
       onMouseLeave: this.onMouseLeaveRateItem,
       style: style,
       onClick: this.onChangeRateNumber,
-      className: `rate-item ${value >= rateItemIndex ? 'rate-item-active' : ''}`,
+      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : ''),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `dtable-font ${rateShowType}`,
+        className: "dtable-font ".concat(rateShowType),
         ref: this.tooltipRef
       }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
         placement: "bottom",

package/lib/DTableGroupSelect/index.css

@@ -108,7 +108,7 @@
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
-  padding: .375rem .5rem !important;
+  padding: .375rem 1rem !important;
   height: 32px;
 }
 
@@ -118,21 +118,8 @@
   box-shadow: none !important;
 }
 
-.seatable-group-select .option-group-content .dtable-icon-check {
+.option-group-content .dtable-icon-check {
   color: #666666;
   font-size: 14px;
-}
-
-.seatable-group-select .clear-search-text {
-  position: absolute;
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
-  top: 4px;
-  right: 22px;
-}
-
-.seatable-group-select .seatable-icon-btn:not(.disabled):hover {
-  background-color:#FFFFFF;
+  margin-left: 16px;
 }

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

@@ -16,10 +16,10 @@
   padding: 0.25rem 8px;
 }
 
-.group-selector .option .dtable-icon-check-mark {
-  font-size: 12px;
+.group-selector .option .dtable-icon-check{
+  font-size: 14px;
   color: #666666;
-  height: 12px !important;
+  height: 14px !important;
   display: flex;
   align-items: center;
   justify-content: center;