Skip to content

N
nexpie-grafana-theme
Commit 4483bcad by kay delaney Committed by GitHub
Options

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
parent 2ca1cc56
Showing with 249 additions and 171 deletions
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 → 100644
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 → 100644
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>
);
public/vendor/css/rc-cascader.scss → packages/grafana-ui/src/components/Cascader/_Cascader.scss
.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;
}
}
}
}
}
.rc-cascader-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;
}
.rc-cascader-menus-hidden {
display: none;
}
.rc-cascader-menus.slide-up-enter,
.rc-cascader-menus.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;
}
.rc-cascader-menus.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;
}
.rc-cascader-menus.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement-bottomLeft,
.rc-cascader-menus.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement-bottomLeft {
animation-name: SlideUpIn;
animation-play-state: running;
}
.rc-cascader-menus.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement-topLeft,
.rc-cascader-menus.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement-topLeft {
animation-name: SlideDownIn;
animation-play-state: running;
}
.rc-cascader-menus.slide-up-leave.slide-up-leave-active.rc-cascader-menus-placement-bottomLeft {
animation-name: SlideUpOut;
animation-play-state: running;
}
.rc-cascader-menus.slide-up-leave.slide-up-leave-active.rc-cascader-menus-placement-topLeft {
animation-name: SlideDownOut;
animation-play-state: running;
}
.rc-cascader-menu {
display: inline-block;
/* width: 100px; */
max-width: 50vw;
height: 192px;
list-style: none;
margin: 0;
padding: 0;
border-right: $panel-border;
overflow: auto;
}
.rc-cascader-menu:last-child {
border-right: 0;
}
.rc-cascader-menu-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;
}
.rc-cascader-menu-item:hover {
background: $typeahead-selected-bg;
}
.rc-cascader-menu-item-disabled {
cursor: not-allowed;
color: $text-color-weak;
}
.rc-cascader-menu-item-disabled:hover {
background: transparent;
}
.rc-cascader-menu-item-loading:after {
position: absolute;
right: 12px;
content: 'loading';
color: $text-color-weak;
font-style: italic;
}
.rc-cascader-menu-item-active {
color: $typeahead-selected-color;
background: $typeahead-selected-bg;
}
.rc-cascader-menu-item-active:hover {
color: $typeahead-selected-color;
background: $typeahead-selected-bg;
}
.rc-cascader-menu-item-expand {
position: relative;
}
.rc-cascader-menu-item-expand: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%;
......
packages/grafana-ui/src/components/index.scss
@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';
......
public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.tsx
import React from 'react';
import { ExploreQueryFieldProps } from '@grafana/data';
// @ts-ignore
import Cascader from 'rc-cascader';
import { Cascader, CascaderOption } from '@grafana/ui';
import InfluxQueryModel from '../influx_query_model';
import { AdHocFilterField, KeyValuePair } from 'app/features/explore/AdHocFilterField';
......@@ -9,7 +8,6 @@ import { TemplateSrv } from 'app/features/templating/template_srv';
import InfluxDatasource from '../datasource';
import { InfluxQueryBuilder } from '../query_builder';
import { InfluxQuery, InfluxOptions } from '../types';
import { CascaderOption } from '../../loki/components/LokiQueryFieldForm';
export interface Props extends ExploreQueryFieldProps<InfluxDatasource, InfluxQuery, InfluxOptions> {}
......@@ -139,15 +137,13 @@ export class InfluxLogsQueryField extends React.PureComponent<Props, State> {
<div className="gf-form-inline gf-form-inline--nowrap">
<div className="gf-form flex-shrink-0">
<Cascader
buttonText={cascadeText}
options={measurements}
disabled={!hasMeasurement}
value={[measurement, field]}
onChange={this.onMeasurementsChange}
expandIcon={null}
>
<button className="gf-form-label gf-form-label--btn" disabled={!hasMeasurement}>
{cascadeText} <i className="fa fa-caret-down" />
</button>
</Cascader>
/>
</div>
<div className="flex-shrink-1 flex-flow-column-nowrap">
{measurement && (
......
public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
// Libraries
import React from 'react';
// @ts-ignore
import Cascader from 'rc-cascader';
import { SlatePrism, TypeaheadOutput, SuggestionsState, QueryField, TypeaheadInput, BracesPlugin } from '@grafana/ui';
import {
Cascader,
CascaderOption,
SlatePrism,
TypeaheadOutput,
SuggestionsState,
QueryField,
TypeaheadInput,
BracesPlugin,
} from '@grafana/ui';
// Utils & Services
// dom also includes Element polyfills
......@@ -54,17 +61,10 @@ function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadTe
return suggestion;
}
export interface CascaderOption {
label: string;
value: string;
children?: CascaderOption[];
disabled?: boolean;
}
export interface LokiQueryFieldFormProps extends ExploreQueryFieldProps<LokiDatasource, LokiQuery> {
history: LokiHistoryItem[];
syntax: Grammar;
logLabelOptions: any[];
logLabelOptions: CascaderOption[];
syntaxLoaded: boolean;
absoluteRange: AbsoluteTimeRange;
onLoadOptions: (selectedOptions: CascaderOption[]) => void;
......@@ -150,19 +150,13 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
<div className="gf-form">
<Cascader
options={logLabelOptions || []}
disabled={buttonDisabled}
buttonText={chooserText}
onChange={this.onChangeLogLabels}
loadData={onLoadOptions}
expandIcon={null}
onPopupVisibleChange={(isVisible: boolean) => {
if (isVisible && onLabelsRefresh) {
onLabelsRefresh();
}
}}
>
<button className="gf-form-label gf-form-label--btn" disabled={buttonDisabled}>
{chooserText} <i className="fa fa-caret-down" />
</button>
</Cascader>
onPopupVisibleChange={isVisible => isVisible && onLabelsRefresh && onLabelsRefresh()}
/>
</div>
<div className="gf-form gf-form--grow">
<QueryField
......
public/app/plugins/datasource/loki/components/useLokiLabels.ts
import { useState, useEffect } from 'react';
import { AbsoluteTimeRange } from '@grafana/data';
import { CascaderOption } from '@grafana/ui';
import LokiLanguageProvider from 'app/plugins/datasource/loki/language_provider';
import { CascaderOption } from 'app/plugins/datasource/loki/components/LokiQueryFieldForm';
import { useRefMounted } from 'app/core/hooks/useRefMounted';
/**
......
public/app/plugins/datasource/loki/components/useLokiSyntax.test.ts
import { renderHook, act } from 'react-hooks-testing-library';
import { AbsoluteTimeRange } from '@grafana/data';
import { CascaderOption } from '@grafana/ui';
import LanguageProvider from 'app/plugins/datasource/loki/language_provider';
import { useLokiSyntax } from './useLokiSyntax';
import { CascaderOption } from 'app/plugins/datasource/loki/components/LokiQueryFieldForm';
import { makeMockLokiDatasource } from '../mocks';
describe('useLokiSyntax hook', () => {
......
public/app/plugins/datasource/loki/components/useLokiSyntax.ts
import { useState, useEffect } from 'react';
import Prism from 'prismjs';
import { AbsoluteTimeRange } from '@grafana/data';
import { CascaderOption } from '@grafana/ui';
import LokiLanguageProvider from 'app/plugins/datasource/loki/language_provider';
import { useLokiLabels } from 'app/plugins/datasource/loki/components/useLokiLabels';
import { CascaderOption } from 'app/plugins/datasource/loki/components/LokiQueryFieldForm';
import { useRefMounted } from 'app/core/hooks/useRefMounted';
const PRISM_SYNTAX = 'promql';
......
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
import _ from 'lodash';
import React from 'react';
// @ts-ignore
import Cascader from 'rc-cascader';
import { Plugin } from 'slate';
import { SlatePrism, TypeaheadInput, TypeaheadOutput, QueryField, BracesPlugin } from '@grafana/ui';
import {
Cascader,
CascaderOption,
SlatePrism,
TypeaheadInput,
TypeaheadOutput,
QueryField,
BracesPlugin,
} from '@grafana/ui';
import Prism from 'prismjs';
......@@ -93,13 +99,6 @@ export function willApplySuggestion(suggestion: string, { typeaheadContext, type
return suggestion;
}
interface CascaderOption {
label: string;
value: string;
children?: CascaderOption[];
disabled?: boolean;
}
interface PromQueryFieldProps extends ExploreQueryFieldProps<PrometheusDatasource, PromQuery, PromOptions> {
history: Array<HistoryItem<PromQuery>>;
}
......@@ -284,11 +283,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
<>
<div className="gf-form-inline gf-form-inline--nowrap">
<div className="gf-form flex-shrink-0">
<Cascader options={metricsOptions} onChange={this.onChangeMetrics} expandIcon={null}>
<button className="gf-form-label gf-form-label--btn" disabled={buttonDisabled}>
{chooserText} <i className="fa fa-caret-down" />
</button>
</Cascader>
<Cascader
options={metricsOptions}
buttonText={chooserText}
disabled={buttonDisabled}
onChange={this.onChangeMetrics}
expandIcon={null}
/>
</div>
<div className="gf-form gf-form--grow flex-shrink-1">
<QueryField
......
public/sass/_grafana.scss
// DEPENDENCIES
@import '../../node_modules/react-table/react-table.css';
// VENDOR
@import '../vendor/css/rc-cascader.scss';
// MIXINS
@import 'mixins/mixins';
@import 'mixins/animations';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment