diff --git a/package.json b/package.json index 7617cc2c58c57..0c7ba464ce762 100644 --- a/package.json +++ b/package.json @@ -245,7 +245,7 @@ "papaparse": "4.6.3", "prismjs": "1.19.0", "prop-types": "15.7.2", - "rc-cascader": "0.17.5", + "rc-cascader": "1.0.1", "re-resizable": "^6.2.0", "react": "16.12.0", "react-dom": "16.12.0", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 9e636bb2b4079..919e120279287 100644 --- a/packages/grafana-ui/package.json +++ b/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", diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx index 588ea03673605..c64de1613dc12 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx +++ b/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 = props => ( - - - -); +export const ButtonCascader: React.FC = props => { + const { onChange, loadData, ...rest } = props; + return ( + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx index f1c05cfe4f67b..6320b48707ed3 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx +++ b/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" /> ); }; diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx index 6db4c13a50a74..3fbd8afc56d6d 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx +++ b/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 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 this.props.onSelect(value); }; - onClick = () => { - this.setState({ - focusCascade: true, - }); - }; - onBlur = () => { this.setState({ isSearching: false, @@ -191,12 +193,10 @@ export class Cascader extends React.PureComponent /> ) : ( {}} diff --git a/packages/grafana-ui/src/components/Cascader/optionMappings.ts b/packages/grafana-ui/src/components/Cascader/optionMappings.ts new file mode 100644 index 0000000000000..294f5ddb7e4de --- /dev/null +++ b/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, + }; +}; diff --git a/yarn.lock b/yarn.lock index 6039a16dbe766..45a2becd6c46e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20092,6 +20092,16 @@ rc-align@^2.4.0: prop-types "^15.5.8" rc-util "^4.0.4" +rc-align@^3.0.0-rc.0: + version "3.0.0-rc.1" + resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-3.0.0-rc.1.tgz#32d1fac860d12bb85e9b8cafbbdef79f3f537674" + integrity sha512-GbofumhCUb7SxP410j/fbtR2M9Zml+eoZSdaliZh6R3NhfEj5zP4jcO3HG3S9C9KIcXQQtd/cwVHkb9Y0KU7Hg== + dependencies: + classnames "2.x" + dom-align "^1.7.0" + rc-util "^4.12.0" + resize-observer-polyfill "^1.5.1" + rc-animate@2.x: version "2.10.1" resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.10.1.tgz#c0c4faab50e55535e903e66f207e49891ba86d94" @@ -20105,47 +20115,54 @@ rc-animate@2.x: rc-util "^4.8.0" react-lifecycles-compat "^3.0.4" -rc-cascader@0.17.5: - version "0.17.5" - resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-0.17.5.tgz#4fde91d23b7608c420263c38eee9c0687f80f7dc" - integrity sha512-WYMVcxU0+Lj+xLr4YYH0+yXODumvNXDcVEs5i7L1mtpWwYkubPV/zbQpn+jGKFCIW/hOhjkU4J1db8/P/UKE7A== +rc-animate@^2.10.2: + version "2.10.3" + resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.10.3.tgz#163d5e29281a4ff82d53ee7918eeeac856b756f9" + integrity sha512-A9qQ5Y8BLlM7EhuCO3fWb/dChndlbWtY/P5QvPqBU7h4r5Q2QsvsbpTGgdYZATRDZbTRnJXXfVk9UtlyS7MBLg== + dependencies: + babel-runtime "6.x" + classnames "^2.2.6" + css-animation "^1.3.2" + prop-types "15.x" + raf "^3.4.0" + rc-util "^4.15.3" + react-lifecycles-compat "^3.0.4" + +rc-cascader@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-1.0.1.tgz#770de1e1fa7bd559aabd4d59e525819b8bc809b7" + integrity sha512-3mk33+YKJBP1XSrTYbdVLuCC73rUDq5STNALhvua5i8vyIgIxtb5fSl96JdWWq1Oj8tIBoHnCgoEoOYnIXkthQ== dependencies: array-tree-filter "^2.1.0" - prop-types "^15.5.8" - rc-trigger "^2.2.0" + rc-trigger "^4.0.0" rc-util "^4.0.4" - react-lifecycles-compat "^3.0.4" - shallow-equal "^1.0.0" warning "^4.0.1" -rc-drawer@3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-3.0.2.tgz#1c42b2b7790040344f8f05f1d132b1ef0e97b783" - integrity sha512-oPScGXB/8/ov9gEFLxPH8RBv/9jLTZboZtyF/GgrrnCAvbFwUxXdELH6n6XIowmuDKKvTGIMgZdnao0T46Yv3A== +rc-drawer@3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-3.1.3.tgz#cbcb04d4c07f0b66f2ece11d847f4a1bd80ea0b7" + integrity sha512-2z+RdxmzXyZde/1OhVMfDR1e/GBswFeWSZ7FS3Fdd0qhgVdpV1wSzILzzxRaT481ItB5hOV+e8pZT07vdJE8kg== dependencies: - babel-runtime "^6.26.0" classnames "^2.2.6" - rc-util "^4.11.2" + rc-util "^4.16.1" react-lifecycles-compat "^3.0.4" -rc-slider@8.7.1: - version "8.7.1" - resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.7.1.tgz#9ed07362dc93489a38e654b21b8122ad70fd3c42" - integrity sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g== +rc-slider@9.2.3: + version "9.2.3" + resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.2.3.tgz#b80f03ada71ef3ec35dfcb67d2e0f87d84ce2781" + integrity sha512-mlERrweLA4KNFvO0dkhQv3Du0Emq7DyAFV6N7jgrAwfUZsX4eB1T1iJWYMtsguHXbMyje+PACAqwsrfhZIN0bQ== dependencies: babel-runtime "6.x" classnames "^2.2.5" - prop-types "^15.5.4" - rc-tooltip "^3.7.0" + rc-tooltip "^4.0.0" rc-util "^4.0.4" - react-lifecycles-compat "^3.0.4" shallowequal "^1.1.0" warning "^4.0.3" -rc-time-picker@^3.7.2: - version "3.7.2" - resolved "https://registry.yarnpkg.com/rc-time-picker/-/rc-time-picker-3.7.2.tgz#fabe5501adf1374d31a2d3b47f1ba89fc2dc2467" - integrity sha512-UVWO9HXGyZoM4I2THlJsEAFcZQz+tYwdcpoHXCEFZsRLz9L2+7vV4EMp9Wa3UrtzMFEt83qSAX/90dCJeKl9sg== +rc-time-picker@^3.7.3: + version "3.7.3" + resolved "https://registry.yarnpkg.com/rc-time-picker/-/rc-time-picker-3.7.3.tgz#65a8de904093250ae9c82b02a4905e0f995e23e2" + integrity sha512-Lv1Mvzp9fRXhXEnRLO4nW6GLNxUkfAZ3RsiIBsWjGjXXvMNjdr4BX/ayElHAFK0DoJqOhm7c5tjmIYpEOwcUXg== dependencies: classnames "2.x" moment "2.x" @@ -20154,16 +20171,14 @@ rc-time-picker@^3.7.2: rc-trigger "^2.2.0" react-lifecycles-compat "^3.0.4" -rc-tooltip@^3.7.0: - version "3.7.3" - resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-3.7.3.tgz#280aec6afcaa44e8dff0480fbaff9e87fc00aecc" - integrity sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww== +rc-tooltip@^4.0.0: + version "4.0.3" + resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-4.0.3.tgz#728b760863643ec2e85827a2e7fb28d961b3b759" + integrity sha512-HNyBh9/fPdds0DXja8JQX0XTIHmZapB3lLzbdn74aNSxXG1KUkt+GK4X1aOTRY5X9mqm4uUKdeFrn7j273H8gw== dependencies: - babel-runtime "6.x" - prop-types "^15.5.8" - rc-trigger "^2.2.2" + rc-trigger "^4.0.0" -rc-trigger@^2.2.0, rc-trigger@^2.2.2: +rc-trigger@^2.2.0: version "2.6.5" resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-2.6.5.tgz#140a857cf28bd0fa01b9aecb1e26a50a700e9885" integrity sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw== @@ -20176,7 +20191,19 @@ rc-trigger@^2.2.0, rc-trigger@^2.2.2: rc-util "^4.4.0" react-lifecycles-compat "^3.0.4" -rc-util@^4.0.4, rc-util@^4.11.2, rc-util@^4.4.0, rc-util@^4.8.0: +rc-trigger@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-4.0.2.tgz#42fe7bdb6a5b34035e20fa9ebfad69ec948b56be" + integrity sha512-to5S1NhK10rWHIgQpoQdwIhuDc2Ok4R4/dh5NLrDt6C+gqkohsdBCYiPk97Z+NwGhRU8N+dbf251bivX8DkzQg== + dependencies: + classnames "^2.2.6" + prop-types "15.x" + raf "^3.4.1" + rc-align "^3.0.0-rc.0" + rc-animate "^2.10.2" + rc-util "^4.20.0" + +rc-util@^4.0.4, rc-util@^4.4.0, rc-util@^4.8.0: version "4.13.0" resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.13.0.tgz#75682e50a934e7d32ada7ee48fc9f5b20fc0143f" integrity sha512-rjfPy+afc2n40APHp6GYScXfgwHuUnYLz/4SCEWRaF8CHXKR8xw598LtPA36J3fEXENuMm6liO/CoKBoSrYCDw== @@ -20187,6 +20214,18 @@ rc-util@^4.0.4, rc-util@^4.11.2, rc-util@^4.4.0, rc-util@^4.8.0: react-lifecycles-compat "^3.0.4" shallowequal "^0.2.2" +rc-util@^4.12.0, rc-util@^4.15.3, rc-util@^4.16.1, rc-util@^4.20.0: + version "4.20.1" + resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.20.1.tgz#a5976eabfc3198ed9b8e79ffb8c53c231db36e77" + integrity sha512-EGlDg9KPN0POzmAR2hk9ZyFc3DmJIrXwlC8NoDxJguX2LTINnVqwadLIVauLfYgYISMiFYFrSHiFW+cqUhZ5dA== + dependencies: + add-dom-event-listener "^1.1.0" + babel-runtime "6.x" + prop-types "^15.5.10" + react-is "^16.12.0" + react-lifecycles-compat "^3.0.4" + shallowequal "^1.1.0" + rc@^1.0.1, rc@^1.1.6, rc@^1.2.7: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -22299,7 +22338,7 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallow-equal@^1.0.0, shallow-equal@^1.1.0: +shallow-equal@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc" integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==