dtable-ui-component 4.3.6 → 4.3.7

package/lib/DTableCustomizeSelect/index.css

@@ -36,16 +36,12 @@
   border-color: rgb(179, 179, 179);
 }
 
-.dtable-select .select-option-name {
-  color: #212529;
-}
-
 .dtable-select .dtable-icon-drop-down {
   display: inline-block;
   font-size: 12px;
-  color: #949494;
-  transform: scale(.8) translateY(2px);
-  transition: all .1s;
+  color: #999;
+  transform: scale(0.8) translateY(2px);
+  transition: all 0.1s;
 }
 
 .dtable-select .dtable-icon-drop-down:hover {
@@ -62,67 +58,34 @@
   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.selector-collaborator .option-group .option-group-content,
+.dtable-select.selector-group .option-group .option-group-content {
+  padding: 10px;
 }
 
-.dtable-select .option-group .none-search-result {
-  height: 100px;
-  width: 100%;
-  padding: 10px;
-  opacity: .5;
+.dtable-select.custom-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px 0;
 }
 
-.dtable-select .option-group .option-group-content {
-  max-height: 252px;
-  overflow-y: auto;
+.dtable-select.custom-select.selector-collaborator .option {
+  padding: 5px 0 5px 10px !important;
+  line-height: 20px;
 }
 
-.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-group .option {
+  height: 30px;
+  display: flex;
+  align-items: center;
 }
 
-.dtable-select .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
-  cursor: pointer;
+.dtable-select.selector-group .select-group-option {
+  justify-content: space-between;
 }
 
-.dtable-select .option.option-active .select-option-name {
-  color: #fff;
+.dtable-select.selector-group .selected-option .selected-group {
+  padding: 0 2px;
+  background: #eceff4;
+  border-radius: 3px;
 }
 
 .dtable-select .selected-option-show {
@@ -134,6 +97,6 @@
 .dtable-select .select-placeholder {
   line-height: 1;
   font-size: 14px;
-  color: #949494;
+  color: #999;
   white-space: nowrap;
 }

package/lib/DTableCustomizeSelect/index.js

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import SelectOptionGroup from '../SelectOptionGroup';
 import classnames from 'classnames';
+import ModalPortal from '../common/modal-portal';
 import './index.css';
 var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
   _inherits(DTableCustomizeSelect, _Component);
@@ -19,7 +20,7 @@ var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
         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();
+      if (_this.state.isShowSelectOptions) event.stopPropagation();
       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
@@ -28,7 +29,7 @@ var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
         isShowSelectOptions: !_this.state.isShowSelectOptions
       });
     };
-    _this.onMousedown = function (event) {
+    _this.onClick = function (event) {
       if (_this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
         return;
       }
@@ -61,6 +62,12 @@ var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
           return name.toLowerCase().indexOf(validSearchVal) > -1;
         }
         if (typeof value === 'object') {
+          if (value.column) {
+            return value.column.name.toLowerCase().indexOf(validSearchVal) > -1;
+          }
+          if (value.name) {
+            return value.name.toLowerCase().indexOf(validSearchVal) > -1;
+          }
           return value.columnOption && value.columnOption.name.toLowerCase().indexOf(validSearchVal) > -1;
         }
         return false;
@@ -72,16 +79,6 @@ var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(DTableCustomizeSelect, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onMousedown);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.onMousedown);
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -93,7 +90,8 @@ var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
         searchable = _this$props2.searchable,
         searchPlaceholder = _this$props2.searchPlaceholder,
         noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        isLocked = _this$props2.isLocked;
+        isLocked = _this$props2.isLocked,
+        isInModal = _this$props2.isInModal;
       return /*#__PURE__*/React.createElement("div", {
         ref: function ref(node) {
           return _this2.selector = node;
@@ -106,25 +104,42 @@ var DTableCustomizeSelect = /*#__PURE__*/function (_Component) {
         onClick: this.onSelectToggle
       }, /*#__PURE__*/React.createElement("div", {
         className: "selected-option"
-      }, value.label ? /*#__PURE__*/React.createElement("span", {
+      }, value && 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, {
+      })), this.state.isShowSelectOptions && !isInModal && /*#__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,
+        onClickOutside: this.onClick,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions,
+        supportMultipleSelect: this.props.supportMultipleSelect
+      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(SelectOptionGroup, {
+        className: className,
         value: value,
         isShowSelected: this.props.isShowSelected,
+        position: this.selector.getBoundingClientRect(),
+        isInModal: isInModal,
         top: this.getSelectedOptionTop(),
         options: options,
         onSelectOption: this.props.onSelectOption,
         searchable: searchable,
         searchPlaceholder: searchPlaceholder,
         noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClick,
         closeSelect: this.closeSelect,
         getFilterOptions: this.getFilterOptions,
         supportMultipleSelect: this.props.supportMultipleSelect
-      }));
+      })));
     }
   }]);
   return DTableCustomizeSelect;

package/lib/SelectOptionGroup/index.css

@@ -0,0 +1,103 @@
+.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: 0 10px 6px 10px;
+  min-width: 170px;
+}
+
+.option-group-search .form-control {
+  height: 31px;
+}
+
+.option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  opacity: 0.5;
+}
+
+.option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+
+.option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: 0.25rem 10px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.option:hover .header-icon .dtable-font,
+.option.option-active .select-option-name {
+  color: #fff;
+}
+
+.option.option-active .header-icon .dtable-font {
+  color: #fff;
+}
+
+.option:not(.option-active):hover .header-icon .dtable-font {
+  color: #aaa;
+}
+
+.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,
+.option-group-selector-multiple-select .multiple-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.option-group-selector-multiple-select .multiple-check-icon {
+  display: inline-flex;
+  width: 20px;
+  text-align: center;
+}
+
+.option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.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: #f7f7f7;
+}

package/lib/SelectOptionGroup/index.js

@@ -6,6 +6,8 @@ import React, { Component } from 'react';
 import Option from './option';
 import DTableSearchInput from '../DTableSearchInput';
 import KeyCodes from './KeyCodes';
+import ClickOutside from '../common/ClickOutside';
+import './index.css';
 var OPTION_HEIGHT = 32;
 var SelectOptionGroup = /*#__PURE__*/function (_Component) {
   _inherits(SelectOptionGroup, _Component);
@@ -15,12 +17,22 @@ var SelectOptionGroup = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, SelectOptionGroup);
     _this = _super.call(this, props);
     _this.resetMenuStyle = function () {
+      var _this$props = _this.props,
+        isInModal = _this$props.isInModal,
+        position = _this$props.position;
       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';
+      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) {
+          var borderWidth = 2;
+          _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
       }
     };
     _this.onHotKey = function (event) {
@@ -59,15 +71,22 @@ var SelectOptionGroup = /*#__PURE__*/function (_Component) {
         });
       }
     };
-    _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;
+      _this.setState({
+        disableHover: true
+      });
+      _this.timer = setTimeout(function () {
+        _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) {
@@ -89,11 +108,12 @@ var SelectOptionGroup = /*#__PURE__*/function (_Component) {
       }
     };
     _this.renderOptGroup = function (searchVal) {
-      var _this$props = _this.props,
-        noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
-        onSelectOption = _this$props.onSelectOption;
+      var _this$props2 = _this.props,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        onSelectOption = _this$props2.onSelectOption,
+        isInModal = _this$props2.isInModal;
       _this.filterOptions = _this.props.getFilterOptions(searchVal);
-      if (_this.filterOptions === 0) {
+      if (_this.filterOptions.length === 0) {
         return /*#__PURE__*/React.createElement("div", {
           className: "none-search-result"
         }, noOptionsPlaceholder);
@@ -105,46 +125,55 @@ var SelectOptionGroup = /*#__PURE__*/function (_Component) {
           key: key,
           index: i,
           isActive: isActive,
+          isInModal: isInModal,
           value: opt.value,
           onSelectOption: onSelectOption,
           changeIndex: _this.changeIndex,
-          supportMultipleSelect: _this.props.supportMultipleSelect
+          supportMultipleSelect: _this.props.supportMultipleSelect,
+          disableHover: _this.state.disableHover
         }, opt.label);
       });
     };
     _this.state = {
       searchVal: '',
-      activeIndex: -1
+      activeIndex: -1,
+      disableHover: false
     };
     _this.filterOptions = null;
+    _this.timer = null;
     return _this;
   }
   _createClass(SelectOptionGroup, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
       window.addEventListener('keydown', this.onHotKey);
-      window.addEventListener('click', this.onClick, true);
-      this.resetMenuStyle();
+      setTimeout(function () {
+        _this2.resetMenuStyle();
+      }, 1);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.filterOptions = null;
-      window.removeEventListener('click', this.onClick, true);
+      this.timer && clearTimeout(this.timer);
       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 _this3 = this;
+      var _this$props3 = this.props,
+        searchable = _this$props3.searchable,
+        searchPlaceholder = _this$props3.searchPlaceholder,
+        top = _this$props3.top,
+        left = _this$props3.left,
+        minWidth = _this$props3.minWidth,
+        value = _this$props3.value,
+        isShowSelected = _this$props3.isShowSelected,
+        isInModal = _this$props3.isInModal,
+        position = _this$props3.position,
+        className = _this$props3.className;
       var searchVal = this.state.searchVal;
       var style = {
         top: top || 0,
@@ -157,10 +186,21 @@ var SelectOptionGroup = /*#__PURE__*/function (_Component) {
           minWidth: minWidth
         };
       }
-      return /*#__PURE__*/React.createElement("div", {
-        className: "option-group ".concat(isShowSelected ? 'pt-0' : ''),
+      if (isInModal) {
+        style = {
+          position: 'fixed',
+          left: position.x,
+          top: position.y + position.height,
+          minWidth: position.width,
+          opacity: 0
+        };
+      }
+      return /*#__PURE__*/React.createElement(ClickOutside, {
+        onClickOutside: this.props.onClickOutside
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-group ".concat(isShowSelected ? 'pt-0' : '', " ").concat(className ? 'option-group-' + className : ''),
         ref: function ref(_ref2) {
-          return _this2.optionGroupRef = _ref2;
+          return _this3.optionGroupRef = _ref2;
         },
         style: style
       }, isShowSelected && /*#__PURE__*/React.createElement("div", {
@@ -178,9 +218,9 @@ var SelectOptionGroup = /*#__PURE__*/function (_Component) {
       })), /*#__PURE__*/React.createElement("div", {
         className: "option-group-content",
         ref: function ref(_ref) {
-          return _this2.optionGroupContentRef = _ref;
+          return _this3.optionGroupContentRef = _ref;
         }
-      }, this.renderOptGroup(searchVal)));
+      }, this.renderOptGroup(searchVal))));
     }
   }]);
   return SelectOptionGroup;

package/lib/SelectOptionGroup/option.js

@@ -14,18 +14,27 @@ var Option = /*#__PURE__*/function (_Component) {
     }
     _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.props.onSelectOption(value, event);
     };
     _this.onMouseEnter = function () {
-      _this.props.changeIndex(_this.props.index);
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(_this.props.index);
+      }
     };
     _this.onMouseLeave = function () {
-      _this.props.changeIndex(-1);
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(-1);
+      }
+    };
+    _this.onMouseDown = function (event) {
+      if (_this.props.isInModal) {
+        // prevent close modal via select option
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+      }
     };
     return _this;
   }
@@ -34,8 +43,8 @@ var Option = /*#__PURE__*/function (_Component) {
     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,
+        onClick: this.onSelectOption.bind(this, this.props.value),
+        onMouseDown: this.onMouseDown,
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave
       }, this.props.children);

package/lib/common/ClickOutside.js

@@ -0,0 +1,49 @@
+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 from 'react';
+var ClickOutside = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClickOutside, _React$Component);
+  var _super = _createSuper(ClickOutside);
+  function ClickOutside() {
+    var _this;
+    _classCallCheck(this, ClickOutside);
+    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.isClickedInside = false;
+    _this.handleDocumentClick = function (e) {
+      if (_this.isClickedInside) {
+        _this.isClickedInside = false;
+        return;
+      }
+      _this.props.onClickOutside(e);
+    };
+    _this.handleMouseDown = function () {
+      _this.isClickedInside = true;
+    };
+    return _this;
+  }
+  _createClass(ClickOutside, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('mousedown', this.handleDocumentClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleDocumentClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return React.cloneElement(React.Children.only(this.props.children), {
+        onMouseDownCapture: this.handleMouseDown
+      });
+    }
+  }]);
+  return ClickOutside;
+}(React.Component);
+export { ClickOutside as default };

package/package.json

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