IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DevEnv: update frontend dependencies - rc (#22977)

Browse Source 
* 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>
This commit is contained in:
Lukas Siatka 2020-03-25 10:10:26 +01:00 committed by GitHub
parent e8efd17ea9
commit bcad3fbda1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 138 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

8
packages/grafana-ui/package.json
View File

@ -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",

23
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
View File

@ -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>
);
};

1
packages/grafana-ui/src/components/Cascader/Cascader.story.tsx
View File

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

25
packages/grafana-ui/src/components/Cascader/Cascader.tsx
View File

@ -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={() => {}}

29
packages/grafana-ui/src/components/Cascader/optionMappings.ts Normal file
View File

@ -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,
};
};

109
yarn.lock
View File

@ -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==