apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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>
pull/23070/head
Lukas Siatka 5 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 8
      packages/grafana-ui/package.json
  3. 23
      packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
  4. 1
      packages/grafana-ui/src/components/Cascader/Cascader.story.tsx
  5. 25
      packages/grafana-ui/src/components/Cascader/Cascader.tsx
  6. 29
      packages/grafana-ui/src/components/Cascader/optionMappings.ts
  7. 109
      yarn.lock

2
package.json
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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==

Write Preview
Loading…
Cancel
Save