Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes to EuiSearchBar etc types #3147

Merged
merged 4 commits into from
Mar 26, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@

- Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104))
- Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067))
- Fixed `EuiSearchBar` related types ([#3147](https://github.com/elastic/eui/pull/3147))

## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0)

4 changes: 2 additions & 2 deletions src/components/basic_table/in_memory_table.test.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import { requiredProps } from '../../test';
import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table';
import { ENTER } from '../../services/key_codes';
import { SortDirection } from '../../services';
import { FilterConfig } from '../search_bar/filters';
import { SearchFilterConfig } from '../search_bar/filters';

interface BasicItem {
id: number | string;
@@ -662,7 +662,7 @@ describe('EuiInMemoryTable', () => {
name: 'Name1',
negatedName: 'Not Name1',
},
] as FilterConfig[],
] as SearchFilterConfig[],
},
selection: {
onSelectionChange: () => undefined,
Original file line number Diff line number Diff line change
@@ -35,7 +35,6 @@ exports[`EuiSearchFilters render - with filters 1`] = `
}
/>
<FieldValueSelectionFilter
autoClose={true}
config={
Object {
"field": "tag",
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import { EuiIcon } from '../../icon';
import { Query } from '../query';
import { Clause, Value } from '../query/ast';

interface FieldValueOptionType {
export interface FieldValueOptionType {
field?: string;
value: Value;
name?: string;
@@ -39,14 +39,14 @@ export interface FieldValueSelectionFilterConfigType {
noOptionsMessage?: string;
searchThreshold?: number;
available?: () => boolean;
autoClose?: boolean;
}

export interface FieldValueSelectionFilterProps {
index: number;
config: FieldValueSelectionFilterConfigType;
query: Query;
onChange: (query: Query) => void;
autoClose?: boolean;
}

const defaults = {
@@ -69,16 +69,10 @@ interface State {
cachedOptions?: FieldValueOptionType[] | null;
}

type DefaultProps = Pick<FieldValueSelectionFilterProps, 'autoClose'>;

export class FieldValueSelectionFilter extends Component<
FieldValueSelectionFilterProps,
State
> {
static defaultProps: DefaultProps = {
autoClose: true,
};

private readonly selectItems: EuiFilterSelectItem[];
private searchInput: HTMLInputElement | null = null;

@@ -248,7 +242,9 @@ export class FieldValueSelectionFilter extends Component<
checked: 'on' | 'off' | undefined
) {
const multiSelect = this.resolveMultiSelect();
const { autoClose } = this.props;
const {
config: { autoClose = true },
} = this.props;

// we're closing popover only if the user can only select one item... if the
// user can select more, we'll leave it open so she can continue selecting
4 changes: 2 additions & 2 deletions src/components/search_bar/filters/filters.tsx
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ import { Query } from '../query';

export const createFilter = (
index: number,
config: FilterConfig,
config: SearchFilterConfig,
query: Query,
onChange: (query: Query) => void
) => {
@@ -46,7 +46,7 @@ export const createFilter = (
}
};

export type FilterConfig =
export type SearchFilterConfig =
| IsFilterConfigType
| FieldValueSelectionFilterConfigType
| FieldValueToggleFilterConfigType
2 changes: 1 addition & 1 deletion src/components/search_bar/filters/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { createFilter, FilterConfig } from './filters';
export { createFilter, SearchFilterConfig } from './filters';
4 changes: 2 additions & 2 deletions src/components/search_bar/index.ts
Original file line number Diff line number Diff line change
@@ -5,5 +5,5 @@ export {
Query,
Ast,
} from './search_bar';
export { SearchBoxConfigProps } from './search_box';
export { SearchFiltersFiltersType } from './search_filters';
export { SearchFilterConfig } from './search_filters';
export { FieldValueOptionType } from './filters/field_value_selection_filter';
4 changes: 2 additions & 2 deletions src/components/search_bar/search_bar.test.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import { mount, shallow } from 'enzyme';
import { EuiSearchBar } from './search_bar';
import { Query } from './query';
import { ENTER } from '../../services/key_codes';
import { SearchFiltersFiltersType } from './search_filters';
import { SearchFilterConfig } from './search_filters';

describe('SearchBar', () => {
test('render - no config, no query', () => {
@@ -48,7 +48,7 @@ describe('SearchBar', () => {
});

test('render - provided query, filters', () => {
const filters: SearchFiltersFiltersType = [
const filters: SearchFilterConfig[] = [
{
type: 'is',
field: 'open',
14 changes: 10 additions & 4 deletions src/components/search_bar/search_bar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { Component, ReactElement } from 'react';
import { isString } from '../../services/predicate';
import { EuiFlexGroup, EuiFlexItem } from '../flex';
import { EuiSearchBox, SchemaType, SearchBoxConfigProps } from './search_box';
import { EuiSearchFilters, SearchFiltersFiltersType } from './search_filters';
import { EuiSearchBox, SchemaType } from './search_box';
import { EuiSearchFilters, SearchFilterConfig } from './search_filters';
import { Query } from './query';
import { CommonProps } from '../common';
import { EuiFieldSearchProps } from '../form/field_search';

export { Query, AST as Ast } from './query';

@@ -42,12 +43,17 @@ export interface EuiSearchBarProps extends CommonProps {
Configures the search box. Set `placeholder` to change the placeholder text in the box and
`incremental` to support incremental (as you type) search.
*/
box?: SearchBoxConfigProps;
box?: EuiFieldSearchProps & {
// Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other
// components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
// Admittedly, this is a bit of a hack.
schema?: SchemaType | boolean;
};

/**
An array of search filters.
*/
filters?: SearchFiltersFiltersType;
filters?: SearchFilterConfig[];

/**
* Tools which go to the left of the search bar.
31 changes: 4 additions & 27 deletions src/components/search_bar/search_box.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,16 @@
import React, { Component } from 'react';
import { EuiFieldSearch } from '../form';
import { CommonProps } from '../common';
import { EuiFieldSearch, EuiFieldSearchProps } from '../form';

export interface SchemaType {
strict?: boolean;
fields?: any;
flags?: string[];
}

export interface SearchBoxConfigProps extends CommonProps {
placeholder?: string;
incremental?: boolean;
// Boolean values are not meaningful to this component, but are allowed so that other
// components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
// Admittedly, this is a bit of a hack.
schema?: SchemaType | boolean;
}

export interface EuiSearchBoxProps extends SearchBoxConfigProps {
export interface EuiSearchBoxProps extends EuiFieldSearchProps {
query: string;
// This is optional in EuiFieldSearchProps
onSearch: (queryText: string) => void;
isInvalid?: boolean;
title?: string;
}

type DefaultProps = Pick<EuiSearchBoxProps, 'placeholder' | 'incremental'>;
@@ -41,15 +30,7 @@ export class EuiSearchBox extends Component<EuiSearchBoxProps> {
}

render() {
const {
placeholder,
query,
incremental,
onSearch,
isInvalid,
title,
...rest
} = this.props;
const { query, incremental, ...rest } = this.props;

let ariaLabel;
if (incremental) {
@@ -64,13 +45,9 @@ export class EuiSearchBox extends Component<EuiSearchBoxProps> {
<EuiFieldSearch
inputRef={input => (this.inputElement = input)}
fullWidth
placeholder={placeholder}
defaultValue={query}
incremental={incremental}
onSearch={query => onSearch(query)}
isInvalid={isInvalid}
aria-label={ariaLabel}
title={title}
{...rest}
/>
);
4 changes: 2 additions & 2 deletions src/components/search_bar/search_filters.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { requiredProps } from '../../test';
import { shallow } from 'enzyme';
import { EuiSearchFilters, SearchFiltersFiltersType } from './search_filters';
import { EuiSearchFilters, SearchFilterConfig } from './search_filters';
import { Query } from './query';

describe('EuiSearchFilters', () => {
@@ -19,7 +19,7 @@ describe('EuiSearchFilters', () => {
});

test('render - with filters', () => {
const filters: SearchFiltersFiltersType = [
const filters: SearchFilterConfig[] = [
{
type: 'is',
field: 'open',
6 changes: 3 additions & 3 deletions src/components/search_bar/search_filters.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { Component, Fragment, ReactElement } from 'react';
import { createFilter, FilterConfig } from './filters';
import { createFilter, SearchFilterConfig } from './filters';
import { Query } from './query';
import { EuiFilterGroup } from '../filter_group';

export type SearchFiltersFiltersType = FilterConfig[];
export { SearchFilterConfig } from './filters';

interface EuiSearchFiltersProps {
query: Query;
onChange: (query: Query) => void;
filters: SearchFiltersFiltersType;
filters: SearchFilterConfig[];
}

type DefaultProps = Pick<EuiSearchFiltersProps, 'filters'>;