dtable-ui-component 0.1.86 → 0.1.87

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -0,0 +1,124 @@
+.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 .option-group {
+  position: absolute;
+  left: 0px;
+  min-height: 60px;
+  max-height: unset;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: 0.5rem 0;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  background: #fff;
+  border: 1px solid rgba(0,40,100,.12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+.dtable-customize-collaborator-select .option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px;
+  min-width: 170px;
+}
+
+.dtable-customize-collaborator-select .option-group-search .form-control {
+  height: 31px;
+}
+
+.dtable-customize-collaborator-select .option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.dtable-customize-collaborator-select .option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.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-drop-down {
+  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: #f7f7f7;
+}
+
+.dtable-customize-collaborator-select.dtable-select .option.option-active .select-option-name {
+  color: #202428;
+}
+
+.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,187 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { Popover } from 'reactstrap';
+import SelectOptionGroup from '../SelectOptionGroup';
+import { searchCollaborators } from './utils';
+import './index.css';
+
+var CollaboratorSelect = /*#__PURE__*/function (_Component) {
+  _inherits(CollaboratorSelect, _Component);
+
+  var _super = _createSuper(CollaboratorSelect);
+
+  function CollaboratorSelect(props) {
+    var _this;
+
+    _classCallCheck(this, CollaboratorSelect);
+
+    _this = _super.call(this, props);
+
+    _this.onSelectToggle = function (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();
+      var 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.onClick = function (event) {
+      var name = event.target.className;
+
+      if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
+        return;
+      }
+
+      if (!_this.selector.contains(event.target)) {
+        _this.closeSelect();
+      }
+    };
+
+    _this.closeSelect = function () {
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    };
+
+    _this.getFilterOptions = function (searchValue) {
+      var _this$props = _this.props,
+          options = _this$props.options,
+          searchable = _this$props.searchable;
+      if (!searchable) return options || [];
+      return searchCollaborators(options, searchValue);
+    };
+
+    _this.renderOptionGroup = function () {
+      var _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__*/React.createElement(SelectOptionGroup, {
+          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__*/React.createElement(Popover, {
+        placement: "bottom",
+        isOpen: true,
+        target: _this.id,
+        fade: false,
+        hideArrow: true,
+        className: "dtable-customize-collaborator-select dtable-select"
+      }, /*#__PURE__*/React.createElement(SelectOptionGroup, {
+        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);
+    return _this;
+  }
+
+  _createClass(CollaboratorSelect, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onClick);
+      this.btnWidth = this.selector.clientWidth;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          value = _this$props3.value,
+          placeholder = _this$props3.placeholder,
+          isLocked = _this$props3.isLocked;
+      return /*#__PURE__*/React.createElement("button", {
+        ref: function ref(node) {
+          return _this2.selector = node;
+        },
+        className: classnames('dtable-select custom-select collaborator-select', {
+          'focus': this.state.isShowSelectOptions
+        }, {
+          'disabled': isLocked
+        }, className),
+        id: this.id,
+        onClick: this.onSelectToggle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "selected-option",
+        ref: function ref(node) {
+          return _this2.selectedOptionRef = node;
+        }
+      }, value.label ? /*#__PURE__*/React.createElement("span", {
+        className: "selected-option-show"
+      }, value.label) : /*#__PURE__*/React.createElement("span", {
+        className: "select-placeholder"
+      }, placeholder), !isLocked && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-drop-down"
+      })), this.state.isShowSelectOptions && this.renderOptionGroup());
+    }
+  }]);
+
+  return CollaboratorSelect;
+}(Component);
+
+CollaboratorSelect.defaultProps = {
+  top: -3,
+  left: -3
+};
+export default CollaboratorSelect;

package/lib/DTableCustomizeCollaboratorSelect/utils.js

@@ -0,0 +1,24 @@
+export var searchCollaborators = function searchCollaborators(collaborators, searchValue) {
+  var validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  var validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
+  if (!validSearchValue) return validCollaborators;
+  return validCollaborators.filter(function (collaborator) {
+    var name = collaborator.name,
+        _collaborator$name_pi = collaborator.name_pinyin,
+        name_pinyin = _collaborator$name_pi === void 0 ? '' : _collaborator$name_pi;
+    if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
+    if (!name_pinyin) return false;
+    var validNamePinyin = name_pinyin.toString().toLowerCase();
+    var validSearchPinyinValue = validSearchValue.replace(/ |'/g, ''); // complete
+
+    if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
+    if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
+    var validNamePinyinList = validNamePinyin.split('\''); // acronym
+
+    var namePinyinAcronym = validNamePinyinList.map(function (item) {
+      return item && item.trim() ? item.trim().slice(0, 1) : '';
+    });
+    if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
+    return false;
+  });
+};

package/lib/DTableCustomizeSelect/index.js

@@ -0,0 +1,155 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import SelectOptionGroup from '../SelectOptionGroup';
+import classnames from 'classnames';
+import '../assets/css/DTableCustomSelect.css';
+
+var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
+  _inherits(DTableCustomizeSelect, _Component);
+
+  var _super = _createSuper(DTableCustomizeSelect);
+
+  function DTableCustomizeSelect(props) {
+    var _this;
+
+    _classCallCheck(this, DTableCustomizeSelect);
+
+    _this = _super.call(this, props);
+
+    _this.onSelectToggle = function (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();
+      var 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.setState({
+        isShowSelectOptions: !_this.state.isShowSelectOptions
+      });
+    };
+
+    _this.onClick = function (event) {
+      if (_this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+
+      if (!_this.selector.contains(event.target)) {
+        _this.closeSelect();
+      }
+    };
+
+    _this.closeSelect = function () {
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    };
+
+    _this.getSelectedOptionTop = function () {
+      if (!_this.selector) return 38;
+
+      var _this$selector$getBou = _this.selector.getBoundingClientRect(),
+          height = _this$selector$getBou.height;
+
+      return height;
+    };
+
+    _this.getFilterOptions = function (searchValue) {
+      var _this$props = _this.props,
+          options = _this$props.options,
+          searchable = _this$props.searchable;
+      if (!searchable) return options || [];
+      var validSearchVal = searchValue.trim().toLowerCase();
+      if (!validSearchVal) return options || [];
+      return options.filter(function (option) {
+        var value = option.value,
+            name = option.name;
+
+        if (typeof name === 'string') {
+          return name.toLowerCase().indexOf(validSearchVal) > -1;
+        }
+
+        if (typeof value === 'object') {
+          return value.columnOption && value.columnOption.name.toLowerCase().indexOf(validSearchVal) > -1;
+        }
+
+        return false;
+      });
+    };
+
+    _this.state = {
+      isShowSelectOptions: false
+    };
+    return _this;
+  }
+
+  _createClass(DTableCustomizeSelect, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          className = _this$props2.className,
+          value = _this$props2.value,
+          options = _this$props2.options,
+          placeholder = _this$props2.placeholder,
+          searchable = _this$props2.searchable,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+          isLocked = _this$props2.isLocked;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(node) {
+          return _this2.selector = node;
+        },
+        className: classnames('dtable-select custom-select', {
+          'focus': this.state.isShowSelectOptions
+        }, {
+          'disabled': isLocked
+        }, className),
+        onClick: this.onSelectToggle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "selected-option"
+      }, value.label ? /*#__PURE__*/React.createElement("span", {
+        className: "selected-option-show"
+      }, value.label) : /*#__PURE__*/React.createElement("span", {
+        className: "select-placeholder"
+      }, placeholder), !isLocked && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-drop-down"
+      })), this.state.isShowSelectOptions && /*#__PURE__*/React.createElement(SelectOptionGroup, {
+        value: value,
+        isShowSelected: this.props.isShowSelected,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.props.onSelectOption,
+        searchable: searchable,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions,
+        supportMultipleSelect: this.props.supportMultipleSelect
+      }));
+    }
+  }]);
+
+  return DTableCustomizeSelect;
+}(Component);
+
+export default DTableCustomizeSelect;

package/lib/DTableSearchInput/index.js

@@ -0,0 +1,161 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component, Fragment } from 'react';
+import classnames from 'classnames';
+import { isFunction } from './utils';
+
+var DtableSearchInput = /*#__PURE__*/function (_Component) {
+  _inherits(DtableSearchInput, _Component);
+
+  var _super = _createSuper(DtableSearchInput);
+
+  function DtableSearchInput(props) {
+    var _this;
+
+    _classCallCheck(this, DtableSearchInput);
+
+    _this = _super.call(this, props);
+
+    _this.onCompositionStart = function () {
+      _this.isInputtingChinese = true;
+    };
+
+    _this.onChange = function (e) {
+      _this.timer && clearTimeout(_this.timer);
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          wait = _this$props.wait;
+      var text = e.target.value;
+
+      _this.setState({
+        searchValue: text || ''
+      }, function () {
+        if (_this.isInputtingChinese) return;
+        _this.timer = setTimeout(function () {
+          onChange && onChange(_this.state.searchValue.trim());
+        }, wait);
+      });
+    };
+
+    _this.onCompositionEnd = function (e) {
+      _this.isInputtingChinese = false;
+
+      _this.onChange(e);
+    };
+
+    _this.clearSearch = function () {
+      var clearValue = _this.props.clearValue;
+
+      _this.setState({
+        searchValue: ''
+      }, function () {
+        clearValue && clearValue();
+      });
+    };
+
+    _this.setFocus = function (isSelectAllText) {
+      if (_this.inputRef === document.activeElement) return;
+
+      _this.inputRef.focus();
+
+      if (isSelectAllText) {
+        var txtLength = _this.state.searchValue.length;
+
+        _this.inputRef.setSelectionRange(0, txtLength);
+      }
+    };
+
+    _this.renderClear = function () {
+      var _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;
+      var searchValue = _this.state.searchValue;
+      if (!isClearable || !searchValue) return null;
+      var ClearIndicator = components.ClearIndicator;
+
+      if (React.isValidElement(ClearIndicator)) {
+        return React.cloneElement(ClearIndicator, {
+          clearValue: _this.clearSearch
+        });
+      } else if (isFunction(ClearIndicator)) {
+        return /*#__PURE__*/React.createElement(ClearIndicator, {
+          clearValue: _this.clearSearch
+        });
+      }
+
+      return /*#__PURE__*/React.createElement("i", {
+        className: classnames('search-text-clear input-icon-addon', clearClassName),
+        onClick: _this.clearSearch
+      }, "\xD7");
+    };
+
+    _this.state = {
+      searchValue: props.value
+    };
+    _this.isInputtingChinese = false;
+    _this.timer = null;
+    _this.inputRef = null;
+    return _this;
+  }
+
+  _createClass(DtableSearchInput, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.value !== this.props.value) {
+        this.setState({
+          searchValue: nextProps.value
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+      this.inputRef = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _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;
+      var searchValue = this.state.searchValue;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        value: searchValue,
+        className: classnames('form-control', className),
+        onChange: this.onChange,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd,
+        onKeyDown: onKeyDown,
+        disabled: disabled,
+        style: style,
+        ref: function ref(_ref) {
+          return _this2.inputRef = _ref;
+        }
+      }), this.renderClear());
+    }
+  }]);
+
+  return DtableSearchInput;
+}(Component);
+
+DtableSearchInput.defaultProps = {
+  wait: 100,
+  disabled: false,
+  value: ''
+};
+export default DtableSearchInput;

package/lib/DTableSearchInput/utils.js

@@ -0,0 +1,4 @@
+export var isFunction = function isFunction(functionToCheck) {
+  var getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};

package/lib/SelectOptionGroup/KeyCodes.js

@@ -0,0 +1,10 @@
+module.exports = {
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40,
+  Enter: 13,
+  Tab: 9,
+  Escape: 27,
+  Esc: 27
+};

package/lib/SelectOptionGroup/index.js

@@ -0,0 +1,217 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import Option from './option';
+import DTableSearchInput from '../DTableSearchInput';
+import KeyCodes from './KeyCodes';
+var OPTION_HEIGHT = 32;
+
+var SelectOptionGroup = /*#__PURE__*/function (_Component) {
+  _inherits(SelectOptionGroup, _Component);
+
+  var _super = _createSuper(SelectOptionGroup);
+
+  function SelectOptionGroup(props) {
+    var _this;
+
+    _classCallCheck(this, SelectOptionGroup);
+
+    _this = _super.call(this, props);
+
+    _this.resetMenuStyle = function () {
+      var _this$optionGroupRef$ = _this.optionGroupRef.getBoundingClientRect(),
+          top = _this$optionGroupRef$.top,
+          height = _this$optionGroupRef$.height;
+
+      if (height + top > window.innerHeight) {
+        var borderWidth = 2;
+        _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+      }
+    };
+
+    _this.onHotKey = function (event) {
+      var keyCode = event.keyCode;
+
+      if (keyCode === KeyCodes.UpArrow) {
+        _this.onPressUp();
+      } else if (keyCode === KeyCodes.DownArrow) {
+        _this.onPressDown();
+      } else if (keyCode === KeyCodes.Enter) {
+        var 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.Tab || keyCode === KeyCodes.Escape) {
+        _this.props.closeSelect();
+      }
+    };
+
+    _this.onPressUp = function () {
+      if (_this.state.activeIndex > 0) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex - 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    };
+
+    _this.onPressDown = function () {
+      if (_this.filterOptions && _this.state.activeIndex < _this.filterOptions.length - 1) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex + 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    };
+
+    _this.onClick = function (e) {
+      if (_this.props.stopClickEvent && _this.optionGroupRef.contains(e.target) && !e.target.className.includes('dtable-font')) {
+        e.stopPropagation();
+      }
+    };
+
+    _this.scrollContent = function () {
+      var _this$optionGroupCont = _this.optionGroupContentRef,
+          offsetHeight = _this$optionGroupCont.offsetHeight,
+          scrollTop = _this$optionGroupCont.scrollTop;
+
+      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 = function (index) {
+      _this.setState({
+        activeIndex: index
+      });
+    };
+
+    _this.onChangeSearch = function (searchVal) {
+      var value = searchVal || '';
+
+      if (value !== _this.state.searchVal) {
+        _this.setState({
+          searchVal: value,
+          activeIndex: -1
+        });
+      }
+    };
+
+    _this.renderOptGroup = function (searchVal) {
+      var _this$props = _this.props,
+          noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
+          onSelectOption = _this$props.onSelectOption;
+      _this.filterOptions = _this.props.getFilterOptions(searchVal);
+
+      if (_this.filterOptions === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
+      }
+
+      return _this.filterOptions.map(function (opt, i) {
+        var key = opt.value.column ? opt.value.column.key : i;
+        var isActive = _this.state.activeIndex === i;
+        return /*#__PURE__*/React.createElement(Option, {
+          key: key,
+          index: i,
+          isActive: isActive,
+          value: opt.value,
+          onSelectOption: onSelectOption,
+          changeIndex: _this.changeIndex,
+          supportMultipleSelect: _this.props.supportMultipleSelect
+        }, opt.label);
+      });
+    };
+
+    _this.state = {
+      searchVal: '',
+      activeIndex: -1
+    };
+    _this.filterOptions = null;
+    return _this;
+  }
+
+  _createClass(SelectOptionGroup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('keydown', this.onHotKey);
+      window.addEventListener('click', this.onClick, true);
+      this.resetMenuStyle();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.filterOptions = null;
+      window.removeEventListener('click', this.onClick, true);
+      window.removeEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          searchable = _this$props2.searchable,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          top = _this$props2.top,
+          left = _this$props2.left,
+          minWidth = _this$props2.minWidth,
+          value = _this$props2.value,
+          isShowSelected = _this$props2.isShowSelected;
+      var searchVal = this.state.searchVal;
+      var style = {
+        top: top || 0,
+        left: left || 0
+      };
+
+      if (minWidth) {
+        style = {
+          top: top || 0,
+          left: left || 0,
+          minWidth: minWidth
+        };
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "option-group ".concat(isShowSelected ? 'pt-0' : ''),
+        ref: function ref(_ref2) {
+          return _this2.optionGroupRef = _ref2;
+        },
+        style: style
+      }, isShowSelected && /*#__PURE__*/React.createElement("div", {
+        className: "editor-list-delete mb-2",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, value.label || ''), searchable && /*#__PURE__*/React.createElement("div", {
+        className: "option-group-search"
+      }, /*#__PURE__*/React.createElement(DTableSearchInput, {
+        className: "option-search-control",
+        placeholder: searchPlaceholder,
+        onChange: this.onChangeSearch,
+        autoFocus: true
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "option-group-content",
+        ref: function ref(_ref) {
+          return _this2.optionGroupContentRef = _ref;
+        }
+      }, this.renderOptGroup(searchVal)));
+    }
+  }]);
+
+  return SelectOptionGroup;
+}(Component);
+
+export default SelectOptionGroup;

package/lib/SelectOptionGroup/option.js

@@ -0,0 +1,60 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+
+var Option = /*#__PURE__*/function (_Component) {
+  _inherits(Option, _Component);
+
+  var _super = _createSuper(Option);
+
+  function Option() {
+    var _this;
+
+    _classCallCheck(this, Option);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.onSelectOption = function (value, event) {
+      _this.props.onSelectOption(value, event);
+    };
+
+    _this.onClick = function (event) {
+      if (_this.props.supportMultipleSelect) {
+        event.stopPropagation();
+      }
+    };
+
+    _this.onMouseEnter = function () {
+      _this.props.changeIndex(_this.props.index);
+    };
+
+    _this.onMouseLeave = function () {
+      _this.props.changeIndex(-1);
+    };
+
+    return _this;
+  }
+
+  _createClass(Option, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: this.props.isActive ? 'option option-active' : 'option',
+        onMouseDown: this.onSelectOption.bind(this, this.props.value),
+        onClick: this.onClick,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
+      }, this.props.children);
+    }
+  }]);
+
+  return Option;
+}(Component);
+
+export default Option;

package/lib/assets/css/DTableCustomSelect.css

@@ -0,0 +1,148 @@
+.dtable-select {
+  position: relative;
+}
+
+.dtable-select.custom-select {
+  display: flex;
+  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;
+}
+
+.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);
+}
+
+.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;
+}
+
+.dtable-select.custom-select:hover {
+  cursor: pointer;
+  border-color: rgb(179, 179, 179);
+}
+
+.dtable-select .select-option-name {
+  color: #202428;
+}
+
+.dtable-select .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  color: #949494;
+  transform: scale(.8) translateY(2px);
+  transition: all .1s;
+}
+
+.dtable-select .dtable-icon-drop-down:hover {
+  color: #000;
+}
+
+.dtable-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.dtable-select .option-group {
+  position: absolute;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: .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;
+}
+
+.dtable-select .option-group .option-group-search {
+  width: 100%;
+  padding: 0 10px 6px 10px;
+  min-width: 170px;
+}
+
+.dtable-select .option-group-search .form-control {
+  height: 31px;
+}
+
+.dtable-select .option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: .5;
+}
+
+.dtable-select .option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+
+.dtable-select .option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: .25rem 10px;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px;
+}
+
+.dtable-select.selector-collaborator .option {
+  padding: 5px 0 5px 10px !important;
+  line-height: 20px;
+}
+
+.dtable-select .option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.dtable-select .option.option-active .select-option-name {
+  color: #fff;
+}
+
+.dtable-select .selected-option-show {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  color: #949494;
+  white-space: nowrap;
+}

package/lib/index.js

@@ -45,4 +45,7 @@ export { default as LinkEditor } from './LinkEditor'; // dtable custom
 
 export { default as DTablePopover } from './DTablePopover';
 export { default as DTableSelect } from './DTableSelect';
-export { default as DTableSwitch } from './DTableSwitch';
+export { default as DTableSwitch } from './DTableSwitch';
+export { default as DTableCustomizeSelect } from './DTableCustomizeSelect';
+export { default as DTableCustomizeCollaboratorSelect } from './DTableCustomizeCollaboratorSelect';
+export { default as DTableSearchInput } from './DTableSearchInput';

package/package.json

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