@spaced-out/ui-design-system 0.1.93 → 0.1.94-beta.0

package/lib/components/Menu/Menu.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Menu = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _reactWindow = require("react-window");
 var _classify = require("../../utils/classify");
 var _menu = require("../../utils/menu");
 var _SearchInput = require("../SearchInput");
@@ -15,6 +16,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const menuSizeMedium = 276,
+  menuSizeSmall = 228;
+const buttonSizeMedium = 40,
+  buttonSizeSmall = 32;
 const RenderOption = _ref => {
   let {
     options,
@@ -25,15 +30,45 @@ const RenderOption = _ref => {
     ...restProps
   } = _ref;
   const {
-    allowSearch
+    allowSearch,
+    size,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null
+    }
   } = restProps;
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
     const resultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered);
+    const {
+      enable: isVirtualizationEnabled,
+      menuHeight,
+      itemHeight
+    } = virtualization;
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, resultText), optionsFiltered.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
+    }, resultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+      height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
+      itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
+      itemCount: optionsFiltered.length
+    }, _ref2 => {
+      let {
+        index: idx,
+        style
+      } = _ref2;
+      const buttonOption = optionsFiltered[idx];
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: buttonOption.key
+      }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
+        option: buttonOption,
+        classNames: classNames,
+        style: style
+      }, restProps, {
+        isLastItem: idx === optionsFiltered.length - 1
+      })));
+    }) : optionsFiltered.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
       option: option,
@@ -93,9 +128,17 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     size = 'medium',
     width,
     isFluid = true,
-    allowSearch
+    allowSearch,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null
+    }
   } = props;
   const [searchText, setSearchText] = React.useState('');
+  const {
+    menuHeight
+  } = virtualization;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_MenuModule.default.menuCard, {
       [_MenuModule.default.fluid]: isFluid,
@@ -103,7 +146,8 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
       [_MenuModule.default.small]: size === 'small'
     }, classNames?.wrapper),
     style: {
-      width
+      width,
+      maxHeight: menuHeight ? menuHeight + 'px' : ''
     },
     ref: ref
   }, allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {

package/lib/components/Menu/Menu.js.flow

@@ -1,5 +1,7 @@
 // @flow strict
 import * as React from 'react';
+// $FlowIssue[nonstrict-import] react-window
+import {FixedSizeList} from 'react-window';
 
 import {classify} from '../../utils/classify';
 import {
@@ -31,6 +33,12 @@ type OptionClassNames = $ReadOnly<{
   wrapper?: string,
 }>;
 
+export type Virtualization = $ReadOnly<{
+  enable: boolean,
+  itemHeight?: number,
+  menuHeight?: number,
+}>;
+
 export type MenuOption = {
   key: string,
   classNames?: OptionClassNames,
@@ -68,6 +76,8 @@ export type BaseMenuProps = {
   // A function that resolves the secondaryLabel for a MenuOption.
   // It takes a MenuOption as a parameter and returns either a string or a React Node.
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  // When virtualization is enabled, the MenuOptionButtons will be rendered only when they are present in the Menu's viewport
+  virtualization?: Virtualization,
 };
 
 export type MenuOptionTypes = {
@@ -95,6 +105,12 @@ export type RenderOptionProps = {
   searchText?: string,
 };
 
+const menuSizeMedium = 276,
+  menuSizeSmall = 228;
+
+const buttonSizeMedium = 40,
+  buttonSizeSmall = 32;
+
 const RenderOption = ({
   options,
   composeOptions,
@@ -103,7 +119,15 @@ const RenderOption = ({
   searchText = '',
   ...restProps
 }: RenderOptionProps): React.Node => {
-  const {allowSearch} = restProps;
+  const {
+    allowSearch,
+    size,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null,
+    },
+  } = restProps;
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch
       ? options
@@ -112,6 +136,12 @@ const RenderOption = ({
       ? ''
       : getFilteredOptionsResultText(optionsFiltered);
 
+    const {
+      enable: isVirtualizationEnabled,
+      menuHeight,
+      itemHeight,
+    } = virtualization;
+
     return (
       <>
         {allowSearch && (
@@ -122,16 +152,44 @@ const RenderOption = ({
             {resultText}
           </FormLabelSmall>
         )}
-        {optionsFiltered.map((option, idx) => (
-          <React.Fragment key={option.key}>
-            <MenuOptionButton
-              option={option}
-              classNames={classNames}
-              {...restProps}
-              isLastItem={idx === optionsFiltered.length - 1}
-            />
-          </React.Fragment>
-        ))}
+        {virtualization && isVirtualizationEnabled ? (
+          <FixedSizeList
+            height={
+              menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall)
+            }
+            itemSize={
+              itemHeight ||
+              (size === 'medium' ? buttonSizeMedium : buttonSizeSmall)
+            }
+            itemCount={optionsFiltered.length}
+          >
+            {({index: idx, style}) => {
+              const buttonOption = optionsFiltered[idx];
+              return (
+                <React.Fragment key={buttonOption.key}>
+                  <MenuOptionButton
+                    option={buttonOption}
+                    classNames={classNames}
+                    style={style}
+                    {...restProps}
+                    isLastItem={idx === optionsFiltered.length - 1}
+                  />
+                </React.Fragment>
+              );
+            }}
+          </FixedSizeList>
+        ) : (
+          optionsFiltered.map((option, idx) => (
+            <React.Fragment key={option.key}>
+              <MenuOptionButton
+                option={option}
+                classNames={classNames}
+                {...restProps}
+                isLastItem={idx === optionsFiltered.length - 1}
+              />
+            </React.Fragment>
+          ))
+        )}
       </>
     );
   }
@@ -248,9 +306,14 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
         width,
         isFluid = true,
         allowSearch,
+        virtualization = {
+          enable: false,
+          menuHeight: null,
+          itemHeight: null,
+        },
       } = props;
       const [searchText, setSearchText] = React.useState('');
-
+      const {menuHeight} = virtualization;
       return (
         <div
           className={classify(
@@ -262,7 +325,10 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
             },
             classNames?.wrapper,
           )}
-          style={{width}}
+          style={{
+            width,
+            maxHeight: menuHeight ? menuHeight + 'px' : '',
+          }}
           ref={ref}
         >
           {allowSearch && (

package/lib/components/Menu/MenuOptionButton.js

@@ -30,7 +30,8 @@ const MenuOptionButton = props => {
     isLastItem,
     onTabOut,
     resolveLabel,
-    resolveSecondaryLabel
+    resolveSecondaryLabel,
+    style
   } = props;
   const {
     key,
@@ -79,6 +80,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.withIconLeft]: !!iconLeft,
       [_MenuModule.default.withIconRight]: !!iconRight
     }, classNames?.option, optionClassNames?.wrapper),
+    style: style,
     disabled: menuDisabled || disabled,
     onClick: e => onSelect && onSelect(option, e),
     autoFocus: selectedOption?.key === key

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -17,6 +17,7 @@ export type MenuOptionProps = {
   ...BaseMenuProps,
   option: MenuOption,
   isLastItem?: boolean,
+  style?: mixed,
 };
 
 export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
@@ -35,6 +36,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     onTabOut,
     resolveLabel,
     resolveSecondaryLabel,
+    style,
   } = props;
   const {
     key,
@@ -97,6 +99,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
         classNames?.option,
         optionClassNames?.wrapper,
       )}
+      style={style}
       disabled={menuDisabled || disabled}
       onClick={(e) => onSelect && onSelect(option, e)}
       autoFocus={selectedOption?.key === key}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.93",
+  "version": "0.1.94-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -50,7 +50,8 @@
     "highcharts-react-official": "^3.2.1",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.45",
-    "react-dropzone": "^14.2.3"
+    "react-dropzone": "^14.2.3",
+    "react-window": "^1.8.10"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",