dtable-ui-component 6.0.118-jh.3 → 6.0.119

package/lib/DTableSelect/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _utils = require("./utils");
@@ -28,8 +29,17 @@ class DTableSelect extends _react.default.Component {
       form,
       customFilterOption,
       autoFocus,
-      className
+      className,
+      closeMenuOnSelect,
+      onMenuClose,
+      components: userComponents
     } = this.props;
+    const mergedComponents = (0, _objectSpread2.default)({
+      Option: _utils.Option,
+      DropdownIndicator: _utils.DropdownIndicator,
+      MenuList: _utils.MenuList,
+      ClearIndicator: _utils.ClearIndicator
+    }, userComponents);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
       onChange: onChange,
@@ -38,12 +48,7 @@ class DTableSelect extends _react.default.Component {
       className: className,
       classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,
-      components: {
-        Option: _utils.Option,
-        DropdownIndicator: _utils.DropdownIndicator,
-        MenuList: _utils.MenuList,
-        ClearIndicator: _utils.ClearIndicator
-      },
+      components: mergedComponents,
       placeholder: placeholder,
       isSearchable: isSearchable,
       isClearable: isClearable,
@@ -52,6 +57,8 @@ class DTableSelect extends _react.default.Component {
       menuShouldScrollIntoView: true,
       menuPortalTarget: document.querySelector(this.props.menuPortalTarget),
       captureMenuScroll: false,
+      closeMenuOnSelect: closeMenuOnSelect,
+      onMenuClose: onMenuClose,
       hideSelectedOptions: false,
       noOptionsMessage: noOptionsMessage,
       isDisabled: isDisabled,
@@ -72,6 +79,7 @@ DTableSelect.defaultProps = {
   placeholder: '',
   isMulti: false,
   autoFocus: false,
+  closeMenuOnSelect: true,
   menuPortalTarget: '.modal',
   noOptionsMessage: () => {
     return null;

package/lib/RoleStatusEditor/index.js

@@ -22,6 +22,17 @@ const RoleStatusEditor = _ref => {
     closeShowDropdownIcon
   } = _ref;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [menuMaxHeight, setMenuMaxHeight] = (0, _react.useState)(320);
+  const toggleRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (isOpen && toggleRef.current) {
+      const rect = toggleRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom - 8;
+      const spaceAbove = rect.top - 8;
+      const maxAvailable = Math.max(spaceBelow, spaceAbove);
+      setMenuMaxHeight(Math.min(maxAvailable, 320));
+    }
+  }, [isOpen]);
   const handleClickMenuOption = menuOption => {
     const {
       value
@@ -35,6 +46,7 @@ const RoleStatusEditor = _ref => {
     className: "role-status-editor",
     toggle: () => setIsOpen(!isOpen),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.DropdownToggle, {
+      innerRef: toggleRef,
       className: "dropdown-toggle-button d-flex align-items-center",
       tag: "div",
       children: [currentOption.label, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -47,6 +59,10 @@ const RoleStatusEditor = _ref => {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableDropdownMenu.default, {
       className: "position-fixed",
+      style: {
+        maxHeight: menuMaxHeight,
+        overflowY: 'auto'
+      },
       children: menuOptions.map(option => {
         const {
           value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.118-jh.3",
+  "version": "6.0.119",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.8",