dtable-ui-component 7.0.1-ial.1 → 7.0.2

package/lib/DTableGroupSelect/index.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
-var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-class DTableGroupSelect extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onSelectToggle = event => {
-      event.preventDefault();
-      if (this.state.isShowSelectOptions) event.stopPropagation();
-      let eventClassName = event.target.className;
-      if (eventClassName.indexOf('dtable-icon-x') > -1 || eventClassName === 'option-group-search') return;
-      if (event.target.value === '') return;
-      this.setState({
-        isShowSelectOptions: !this.state.isShowSelectOptions
-      });
-    };
-    this.onClickOutside = event => {
-      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
-        return;
-      }
-      if (!this.selector.contains(event.target)) {
-        this.closeSelect();
-      }
-    };
-    this.closeSelect = () => {
-      this.setState({
-        isShowSelectOptions: false
-      });
-    };
-    this.getSelectedOptionTop = () => {
-      if (!this.selector) return 38;
-      const _this$selector$getBou = this.selector.getBoundingClientRect(),
-        height = _this$selector$getBou.height;
-      return height;
-    };
-    this.getFilterOptions = searchValue => {
-      const options = this.props.options;
-      const validSearchVal = searchValue.trim().toLowerCase();
-      if (!validSearchVal) return options || [];
-      return options.filter(option => option.name.toLowerCase().includes(validSearchVal));
-    };
-    this.state = {
-      isShowSelectOptions: false
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.selectedOptions.length !== this.props.selectedOptions.length) {
-      // when selectedOptions change and dom rendered, calculate top
-      setTimeout(() => {
-        this.forceUpdate();
-      }, 1);
-    }
-  }
-  render() {
-    let _this$props = this.props,
-      className = _this$props.className,
-      selectedOptions = _this$props.selectedOptions,
-      options = _this$props.options,
-      placeholder = _this$props.placeholder,
-      searchPlaceholder = _this$props.searchPlaceholder,
-      noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
-      isInModal = _this$props.isInModal;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      ref: node => this.selector = node,
-      className: (0, _classnames.default)('group-select custom-select', {
-        'focus': this.state.isShowSelectOptions
-      }, className),
-      onClick: this.onSelectToggle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "selected-option",
-        children: [selectedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "selected-option-show",
-          children: selectedOptions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "selected-option-item mr-1 pr-1 pl-2",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "selected-option-item-name",
-              children: item.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-x ml-1",
-              onClick: () => {
-                this.props.onDeleteOption(item);
-              }
-            })]
-          }, item.id))
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "select-placeholder",
-          children: placeholder
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "sf3-font-down sf3-font"
-        })]
-      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
-        selectedOptions: selectedOptions,
-        top: this.getSelectedOptionTop(),
-        options: options,
-        onSelectOption: this.props.onSelectOption,
-        searchPlaceholder: searchPlaceholder,
-        noOptionsPlaceholder: noOptionsPlaceholder,
-        onClickOutside: this.onClickOutside,
-        closeSelect: this.closeSelect,
-        getFilterOptions: this.getFilterOptions
-      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
-          className: className,
-          selectedOptions: selectedOptions,
-          position: this.selector.getBoundingClientRect(),
-          isInModal: isInModal,
-          top: this.getSelectedOptionTop(),
-          options: options,
-          onSelectOption: this.props.onSelectOption,
-          searchPlaceholder: searchPlaceholder,
-          noOptionsPlaceholder: noOptionsPlaceholder,
-          onClickOutside: this.onClickOutside,
-          closeSelect: this.closeSelect,
-          getFilterOptions: this.getFilterOptions
-        })
-      })]
-    });
-  }
-}
-var _default = exports.default = DTableGroupSelect;

package/lib/DTableGroupSelect/option.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("react/jsx-runtime");
-class Option extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.onSelectOption = e => {
-      e.stopPropagation();
-      this.props.onSelectOption(this.props.option);
-    };
-    this.onMouseEnter = () => {
-      if (!this.props.disableHover) {
-        this.props.changeIndex(this.props.index);
-      }
-    };
-    this.onMouseLeave = () => {
-      if (!this.props.disableHover) {
-        this.props.changeIndex(-1);
-      }
-    };
-  }
-  render() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('d-flex option', {
-        'option-active': this.props.isActive
-      }),
-      onClick: this.onSelectOption,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      children: this.props.children
-    });
-  }
-}
-var _default = exports.default = Option;

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

@@ -1,54 +0,0 @@
-.group-selector .option {
-  display: block;
-  width: 100%;
-  line-height: 24px;
-  padding: 6px 10px;
-  clear: both;
-  font-weight: 400;
-  text-align: inherit;
-  background-color: transparent;
-  border: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.group-selector .option .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
-}
-
-.group-selector .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
-  cursor: pointer;
-}
-
-.group-selector .option.option-active .dtable-icon-check-mark,
-.group-selector .option.option-active .select-option-name {
-  color: #fff !important;
-}
-
-.group-selector .option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
-}
-
-.group-selector .option .select-option-name .multiple-select-option {
-  margin: 0;
-}
-
-.group-selector .option-group-dtable-ui-single-select-selector .select-option-name {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.group-selector .option-group-dtable-ui-single-select-selector .option:hover,
-.group-selector .option-group-dtable-ui-single-select-selector .option.option-active,
-.group-selector .option-group-dtable-ui-multiple-select-selector .option:hover,
-.group-selector .option-group-dtable-ui-multiple-select-selector .option.option-active {
-  background-color: #f5f5f5;
-}

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

@@ -1,227 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
-var _option = _interopRequireDefault(require("./option"));
-var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
-require("./select-option-group.css");
-var _jsxRuntime = require("react/jsx-runtime");
-const OPTION_HEIGHT = 32;
-class SelectOptionGroup extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.handleDocumentClick = e => {
-      this.props.onClickOutside(e);
-    };
-    this.resetMenuStyle = () => {
-      const _this$props = this.props,
-        isInModal = _this$props.isInModal,
-        position = _this$props.position;
-      const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
-        top = _this$optionGroupRef$.top,
-        height = _this$optionGroupRef$.height;
-      if (isInModal) {
-        if (position.y + position.height + height > window.innerHeight) {
-          this.optionGroupRef.style.top = position.y - height + 'px';
-        }
-        this.optionGroupRef.style.opacity = 1;
-        this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
-      } else {
-        if (height + top > window.innerHeight) {
-          const borderWidth = 2;
-          this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
-        }
-      }
-    };
-    this.onHotKey = event => {
-      const keyCode = event.keyCode;
-      if (keyCode === _KeyCodes.default.UpArrow) {
-        this.onPressUp();
-      } else if (keyCode === _KeyCodes.default.DownArrow) {
-        this.onPressDown();
-      } else if (keyCode === _KeyCodes.default.Enter) {
-        let option = this.filterOptions && this.filterOptions[this.state.activeIndex];
-        if (option) {
-          this.props.onSelectOption(option);
-        }
-      } else if (keyCode === _KeyCodes.default.Tab || keyCode === _KeyCodes.default.Escape) {
-        this.props.closeSelect();
-      }
-    };
-    this.onPressUp = () => {
-      if (this.state.activeIndex > 0) {
-        this.setState({
-          activeIndex: this.state.activeIndex - 1
-        }, () => {
-          this.scrollContent();
-        });
-      }
-    };
-    this.onPressDown = () => {
-      if (this.filterOptions && this.state.activeIndex < this.filterOptions.length - 1) {
-        this.setState({
-          activeIndex: this.state.activeIndex + 1
-        }, () => {
-          this.scrollContent();
-        });
-      }
-    };
-    this.onMouseDown = e => {
-      const isInModal = this.props.isInModal;
-      // prevent event propagation when click option or search input
-      if (isInModal) {
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-      }
-    };
-    this.scrollContent = () => {
-      const _this$optionGroupCont = this.optionGroupContentRef,
-        offsetHeight = _this$optionGroupCont.offsetHeight,
-        scrollTop = _this$optionGroupCont.scrollTop;
-      this.setState({
-        disableHover: true
-      });
-      this.timer = setTimeout(() => {
-        this.setState({
-          disableHover: false
-        });
-      }, 500);
-      if (this.state.activeIndex * OPTION_HEIGHT === 0) {
-        this.optionGroupContentRef.scrollTop = 0;
-        return;
-      }
-      if (this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
-        this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
-      } else if (this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
-        this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
-      }
-    };
-    this.changeIndex = index => {
-      this.setState({
-        activeIndex: index
-      });
-    };
-    this.onChangeSearch = searchVal => {
-      this.setState({
-        searchVal: searchVal || '',
-        activeIndex: -1
-      });
-    };
-    this.clearValue = () => {
-      this.setState({
-        searchVal: '',
-        activeIndex: -1
-      });
-    };
-    this.renderOptGroup = searchVal => {
-      let _this$props2 = this.props,
-        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        onSelectOption = _this$props2.onSelectOption,
-        selectedOptions = _this$props2.selectedOptions;
-      this.filterOptions = this.props.getFilterOptions(searchVal);
-      if (this.filterOptions.length === 0) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "none-search-result",
-          children: noOptionsPlaceholder
-        });
-      }
-      return this.filterOptions.map((option, index) => {
-        const isSelected = selectedOptions.some(item => item.id === option.id);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
-          index: index,
-          isActive: this.state.activeIndex === index,
-          option: option,
-          onSelectOption: onSelectOption,
-          changeIndex: this.changeIndex,
-          disableHover: this.state.disableHover,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "option-label text-truncate",
-            title: option.label,
-            children: option.label
-          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check-mark"
-          })]
-        }, "".concat(option.id, "-").concat(index));
-      });
-    };
-    this.state = {
-      searchVal: '',
-      activeIndex: -1,
-      disableHover: false
-    };
-    this.filterOptions = null;
-    this.timer = null;
-    this.searchInputRef = /*#__PURE__*/_react.default.createRef();
-  }
-  componentDidMount() {
-    window.addEventListener('keydown', this.onHotKey);
-    document.addEventListener('mousedown', this.handleDocumentClick);
-    setTimeout(() => {
-      this.resetMenuStyle();
-    }, 1);
-  }
-  componentWillUnmount() {
-    this.filterOptions = null;
-    this.timer && clearTimeout(this.timer);
-    window.removeEventListener('keydown', this.onHotKey);
-    document.removeEventListener('mousedown', this.handleDocumentClick);
-  }
-  render() {
-    const _this$props3 = this.props,
-      searchPlaceholder = _this$props3.searchPlaceholder,
-      top = _this$props3.top,
-      left = _this$props3.left,
-      minWidth = _this$props3.minWidth,
-      isInModal = _this$props3.isInModal,
-      position = _this$props3.position,
-      className = _this$props3.className;
-    let searchVal = this.state.searchVal;
-    let style = {
-      top: top || 0,
-      left: left || 0
-    };
-    if (minWidth) {
-      style = {
-        top: top || 0,
-        left: left || 0,
-        minWidth
-      };
-    }
-    if (isInModal) {
-      style = {
-        position: 'fixed',
-        left: position.x,
-        top: position.y + position.height,
-        minWidth: position.width,
-        opacity: 0
-      };
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('option-group group-selector', className ? 'option-group-' + className : ''),
-      ref: ref => this.optionGroupRef = ref,
-      style: style,
-      onMouseDown: this.onMouseDown,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "option-group-search position-relative",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-          className: "option-search-control",
-          placeholder: searchPlaceholder,
-          onChange: this.onChangeSearch,
-          ref: this.searchInputRef
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "option-group-content",
-        ref: ref => this.optionGroupContentRef = ref,
-        children: this.renderOptGroup(searchVal)
-      })]
-    });
-  }
-}
-var _default = exports.default = SelectOptionGroup;