@khanacademy/wonder-blocks-dropdown 2.6.9 → 2.6.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.6.10
+
+### Patch Changes
+
+-   0b94d616: Adds a max-height value to the dropdown menu to avoid displaying long lists that might cut off on small screen resolutions
+
 ## 2.6.9
 
 ### Patch Changes

package/dist/es/index.js

@@ -31,14 +31,14 @@ const selectDropdownStyle = {
   marginBottom: Spacing.xSmall_8
 };
 const filterableDropdownStyle = {
-  minHeight: 100,
-  maxHeight: 384
+  minHeight: 100
 };
 const searchInputStyle = {
   margin: Spacing.xSmall_8,
   marginTop: Spacing.xxxSmall_4
 };
 const DROPDOWN_ITEM_HEIGHT = 40;
+const MAX_VISIBLE_ITEMS = 9;
 const SEPARATOR_ITEM_HEIGHT = 9;
 const SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop;
 const defaultLabels = {
@@ -637,15 +637,30 @@ const styles$4 = StyleSheet.create({
   }
 });
 
-const MAX_VISIBLE_ITEMS = 9;
+function getDropdownMenuHeight(items, initialHeight = 0) {
+  return items.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
+    if (SeparatorItem.isClassOf(item.component)) {
+      return sum + SEPARATOR_ITEM_HEIGHT;
+    } else if (SearchTextInput.isClassOf(item.component)) {
+      return sum + SEARCH_ITEM_HEIGHT;
+    } else {
+      return sum + DROPDOWN_ITEM_HEIGHT;
+    }
+  }, initialHeight);
+}
+function generateDropdownMenuStyles(minWidth, maxHeight) {
+  const styles = StyleSheet.create({
+    dropdownMenu: {
+      minWidth,
+      maxHeight
+    }
+  });
+  return styles.dropdownMenu;
+}
 
 class DropdownCoreVirtualized extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: this.getHeight(),
-      width: this.props.width
-    };
+  constructor(props) {
+    super(props);
 
     this.getItemSize = index => {
       const item = this.props.data[index];
@@ -658,6 +673,11 @@ class DropdownCoreVirtualized extends React.Component {
         return DROPDOWN_ITEM_HEIGHT;
       }
     };
+
+    this.state = {
+      height: getDropdownMenuHeight(props.data),
+      width: props.width
+    };
   }
 
   componentDidMount() {
@@ -697,24 +717,12 @@ class DropdownCoreVirtualized extends React.Component {
   }
 
   setHeight() {
-    const height = this.getHeight();
+    const height = getDropdownMenuHeight(this.props.data);
     this.setState({
       height
     });
   }
 
-  getHeight() {
-    return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
-      if (SeparatorItem.isClassOf(item.component)) {
-        return sum + SEPARATOR_ITEM_HEIGHT;
-      } else if (SearchTextInput.isClassOf(item.component)) {
-        return sum + SEARCH_ITEM_HEIGHT;
-      } else {
-        return sum + DROPDOWN_ITEM_HEIGHT;
-      }
-    }, 0);
-  }
-
   renderInitialItems() {
     const {
       data
@@ -1273,12 +1281,12 @@ class DropdownCore extends React.Component {
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
+    const initialHeight = 12;
+    const maxDropdownHeight = getDropdownMenuHeight(this.props.items, initialHeight);
     return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
       role: this.props.role,
-      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, {
-        minWidth: minDropdownWidth
-      }, dropdownStyle]
+      style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight), dropdownStyle]
     }, listRenderer, this.maybeRenderNoResults());
   }