dtable-ui-component 4.3.6 → 4.3.8

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -1,82 +1,76 @@
-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) {
+class CollaboratorSelect extends Component {
+  constructor(props) {
+    super(props);
+    this.onSelectToggle = 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;
+      if (this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
+      let 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.selectedOptionWidth = this.selectedOptionRef.clientWidth;
+      this.setState({
+        isShowSelectOptions: !this.state.isShowSelectOptions
       });
     };
-    _this.onMousedown = function (event) {
-      var name = event.target.className;
+    this.onMousedown = event => {
+      const name = event.target.className;
       if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
         return;
       }
-      if (!_this.selector.contains(event.target)) {
-        _this.closeSelect();
+      if (!this.selector.contains(event.target)) {
+        this.closeSelect();
       }
     };
-    _this.closeSelect = function () {
-      _this.setState({
+    this.closeSelect = () => {
+      this.setState({
         isShowSelectOptions: false
       });
     };
-    _this.getFilterOptions = function (searchValue) {
-      var _this$props = _this.props,
-        options = _this$props.options,
-        searchable = _this$props.searchable;
+    this.getFilterOptions = searchValue => {
+      const {
+        options,
+        searchable
+      } = this.props;
       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;
+    this.renderOptionGroup = () => {
+      const {
+        value,
+        options,
+        searchable,
+        searchPlaceholder,
+        noOptionsPlaceholder,
+        top,
+        left,
+        isUsePopover
+      } = this.props;
       if (!isUsePopover) {
         return /*#__PURE__*/React.createElement(SelectOptionGroup, {
           value: value,
           top: top,
           left: left,
-          minWidth: _this.btnWidth + 8 // 8px is padding
+          minWidth: this.btnWidth + 8 // 8px is padding
           ,
           options: options,
-          onSelectOption: _this.props.onSelectOption,
+          onSelectOption: this.props.onSelectOption,
           searchable: searchable,
           searchPlaceholder: searchPlaceholder,
           noOptionsPlaceholder: noOptionsPlaceholder,
-          closeSelect: _this.closeSelect,
-          getFilterOptions: _this.getFilterOptions,
-          supportMultipleSelect: _this.props.supportMultipleSelect,
+          closeSelect: this.closeSelect,
+          getFilterOptions: this.getFilterOptions,
+          supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
           isShowSelected: true
         });
@@ -84,7 +78,7 @@ var CollaboratorSelect = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(Popover, {
         placement: "bottom",
         isOpen: true,
-        target: _this.id,
+        target: this.id,
         fade: false,
         hideArrow: true,
         className: "dtable-customize-collaborator-select dtable-select"
@@ -92,73 +86,60 @@ var CollaboratorSelect = /*#__PURE__*/function (_Component) {
         value: value,
         top: top,
         left: left,
-        minWidth: _this.btnWidth + 8 // 8px is padding
+        minWidth: this.btnWidth + 8 // 8px is padding
         ,
         options: options,
-        onSelectOption: _this.props.onSelectOption,
+        onSelectOption: this.props.onSelectOption,
         searchable: searchable,
         searchPlaceholder: searchPlaceholder,
         noOptionsPlaceholder: noOptionsPlaceholder,
-        closeSelect: _this.closeSelect,
-        getFilterOptions: _this.getFilterOptions,
-        supportMultipleSelect: _this.props.supportMultipleSelect,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions,
+        supportMultipleSelect: this.props.supportMultipleSelect,
         stopClickEvent: true,
         isShowSelected: true
       }));
     };
-    _this.state = {
+    this.state = {
       isShowSelectOptions: false
     };
-    _this.id = 'collaborator-select-' + Math.trunc(Math.random() * 10000);
-    return _this;
+    this.id = 'collaborator-select-' + Math.trunc(Math.random() * 10000);
   }
-  _createClass(CollaboratorSelect, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onMousedown);
-      this.btnWidth = this.selector.clientWidth;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.onMousedown);
-    }
-  }, {
-    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);
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onMousedown);
+    this.btnWidth = this.selector.clientWidth;
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onMousedown);
+  }
+  render() {
+    let {
+      className,
+      value,
+      placeholder,
+      isLocked
+    } = this.props;
+    return /*#__PURE__*/React.createElement("button", {
+      ref: node => this.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: node => this.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());
+  }
+}
 CollaboratorSelect.defaultProps = {
   top: -3,
   left: -3

package/lib/DTableCustomizeCollaboratorSelect/utils.js

@@ -1,24 +1,23 @@
-export var searchCollaborators = function searchCollaborators(collaborators, searchValue) {
-  var validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
-  var validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
+export const searchCollaborators = (collaborators, searchValue) => {
+  const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  const 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;
+  return validCollaborators.filter(collaborator => {
+    const {
+      name,
+      name_pinyin = ''
+    } = collaborator;
     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, '');
+    const validNamePinyin = name_pinyin.toString().toLowerCase();
+    const 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('\'');
+    const validNamePinyinList = validNamePinyin.split('\'');
     // acronym
-    var namePinyinAcronym = validNamePinyinList.map(function (item) {
-      return item && item.trim() ? item.trim().slice(0, 1) : '';
-    });
+    const namePinyinAcronym = validNamePinyinList.map(item => item && item.trim() ? item.trim().slice(0, 1) : '');
     if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
     return false;
   });

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

@@ -1,132 +1,136 @@
-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 ModalPortal from '../common/modal-portal';
 import './index.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) {
+class DTableCustomizeSelect extends Component {
+  constructor(props) {
+    super(props);
+    this.onSelectToggle = 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;
+      if (this.state.isShowSelectOptions) event.stopPropagation();
+      let 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.setState({
+        isShowSelectOptions: !this.state.isShowSelectOptions
       });
     };
-    _this.onMousedown = function (event) {
-      if (_this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+    this.onClick = event => {
+      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
         return;
       }
-      if (!_this.selector.contains(event.target)) {
-        _this.closeSelect();
+      if (!this.selector.contains(event.target)) {
+        this.closeSelect();
       }
     };
-    _this.closeSelect = function () {
-      _this.setState({
+    this.closeSelect = () => {
+      this.setState({
         isShowSelectOptions: false
       });
     };
-    _this.getSelectedOptionTop = function () {
-      if (!_this.selector) return 38;
-      var _this$selector$getBou = _this.selector.getBoundingClientRect(),
-        height = _this$selector$getBou.height;
+    this.getSelectedOptionTop = () => {
+      if (!this.selector) return 38;
+      const {
+        height
+      } = this.selector.getBoundingClientRect();
       return height;
     };
-    _this.getFilterOptions = function (searchValue) {
-      var _this$props = _this.props,
-        options = _this$props.options,
-        searchable = _this$props.searchable;
+    this.getFilterOptions = searchValue => {
+      const {
+        options,
+        searchable
+      } = this.props;
       if (!searchable) return options || [];
-      var validSearchVal = searchValue.trim().toLowerCase();
+      const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
-      return options.filter(function (option) {
-        var value = option.value,
-          name = option.name;
+      return options.filter(option => {
+        const {
+          value,
+          name
+        } = option;
         if (typeof name === 'string') {
           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;
       });
     };
-    _this.state = {
+    this.state = {
       isShowSelectOptions: false
     };
-    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;
-      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);
+  render() {
+    let {
+      className,
+      value,
+      options,
+      placeholder,
+      searchable,
+      searchPlaceholder,
+      noOptionsPlaceholder,
+      isLocked,
+      isInModal
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: node => this.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 && 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 && !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
+    })));
+  }
+}
 export default DTableCustomizeSelect;