From 2b8eab8c8c1a36e2874799bc177f25f76a5ad603 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 14:11:51 +0100
Subject: [PATCH] maxHeight and style overrides

---
 .../core/components/Picker/Unit/UnitGroup.tsx |  6 ++--
 .../components/Picker/Unit/UnitPicker.tsx     | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx
index 8ecc8f9b978..c76d9ae16a0 100644
--- a/public/app/core/components/Picker/Unit/UnitGroup.tsx
+++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx
@@ -9,7 +9,7 @@ interface State {
   expanded: boolean;
 }
 
-export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
+export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
   state = {
     expanded: false,
   };
@@ -24,10 +24,8 @@ export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
     const { children, label } = this.props;
     const { expanded } = this.state;
 
-    console.log(children);
-
     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}>
           <span style={{ textTransform: 'capitalize' }}>{label}</span>
           <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
index 5a5bd5ee515..8d9d6d8bb1c 100644
--- a/public/app/core/components/Picker/Unit/UnitPicker.tsx
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import Select from 'react-select';
-import { UnitGroup } from './UnitGroup';
+import UnitGroup from './UnitGroup';
 import UnitOption from './UnitOption';
 import UnitMenu from './UnitMenu';
 import ResetStyles from '../ResetStyles';
@@ -12,7 +12,34 @@ interface Props {
 
 export default class UnitPicker extends PureComponent<Props> {
   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 (
       <Select
@@ -26,7 +53,7 @@ export default class UnitPicker extends PureComponent<Props> {
           Option: UnitOption,
           Menu: UnitMenu,
         }}
-        styles={ResetStyles}
+        styles={styles}
       />
     );
   }