[Canvas] Dropdown filter refactor (#105707)
* Refactered from `recompose` to `react hooks`. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
9616a55f81
commit
4c3a3977d4
6 changed files with 24 additions and 51 deletions
|
@ -8,6 +8,7 @@ exports[`Storyshots renderers/DropdownFilter default 1`] = `
|
|||
className="canvasDropdownFilter__select"
|
||||
data-test-subj="canvasDropdownFilter__select"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
>
|
||||
<option
|
||||
aria-selected={false}
|
||||
|
@ -31,6 +32,7 @@ exports[`Storyshots renderers/DropdownFilter with choices 1`] = `
|
|||
className="canvasDropdownFilter__select"
|
||||
data-test-subj="canvasDropdownFilter__select"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
>
|
||||
<option
|
||||
aria-selected={false}
|
||||
|
|
|
@ -5,9 +5,9 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { DropdownFilter } from '../dropdown_filter';
|
||||
|
||||
const choices: Array<[string, string]> = [
|
||||
|
@ -17,26 +17,14 @@ const choices: Array<[string, string]> = [
|
|||
];
|
||||
|
||||
storiesOf('renderers/DropdownFilter', module)
|
||||
.add('default', () => <DropdownFilter onChange={action('onChange')} commit={action('commit')} />)
|
||||
.add('default', () => <DropdownFilter commit={action('commit')} />)
|
||||
.add('with new value', () => (
|
||||
<DropdownFilter onChange={action('onChange')} commit={action('commit')} value="selectedValue" />
|
||||
))
|
||||
.add('with choices', () => (
|
||||
<DropdownFilter onChange={action('onChange')} commit={action('commit')} choices={choices} />
|
||||
<DropdownFilter commit={action('commit')} initialValue="selectedValue" />
|
||||
))
|
||||
.add('with choices', () => <DropdownFilter commit={action('commit')} choices={choices} />)
|
||||
.add('with choices and value', () => (
|
||||
<DropdownFilter
|
||||
onChange={action('onChange')}
|
||||
commit={action('commit')}
|
||||
choices={choices}
|
||||
value="Item Two"
|
||||
/>
|
||||
<DropdownFilter commit={action('commit')} choices={choices} initialValue="Item Two" />
|
||||
))
|
||||
.add('with choices and new value', () => (
|
||||
<DropdownFilter
|
||||
onChange={action('onChange')}
|
||||
commit={action('commit')}
|
||||
choices={choices}
|
||||
value="selectedValue"
|
||||
/>
|
||||
<DropdownFilter commit={action('commit')} choices={choices} initialValue="selectedValue" />
|
||||
));
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
border-radius: $euiBorderRadius;
|
||||
appearance: none;
|
||||
font-size: inherit;
|
||||
color: $euiTextColor;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { ChangeEvent, FocusEvent, FunctionComponent } from 'react';
|
||||
import React, { ChangeEvent, FocusEvent, FunctionComponent, useEffect, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EuiIcon } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
@ -28,19 +28,22 @@ export interface Props {
|
|||
* Optional value for the component. If the value is not present in the
|
||||
* choices collection, it will be discarded.
|
||||
*/
|
||||
value?: string;
|
||||
/** Function to invoke when the dropdown value is changed */
|
||||
onChange: (value: string) => void;
|
||||
initialValue?: string;
|
||||
/** Function to invoke when the dropdown value is committed */
|
||||
commit: (value: string) => void;
|
||||
}
|
||||
|
||||
export const DropdownFilter: FunctionComponent<Props> = ({
|
||||
value,
|
||||
onChange,
|
||||
initialValue = '',
|
||||
commit,
|
||||
choices = [],
|
||||
}) => {
|
||||
const [value, setValue] = useState<string>(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(initialValue);
|
||||
}, [initialValue]);
|
||||
|
||||
let options = [
|
||||
{ value: '%%CANVAS_MATCH_ALL%%', text: `-- ${strings.getMatchAllOptionLabel()} --` },
|
||||
];
|
||||
|
@ -49,7 +52,7 @@ export const DropdownFilter: FunctionComponent<Props> = ({
|
|||
const changeHandler = (e: FocusEvent<HTMLSelectElement> | ChangeEvent<HTMLSelectElement>) => {
|
||||
if (e && e.target) {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
onChange(target.value);
|
||||
setValue(target.value);
|
||||
commit(target.value);
|
||||
}
|
||||
};
|
||||
|
@ -84,7 +87,6 @@ export const DropdownFilter: FunctionComponent<Props> = ({
|
|||
|
||||
DropdownFilter.propTypes = {
|
||||
choices: PropTypes.array,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
initialValue: PropTypes.string,
|
||||
commit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
|
|
@ -5,24 +5,4 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { compose, withState } from 'recompose';
|
||||
import { DropdownFilter as Component, Props as ComponentProps } from './dropdown_filter';
|
||||
|
||||
export interface Props {
|
||||
/**
|
||||
* A collection of choices to display in the dropdown
|
||||
* @default []
|
||||
*/
|
||||
choices?: string[];
|
||||
/**
|
||||
* Optional value for the component. If the value is not present in the
|
||||
* choices collection, it will be discarded.
|
||||
*/
|
||||
value?: string;
|
||||
/** Function to invoke when the dropdown value is committed */
|
||||
commit: (value: string) => void;
|
||||
}
|
||||
|
||||
export const DropdownFilter = compose<ComponentProps, Props>(
|
||||
withState('value', 'onChange', ({ value }) => value || '')
|
||||
)(Component);
|
||||
export { DropdownFilter } from './dropdown_filter';
|
||||
|
|
|
@ -23,7 +23,7 @@ export interface Config {
|
|||
* A collection of choices to display in the dropdown
|
||||
* @default []
|
||||
*/
|
||||
choices: string[];
|
||||
choices: Array<[string, string]>;
|
||||
filterGroup: string;
|
||||
}
|
||||
|
||||
|
@ -88,7 +88,7 @@ export const dropdownFilter: RendererFactory<Config> = () => ({
|
|||
<DropdownFilter
|
||||
commit={commit}
|
||||
choices={config.choices || []}
|
||||
value={getFilterValue(filterExpression)}
|
||||
initialValue={getFilterValue(filterExpression)}
|
||||
/>,
|
||||
domNode,
|
||||
() => handlers.done()
|
||||
|
|
Loading…
Reference in a new issue