DevEnv: update frontend dependencies - rc (#22977)

* DevEnv: updates rc-cascader 0.17.5 -> 1.0.1

* DevEnv: updates rc-cascader 0.17.5 -> 1.0.1 in grafana-ui package

* DevEnv: updates rc-drawer 3.0.2 -> 3.1.3 in grafana-ui package

* DevEnv: updates rc-time-picker 3.7.2 -> 3.7.3 in grafana-ui package

* DevEnv: updates rc-slider 8.7.1 -> 9.2.3 in grafana-ui package

* Fix option mappings

* Some clean up of the code.

* removed unused function.

Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

packages/grafana-ui/package.json

@@ -46,10 +46,10 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "papaparse": "4.6.3",
-    "rc-cascader": "0.17.5",
-    "rc-drawer": "3.0.2",
-    "rc-slider": "8.7.1",
-    "rc-time-picker": "^3.7.2",
+    "rc-cascader": "1.0.1",
+    "rc-drawer": "3.1.3",
+    "rc-slider": "9.2.3",
+    "rc-time-picker": "^3.7.3",
     "react": "16.12.0",
     "react-calendar": "2.19.2",
     "react-color": "2.18.0",

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

@@ -4,6 +4,7 @@ import { Icon } from '../Icon/Icon';
 // @ts-ignore
 import RCCascader from 'rc-cascader';
 import { CascaderOption } from '../Cascader/Cascader';
+import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
 
 export interface ButtonCascaderProps {
   options: CascaderOption[];
@@ -17,10 +18,18 @@ export interface ButtonCascaderProps {
   onPopupVisibleChange?: (visible: boolean) => void;
 }
 
-export const ButtonCascader: React.FC<ButtonCascaderProps> = props => (
-  <RCCascader {...props} expandIcon={null}>
-    <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
-      {props.children} <Icon name="caret-down" />
-    </button>
-  </RCCascader>
-);
+export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
+  const { onChange, loadData, ...rest } = props;
+  return (
+    <RCCascader
+      onChange={onChangeCascader(onChange)}
+      loadData={onLoadDataCascader(loadData)}
+      {...rest}
+      expandIcon={null}
+    >
+      <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
+        {props.children} <Icon name="caret-down" />
+      </button>
+    </RCCascader>
+  );
+};

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

@@ -57,6 +57,7 @@ export const withCustomValue = () => {
       formatCreateLabel={val => onCreateLabel + val}
       initialValue="Custom Initial Value"
       onSelect={val => console.log(val)}
+      size="md"
     />
   );
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Icon } from '../Icon/Icon';
-// @ts-ignore
 import RCCascader from 'rc-cascader';
 
 import { Select } from '../Forms/Select/Select';
@@ -8,6 +7,7 @@ import { FormInputSize } from '../Forms/types';
 import { Input } from '../Forms/Input/Input';
 import { SelectableValue } from '@grafana/data';
 import { css } from 'emotion';
+import { onChangeCascader } from './optionMappings';
 
 interface CascaderProps {
   /** The seperator between levels in the search */
@@ -32,11 +32,18 @@ interface CascaderState {
 }
 
 export interface CascaderOption {
+  /**
+   *  The value used under the hood
+   */
   value: any;
+  /**
+   *  The label to display in the UI
+   */
   label: string;
   /** Items will be just flattened into the main list of items recursively. */
   items?: CascaderOption[];
   disabled?: boolean;
+  /** Avoid using */
   title?: string;
   /**  Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compatibility.*/
   children?: CascaderOption[];
@@ -104,6 +111,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   onChange = (value: string[], selectedOptions: CascaderOption[]) => {
     this.setState({
       rcValue: value,
+      focusCascade: true,
       activeLabel: selectedOptions[selectedOptions.length - 1].label,
     });
 
@@ -130,12 +138,6 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
     this.props.onSelect(value);
   };
 
-  onClick = () => {
-    this.setState({
-      focusCascade: true,
-    });
-  };
-
   onBlur = () => {
     this.setState({
       isSearching: false,
@@ -191,12 +193,10 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
           />
         ) : (
           <RCCascader
-            onChange={this.onChange}
-            onClick={this.onClick}
+            onChange={onChangeCascader(this.onChange)}
             options={this.props.options}
-            isFocused={focusCascade}
-            onBlur={this.onBlurCascade}
-            value={rcValue}
+            changeOnSelect
+            value={rcValue.value}
             fieldNames={{ label: 'label', value: 'value', children: 'items' }}
             expandIcon={null}
             // Required, otherwise the portal that the popup is shown in will render under other components
@@ -208,6 +208,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
               <Input
                 size={size}
                 placeholder={placeholder}
+                onBlur={this.onBlurCascade}
                 value={activeLabel}
                 onKeyDown={this.onInputKeyDown}
                 onChange={() => {}}

packages/grafana-ui/src/components/Cascader/optionMappings.ts

@@ -0,0 +1,29 @@
+import { CascaderOption as RCCascaderOption } from 'rc-cascader/lib/Cascader';
+import { CascaderOption } from './Cascader';
+
+type onChangeType = ((values: string[], options: CascaderOption[]) => void) | undefined;
+
+export const onChangeCascader = (onChanged: onChangeType) => (values: string[], options: RCCascaderOption[]) => {
+  if (onChanged) {
+    onChanged(values, fromRCOptions(options));
+  }
+};
+
+type onLoadDataType = ((options: CascaderOption[]) => void) | undefined;
+
+export const onLoadDataCascader = (onLoadData: onLoadDataType) => (options: RCCascaderOption[]) => {
+  if (onLoadData) {
+    onLoadData(fromRCOptions(options));
+  }
+};
+
+const fromRCOptions = (options: RCCascaderOption[]): CascaderOption[] => {
+  return options.map(fromRCOption);
+};
+
+const fromRCOption = (option: RCCascaderOption): CascaderOption => {
+  return {
+    value: option.value ?? '',
+    label: (option.label as unknown) as string,
+  };
+};