maxHeight and style overrides

public/app/core/components/Picker/Unit/UnitGroup.tsx

@@ -9,7 +9,7 @@ interface State {
   expanded: boolean;
   expanded: boolean;
 }
 }
 
 
-export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
+export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
   state = {
   state = {
     expanded: false,
     expanded: false,
   };
   };
@@ -24,10 +24,8 @@ export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
     const { children, label } = this.props;
     const { children, label } = this.props;
     const { expanded } = this.state;
     const { expanded } = this.state;
 
 
-    console.log(children);
-
     return (
     return (
-      <div className="width-18 unit-picker-group" style={{ marginBottom: '5px' }}>
+      <div className="width-21 unit-picker-group" style={{ marginBottom: '5px' }}>
         <div className="unit-picker-group-item" onClick={this.onToggleChildren}>
         <div className="unit-picker-group-item" onClick={this.onToggleChildren}>
           <span style={{ textTransform: 'capitalize' }}>{label}</span>
           <span style={{ textTransform: 'capitalize' }}>{label}</span>
           <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
           <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}

public/app/core/components/Picker/Unit/UnitPicker.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import Select from 'react-select';
 import Select from 'react-select';
-import { UnitGroup } from './UnitGroup';
+import UnitGroup from './UnitGroup';
 import UnitOption from './UnitOption';
 import UnitOption from './UnitOption';
 import UnitMenu from './UnitMenu';
 import UnitMenu from './UnitMenu';
 import ResetStyles from '../ResetStyles';
 import ResetStyles from '../ResetStyles';
@@ -12,7 +12,34 @@ interface Props {
 
 
 export default class UnitPicker extends PureComponent<Props> {
 export default class UnitPicker extends PureComponent<Props> {
   render() {
   render() {
-    const options = kbn.getUnitFormats();
+    const unitGroups = kbn.getUnitFormats();
+    const options = unitGroups.map(group => {
+      const options = group.submenu.map(unit => {
+        return {
+          label: unit.text,
+          value: unit.value,
+        };
+      });
+
+      return {
+        label: group.text,
+        options,
+      };
+    });
+
+    const styles = {
+      ...ResetStyles,
+      menu: () => ({
+        maxHeight: '500px',
+        overflow: 'scroll',
+      }),
+      menuList: () =>
+        ({
+          WebkitOverflowScrolling: 'touch',
+          overflowY: 'auto',
+          position: 'relative',
+        } as React.CSSProperties),
+    };
 
 
     return (
     return (
       <Select
       <Select
@@ -26,7 +53,7 @@ export default class UnitPicker extends PureComponent<Props> {
           Option: UnitOption,
           Option: UnitOption,
           Menu: UnitMenu,
           Menu: UnitMenu,
         }}
         }}
-        styles={ResetStyles}
+        styles={styles}
       />
       />
     );
     );
   }
   }