dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/DTableCustomizeSelect/select-option-group/index.js

@@ -1,260 +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 _ClickOutside = _interopRequireDefault(require("../../ClickOutside"));
-var _DTableCustomizeSearchInput = _interopRequireDefault(require("../../DTableCustomizeSearchInput"));
-var _option = _interopRequireDefault(require("./option"));
-var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-const OPTION_HEIGHT = 32;
-class SelectOptionGroup extends _react.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 = 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.value);
-          if (!this.props.supportMultipleSelect) {
-            this.props.closeSelect();
-          }
-        }
-      } 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;
-      // prevent event propagation when click option or search input
-      if (isInModal) {
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-      }
-    };
-    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;
-      }
-      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 => {
-      let value = searchVal || '';
-      if (value !== this.state.searchVal) {
-        this.setState({
-          searchVal: value,
-          activeIndex: -1
-        });
-      }
-    };
-    this.clearSearch = () => {
-      this.setState({
-        searchVal: '',
-        activeIndex: -1
-      });
-    };
-    this.renderOptGroup = searchVal => {
-      let {
-        noOptionsPlaceholder,
-        onSelectOption,
-        value
-      } = this.props;
-      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((opt, i) => {
-        let key = opt.value.column ? opt.value.column.key : i;
-        let isActive = this.state.activeIndex === i;
-        let isSelected = false;
-        if (value) {
-          // Handle both single value and array of values
-          if (Array.isArray(value.value)) {
-            isSelected = value.value.includes(opt.value);
-          } else {
-            isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
-          }
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
-          index: i,
-          isActive: isActive,
-          value: opt.value,
-          onSelectOption: onSelectOption,
-          changeIndex: this.changeIndex,
-          supportMultipleSelect: this.props.supportMultipleSelect,
-          disableHover: this.state.disableHover,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "select-label",
-            children: opt.label
-          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check seatable-check-color"
-          })]
-        }, key);
-      });
-    };
-    this.state = {
-      searchVal: '',
-      activeIndex: -1,
-      disableHover: false
-    };
-    this.filterOptions = null;
-    this.timer = null;
-  }
-  componentDidMount() {
-    window.addEventListener('keydown', this.onHotKey);
-    setTimeout(() => {
-      this.resetMenuStyle();
-    }, 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,
-        minWidth
-      };
-    }
-    if (isInModal) {
-      style = {
-        position: 'fixed',
-        left: position.x,
-        top: position.y + position.height,
-        minWidth: position.width,
-        opacity: 0
-      };
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-      onClickOutside: this.props.onClickOutside,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
-          'pt-0': isShowSelected
-        }),
-        ref: ref => this.optionGroupRef = ref,
-        style: style,
-        onMouseDown: this.onMouseDown,
-        children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "editor-list-delete mb-2",
-          onClick: e => e.stopPropagation(),
-          children: value.label || ''
-        }), searchable && this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-option-group-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
-            className: "option-search-control",
-            placeholder: searchPlaceholder,
-            onChange: this.onChangeSearch,
-            clearValue: this.clearSearch,
-            autoFocus: true,
-            isClearable: true
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-option-group-content",
-          ref: ref => this.optionGroupContentRef = ref,
-          children: this.renderOptGroup(searchVal)
-        })]
-      })
-    });
-  }
-}
-var _default = exports.default = SelectOptionGroup;

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

@@ -1,48 +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 _util = require("../util");
-var _jsxRuntime = require("react/jsx-runtime");
-class Option extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.onSelectOption = event => {
-      if (this.props.supportMultipleSelect) {
-        event.stopPropagation();
-      }
-      this.props.onSelectOption(this.props.value, event);
-    };
-    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)('seatable-select-option', {
-        'seatable-select-option-active': this.props.isActive
-      }),
-      tabIndex: "0",
-      role: "menuitem",
-      onClick: this.onSelectOption,
-      onKeyDown: _util.onKeyDown,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      children: this.props.children
-    });
-  }
-}
-var _default = exports.default = Option;

package/lib/DTableCustomizeSelect/util.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onKeyDown = void 0;
-const onKeyDown = e => {
-  if (e.key === 'Enter' || e.key === 'Space') {
-    e.target.click();
-  }
-};
-exports.onKeyDown = onKeyDown;

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -1,16 +0,0 @@
-.select-dropdown-indicator {
-  position: absolute;
-  top: 50%;
-  right: 18px;
-  transform: translateY(-50%);
-  margin-left: -2px;
-}
-
-.select-dropdown-indicator svg {
-  width: 12px;
-  height: 12px;
-}
-
-.dis-multicolor-icon-down {
-  opacity: 0.65 !important;
-}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-const SelectDropdownIndicator = _ref => {
-  let {
-    isDisabled
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: "select-dropdown-indicator d-flex align-items-center",
-    "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-      symbol: "down",
-      color: "var(--bs-icon-color)",
-      className: isDisabled ? 'dis-multicolor-icon-down' : ''
-    })
-  });
-};
-var _default = exports.default = SelectDropdownIndicator;

package/lib/DTableSelect/select-style.js

@@ -1,133 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuSelectStyle = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-const DEFAULT_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 1rem 0 .5rem',
-  border: '1px solid var(--bs-border-color) !important',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-popover-bg)',
-  borderRadius: '4px',
-  outline: '0'
-};
-const FOCUS_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 1rem 0 .5rem',
-  border: '1px solid #3e84f7',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-popover-bg)',
-  borderRadius: '4px',
-  outline: '0'
-};
-const controlCallback = (provided, state) => {
-  const {
-    isDisabled,
-    isFocused
-  } = state;
-  if (isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DEFAULT_CONTROL_STYLE), {}, {
-      cursor: 'default',
-      backgroundColor: '#f5f5f5',
-      opacity: 0.65
-    });
-  }
-  if (isFocused) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
-      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
-    });
-  }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    fontSize: '14px',
-    lineHeight: '1.5',
-    cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
-};
-const MenuSelectStyle = exports.MenuSelectStyle = {
-  // .react-select__menu / react-select-2-listbox
-  menu: base => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-      padding: '8px',
-      backgroundColor: 'var(--bs-popover-bg)',
-      border: '1px solid var(--bs-border-secondary-color)',
-      borderRadius: '4px',
-      boxShadow: '0px 6px 14px rgba(0, 0, 0, 0.1)',
-      marginTop: '4px',
-      marginBottom: 0
-    });
-  },
-  option: (provided, state) => {
-    const {
-      isDisabled,
-      isFocused,
-      isActive,
-      isVisited
-    } = state;
-    let bgColor;
-    if (isActive || isVisited) {
-      bgColor = 'rgba(0, 0, 0, 0.06)';
-    } else if (isFocused) {
-      bgColor = 'rgba(0, 0, 0, .04)';
-    } else {
-      bgColor = 'var(--bs-popover-bg)';
-    }
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)',
-      borderRadius: '4px',
-      minHeight: '32px',
-      padding: '6px 8px 6px 8px',
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: "".concat(bgColor, " !important")
-    });
-  },
-  control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-    zIndex: 9999,
-    backgroundColor: 'var(--bs-popover-bg)',
-    color: 'var(--bs-body-color)',
-    borderColor: 'var(--bs-border-secondary-color)'
-  }),
-  singleValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)'
-    });
-  },
-  multiValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)'
-    });
-  },
-  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    color: '#909090',
-    ':hover': {
-      backgroundColor: 'transparent',
-      color: 'var(--bs-icon-color)'
-    }
-  }),
-  input: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    color: 'var(--bs-body-color)'
-  }),
-  placeholder: (provided, state) => {
-    const {
-      isDisabled
-    } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#868e96',
-      opacity: isDisabled ? 0.65 : 1
-    });
-  },
-  indicatorSeparator: (styles, state) => {
-    return {
-      'display': 'none'
-    };
-  },
-  indicatorContainer: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: 0
-  })
-};

package/lib/assets/icons/close.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718937171668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z" p-id="18369" fill="currentColor"></path></svg>

package/lib/assets/icons/down.svg

@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.27148 11.2718L6.09991 8.44336L15.9994 18.3429L25.8989 8.44336L28.7273 11.2718L15.9994 23.9997L3.27148 11.2718Z" fill="currentColor"/>
-</svg>