diff --git a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx b/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx index 596b7fd444a..6b0a0ad43ee 100644 --- a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx +++ b/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx @@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { TableReducePicker } from './TableReducePicker'; +import { text, boolean } from '@storybook/addon-knobs'; interface State { reducers: string[]; @@ -13,17 +14,33 @@ export class WrapperWithState extends PureComponent { constructor(props: any) { super(props); this.state = { - reducers: [], // nothing? + reducers: this.toReducersArray(props.initialReducers), }; } + toReducersArray = (txt: string): string[] => { + return txt.split(',').map(v => v.trim()); + }; + + componentDidUpdate(prevProps: any) { + const { initialReducers } = this.props; + if (initialReducers !== prevProps.initialReducers) { + this.setState({ reducers: this.toReducersArray(initialReducers) }); + } + } + render() { + const { placeholder, defaultReducer, allowMultiple } = this.props; + const { reducers } = this.state; + return ( { - action('Reduce')(reducers); + action('Picked:')(reducers); this.setState({ reducers }); }} /> @@ -33,10 +50,19 @@ export class WrapperWithState extends PureComponent { const story = storiesOf('UI/TableReducePicker', module); story.addDecorator(withCenteredStory); -story.add('default', () => { +story.add('picker', () => { + const placeholder = text('Placeholder Text', ''); + const defaultReducer = text('Default Reducer', ''); + const allowMultiple = boolean('Allow Multiple', false); + const initialReducers = text('Initial Reducers', ''); return (
- +
); }); diff --git a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx b/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx index d200658babb..ce1d7aeed48 100644 --- a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx +++ b/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx @@ -8,14 +8,38 @@ import { getTableReducers } from '../../utils/tableReducer'; import { SelectOptionItem } from '../Select/Select'; interface Props { + placeholder?: string; onChange: (reducers: string[]) => void; reducers: string[]; width?: number; + allowMultiple?: boolean; + defaultReducer?: string; } export class TableReducePicker extends PureComponent { static defaultProps = { width: 12, + allowMultiple: false, + }; + + componentDidMount() { + console.log('MOUNT!', this); + this.checkInput(); + } + + componentDidUpdate(prevProps: Props) { + console.log('UPDATE', this); + this.checkInput(); + } + + checkInput = () => { + const { reducers, allowMultiple, defaultReducer, onChange } = this.props; + if (!allowMultiple && reducers.length > 1) { + onChange(reducers.slice(0, 1)); + } + if (defaultReducer && reducers.length < 1) { + onChange([defaultReducer]); + } }; onSelectionChange = (item: SelectOptionItem) => { @@ -28,28 +52,18 @@ export class TableReducePicker extends PureComponent { }; render() { - const { width, reducers } = this.props; + const { width, reducers, allowMultiple, defaultReducer, placeholder } = this.props; + const current = getTableReducers(reducers); - const allReducers = getTableReducers(); - - // Need to transform the data structure to work well with Select - const reducerOptions = allReducers.map(info => { - return { - label: info.name, - value: info.key, - description: info.description, - }; - }); - - const current = reducerOptions.filter(options => reducers.includes(options.value)); return (