mirror of https://github.com/grafana/grafana
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 propspull/20350/head^2
kay delaney
6 years ago
committed by
GitHub
parent
2ca1cc5645
commit
4483bcadec
@ -0,0 +1,25 @@ |
||||
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} />; |
||||
}); |
||||
@ -0,0 +1,32 @@ |
||||
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> |
||||
); |
||||
@ -0,0 +1,190 @@ |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@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%; |
||||
transform: scaleY(0.8); |
||||
} |
||||
} |
||||
@ -1,18 +1,19 @@ |
||||
@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'; |
||||
|
||||
@ -1,160 +0,0 @@ |
||||
.rc-cascader { |
||||
font-size: 12px; |
||||
} |
||||
.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%; |
||||
transform: scaleY(0.8); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue