From 0b559d909efc6381968272fd10074d6065c07603 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 8 Oct 2020 17:50:25 +0100 Subject: [PATCH 1/9] Using prop loader to create props table for basic table --- .../src/views/tables/basic/basic_section.js | 31 ++++- src/components/basic_table/action_types.ts | 35 +++++- src/components/basic_table/basic_table.tsx | 91 ++++++++++----- .../basic_table/in_memory_table.tsx | 10 +- src/components/basic_table/index.ts | 7 ++ src/components/basic_table/pagination_bar.tsx | 15 +++ src/components/basic_table/table_types.ts | 106 ++++++++++++++++++ 7 files changed, 261 insertions(+), 34 deletions(-) diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index bc7c146460f..99898989509 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -2,9 +2,22 @@ import React from 'react'; import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { EuiCode } from '../../../../../src/components'; -import { propsInfo } from './props_info'; - import { Table } from './basic'; +import { EuiBasicTable } from '../../../../../src/components/basic_table/basic_table'; +import { Pagination as EuiTablePaginationProps } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { + EuiTableCriteria, + EuiTableCriteriaWithPagination, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableSelectionType, + EuiTableSortingType, +} from '!!prop-loader!../../../../../src/components/basic_table/table_types'; +import { + DefaultItemAction as EuiTableDefaultItemAction, + CustomItemAction as EuiTableCustomItemAction, +} from '!!prop-loader!../../../../../src/components/basic_table/action_types'; const source = require('!!raw-loader!./basic'); const html = renderToHtml(Table); @@ -81,6 +94,18 @@ export const section = { ), - props: propsInfo, + props: { + EuiBasicTable, + EuiTableCriteria, + EuiTableCriteriaWithPagination, + EuiTablePaginationProps, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + EuiTableDefaultItemAction, + EuiTableCustomItemAction, + }, demo: , }; diff --git a/src/components/basic_table/action_types.ts b/src/components/basic_table/action_types.ts index 1057e7b9c9c..d42fb5829d9 100644 --- a/src/components/basic_table/action_types.ts +++ b/src/components/basic_table/action_types.ts @@ -27,13 +27,28 @@ type IconFunction = (item: T) => EuiIconType; type ButtonColor = EuiButtonIconColor | EuiButtonEmptyColor; type EuiButtonIconColorFunction = (item: T) => ButtonColor; -interface DefaultItemActionBase { +export interface DefaultItemActionBase { + /** + * The display name of the action (will be the button caption) + */ name: ReactNode | ((item: T) => ReactNode); + /** + * Describes the action (will be the button title) + */ description: string; + /** + * A handler function to execute the action + */ onClick?: (item: T) => void; href?: string; target?: string; + /** + * A callback function that determines whether the action is available + */ available?: (item: T) => boolean; + /** + * A callback function that determines whether the action is enabled + */ enabled?: (item: T) => boolean; isPrimary?: boolean; 'data-test-subj'?: string; @@ -41,6 +56,9 @@ interface DefaultItemActionBase { export interface DefaultItemEmptyButtonAction extends DefaultItemActionBase { + /** + * The type of action + */ type?: 'button'; color?: EuiButtonEmptyColor | EuiButtonIconColorFunction; } @@ -48,7 +66,13 @@ export interface DefaultItemEmptyButtonAction export interface DefaultItemIconButtonAction extends DefaultItemActionBase { type: 'icon'; + /** + * Associates an icon with the button + */ icon: EuiIconType | IconFunction; + /** + * Defines the color of the button + */ color?: EuiButtonIconColor | EuiButtonIconColorFunction; } @@ -58,8 +82,17 @@ export type DefaultItemAction = ExclusiveUnion< >; export interface CustomItemAction { + /** + * The function that renders the action. Note that the returned node is expected to have `onFocus` and `onBlur` functions + */ render: (item: T, enabled: boolean) => ReactElement; + /** + * A callback that defines whether the action is available + */ available?: (item: T) => boolean; + /** + * A callback that defines whether the action is enabled + */ enabled?: (item: T) => boolean; isPrimary?: boolean; } diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 92908e24f41..9932adc1438 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -80,6 +80,8 @@ import { EuiTableSelectionType, EuiTableSortingType, ItemIdResolved, + EuiTableCriteria, + EuiTableCriteriaWithPagination, } from './table_types'; import { EuiTableSortMobileProps } from '../table/mobile/table_sort_mobile'; @@ -176,46 +178,85 @@ export type EuiBasicTableColumn = | EuiTableComputedColumnType | EuiTableActionsColumnType; -export interface Criteria { - page?: { - index: number; - size: number; - }; - sort?: { - field: keyof T; - direction: Direction; - }; -} - -export interface CriteriaWithPagination extends Criteria { - page: { - index: number; - size: number; - }; -} - type CellPropsCallback = (item: T, column: EuiBasicTableColumn) => object; type RowPropsCallback = (item: T) => object; interface BasicTableProps extends Omit { + /** + * Describes how to extract a unique ID from each item, used for selections & expanded rows + */ itemId?: ItemId; + /** + * Row expansion uses the itemId prop to identify each row + */ itemIdToExpandedRowMap?: ItemIdToExpandedRowMap; + /** + * A list of objects to who in the table - an item per row + */ items: T[]; + /** + * Applied to `EuiTableRowCell` + */ cellProps?: object | CellPropsCallback; + /** + * An array of one of the objects: #EuiTableFieldDataColumnType, #EuiTableComputedColumnType or #EuiTableActionsColumnType. + */ columns: Array>; + /** + * Error message to display + */ error?: string; + /** + * Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows." + */ tableCaption?: string; + /** + * Indicates which column should be used as the identifying cell in each row. Should match a "field" prop in FieldDataColumn + */ rowHeader?: string; hasActions?: boolean; isExpandable?: boolean; isSelectable?: boolean; + /** + * Provides an infinite loading indicator + */ loading?: boolean; + /** + * Message to display if table is empty + */ noItemsMessage?: ReactNode; - onChange?: (criteria: Criteria) => void; + /** + * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured). See #EuiTableCriteria or #EuiTableCriteriaWithPagination + */ + onChange?: (criteria: EuiTableCriteria) => void; + /** + * Configures #Pagination + */ pagination?: undefined; + /** + * If true, will convert table to cards in mobile view + */ + responsive?: boolean; + /** + * Applied to `EuiTableRow` + */ rowProps?: object | RowPropsCallback; + /** + * Configures #EuiTableSelectionType + */ selection?: EuiTableSelectionType; + /** + * Configures #EuiTableSortingType + */ sorting?: EuiTableSortingType; + /** + * Sets the table-layout CSS property. Note that auto tableLayout prevents truncateText from working properly. + */ + tableLayout?: 'fixed' | 'auto'; + /** + * 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 + */ + textOnly?: boolean; } type BasicTableWithPaginationProps = Omit< @@ -223,7 +264,7 @@ type BasicTableWithPaginationProps = Omit< 'pagination' | 'onChange' > & { pagination: Pagination; - onChange?: (criteria: CriteriaWithPagination) => void; + onChange?: (criteria: EuiTableCriteriaWithPagination) => void; }; export type EuiBasicTableProps = CommonProps & @@ -379,8 +420,8 @@ export class EuiBasicTable extends Component< this.cleanups.length = 0; }; - buildCriteria(props: EuiBasicTableProps): Criteria { - const criteria: Criteria = {}; + buildCriteria(props: EuiBasicTableProps): EuiTableCriteria { + const criteria: EuiTableCriteria = {}; if (hasPagination(props)) { criteria.page = { index: props.pagination.pageIndex, @@ -410,7 +451,7 @@ export class EuiBasicTable extends Component< onPageSizeChange(size: number) { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); - const criteria: CriteriaWithPagination = { + const criteria: EuiTableCriteriaWithPagination = { ...currentCriteria, page: { index: 0, // when page size changes, we take the user back to the first page @@ -425,7 +466,7 @@ export class EuiBasicTable extends Component< onPageChange(index: number) { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); - const criteria: CriteriaWithPagination = { + const criteria: EuiTableCriteriaWithPagination = { ...currentCriteria, page: { ...currentCriteria.page!, @@ -450,7 +491,7 @@ export class EuiBasicTable extends Component< ) { direction = SortDirection.reverse(currentCriteria.sort.direction); } - const criteria: Criteria = { + const criteria: EuiTableCriteria = { ...currentCriteria, // resetting the page if the criteria has one page: !currentCriteria.page diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 37874efe6df..0d63e47677e 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -20,15 +20,15 @@ import React, { Component, ReactNode } from 'react'; import { EuiBasicTable, - Criteria, EuiBasicTableProps, EuiBasicTableColumn, - CriteriaWithPagination, } from './basic_table'; import { EuiTableFieldDataColumnType, EuiTableDataType, EuiTableSortingType, + EuiTableCriteria, + EuiTableCriteriaWithPagination, } from './table_types'; import { PropertySort } from '../../services'; import { @@ -86,7 +86,7 @@ type InMemoryTableProps = Omit< * Set `allowNeutralSort` to false to force column sorting. Defaults to true. */ allowNeutralSort?: boolean; - onTableChange?: (nextValues: Criteria) => void; + onTableChange?: (nextValues: EuiTableCriteria) => void; executeQueryOptions?: { defaultFields?: string[]; isClauseMatcher?: (...args: any) => boolean; @@ -103,7 +103,7 @@ type InMemoryTablePropsWithPagination = Omit< 'pagination' | 'onTableChange' > & { pagination: Pagination; - onTableChange?: (nextValues: CriteriaWithPagination) => void; + onTableChange?: (nextValues: EuiTableCriteriaWithPagination) => void; }; export type EuiInMemoryTableProps = CommonProps & @@ -383,7 +383,7 @@ export class EuiInMemoryTable extends Component< } } - onTableChange = ({ page, sort }: Criteria) => { + onTableChange = ({ page, sort }: EuiTableCriteria) => { let { index: pageIndex, size: pageSize } = (page || {}) as { index: number; size: number; diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index 28abc47f05c..80288267889 100644 --- a/src/components/basic_table/index.ts +++ b/src/components/basic_table/index.ts @@ -31,4 +31,11 @@ export { EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, + EuiTableCriteria, + EuiTableCriteriaWithPagination, } from './table_types'; +export { Pagination as EuiTablePaginationProps } from './pagination_bar'; +export { + DefaultItemActionBase as EuiTableDefaultItemActionBase, + CustomItemAction as EuiTableCustomItemAction, +} from './action_types'; diff --git a/src/components/basic_table/pagination_bar.tsx b/src/components/basic_table/pagination_bar.tsx index f7c0dc9e6eb..29b4a53f69e 100644 --- a/src/components/basic_table/pagination_bar.tsx +++ b/src/components/basic_table/pagination_bar.tsx @@ -26,10 +26,25 @@ import { } from '../table/table_pagination/table_pagination'; export interface Pagination { + /** + * The current page (zero-based) index + */ pageIndex: number; + /** + * The maximum number of items that can be shown in a single page + */ pageSize: number; + /** + * The total number of items the page is "sliced" of + */ totalItemCount: number; + /** + * Configures the page size dropdown options + */ pageSizeOptions?: number[]; + /** + * Hides the page size dropdown + */ hidePerPageOptions?: boolean; } diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts index 551ffd6168a..c4848c4300b 100644 --- a/src/components/basic_table/table_types.ts +++ b/src/components/basic_table/table_types.ts @@ -41,15 +41,39 @@ export interface EuiTableFooterProps { export interface EuiTableFieldDataColumnType extends CommonProps, TdHTMLAttributes { + /** + * A field of the item (may be a nested field) + */ field: keyof T | string; // supports outer.inner key paths + /** + * The display name of the column + */ name: ReactNode; + /** + * A description of the column (will be presented as a title over the column header) + */ description?: string; + /** + * Describes the data types of the displayed value (serves as a rendering hint for the table) + */ dataType?: EuiTableDataType; + /** + * A CSS width property. Hints for the required width of the column (e.g. "30%", "100px", etc..) + */ width?: string; + /** + * Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against + */ sortable?: boolean | ((item: T) => Primitive); isExpander?: boolean; textOnly?: boolean; + /** + * Defines the horizontal alignment of the column + */ align?: HorizontalAlignment; + /** + * Indicates whether this column should truncate its content when it doesn't fit + */ truncateText?: boolean; isMobileHeader?: boolean; mobileOptions?: { @@ -59,7 +83,13 @@ export interface EuiTableFieldDataColumnType header?: boolean; }; hideForMobile?: boolean; + /** + * Describe a custom renderer function for the content + */ render?: (value: any, record: T) => ReactNode; + /** + * Content to display in the footer beneath this column + */ footer?: | string | ReactElement @@ -69,35 +99,111 @@ export interface EuiTableFieldDataColumnType export interface EuiTableComputedColumnType extends CommonProps, TdHTMLAttributes { + /** + * A function that computes the value for each item and renders it + */ render: (record: T) => ReactNode; + /** + * The display name of the column + */ name?: ReactNode; + /** + * A description of the column (will be presented as a title over the column header + */ description?: string; + /** + * If provided, allows this column to be sorted on. Must return the value to sort against. + */ sortable?: (item: T) => Primitive; + /** + * A CSS width property. Hints for the required width of the column + */ width?: string; + /** + * Indicates whether this column should truncate its content when it doesn't fit + */ truncateText?: boolean; isExpander?: boolean; align?: HorizontalAlignment; } export interface EuiTableActionsColumnType { + /** + * An array of actions to associate per item. + */ actions: Array>; + /** + * The display name of the column + */ name?: ReactNode; + /** + * A description of the column (will be presented as a title over the column header + */ description?: string; + /** + * A CSS width property. Hints for the required width of the column + + */ width?: string; } export interface EuiTableSortingType { + /** + * Indicates the property/field to sort on + */ sort?: { field: keyof T; direction: Direction; }; + /** + * Enables/disables unsorting of table columns. Supported by EuiInMemoryTable. + */ allowNeutralSort?: boolean; + /** + * Enables the default sorting ability for each column. + */ enableAllColumns?: boolean; } export interface EuiTableSelectionType { + /** + * A callback that will be called whenever the item selection changes + */ onSelectionChange?: (selection: T[]) => void; + /** + * A callback that is called per item to indicate whether it is selectable + */ selectable?: (item: T) => boolean; + /** + * 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 + */ selectableMessage?: (selectable: boolean, item: T) => string; initialSelected?: T[]; } + +export interface EuiTableCriteria { + /** + * If the shown items represents a page (slice) into a bigger set, this describes this page + */ + page?: { + index: number; + size: number; + }; + /** + * If the shown items are sorted, this describes the sort criteria + */ + sort?: { + field: keyof T; + direction: Direction; + }; +} + +export interface EuiTableCriteriaWithPagination extends EuiTableCriteria { + /** + * If the shown items represents a page (slice) into a bigger set, this describes this page + */ + page: { + index: number; + size: number; + }; +} From e46dc96b17a1569d77433e57da419e1d9e561006 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 12 Oct 2020 15:21:14 +0100 Subject: [PATCH 2/9] Added CL --- CHANGELOG.md | 1 + src/components/basic_table/index.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df932dac9fa..2f13a0dda9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `plus` and `minus` glyphs to `EuiIcon` ([#4111](https://github.com/elastic/eui/pull/4111)) +- Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) ## [`29.4.0`](https://github.com/elastic/eui/tree/v29.4.0) diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index 80288267889..546839bab4e 100644 --- a/src/components/basic_table/index.ts +++ b/src/components/basic_table/index.ts @@ -36,6 +36,6 @@ export { } from './table_types'; export { Pagination as EuiTablePaginationProps } from './pagination_bar'; export { - DefaultItemActionBase as EuiTableDefaultItemActionBase, + DefaultItemAction as EuiTableDefaultItemAction, CustomItemAction as EuiTableCustomItemAction, } from './action_types'; From 5c32f7702f3a03f544cdf24f9b35fcbb2e51d347 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 12 Oct 2020 17:04:03 +0100 Subject: [PATCH 3/9] Reverting criteria types --- .../src/views/tables/basic/basic_section.js | 18 ++++---- src/components/basic_table/basic_table.tsx | 45 ++++++++++++++----- .../basic_table/in_memory_table.tsx | 10 ++--- src/components/basic_table/index.ts | 8 ++-- src/components/basic_table/table_types.ts | 27 ----------- 5 files changed, 54 insertions(+), 54 deletions(-) diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index 99898989509..31fd593389e 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -6,8 +6,10 @@ import { Table } from './basic'; import { EuiBasicTable } from '../../../../../src/components/basic_table/basic_table'; import { Pagination as EuiTablePaginationProps } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; import { - EuiTableCriteria, - EuiTableCriteriaWithPagination, + Criteria, + CriteriaWithPagination, +} from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { EuiTableFieldDataColumnType, EuiTableComputedColumnType, EuiTableActionsColumnType, @@ -15,8 +17,8 @@ import { EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; import { - DefaultItemAction as EuiTableDefaultItemAction, - CustomItemAction as EuiTableCustomItemAction, + DefaultItemAction, + CustomItemAction, } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; const source = require('!!raw-loader!./basic'); @@ -96,16 +98,16 @@ export const section = { ), props: { EuiBasicTable, - EuiTableCriteria, - EuiTableCriteriaWithPagination, + Criteria, + CriteriaWithPagination, EuiTablePaginationProps, EuiTableSortingType, EuiTableSelectionType, EuiTableFieldDataColumnType, EuiTableComputedColumnType, EuiTableActionsColumnType, - EuiTableDefaultItemAction, - EuiTableCustomItemAction, + DefaultItemAction, + CustomItemAction, }, demo:
, }; diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index d1e34240ae9..3f69432e32e 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -80,8 +80,6 @@ import { EuiTableSelectionType, EuiTableSortingType, ItemIdResolved, - EuiTableCriteria, - EuiTableCriteriaWithPagination, } from './table_types'; import { EuiTableSortMobileProps } from '../table/mobile/table_sort_mobile'; @@ -178,6 +176,33 @@ export type EuiBasicTableColumn = | EuiTableComputedColumnType | EuiTableActionsColumnType; +export interface Criteria { + /** + * If the shown items represents a page (slice) into a bigger set, this describes this page + */ + page?: { + index: number; + size: number; + }; + /** + * If the shown items are sorted, this describes the sort criteria + */ + sort?: { + field: keyof T; + direction: Direction; + }; +} + +export interface CriteriaWithPagination extends Criteria { + /** + * If the shown items represents a page (slice) into a bigger set, this describes this page + */ + page: { + index: number; + size: number; + }; +} + type CellPropsCallback = (item: T, column: EuiBasicTableColumn) => object; type RowPropsCallback = (item: T) => object; @@ -226,9 +251,9 @@ interface BasicTableProps extends Omit { */ noItemsMessage?: ReactNode; /** - * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured). See #EuiTableCriteria or #EuiTableCriteriaWithPagination + * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured). See #Criteria or #CriteriaWithPagination */ - onChange?: (criteria: EuiTableCriteria) => void; + onChange?: (criteria: Criteria) => void; /** * Configures #Pagination */ @@ -264,7 +289,7 @@ type BasicTableWithPaginationProps = Omit< 'pagination' | 'onChange' > & { pagination: Pagination; - onChange?: (criteria: EuiTableCriteriaWithPagination) => void; + onChange?: (criteria: CriteriaWithPagination) => void; }; export type EuiBasicTableProps = CommonProps & @@ -420,8 +445,8 @@ export class EuiBasicTable extends Component< this.cleanups.length = 0; }; - buildCriteria(props: EuiBasicTableProps): EuiTableCriteria { - const criteria: EuiTableCriteria = {}; + buildCriteria(props: EuiBasicTableProps): Criteria { + const criteria: Criteria = {}; if (hasPagination(props)) { criteria.page = { index: props.pagination.pageIndex, @@ -451,7 +476,7 @@ export class EuiBasicTable extends Component< onPageSizeChange(size: number) { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); - const criteria: EuiTableCriteriaWithPagination = { + const criteria: CriteriaWithPagination = { ...currentCriteria, page: { index: 0, // when page size changes, we take the user back to the first page @@ -466,7 +491,7 @@ export class EuiBasicTable extends Component< onPageChange(index: number) { this.clearSelection(); const currentCriteria = this.buildCriteria(this.props); - const criteria: EuiTableCriteriaWithPagination = { + const criteria: CriteriaWithPagination = { ...currentCriteria, page: { ...currentCriteria.page!, @@ -491,7 +516,7 @@ export class EuiBasicTable extends Component< ) { direction = SortDirection.reverse(currentCriteria.sort.direction); } - const criteria: EuiTableCriteria = { + const criteria: Criteria = { ...currentCriteria, // resetting the page if the criteria has one page: !currentCriteria.page diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 5960d511a4e..353e3378282 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -22,13 +22,13 @@ import { EuiBasicTable, EuiBasicTableProps, EuiBasicTableColumn, + Criteria, + CriteriaWithPagination, } from './basic_table'; import { EuiTableFieldDataColumnType, EuiTableDataType, EuiTableSortingType, - EuiTableCriteria, - EuiTableCriteriaWithPagination, } from './table_types'; import { PropertySort } from '../../services'; import { @@ -86,7 +86,7 @@ type InMemoryTableProps = Omit< * Set `allowNeutralSort` to false to force column sorting. Defaults to true. */ allowNeutralSort?: boolean; - onTableChange?: (nextValues: EuiTableCriteria) => void; + onTableChange?: (nextValues: Criteria) => void; executeQueryOptions?: { defaultFields?: string[]; isClauseMatcher?: (...args: any) => boolean; @@ -103,7 +103,7 @@ type InMemoryTablePropsWithPagination = Omit< 'pagination' | 'onTableChange' > & { pagination: Pagination; - onTableChange?: (nextValues: EuiTableCriteriaWithPagination) => void; + onTableChange?: (nextValues: CriteriaWithPagination) => void; }; export type EuiInMemoryTableProps = CommonProps & @@ -383,7 +383,7 @@ export class EuiInMemoryTable extends Component< } } - onTableChange = ({ page, sort }: EuiTableCriteria) => { + onTableChange = ({ page, sort }: Criteria) => { let { index: pageIndex, size: pageSize } = (page || {}) as { index: number; size: number; diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index 546839bab4e..f1b9453c23a 100644 --- a/src/components/basic_table/index.ts +++ b/src/components/basic_table/index.ts @@ -21,6 +21,8 @@ export { EuiBasicTable, EuiBasicTableProps, EuiBasicTableColumn, + Criteria, + CriteriaWithPagination, } from './basic_table'; export { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table'; export { @@ -31,11 +33,9 @@ export { EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, - EuiTableCriteria, - EuiTableCriteriaWithPagination, } from './table_types'; export { Pagination as EuiTablePaginationProps } from './pagination_bar'; export { - DefaultItemAction as EuiTableDefaultItemAction, - CustomItemAction as EuiTableCustomItemAction, + DefaultItemAction, + CustomItemAction, } from './action_types'; diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts index c4848c4300b..6c902a5b314 100644 --- a/src/components/basic_table/table_types.ts +++ b/src/components/basic_table/table_types.ts @@ -180,30 +180,3 @@ export interface EuiTableSelectionType { selectableMessage?: (selectable: boolean, item: T) => string; initialSelected?: T[]; } - -export interface EuiTableCriteria { - /** - * If the shown items represents a page (slice) into a bigger set, this describes this page - */ - page?: { - index: number; - size: number; - }; - /** - * If the shown items are sorted, this describes the sort criteria - */ - sort?: { - field: keyof T; - direction: Direction; - }; -} - -export interface EuiTableCriteriaWithPagination extends EuiTableCriteria { - /** - * If the shown items represents a page (slice) into a bigger set, this describes this page - */ - page: { - index: number; - size: number; - }; -} From 4fe1bc3ccd7f97defaf777533906c9e7f10da0bb Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 12 Oct 2020 17:19:02 +0100 Subject: [PATCH 4/9] More improvements --- src-docs/src/views/tables/basic/basic_section.js | 2 +- src/components/basic_table/index.ts | 5 +---- src/components/basic_table/table_types.ts | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index 31fd593389e..83440771428 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -4,11 +4,11 @@ import { renderToHtml } from '../../../services'; import { EuiCode } from '../../../../../src/components'; import { Table } from './basic'; import { EuiBasicTable } from '../../../../../src/components/basic_table/basic_table'; -import { Pagination as EuiTablePaginationProps } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; import { Criteria, CriteriaWithPagination, } from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; +import { Pagination as EuiTablePaginationProps } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; import { EuiTableFieldDataColumnType, EuiTableComputedColumnType, diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index f1b9453c23a..92c95e75169 100644 --- a/src/components/basic_table/index.ts +++ b/src/components/basic_table/index.ts @@ -35,7 +35,4 @@ export { EuiTableSortingType, } from './table_types'; export { Pagination as EuiTablePaginationProps } from './pagination_bar'; -export { - DefaultItemAction, - CustomItemAction, -} from './action_types'; +export { DefaultItemAction, CustomItemAction } from './action_types'; diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts index 6c902a5b314..3dc227d0595 100644 --- a/src/components/basic_table/table_types.ts +++ b/src/components/basic_table/table_types.ts @@ -129,7 +129,7 @@ export interface EuiTableComputedColumnType export interface EuiTableActionsColumnType { /** - * An array of actions to associate per item. + * An array of one of the objects: #DefaultItemAction or #CustomItemAction */ actions: Array>; /** From 98f57e8a41a887d584e3fecb9ae71f0d777b73d8 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 12 Oct 2020 17:36:50 +0100 Subject: [PATCH 5/9] More improvements --- src-docs/src/views/tables/basic/basic_section.js | 6 +++--- src/components/basic_table/in_memory_table.tsx | 2 +- src/components/basic_table/index.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index 83440771428..ef9b8b277f6 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -3,12 +3,12 @@ import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; import { EuiCode } from '../../../../../src/components'; import { Table } from './basic'; -import { EuiBasicTable } from '../../../../../src/components/basic_table/basic_table'; +import { EuiBasicTable } from '../../../../../src/components/basic_table'; import { Criteria, CriteriaWithPagination, } from '!!prop-loader!../../../../../src/components/basic_table/basic_table'; -import { Pagination as EuiTablePaginationProps } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; +import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar'; import { EuiTableFieldDataColumnType, EuiTableComputedColumnType, @@ -100,7 +100,7 @@ export const section = { EuiBasicTable, Criteria, CriteriaWithPagination, - EuiTablePaginationProps, + Pagination, EuiTableSortingType, EuiTableSelectionType, EuiTableFieldDataColumnType, diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 353e3378282..4f21e6ac37e 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -20,9 +20,9 @@ import React, { Component, ReactNode } from 'react'; import { EuiBasicTable, + Criteria, EuiBasicTableProps, EuiBasicTableColumn, - Criteria, CriteriaWithPagination, } from './basic_table'; import { diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index 92c95e75169..f9301c3cf2d 100644 --- a/src/components/basic_table/index.ts +++ b/src/components/basic_table/index.ts @@ -34,5 +34,5 @@ export { EuiTableSelectionType, EuiTableSortingType, } from './table_types'; -export { Pagination as EuiTablePaginationProps } from './pagination_bar'; +export { Pagination } from './pagination_bar'; export { DefaultItemAction, CustomItemAction } from './action_types'; From 465cbaacd150aaaeaf76e5a4c327544b2e7aa6f8 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 13 Oct 2020 12:02:51 +0100 Subject: [PATCH 6/9] Fixing DefaultItemAction prop table not showing --- src-docs/src/views/tables/basic/basic_section.js | 6 ++---- src-docs/src/views/tables/basic/props.tsx | 4 ++++ 2 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/tables/basic/props.tsx diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index ef9b8b277f6..9f25e5ff613 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -16,10 +16,8 @@ import { EuiTableSelectionType, EuiTableSortingType, } from '!!prop-loader!../../../../../src/components/basic_table/table_types'; -import { - DefaultItemAction, - CustomItemAction, -} from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types'; +import { DefaultItemActionProps as DefaultItemAction } from './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 new file mode 100644 index 00000000000..6c30744fc79 --- /dev/null +++ b/src-docs/src/views/tables/basic/props.tsx @@ -0,0 +1,4 @@ +import React, { FunctionComponent } from 'react'; +import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types'; + +export const DefaultItemActionProps: FunctionComponent> = () =>
; From f49c331addfc354807156509927809e202938204 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 13 Oct 2020 12:04:44 +0100 Subject: [PATCH 7/9] Es lint fix --- src-docs/src/views/tables/basic/props.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/tables/basic/props.tsx b/src-docs/src/views/tables/basic/props.tsx index 6c30744fc79..8cd28a2dbfd 100644 --- a/src-docs/src/views/tables/basic/props.tsx +++ b/src-docs/src/views/tables/basic/props.tsx @@ -1,4 +1,6 @@ import React, { FunctionComponent } from 'react'; import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types'; -export const DefaultItemActionProps: FunctionComponent> = () =>
; +export const DefaultItemActionProps: FunctionComponent> = () =>
; From 5975d2dd43d62ccd6624cd6fd0d758cef0191991 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 16 Oct 2020 13:04:12 +0100 Subject: [PATCH 8/9] Update src-docs/src/views/tables/basic/props.tsx Co-authored-by: Greg Thompson --- src-docs/src/views/tables/basic/props.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/tables/basic/props.tsx b/src-docs/src/views/tables/basic/props.tsx index 8cd28a2dbfd..0cabf76cdeb 100644 --- a/src-docs/src/views/tables/basic/props.tsx +++ b/src-docs/src/views/tables/basic/props.tsx @@ -1,6 +1,9 @@ import React, { FunctionComponent } from 'react'; import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types'; +// Simulating the `item` generic +type T = {}; + export const DefaultItemActionProps: FunctionComponent> = () =>
; From 2f557e9742613ebf6c2149253fdc4f4fab2064c5 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 16 Oct 2020 13:06:43 +0100 Subject: [PATCH 9/9] CL --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d1aafe87c1..3d58f817477 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) + **Theme: Amsterdam** - Tightened `line-height` for some `EuiTitle` sizes ([4133](https://github.com/elastic/eui/pull/4133)) @@ -7,7 +9,6 @@ ## [`29.5.0`](https://github.com/elastic/eui/tree/v29.5.0) - Added `plus` and `minus` glyphs to `EuiIcon` ([#4111](https://github.com/elastic/eui/pull/4111)) -- Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) **Bug fixes**