dtable-ui-component 5.2.13 → 5.2.14

package/lib/DTableGroupSelect/index.css

@@ -0,0 +1,96 @@
+.group-select {
+  position: relative;
+}
+
+.group-select.custom-select {
+  display: flex;
+  padding: 5px 10px;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 900px;
+  user-select: none;
+  text-align: left;
+  border-color: 1px solid rgba(0, 40, 100, 0.12);
+  height: auto;
+  min-height: 38px;
+  cursor: pointer;
+}
+
+.group-select.custom-select:focus,
+.group-select.custom-select.focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.group-select.custom-select.disabled:focus,
+.group-select.custom-select.focus.disabled,
+.group-select.custom-select.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  box-shadow: unset;
+  cursor: default;
+}
+
+.group-select .sf3-font-down {
+  display: inline-block;
+  color: #999;
+  transform: translateY(2px);
+  transition: all 0.1s;
+  font-size: 14px !important;
+}
+
+.group-select .sf3-font-down:hover {
+  color: #666;
+}
+
+.group-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.group-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px;
+}
+
+.group-select.custom-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px 0;
+}
+
+.group-select.custom-select.selector-collaborator .option {
+  padding: 5px 0 5px 10px !important;
+  line-height: 20px;
+}
+
+.group-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.group-select .selected-option-show {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.group-select .selected-option-show .selected-option-item {
+  background-color: rgb(240, 240, 240);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.group-select .selected-option-show .selected-option-item .selected-option-item-name {
+  font-size: 13px;
+  color: #212529;
+}
+
+.group-select .selected-option-show .selected-option-item .dtable-icon-x {
+  cursor: pointer;
+  color: rgb(103, 103, 103);
+}

package/lib/DTableGroupSelect/index.js

@@ -0,0 +1,127 @@
+"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 _modalPortal = _interopRequireDefault(require("../common/modal-portal.js"));
+var _selectOptionGroup = _interopRequireDefault(require("./select-option-group.js"));
+require("./index.css");
+class DTableGroupSelect extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectToggle = event => {
+      event.preventDefault();
+      if (this.state.isShowSelectOptions) event.stopPropagation();
+      let eventClassName = event.target.className;
+      if (eventClassName.indexOf('dtable-icon-x') > -1 || eventClassName === 'option-group-search') return;
+      if (event.target.value === '') return;
+      this.setState({
+        isShowSelectOptions: !this.state.isShowSelectOptions
+      });
+    };
+    this.onClickOutside = event => {
+      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+      if (!this.selector.contains(event.target)) {
+        this.closeSelect();
+      }
+    };
+    this.closeSelect = () => {
+      this.setState({
+        isShowSelectOptions: false
+      });
+    };
+    this.getSelectedOptionTop = () => {
+      if (!this.selector) return 38;
+      const {
+        height
+      } = this.selector.getBoundingClientRect();
+      return height;
+    };
+    this.getFilterOptions = searchValue => {
+      const {
+        options
+      } = this.props;
+      const validSearchVal = searchValue.trim().toLowerCase();
+      if (!validSearchVal) return options || [];
+      return options.filter(option => option.name.toLowerCase().includes(validSearchVal));
+    };
+    this.state = {
+      isShowSelectOptions: false
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedOptions.length !== this.props.selectedOptions.length) {
+      // when selectedOptions change and dom rendered, calculate top
+      setTimeout(() => {
+        this.forceUpdate();
+      }, 1);
+    }
+  }
+  render() {
+    let {
+      className,
+      selectedOptions,
+      options,
+      placeholder,
+      searchPlaceholder,
+      noOptionsPlaceholder,
+      isInModal
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: node => this.selector = node,
+      className: (0, _classnames.default)('group-select custom-select', {
+        'focus': this.state.isShowSelectOptions
+      }, className),
+      onClick: this.onSelectToggle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "selected-option"
+    }, selectedOptions.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "selected-option-show"
+    }, selectedOptions.map(item => /*#__PURE__*/_react.default.createElement("span", {
+      key: item.id,
+      className: "selected-option-item mr-1 pr-1 pl-2"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "selected-option-item-name"
+    }, item.name), /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-x ml-1",
+      onClick: () => {
+        this.props.onDeleteOption(item);
+      }
+    })))) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "select-placeholder"
+    }, placeholder), /*#__PURE__*/_react.default.createElement("i", {
+      className: "sf3-font-down sf3-font"
+    })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react.default.createElement(_selectOptionGroup.default, {
+      selectedOptions: selectedOptions,
+      top: this.getSelectedOptionTop(),
+      options: options,
+      onSelectOption: this.props.onSelectOption,
+      searchPlaceholder: searchPlaceholder,
+      noOptionsPlaceholder: noOptionsPlaceholder,
+      onClickOutside: this.onClickOutside,
+      closeSelect: this.closeSelect,
+      getFilterOptions: this.getFilterOptions
+    }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_selectOptionGroup.default, {
+      className: className,
+      selectedOptions: selectedOptions,
+      position: this.selector.getBoundingClientRect(),
+      isInModal: isInModal,
+      top: this.getSelectedOptionTop(),
+      options: options,
+      onSelectOption: this.props.onSelectOption,
+      searchPlaceholder: searchPlaceholder,
+      noOptionsPlaceholder: noOptionsPlaceholder,
+      onClickOutside: this.onClickOutside,
+      closeSelect: this.closeSelect,
+      getFilterOptions: this.getFilterOptions
+    })));
+  }
+}
+var _default = exports.default = DTableGroupSelect;

package/lib/DTableGroupSelect/option.js

@@ -0,0 +1,40 @@
+"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"));
+class Option extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectOption = e => {
+      e.stopPropagation();
+      this.props.onSelectOption(this.props.option);
+    };
+    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__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('d-flex option', {
+        'option-active': this.props.isActive
+      }),
+      onClick: this.onSelectOption,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, this.props.children);
+  }
+}
+var _default = exports.default = Option;

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

@@ -0,0 +1,91 @@
+.option-group {
+  position: absolute;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: 0.5rem 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+.option-group .option-group-search {
+  width: 100%;
+  padding: 6px 10px;
+  min-width: 170px;
+}
+
+.option-group-search .form-control {
+  height: 31px;
+}
+
+.option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  color: #666666;
+}
+
+.option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+
+.option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: 6px 10px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.option .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.option.option-active .dtable-icon-check-mark,
+.option.option-active .select-option-name {
+  color: #fff !important;
+}
+
+.option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
+}
+
+.option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.option-group-selector-single-select .select-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.option-group-selector-single-select .option:hover,
+.option-group-selector-single-select .option.option-active,
+.option-group-selector-multiple-select .option:hover,
+.option-group-selector-multiple-select .option.option-active {
+  background-color: #f5f5f5;
+}

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

@@ -0,0 +1,227 @@
+"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 _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _option = _interopRequireDefault(require("./option"));
+var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+require("./select-option-group.css");
+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;
+        this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
+      } 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);
+        }
+      } 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 => {
+      this.setState({
+        searchVal: searchVal || '',
+        activeIndex: -1
+      });
+    };
+    this.clearValue = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
+    this.renderOptGroup = searchVal => {
+      let {
+        noOptionsPlaceholder,
+        onSelectOption,
+        selectedOptions
+      } = this.props;
+      this.filterOptions = this.props.getFilterOptions(searchVal);
+      if (this.filterOptions.length === 0) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
+      }
+      return this.filterOptions.map((option, index) => {
+        const isSelected = selectedOptions.some(item => item.id === option.id);
+        return /*#__PURE__*/_react.default.createElement(_option.default, {
+          key: "".concat(option.id, "-").concat(index),
+          index: index,
+          isActive: this.state.activeIndex === index,
+          option: option,
+          onSelectOption: onSelectOption,
+          changeIndex: this.changeIndex,
+          disableHover: this.state.disableHover
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "option-label"
+        }, option.label), isSelected && /*#__PURE__*/_react.default.createElement("i", {
+          className: "dtable-font dtable-icon-check-mark"
+        }));
+      });
+    };
+    this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    this.filterOptions = null;
+    this.timer = null;
+    this.searchInputRef = /*#__PURE__*/_react.default.createRef();
+  }
+  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 {
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      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
+      };
+    }
+    return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+      onClickOutside: this.props.onClickOutside
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : ''),
+      ref: ref => this.optionGroupRef = ref,
+      style: style,
+      onMouseDown: this.onMouseDown
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-group-search position-relative"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      className: "option-search-control",
+      placeholder: searchPlaceholder,
+      onChange: this.onChangeSearch,
+      ref: this.searchInputRef
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-group-content",
+      ref: ref => this.optionGroupContentRef = ref
+    }, this.renderOptGroup(searchVal))));
+  }
+}
+var _default = exports.default = SelectOptionGroup;

package/lib/index.js

@@ -106,6 +106,12 @@ Object.defineProperty(exports, "DTableFiltersPopover", {
     return _DTableFiltersPopover.default;
   }
 });
+Object.defineProperty(exports, "DTableGroupSelect", {
+  enumerable: true,
+  get: function () {
+    return _index.default;
+  }
+});
 Object.defineProperty(exports, "DTableModalHeader", {
   enumerable: true,
   get: function () {
@@ -478,6 +484,7 @@ var _DTableRadio = _interopRequireDefault(require("./DTableRadio"));
 var _DTableCommonAddTool = _interopRequireDefault(require("./DTableCommonAddTool"));
 var _NotificationPopover = _interopRequireDefault(require("./NotificationPopover"));
 var _DTableSelect = _interopRequireDefault(require("./DTableSelect"));
+var _index = _interopRequireDefault(require("./DTableGroupSelect/index"));
 var _dtableSelectLabel = _interopRequireDefault(require("./DTableSelect/dtable-select-label"));
 var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
 var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.13",
+  "version": "5.2.14",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",