From bca59468fda3fd29e5176d9ddd375c26b918651f Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 27 Oct 2020 20:36:00 +0000 Subject: [PATCH] [Docs, EuiInMemoryTable] Recreating props tables (#4179) * Improved props table for EuiInMemoryTable * Adding right CL number * Adding comments * Fixing generating typescript definitions file error * Moving CL entry --- CHANGELOG.md | 2 +- .../src/views/tables/basic/basic_section.js | 2 +- src-docs/src/views/tables/basic/props.tsx | 9 - src-docs/src/views/tables/basic/props_info.js | 482 ------------------ ...in_memory_controlled_pagination_section.js | 41 +- .../in_memory_custom_sorting_section.js | 41 +- .../in_memory_search_callback_section.js | 41 +- .../in_memory_search_external_section.js | 41 +- .../in_memory/in_memory_search_section.js | 41 +- .../tables/in_memory/in_memory_section.js | 41 +- .../src/views/tables/in_memory/props_info.js | 145 ------ src-docs/src/views/tables/props/props.tsx | 17 + .../basic_table/in_memory_table.tsx | 8 +- src/components/basic_table/index.ts | 6 +- .../filters/field_value_selection_filter.tsx | 3 + .../field_value_toggle_group_filter.tsx | 3 + src/components/search_bar/filters/index.ts | 1 + src/components/search_bar/search_bar.tsx | 8 +- 18 files changed, 275 insertions(+), 657 deletions(-) delete mode 100644 src-docs/src/views/tables/basic/props.tsx delete mode 100644 src-docs/src/views/tables/basic/props_info.js delete mode 100644 src-docs/src/views/tables/in_memory/props_info.js create mode 100644 src-docs/src/views/tables/props/props.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 4055b642a85..ede6807d827 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `30.1.0`. +- Added more exports for `EuiInMemoryTable` types ([#4179](https://github.com/elastic/eui/pull/4179)) ## [`30.1.0`](https://github.com/elastic/eui/tree/v30.1.0) diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index 9f25e5ff613..56f090354f4 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -17,7 +17,7 @@ import { EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; -import { DefaultItemActionProps as DefaultItemAction } from './props'; +import { DefaultItemActionProps as DefaultItemAction } from '../props/props'; const source = require('!!raw-loader!./basic'); const html = renderToHtml(Table); diff --git a/src-docs/src/views/tables/basic/props.tsx b/src-docs/src/views/tables/basic/props.tsx deleted file mode 100644 index 0cabf76cdeb..00000000000 --- a/src-docs/src/views/tables/basic/props.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types'; - -// Simulating the `item` generic -type T = {}; - -export const DefaultItemActionProps: FunctionComponent> = () =>
; diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js deleted file mode 100644 index 2533d355b70..00000000000 --- a/src-docs/src/views/tables/basic/props_info.js +++ /dev/null @@ -1,482 +0,0 @@ -export const propsInfo = { - EuiBasicTable: { - __docgenInfo: { - props: { - items: { - description: - 'A list of objects to who in the table - an item per row', - required: true, - type: { name: 'object[]' }, - }, - itemId: { - description: - 'Describes how to extract a unique ID from each item, used for selections & expanded rows', - required: false, - type: { name: 'string | number | (item) => string' }, - }, - itemIdToExpandedRowMap: { - description: - 'Row expansion uses the `itemId` prop to identify each row', - required: false, - type: { name: 'object[]' }, - }, - cellProps: { - description: 'Applied to `EuiTableRowCell`', - required: false, - type: { name: 'func | object[]' }, - }, - compressed: { - description: - 'Makes the font and padding smaller for the entire table', - type: { name: 'bool' }, - }, - columns: { - description: 'Defines the table columns', - required: true, - type: { - name: '(#FieldDataColumn | #ComputedColumn | #ActionsColumn)[]', - }, - }, - error: { - description: 'Error message to display', - required: false, - type: { name: 'string' }, - }, - hasActions: { - description: 'Needed at the top level for responsive positioning', - type: { name: 'bool' }, - }, - isExpandable: { - description: 'Needed at the top level for responsive positioning', - type: { name: 'bool' }, - }, - isSelectable: { - description: 'Needed at the top level for responsive positioning', - type: { name: 'bool' }, - }, - loading: { - description: 'Provides an infinite loading indicator', - type: { name: 'bool' }, - }, - noItemsMessage: { - description: 'Message to display if table is empty', - required: false, - type: { name: 'node' }, - }, - pagination: { - description: 'Configures pagination', - required: false, - type: { name: '#Pagination' }, - }, - responsive: { - description: 'If `true`, will convert table to cards in mobile view', - type: { name: 'bool' }, - defaultValue: { value: 'true' }, - }, - rowProps: { - description: 'Applied to `EuiTableRow`', - required: false, - type: { name: 'func | object[]' }, - }, - sorting: { - description: 'Configures sorting', - required: false, - type: { name: '#Sorting' }, - }, - selection: { - description: 'Configures selection', - required: false, - type: { name: '#Selection' }, - }, - onChange: { - description: - 'Called whenever pagination or sorting changes (this property is required when either ' + - 'pagination or sorting is configured', - required: false, - type: { name: '(criteria: #Criteria) => void' }, - }, - rowHeader: { - description: - 'Indicates which column should be used as the identifying cell in each row. Should match a "field" prop in FieldDataColumn', - required: false, - type: { name: 'string' }, - }, - tableCaption: { - description: - 'Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows."', - required: false, - type: { name: 'string' }, - }, - textOnly: { - description: - 'Applied to table cells => Any cell using render function will set this to be `false`, leading to unnecessary word breaks. Apply `textOnly: true` in order to ensure it breaks properly', - required: false, - type: { name: 'bool' }, - defaultValue: { value: 'false' }, - }, - tableLayout: { - description: - 'Sets the table-layout CSS property. Note that auto tableLayout prevents truncateText from working properly.', - required: false, - type: { - name: '(fixed | auto)', - }, - defaultValue: { value: 'fixed' }, - }, - }, - }, - }, - - Pagination: { - __docgenInfo: { - _euiObjectType: 'type', - props: { - pageIndex: { - description: 'The current page (zero-based) index', - required: true, - type: { name: 'number' }, - }, - pageSize: { - description: - 'The maximum number of items that can be shown in a single page', - required: true, - type: { name: 'number' }, - }, - totalItemCount: { - description: 'The total number of items the page is "sliced" of', - required: true, - type: { name: 'number' }, - }, - pageSizeOptions: { - description: 'Configures the page size dropdown options', - required: false, - defaultValue: { value: '[5, 10, 20]' }, - type: { name: 'number[]' }, - }, - hidePerPageOptions: { - description: 'Hides the page size dropdown', - required: false, - defaultValue: { value: 'false' }, - type: { name: 'bool' }, - }, - }, - }, - }, - - Sorting: { - __docgenInfo: { - _euiObjectType: 'type', - props: { - sort: { - description: 'Indicates the property/field to sort on', - required: false, - type: { name: '{ field: string, direction: "asc" | "desc" }' }, - }, - allowNeutralSort: { - description: - 'Enables/disables unsorting of table columns. Supported by EuiInMemoryTable.', - required: false, - type: { name: 'bool' }, - }, - enableAllColumns: { - description: 'Enables the default sorting ability for each column.', - required: false, - type: { name: 'bool' }, - }, - }, - }, - }, - - Selection: { - __docgenInfo: { - _euiObjectType: 'type', - props: { - onSelectionChange: { - description: - 'A callback that will be called whenever the item selection changes', - required: false, - type: { name: '(selectedItems) => void' }, - }, - selectable: { - description: - 'A callback that is called per item to indicate whether it is selectable', - required: false, - type: { name: '(item) => boolean' }, - }, - selectableMessage: { - description: - 'A callback that is called per item to retrieve a message for its selectable state.' + - 'We display these messages as a tooltip on an unselectable checkbox', - required: false, - type: { name: '(selectable, item) => string' }, - }, - }, - }, - }, - - Criteria: { - __docgenInfo: { - _euiObjectType: 'type', - props: { - page: { - description: - 'If the shown items represents a page (slice) into a bigger set, this describes this page', - required: false, - type: { name: '{ index: number, size: number }' }, - }, - sort: { - description: - 'If the shown items are sorted, this describes the sort criteria', - required: false, - type: { name: '{ field: string, direction: "asc" | "desc" }' }, - }, - }, - }, - }, - - FieldDataColumn: { - __docgenInfo: { - _euiObjectType: 'type', - description: - "Describes a column that displays a value derived of one of the item's fields", - props: { - field: { - description: 'A field of the item (may be a nested field)', - required: true, - type: { name: 'string' }, - }, - name: { - description: 'The display name of the column', - required: true, - type: { name: 'PropTypes.node' }, - }, - description: { - description: - 'A description of the column (will be presented as a title over the column header', - required: false, - type: { name: 'string' }, - }, - dataType: { - description: - 'Describes the data types of the displayed value (serves as a rendering hint for the table)', - required: false, - defaultValue: { value: '"auto"' }, - type: { name: '"auto" | "string" | "number" | "date" | "boolean"' }, - }, - width: { - description: - 'A CSS width property. Hints for the required width of the column', - required: false, - type: { name: 'string (e.g. "30%", "100px", etc..)' }, - }, - sortable: { - description: - 'Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against.', - required: false, - defaultValue: { value: 'false' }, - type: { name: '"boolean" | "function"' }, - }, - align: { - description: 'Defines the horizontal alignment of the column', - required: false, - defaultValue: { - value: '"right"', - comment: 'May change when "dataType" is defined', - }, - type: { name: '"left" | "center" | "right"' }, - }, - truncateText: { - description: - "Indicates whether this column should truncate its content when it doesn't fit", - required: false, - defaultValue: { value: 'false' }, - type: { name: 'boolean' }, - }, - render: { - description: 'Describe a custom renderer function for the content', - required: false, - type: { name: '(value, item) => PropTypes.node' }, - }, - footer: { - description: 'Content to display in the footer beneath this column', - required: false, - type: { - name: - 'string | PropTypes.element | ({ items, pagination }) => PropTypes.node', - }, - }, - }, - }, - }, - - ComputedColumn: { - __docgenInfo: { - _euiObjectType: 'type', - description: 'Describes a column for computed values', - props: { - render: { - description: - 'A function that computes the value for each item and renders it', - required: true, - type: { name: '(item) => PropTypes.node' }, - }, - name: { - description: 'The display name of the column', - required: false, - type: { name: 'PropTypes.node' }, - }, - description: { - description: - 'A description of the column (will be presented as a title over the column header', - required: false, - type: { name: 'string' }, - }, - width: { - description: - 'A CSS width property. Hints for the required width of the column', - required: false, - type: { name: 'string (e.g. "30%", "100px", etc..)' }, - }, - sortable: { - description: - 'If provided, allows this column to be sorted on. Must return the value to sort against.', - required: false, - type: { name: 'function' }, - }, - truncateText: { - description: - "Indicates whether this column should truncate its content when it doesn't fit", - required: false, - defaultValue: { value: 'false' }, - type: { name: 'boolean' }, - }, - }, - }, - }, - - ActionsColumn: { - __docgenInfo: { - _euiObjectType: 'type', - description: - 'Describes a column that holds action controls (e.g. Buttons)', - props: { - actions: { - description: 'An array of actions to associate per item', - required: true, - type: { name: '(#DefaultItemAction | #CustomItemAction)[]' }, - }, - name: { - description: 'The display name of the column', - required: false, - type: { name: 'PropTypes.node' }, - }, - description: { - description: - 'A description of the column (will be presented as a title over the column header', - required: false, - type: { name: 'string' }, - }, - width: { - description: - 'A CSS width property. Hints for the required width of the column', - required: false, - type: { name: 'string (e.g. "30%", "100px", etc..)' }, - }, - }, - }, - }, - - DefaultItemAction: { - __docgenInfo: { - _euiObjectType: 'type', - description: 'Describes an action that is displayed as a button', - props: { - name: { - description: - 'The display name of the action (will be the button caption)', - required: true, - type: { name: 'PropTypes.node | (item) => PropTypes.node' }, - }, - description: { - description: 'Describes the action (will be the button title)', - required: true, - type: { name: 'string' }, - }, - onClick: { - description: 'A handler function to execute the action', - required: true, - type: { name: '(item) => void' }, - }, - type: { - description: 'The type of action', - required: false, - defaultValue: { value: '"button"' }, - type: { name: '"button" | "icon"' }, - }, - available: { - description: - 'A callback function that determines whether the action is available', - required: false, - defaultValue: { value: '() => true' }, - type: { name: '(item) => boolean' }, - }, - enabled: { - description: - 'A callback function that determines whether the action is enabled', - required: false, - defaultValue: { value: '() => true' }, - type: { name: '(item) => boolean' }, - }, - icon: { - description: 'Associates an icon with the button', - required: false, - type: { - name: - 'string | (item) => string (must be one of the supported icon types)', - }, - }, - color: { - description: 'Defines the color of the button', - required: false, - type: { - name: - 'string | (item) => string (must be one of the supported button colors)', - }, - }, - 'data-test-subj': { - description: - "Applies a data-test-subj attribute to the action's DOM node", - required: false, - type: { name: 'string' }, - }, - }, - }, - }, - - CustomItemAction: { - __docgenInfo: { - _euiObjectType: 'type', - description: 'Describes a custom action', - props: { - render: { - description: - 'The function that renders the action. Note that the returned node is ' + - 'expected to have`onFocus` and `onBlur` functions', - required: true, - type: { name: '(item, enabled) => PropTypes.node' }, - }, - available: { - description: - 'A callback that defines whether the action is available', - required: false, - type: { name: '(item) => boolean' }, - }, - enabled: { - description: 'A callback that defines whether the action is enabled', - required: false, - type: { name: '(item) => boolean' }, - }, - }, - }, - }, -}; diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js index 2867c236802..954fb8762d9 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js @@ -4,7 +4,28 @@ import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { Table } from './in_memory_controlled_pagination'; -import { propsInfo } from './props_info'; + +import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table'; +import { + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { + DefaultItemActionProps as DefaultItemAction, + SearchProps as Search, + SearchFilterConfigProps as SearchFilterConfig, +} from '../props/props'; +import { FieldValueOptionType } from '!!prop-loader!../../../../../src/components/search_bar/filters/field_value_selection_filter'; +import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx'; const source = require('!!raw-loader!./in_memory_controlled_pagination'); const html = renderToHtml(Table); @@ -39,6 +60,22 @@ export const controlledPaginationSection = {

), - props: propsInfo, + props: { + EuiInMemoryTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + Search, + SearchFilterConfig, + FieldValueOptionType, + FieldValueToggleGroupFilterItemType, + }, demo: , }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js index 8a4a715d777..b0e51e7d836 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js @@ -4,7 +4,28 @@ import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { Table } from './in_memory_custom_sorting'; -import { propsInfo } from './props_info'; + +import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table'; +import { + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { + DefaultItemActionProps as DefaultItemAction, + SearchProps as Search, + SearchFilterConfigProps as SearchFilterConfig, +} from '../props/props'; +import { FieldValueOptionType } from '!!prop-loader!../../../../../src/components/search_bar/filters/field_value_selection_filter'; +import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx'; const source = require('!!raw-loader!./in_memory_custom_sorting'); const html = renderToHtml(Table); @@ -33,6 +54,22 @@ export const customSortingSection = {

), - props: propsInfo, + props: { + EuiInMemoryTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + Search, + SearchFilterConfig, + FieldValueOptionType, + FieldValueToggleGroupFilterItemType, + }, demo:
, }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js index 4f6776cc6ad..8df7fd1a2ca 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js @@ -3,7 +3,28 @@ import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { Table } from './in_memory_search_callback'; -import { propsInfo } from './props_info'; + +import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table'; +import { + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { + DefaultItemActionProps as DefaultItemAction, + SearchProps as Search, + SearchFilterConfigProps as SearchFilterConfig, +} from '../props/props'; +import { FieldValueOptionType } from '!!prop-loader!../../../../../src/components/search_bar/filters/field_value_selection_filter'; +import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx'; const source = require('!!raw-loader!./in_memory_search_callback'); const html = renderToHtml(Table); @@ -29,6 +50,22 @@ export const searchCallbackSection = {

), - props: propsInfo, + props: { + EuiInMemoryTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + Search, + SearchFilterConfig, + FieldValueOptionType, + FieldValueToggleGroupFilterItemType, + }, demo:
, }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js index 1ab71f5477f..92ce523e10e 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js @@ -3,7 +3,28 @@ import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { Table } from './in_memory_search_external'; -import { propsInfo } from './props_info'; + +import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table'; +import { + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { + DefaultItemActionProps as DefaultItemAction, + SearchProps as Search, + SearchFilterConfigProps as SearchFilterConfig, +} from '../props/props'; +import { FieldValueOptionType } from '!!prop-loader!../../../../../src/components/search_bar/filters/field_value_selection_filter'; +import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx'; const source = require('!!raw-loader!./in_memory_search_external'); const html = renderToHtml(Table); @@ -28,6 +49,22 @@ export const searchExternalSection = {

), - props: propsInfo, + props: { + EuiInMemoryTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + Search, + SearchFilterConfig, + FieldValueOptionType, + FieldValueToggleGroupFilterItemType, + }, demo:
, }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_section.js index 76bafbc1134..d8bc017a5ee 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search_section.js @@ -3,9 +3,30 @@ import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { Table } from './in_memory_search'; -import { propsInfo } from './props_info'; import { Link } from 'react-router-dom'; +import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table'; +import { + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { + DefaultItemActionProps as DefaultItemAction, + SearchProps as Search, + SearchFilterConfigProps as SearchFilterConfig, +} from '../props/props'; +import { FieldValueOptionType } from '!!prop-loader!../../../../../src/components/search_bar/filters/field_value_selection_filter'; +import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx'; + const source = require('!!raw-loader!./in_memory_search'); const html = renderToHtml(Table); @@ -34,6 +55,22 @@ export const searchSection = {

), - props: propsInfo, + props: { + EuiInMemoryTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + Search, + SearchFilterConfig, + FieldValueOptionType, + FieldValueToggleGroupFilterItemType, + }, demo:
, }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_section.js b/src-docs/src/views/tables/in_memory/in_memory_section.js index 4ca1076b78a..69e6b6639a5 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_section.js @@ -4,7 +4,28 @@ import { renderToHtml } from '../../../services'; import { EuiCode, EuiCallOut } from '../../../../../src/components'; import { Table } from './in_memory'; -import { propsInfo } from './props_info'; + +import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table'; +import { + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { + DefaultItemActionProps as DefaultItemAction, + SearchProps as Search, + SearchFilterConfigProps as SearchFilterConfig, +} from '../props/props'; +import { FieldValueOptionType } from '!!prop-loader!../../../../../src/components/search_bar/filters/field_value_selection_filter'; +import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx'; const source = require('!!raw-loader!./in_memory'); const html = renderToHtml(Table); @@ -44,6 +65,22 @@ export const section = { ), - props: propsInfo, + props: { + EuiInMemoryTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + Search, + SearchFilterConfig, + FieldValueOptionType, + FieldValueToggleGroupFilterItemType, + }, demo:
, }; diff --git a/src-docs/src/views/tables/in_memory/props_info.js b/src-docs/src/views/tables/in_memory/props_info.js deleted file mode 100644 index 6055eed75e8..00000000000 --- a/src-docs/src/views/tables/in_memory/props_info.js +++ /dev/null @@ -1,145 +0,0 @@ -import { omit } from '../../../../../src/services/objects'; -import { propsInfo as basicPropsInfo } from '../basic/props_info'; -import { propsInfo as searchBarPropsInfo } from '../../search_bar/props_info'; - -const basicTableProps = omit(basicPropsInfo, ['EuiBasicTable', 'Pagination']); -const searchBarProps = omit(searchBarPropsInfo, ['EuiSearchBar']); - -export const propsInfo = { - EuiBasicTableContainer: { - __docgenInfo: { - props: { - items: { - description: - 'A list of objects representing the full data set that can be displayed by the table', - required: false, - type: { name: 'object[]' }, - }, - message: { - description: `A message to be shown by the table. When set, the message will be displayed - instead of the configured items`, - required: false, - type: { name: 'string' }, - }, - error: { - description: `An error message to be shown by the table. Takes precedence over the - configured \`message\` or \`items\``, - required: false, - type: { name: 'string' }, - }, - loading: { - description: - 'When set to `true` the table will be displayed in a "loading" mode', - required: false, - type: { name: 'boolean' }, - }, - columns: basicPropsInfo.EuiBasicTable.__docgenInfo.props.columns, - pagination: { - description: - 'Enables/disables pagination. Can be an object that configures pagination when enabled', - required: false, - type: { name: 'boolean | #Pagination' }, - }, - sorting: { - description: - 'Enables/disables sorting. Can be an object that configures initial sorting when enabled', - required: false, - type: { name: 'boolean | #Sorting' }, - }, - allowNeutralSort: { - description: - 'Enables/disables unsorting of table columns. Defaults to true.', - required: false, - type: { name: 'boolean' }, - }, - search: { - description: 'Configures a search bar for the table', - required: false, - type: { name: 'boolean | #Search' }, - }, - selection: basicPropsInfo.EuiBasicTable.__docgenInfo.props.selection, - onTableChange: { - description: `Callback for when table pagination or sorting is changed. This is meant to - be informational only, and not used to set any state as the in-memory table already - manages this state.`, - required: false, - type: { name: 'function' }, - }, - }, - }, - }, - - Pagination: { - __docgenInfo: { - _euiObjectType: 'type', - props: { - initialPageIndex: { - description: 'Configures the default page to show', - defaultValue: { value: 0 }, - required: false, - type: { name: 'number' }, - }, - initialPageSize: { - description: `Configures the default page size to show, must be one of \`pageSizeOptions\`. Defaults to - the first page size in \`pageSizeOptions\`.`, - required: false, - type: { name: 'number' }, - }, - pageIndex: { - description: - "When present, controls the table's pagination index. You must listen to the onTableChange callback to respond to user actions. Ignores any initialPageIndex value", - required: false, - type: { name: 'number' }, - }, - pageSize: { - description: - "When present, controls the table's page size. You must listen to the onTableChange callback to respond to user actions. Ignores any initialPageSize value", - required: false, - type: { name: 'number' }, - }, - pageSizeOptions: - basicPropsInfo.Pagination.__docgenInfo.props.pageSizeOptions, - hidePerPageOptions: - basicPropsInfo.Pagination.__docgenInfo.props.hidePerPageOptions, - }, - }, - }, - - Search: { - __docgenInfo: { - _euiObjectType: 'type', - props: { - defaultQuery: { - description: 'Sets the default query of the search bar', - required: false, - type: { name: '#Query' }, - }, - box: { - description: 'Configures the search box of the search bar ', - required: false, - type: { name: '#SearchBox' }, - }, - filters: { - description: 'Configures the search filters of the search bar ', - required: false, - type: { name: '#SearchFilters' }, - }, - onChange: { - description: `Callback for when the search bar value changes. By default this will prevent in-memory - searching. Return \`true\` to allow in-memory searching.`, - required: false, - type: { name: 'function' }, - }, - executeQueryOptions: { - description: `Options that are passed directly into the Query.execute call which is - performed whenever the search bar query changed.`, - required: false, - type: { name: '#Query' }, - }, - }, - }, - }, - - ...basicTableProps, - ...searchBarProps, -}; diff --git a/src-docs/src/views/tables/props/props.tsx b/src-docs/src/views/tables/props/props.tsx new file mode 100644 index 00000000000..6224d24c9c7 --- /dev/null +++ b/src-docs/src/views/tables/props/props.tsx @@ -0,0 +1,17 @@ +import React, { FunctionComponent } from 'react'; +import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types'; +import { Search } from '../../../../../src/components/basic_table/in_memory_table'; +import { SearchFilterConfig } from '../../../../../src/components/search_bar/filters'; + +// Simulating the `item` generic +type T = {}; + +export const DefaultItemActionProps: FunctionComponent> = () =>
; + +export const SearchProps: FunctionComponent = () =>
; + +export const SearchFilterConfigProps: FunctionComponent = () => ( +
+); diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 4f21e6ac37e..2c11b8f0495 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -55,7 +55,7 @@ function isEuiSearchBarProps( return typeof x !== 'boolean'; } -type Search = boolean | EuiSearchBarProps; +export type Search = boolean | EuiSearchBarProps; interface PaginationOptions { pageSizeOptions?: number[]; @@ -79,6 +79,9 @@ type InMemoryTableProps = Omit< 'pagination' | 'sorting' | 'noItemsMessage' > & { message?: ReactNode; + /** + * Configures #Search. + */ search?: Search; pagination?: undefined; sorting?: Sorting; @@ -86,6 +89,9 @@ type InMemoryTableProps = Omit< * Set `allowNeutralSort` to false to force column sorting. Defaults to true. */ allowNeutralSort?: boolean; + /** + * Callback for when table pagination or sorting is changed. This is meant to be informational only, and not used to set any state as the in-memory table already manages this state. See #Criteria or #CriteriaWithPagination. + */ onTableChange?: (nextValues: Criteria) => void; executeQueryOptions?: { defaultFields?: string[]; diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index f9301c3cf2d..30def77f8d7 100644 --- a/src/components/basic_table/index.ts +++ b/src/components/basic_table/index.ts @@ -24,7 +24,11 @@ export { Criteria, CriteriaWithPagination, } from './basic_table'; -export { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table'; +export { + EuiInMemoryTable, + EuiInMemoryTableProps, + Search, +} from './in_memory_table'; export { EuiTableDataType, EuiTableFooterProps, diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx index ea1926be987..06905a5e651 100644 --- a/src/components/search_bar/filters/field_value_selection_filter.tsx +++ b/src/components/search_bar/filters/field_value_selection_filter.tsx @@ -50,6 +50,9 @@ export interface FieldValueSelectionFilterConfigType { type: 'field_value_selection'; field?: string; name: string; + /** + * See #FieldValueOptionType + */ options: FieldValueOptionType[] | OptionsLoader; filterWith?: 'prefix' | 'includes' | OptionsFilter; cache?: number; diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.tsx b/src/components/search_bar/filters/field_value_toggle_group_filter.tsx index a1ad0fc21ff..2060d7ba138 100644 --- a/src/components/search_bar/filters/field_value_toggle_group_filter.tsx +++ b/src/components/search_bar/filters/field_value_toggle_group_filter.tsx @@ -32,6 +32,9 @@ export interface FieldValueToggleGroupFilterItemType { export interface FieldValueToggleGroupFilterConfigType { type: 'field_value_toggle_group'; field: string; + /** + * See #FieldValueToggleGroupFilterItemType + */ items: FieldValueToggleGroupFilterItemType[]; available?: () => boolean; } diff --git a/src/components/search_bar/filters/index.ts b/src/components/search_bar/filters/index.ts index 50e854729a3..9255e3a3c6f 100644 --- a/src/components/search_bar/filters/index.ts +++ b/src/components/search_bar/filters/index.ts @@ -18,3 +18,4 @@ */ export { createFilter, SearchFilterConfig } from './filters'; +export { FieldValueOptionType } from './field_value_selection_filter'; diff --git a/src/components/search_bar/search_bar.tsx b/src/components/search_bar/search_bar.tsx index f81c7018b0d..9458bc1fcd4 100644 --- a/src/components/search_bar/search_bar.tsx +++ b/src/components/search_bar/search_bar.tsx @@ -53,14 +53,12 @@ export interface EuiSearchBarProps extends CommonProps { defaultQuery?: QueryType; /** - If you wish to use the search bar as a controlled component, continuously pass the query - via this prop + If you wish to use the search bar as a controlled component, continuously pass the query via this prop. */ query?: QueryType; /** - Configures the search box. Set `placeholder` to change the placeholder text in the box and - `incremental` to support incremental (as you type) search. + Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search. */ box?: EuiFieldSearchProps & { // Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other @@ -70,7 +68,7 @@ export interface EuiSearchBarProps extends CommonProps { }; /** - An array of search filters. + An array of search filters. See #SearchFilterConfig. */ filters?: SearchFilterConfig[];