Chore: Move and wrap Cascader component to @grafana/ui (#20246)

* Chore: Move and wrap Cascader component to @grafana/ui
Closes #19042

* Removes unneeded props from interface and removes rc-trigger

* Removes more unneeded props

packages/grafana-ui/package.json

@@ -39,6 +39,7 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "papaparse": "4.6.3",
+    "rc-cascader": "0.17.5",
     "rc-drawer": "3.0.2",
     "rc-time-picker": "^3.7.2",
     "react": "16.8.6",

packages/grafana-ui/src/components/Cascader/Cascader.story.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, boolean, object } from '@storybook/addon-knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { Cascader } from './Cascader';
+
+const getKnobs = () => {
+  return {
+    disabled: boolean('Disabled', false),
+    text: text('Button Text', 'Click me!'),
+    options: object('Options', [
+      { label: 'A', value: 'A', children: [{ label: 'B', value: 'B' }, { label: 'C', value: 'C' }] },
+      { label: 'D', value: 'D' },
+    ]),
+  };
+};
+
+const CascaderStories = storiesOf('UI/Cascader', module);
+
+CascaderStories.addDecorator(withCenteredStory);
+
+CascaderStories.add('default', () => {
+  const { disabled, text, options } = getKnobs();
+  return <Cascader disabled={disabled} options={options} value={['A']} expandIcon={null} buttonText={text} />;
+});

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+// @ts-ignore
+import RCCascader from 'rc-cascader';
+
+export interface CascaderOption {
+  label: string;
+  value: string;
+
+  children?: CascaderOption[];
+  disabled?: boolean;
+}
+
+export interface CascaderProps {
+  options: CascaderOption[];
+  buttonText: string;
+  disabled?: boolean;
+  expandIcon?: React.ReactNode;
+  value?: string[];
+
+  loadData?: (selectedOptions: CascaderOption[]) => void;
+  onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
+  onPopupVisibleChange?: (visible: boolean) => void;
+}
+
+export const Cascader: React.FC<CascaderProps> = props => (
+  <RCCascader {...props}>
+    <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
+      {props.buttonText} <i className="fa fa-caret-down" />
+    </button>
+  </RCCascader>
+);

packages/grafana-ui/src/components/Cascader/_Cascader.scss

@@ -0,0 +1,190 @@
+.rc-cascader {
+  font-size: 12px;
+
+  &-menus {
+    font-size: 12px;
+    overflow: hidden;
+    background: $panel-bg;
+    position: absolute;
+    border: $panel-border;
+    border-radius: $border-radius;
+    box-shadow: $typeahead-shadow;
+    white-space: nowrap;
+
+    &-hidden {
+      display: none;
+    }
+
+    &.slide-up-enter,
+    &.slide-up-appear {
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      transform-origin: 0 0;
+      opacity: 0;
+      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+      animation-play-state: paused;
+    }
+
+    &.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement,
+    &.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement {
+      &-bottomLeft {
+        animation-name: SlideUpIn;
+        animation-play-state: running;
+      }
+
+      &-topLeft {
+        animation-name: SlideDownIn;
+        animation-play-state: running;
+      }
+    }
+
+    &.slide-up-leave {
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      transform-origin: 0 0;
+      opacity: 1;
+      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+      animation-play-state: paused;
+
+      &.slide-up-leave-active.rc-cascader-menus-placement {
+        &-bottomLeft {
+          animation-name: SlideUpOut;
+          animation-play-state: running;
+        }
+
+        &-topLeft {
+          animation-name: SlideDownOut;
+          animation-play-state: running;
+        }
+      }
+    }
+  }
+
+  &-menu {
+    display: inline-block;
+    /* width: 100px; */
+    max-width: 50vw;
+    height: 192px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-right: $panel-border;
+    overflow: auto;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &-item {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 2.5em 0 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: all 0.3s ease;
+      position: relative;
+
+      &:hover {
+        background: $typeahead-selected-bg;
+      }
+
+      &-disabled {
+        cursor: not-allowed;
+        color: $text-color-weak;
+
+        &:hover {
+          background: transparent;
+        }
+
+        &:after {
+          position: absolute;
+          right: 12px;
+          content: 'loading';
+          color: $text-color-weak;
+          font-style: italic;
+        }
+      }
+
+      &-active {
+        color: $typeahead-selected-color;
+        background: $typeahead-selected-bg;
+
+        &:hover {
+          color: $typeahead-selected-color;
+          background: $typeahead-selected-bg;
+        }
+      }
+
+      &-expand {
+        position: relative;
+
+        &:after {
+          content: '>';
+          font-size: 12px;
+          color: $text-color-weak;
+          position: absolute;
+          right: 16px;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+}
+
+@keyframes SlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes SlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+}
+
+@keyframes SlideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 100%;
+    transform: scaleY(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes SlideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0% 100%;
+    transform: scaleY(0.8);
+  }
+}

packages/grafana-ui/src/components/index.scss

@@ -1,18 +1,19 @@
+@import 'BarGauge/BarGauge';
+@import 'Cascader/Cascader';
+@import 'ColorPicker/ColorPicker';
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'DeleteButton/DeleteButton';
-@import 'ThresholdsEditor/ThresholdsEditor';
-@import 'Table/Table';
-@import 'Table/TableInputCSV';
-@import 'Tooltip/Tooltip';
-@import 'Select/Select';
-@import 'PanelOptionsGroup/PanelOptionsGroup';
-@import 'PanelOptionsGrid/PanelOptionsGrid';
-@import 'ColorPicker/ColorPicker';
-@import 'ValueMappingsEditor/ValueMappingsEditor';
+@import 'Drawer/Drawer';
 @import 'EmptySearchResult/EmptySearchResult';
 @import 'FormField/FormField';
-@import 'BarGauge/BarGauge';
+@import 'PanelOptionsGrid/PanelOptionsGrid';
+@import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'RefreshPicker/RefreshPicker';
-@import 'TimePicker/TimePicker';
+@import 'Select/Select';
+@import 'Table/Table';
+@import 'Table/TableInputCSV';
+@import 'ThresholdsEditor/ThresholdsEditor';
 @import 'TimePicker/TimeOfDayPicker';
-@import 'Drawer/Drawer';
+@import 'TimePicker/TimePicker';
+@import 'Tooltip/Tooltip';
+@import 'ValueMappingsEditor/ValueMappingsEditor';

packages/grafana-ui/src/components/index.ts

@@ -13,6 +13,7 @@ export { IndicatorsContainer } from './Select/IndicatorsContainer';
 export { NoOptionsMessage } from './Select/NoOptionsMessage';
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export { ButtonSelect } from './Select/ButtonSelect';
+export { Cascader, CascaderOption } from './Cascader/Cascader';
 
 // Forms
 export { FormLabel } from './FormLabel/FormLabel';