dtable-ui-component 4.3.6 → 4.3.8

package/lib/RowExpandUrlFormatter/index.js

@@ -1,57 +1,44 @@
-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';
 import classnames from 'classnames';
 import toaster from '../toaster';
 import { isValidUrl, getTrimmedString } from '../utils/editor-utils';
 import './index.css';
-var UrlFormatter = /*#__PURE__*/function (_React$Component) {
-  _inherits(UrlFormatter, _React$Component);
-  var _super = _createSuper(UrlFormatter);
-  function UrlFormatter() {
-    var _this;
-    _classCallCheck(this, UrlFormatter);
-    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.onOpenUrlLink = function () {
-      var value = _this.props.value;
-      var url = getTrimmedString(value);
-      var validUrl = isValidUrl(url) ? url : "http://".concat(url);
+class UrlFormatter extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.onOpenUrlLink = () => {
+      const {
+        value
+      } = this.props;
+      const url = getTrimmedString(value);
+      const validUrl = isValidUrl(url) ? url : "http://".concat(url);
       try {
-        var a = document.createElement('a');
+        let a = document.createElement('a');
         document.body.appendChild(a);
         a.href = validUrl;
         a.target = '_blank';
         a.rel = 'noopener noreferrer';
         a.click();
         document.body.removeChild(a);
-      } catch (_unused) {
+      } catch {
         toaster.danger('The url is invalid');
       }
     };
-    return _this;
   }
-  _createClass(UrlFormatter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        containerClassName = _this$props.containerClassName,
-        value = _this$props.value;
-      var classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classname
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "url-formatter-value text-truncate"
-      }, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
-        className: "dtable-font dtable-icon-url row-expand-jump-link",
-        onClick: this.onOpenUrlLink
-      }));
-    }
-  }]);
-  return UrlFormatter;
-}(React.Component);
+  render() {
+    const {
+      containerClassName,
+      value
+    } = this.props;
+    let classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classname
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "url-formatter-value text-truncate"
+    }, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font dtable-icon-url row-expand-jump-link",
+      onClick: this.onOpenUrlLink
+    }));
+  }
+}
 export default UrlFormatter;

package/lib/SelectItem/index.js

@@ -1,19 +1,8 @@
-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 SelectItem = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(SelectItem, _React$PureComponent);
-  var _super = _createSuper(SelectItem);
-  function SelectItem() {
-    var _this;
-    _classCallCheck(this, SelectItem);
-    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.getStyle = function (option, fontSize) {
+export default class SelectItem extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.getStyle = (option, fontSize) => {
       return {
         display: 'inline-block',
         padding: '0px 10px',
@@ -28,22 +17,17 @@ var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
         color: option.textColor || null
       };
     };
-    return _this;
   }
-  _createClass(SelectItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        option = _this$props.option,
-        fontSize = _this$props.fontSize;
-      var style = this.getStyle(option, fontSize);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dtable-ui select-item text-truncate",
-        style: style,
-        title: option.name
-      }, option.name);
-    }
-  }]);
-  return SelectItem;
-}(React.PureComponent);
-export { SelectItem as default };
+  render() {
+    let {
+      option,
+      fontSize
+    } = this.props;
+    const style = this.getStyle(option, fontSize);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dtable-ui select-item text-truncate",
+      style: style,
+      title: option.name
+    }, option.name);
+  }
+}

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

@@ -1,188 +1,210 @@
-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';
+import ClickOutside from '../common/ClickOutside';
+import './index.css';
+const OPTION_HEIGHT = 32;
+class SelectOptionGroup extends Component {
+  constructor(props) {
+    super(props);
+    this.resetMenuStyle = () => {
+      const {
+        isInModal,
+        position
+      } = this.props;
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
+      if (isInModal) {
+        if (position.y + position.height + height > window.innerHeight) {
+          this.optionGroupRef.style.top = position.y - height + 'px';
+        }
+        this.optionGroupRef.style.opacity = 1;
+      } else {
+        if (height + top > window.innerHeight) {
+          const borderWidth = 2;
+          this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
       }
     };
-    _this.onHotKey = function (event) {
-      var keyCode = event.keyCode;
+    this.onHotKey = event => {
+      const keyCode = event.keyCode;
       if (keyCode === KeyCodes.UpArrow) {
-        _this.onPressUp();
+        this.onPressUp();
       } else if (keyCode === KeyCodes.DownArrow) {
-        _this.onPressDown();
+        this.onPressDown();
       } else if (keyCode === KeyCodes.Enter) {
-        var option = _this.filterOptions && _this.filterOptions[_this.state.activeIndex];
+        let option = this.filterOptions && this.filterOptions[this.state.activeIndex];
         if (option) {
-          _this.props.onSelectOption(option.value);
-          if (!_this.props.supportMultipleSelect) {
-            _this.props.closeSelect();
+          this.props.onSelectOption(option.value);
+          if (!this.props.supportMultipleSelect) {
+            this.props.closeSelect();
           }
         }
       } else if (keyCode === KeyCodes.Tab || keyCode === KeyCodes.Escape) {
-        _this.props.closeSelect();
+        this.props.closeSelect();
       }
     };
-    _this.onPressUp = function () {
-      if (_this.state.activeIndex > 0) {
-        _this.setState({
-          activeIndex: _this.state.activeIndex - 1
-        }, function () {
-          _this.scrollContent();
+    this.onPressUp = () => {
+      if (this.state.activeIndex > 0) {
+        this.setState({
+          activeIndex: this.state.activeIndex - 1
+        }, () => {
+          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.onPressDown = () => {
+      if (this.filterOptions && this.state.activeIndex < this.filterOptions.length - 1) {
+        this.setState({
+          activeIndex: this.state.activeIndex + 1
+        }, () => {
+          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 = () => {
+      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;
       }
-    };
-    _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;
+      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({
+    this.changeIndex = index => {
+      this.setState({
         activeIndex: index
       });
     };
-    _this.onChangeSearch = function (searchVal) {
-      var value = searchVal || '';
-      if (value !== _this.state.searchVal) {
-        _this.setState({
+    this.onChangeSearch = searchVal => {
+      let 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) {
+    this.renderOptGroup = searchVal => {
+      let {
+        noOptionsPlaceholder,
+        onSelectOption,
+        isInModal
+      } = this.props;
+      this.filterOptions = this.props.getFilterOptions(searchVal);
+      if (this.filterOptions.length === 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 this.filterOptions.map((opt, i) => {
+        let key = opt.value.column ? opt.value.column.key : i;
+        let isActive = this.state.activeIndex === i;
         return /*#__PURE__*/React.createElement(Option, {
           key: key,
           index: i,
           isActive: isActive,
+          isInModal: isInModal,
           value: opt.value,
           onSelectOption: onSelectOption,
-          changeIndex: _this.changeIndex,
-          supportMultipleSelect: _this.props.supportMultipleSelect
+          changeIndex: this.changeIndex,
+          supportMultipleSelect: this.props.supportMultipleSelect,
+          disableHover: this.state.disableHover
         }, opt.label);
       });
     };
-    _this.state = {
+    this.state = {
       searchVal: '',
-      activeIndex: -1
+      activeIndex: -1,
+      disableHover: false
     };
-    _this.filterOptions = null;
-    return _this;
+    this.filterOptions = null;
+    this.timer = null;
   }
-  _createClass(SelectOptionGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('keydown', this.onHotKey);
-      window.addEventListener('click', this.onClick, true);
+  componentDidMount() {
+    window.addEventListener('keydown', this.onHotKey);
+    setTimeout(() => {
       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 = {
+    }, 1);
+  }
+  componentWillUnmount() {
+    this.filterOptions = null;
+    this.timer && clearTimeout(this.timer);
+    window.removeEventListener('keydown', this.onHotKey);
+  }
+  render() {
+    const {
+      searchable,
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      value,
+      isShowSelected,
+      isInModal,
+      position,
+      className
+    } = this.props;
+    let {
+      searchVal
+    } = this.state;
+    let style = {
+      top: top || 0,
+      left: left || 0
+    };
+    if (minWidth) {
+      style = {
         top: top || 0,
-        left: left || 0
+        left: left || 0,
+        minWidth
+      };
+    }
+    if (isInModal) {
+      style = {
+        position: 'fixed',
+        left: position.x,
+        top: position.y + position.height,
+        minWidth: position.width,
+        opacity: 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);
+    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: ref => this.optionGroupRef = ref,
+      style: style
+    }, isShowSelected && /*#__PURE__*/React.createElement("div", {
+      className: "editor-list-delete mb-2",
+      onClick: e => 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: ref => this.optionGroupContentRef = ref
+    }, this.renderOptGroup(searchVal))));
+  }
+}
 export default SelectOptionGroup;

package/lib/SelectOptionGroup/option.js

@@ -1,46 +1,39 @@
-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) {
+class Option extends Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectOption = (value, event) => {
+      if (this.props.supportMultipleSelect) {
         event.stopPropagation();
       }
+      this.props.onSelectOption(value, event);
     };
-    _this.onMouseEnter = function () {
-      _this.props.changeIndex(_this.props.index);
+    this.onMouseEnter = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(this.props.index);
+      }
     };
-    _this.onMouseLeave = function () {
-      _this.props.changeIndex(-1);
+    this.onMouseLeave = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(-1);
+      }
     };
-    return _this;
+    this.onMouseDown = event => {
+      if (this.props.isInModal) {
+        // prevent close modal via select option
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+      }
+    };
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: this.props.isActive ? 'option option-active' : 'option',
+      onClick: this.onSelectOption.bind(this, this.props.value),
+      onMouseDown: this.onMouseDown,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, this.props.children);
   }
-  _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;