dtable-ui-component 7.0.0-ahn.1 → 7.0.0-iam.4

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

@@ -0,0 +1,227 @@
+"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;

package/lib/DTableSelect/dtable-select-label.css

@@ -1,10 +1,10 @@
 .dtable-select-check-icon {
-  width: 14px;
-  height: 14px;
+  width: 20px;
+  height: 20px;
   text-align: center;
 }
 
 .dtable-select-check-icon .dtable-font {
-  font-size: 14px;
-  color: var(--bs-icon-color);
+  font-size: 12px;
+  color: #798d99;
 }

package/lib/DTableSelect/dtable-select-label.js

@@ -22,7 +22,7 @@ function DTableSelectLabel(_ref) {
     }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-select-check-icon",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-check"
+        className: "dtable-font dtable-icon-check-mark"
       })
     })]
   });

package/lib/DTableSelect/index.js

@@ -39,11 +39,10 @@ class DTableSelect extends _react.default.Component {
       MenuList: _utils.MenuList,
       ClearIndicator: _utils.ClearIndicator
     }, userComponents);
-    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: (0, _utils.createHandleChange)(onChange),
-      options: processedOptions,
+      onChange: onChange,
+      options: options,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
@@ -51,6 +50,7 @@ class DTableSelect extends _react.default.Component {
       components: mergedComponents,
       placeholder: placeholder,
       isSearchable: isSearchable,
+      isClearable: isClearable,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,

package/lib/DTableSelect/user-select.css

@@ -1,12 +1,51 @@
-/* hide checkbox in select value container */
-.seatable-select-value-container .seatable-multicolor-icon-check {
-  display: none;
+.user-select .select-module-container {
+  display: flex;
+  align-items: center;
 }
 
-.seatable-select-value-container .select-option-label {
-  font-size: 14px !important;
+.user-select .select-module.select-module-avatar {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
 }
 
-.seatable-check-color {
-  color: var(--bs-icon-secondary-color);
+.user-select .select-module.select-module-name {
+  color: #212529;
+  font-size: 14px;
+}
+
+.user-select .true__value-container .select-module-container {
+  display: block;
+}
+
+.user-select .true__value-container .select-module.select-module-avatar {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+}
+
+.user-select .true__value-container .true__multi-value__label {
+  padding: 0px;
+}
+
+.user-select .true__value-container .true__multi-value__label .select-module.select-module-avatar {
+  transform: translateY(-2px);
+}
+
+.user-select .true__value-container .select-module.select-module-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1;
+  line-height: 20px;
+  margin-left: 5px;
+}
+
+.user-select .true__control.true__control--is-focused,
+.user-select .true__control.true__control--is-focused:hover {
+  background-color: #ffffff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }

package/lib/DTableSelect/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
@@ -12,156 +12,116 @@ var _reactSelect = require("react-select");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 4px 0 8px',
-  border: '1px solid var(--bs-border-color) !important',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-popover-bg)',
-  borderRadius: '4px',
-  outline: '0'
-};
-const DISABLED_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 4px 0 8px',
-  border: '1px solid rgba(0, 40, 100, 0.12)',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-bg-color)',
-  borderRadius: '4px',
-  outline: '0',
-  cursor: 'default',
-  opacity: 0.65
+  border: '1px solid rgba(0, 40, 100, 0.12) !important'
 };
 const FOCUS_CONTROL_STYLE = {
   fontSize: '14px',
-  padding: '0 4px 0 8px',
-  border: '1px solid var(--bs-bg-border-color)',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-popover-bg)',
-  borderRadius: '4px',
-  outline: '0'
-};
-const HEADER_ICON_STYLE = {
-  padding: '0 0.5rem !important'
+  backgroundColor: '#ffffff',
+  borderColor: '#1991eb',
+  outline: '0',
+  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
 };
+const noneCallback = () => ({
+  display: 'none'
+});
 const controlCallback = (provided, state) => {
   const isDisabled = state.isDisabled,
     isFocused = state.isFocused;
-  const headerIconStyle = {
-    '.header-icon': HEADER_ICON_STYLE,
-    '.header-icon .dtable-font': {
-      color: 'var(--bs-icon-secondary-color) !important'
-    }
-  };
-  if (isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DISABLED_CONTROL_STYLE), {}, {
-      ':active': {
-        border: '1px solid var(--bs-bg-border-color)'
-      }
-    }, headerIconStyle);
-  }
-  if (isFocused) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), headerIconStyle);
+  if (isFocused && !isDisabled) {
+    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), headerIconStyle);
+  }, DEFAULT_CONTROL_STYLE), {}, {
+    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
+  });
 };
-const MenuSelectStyle = exports.MenuSelectStyle = {
-  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: 'var(--bs-border-secondary-shadow)',
-      marginTop: '4px',
-      marginBottom: 0
-    });
-  },
-  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: 0
-  }),
+const UserSelectStyle = exports.UserSelectStyle = {
   option: (provided, state) => {
-    const isDisabled = state.isDisabled;
+    const isDisabled = state.isDisabled,
+      isFocused = state.isFocused;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)',
-      borderRadius: '4px',
-      minHeight: '32px',
-      padding: '8px',
       cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: 'var(--bs-popover-bg)',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      ':hover': {
-        backgroundColor: 'rgba(0, 0, 0, 0.04)'
-      },
-      '.header-icon': HEADER_ICON_STYLE
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
     });
   },
   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 => {
+  indicatorSeparator: noneCallback,
+  dropdownIndicator: noneCallback,
+  clearIndicator: noneCallback,
+  multiValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)'
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0 10px 0 0',
+      padding: '0 0 0 2px'
     });
   },
-  multiValue: provided => {
+  multiValueLabel: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)'
+      padding: '0px'
     });
   },
-  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    '.dtable-font': {
-      color: 'var(--bs-icon-color)'
-    },
-    '.dtable-font: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.isDisabled;
+  multiValueRemove: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-bg-placeholder-color)',
-      opacity: isDisabled ? 0.65 : 1
+      color: '#666',
+      ':hover': {
+        backgroundColor: 'transparent',
+        color: '#555555'
+      }
     });
   },
-  indicatorSeparator: (styles, state) => {
-    return {
-      'display': 'none'
-    };
-  },
-  dropdownIndicator: (provided, state) => {
-    const isDisabled = state.isDisabled;
+  singleValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      paddingRight: '12px',
-      '.dtable-font': {
-        color: 'var(--bs-icon-color) !important',
-        opacity: isDisabled ? 0.65 : 1
-      }
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0',
+      padding: '0 2px',
+      width: 'fit-content'
     });
   }
 };
+const MenuSelectStyle = exports.MenuSelectStyle = {
+  option: (provided, state) => {
+    const isDisabled = state.isDisabled,
+      isFocused = state.isFocused;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      fontSize: '13px',
+      color: '#212529',
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+      ':active': {
+        backgroundColor: '#f5f5f5'
+      },
+      '.header-icon .dtable-font': {
+        color: '#aaa'
+      },
+      '.header-icon .multicolor-icon': {
+        color: '#aaa'
+      }
+    });
+  },
+  control: controlCallback,
+  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+    zIndex: 9999
+  }),
+  indicatorSeparator: noneCallback
+};
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px',
-        color: 'var(--bs-icon-color)',
-        paddingRight: 0
+        marginLeft: '-2px'
       }
     })
   }));
@@ -182,8 +142,7 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px',
-        color: 'var(--bs-icon-color)'
+        marginRight: '-2px'
       }
     })
   }));
@@ -198,54 +157,9 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 });
 exports.MenuList = MenuList;
 const Option = props => {
-  const isSelected = props.isSelected,
-    label = props.label;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        whiteSpace: 'pre-line'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: label
-      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-check",
-        style: {
-          fontSize: '14px',
-          color: 'var(--bs-icon-color)',
-          paddingLeft: '16px'
-        }
-      })]
-    })
-  }));
-};
-exports.Option = Option;
-const processOptionsWithClear = (options, isClearable) => {
-  if (isClearable && options && options.length > 0) {
-    return [{
-      label: '--',
-      value: '__clear__'
-    }, ...options];
-  }
-  return options;
-};
-exports.processOptionsWithClear = processOptionsWithClear;
-const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
-  if (selectedOption && selectedOption.value === '__clear__') {
-    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
-      action: 'clear'
-    }));
-  } else {
-    onChangeCallback(selectedOption, actionMeta);
-  }
-};
-exports.handleSelectChange = handleSelectChange;
-const createHandleChange = onChange => {
-  return (selectedOption, actionMeta) => {
-    handleSelectChange(selectedOption, actionMeta, onChange);
-  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: props.data.style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
+  });
 };
-exports.createHandleChange = createHandleChange;
+exports.Option = Option;

package/lib/ImagePreviewerLightbox/index.js

@@ -15,6 +15,7 @@ require("@seafile/react-image-lightbox/style.css");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function ImagePreviewerLightbox(props) {
+  var _imageSrcList, _imageSrcList2;
   const imageItems = props.imageItems,
     imageIndex = props.imageIndex,
     readOnly = props.readOnly,
@@ -24,7 +25,11 @@ function ImagePreviewerLightbox(props) {
     dtableUuid = props.dtableUuid,
     deleteImage = props.deleteImage,
     downloadImage = props.downloadImage,
-    onRotateImage = props.onRotateImage;
+    onRotateImage = props.onRotateImage,
+    _props$isShowPreLine = props.isShowPreLine,
+    isShowPreLine = _props$isShowPreLine === void 0 ? true : _props$isShowPreLine,
+    _props$isShowNextLine = props.isShowNextLine,
+    isShowNextLine = _props$isShowNextLine === void 0 ? true : _props$isShowNextLine;
   const imageSrcList = imageItems.map(src => {
     let name = '';
     try {
@@ -102,16 +107,16 @@ function ImagePreviewerLightbox(props) {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
     imageTitle: imageTitleDOM,
     mainSrc: mainSrc,
-    nextSrc: imageSrcList[(currentImageIndex + 1) % imagesLength] ? imageSrcList[(currentImageIndex + 1) % imagesLength].thumbnail : '',
-    prevSrc: imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength] ? imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength].thumbnail : '',
+    nextSrc: ((_imageSrcList = imageSrcList[(currentImageIndex + 1) % imagesLength]) === null || _imageSrcList === void 0 ? void 0 : _imageSrcList.thumbnail) || '',
+    prevSrc: ((_imageSrcList2 = imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength]) === null || _imageSrcList2 === void 0 ? void 0 : _imageSrcList2.thumbnail) || '',
     imagePadding: 70,
     viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
     enableRotate: canRotateImage,
     onCloseRequest: props.closeImagePopup,
     onMovePrevRequest: props.moveToPrevImage,
     onMoveNextRequest: props.moveToNextImage,
-    onClickMoveUp: moveToPrevRowImage,
-    onClickMoveDown: moveToNextRowImage,
+    onClickMoveUp: isShowPreLine && moveToPrevRowImage,
+    onClickMoveDown: isShowNextLine && moveToNextRowImage,
     onViewOriginal: props.onViewOriginal,
     onRotateImage: canRotateImage ? deg => {
       onRotateImage(currentImageIndex, deg);