From 7e712e58fbd442161a851321f856698577598739 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 19 Oct 2020 17:12:10 +0100 Subject: [PATCH] [Docs, EuiBasicTable] Recreating props tables with props loader (#4125) * Using prop loader to create props table for basic table * Added CL * Reverting criteria types * More improvements * More improvements * Fixing DefaultItemAction prop table not showing * Es lint fix * Update src-docs/src/views/tables/basic/props.tsx Co-authored-by: Greg Thompson * CL Co-authored-by: Greg Thompson --- CHANGELOG.md | 1 + .../src/views/tables/basic/basic_section.js | 31 +++++++- src-docs/src/views/tables/basic/props.tsx | 9 +++ src/components/basic_table/action_types.ts | 35 +++++++- src/components/basic_table/basic_table.tsx | 66 ++++++++++++++++ src/components/basic_table/index.ts | 4 + src/components/basic_table/pagination_bar.tsx | 15 ++++ src/components/basic_table/table_types.ts | 79 +++++++++++++++++++ 8 files changed, 236 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/tables/basic/props.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index cbe94863ce3..d99eed8cf3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056)) - Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056)) - Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056)) +- Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125)) **Breaking changes** diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index bc7c146460f..9f25e5ff613 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'; +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 } from './props'; const source = require('!!raw-loader!./basic'); const html = renderToHtml(Table); @@ -81,6 +94,18 @@ export const section = { ), - props: propsInfo, + props: { + EuiBasicTable, + Criteria, + CriteriaWithPagination, + Pagination, + EuiTableSortingType, + EuiTableSelectionType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType, + DefaultItemAction, + CustomItemAction, + }, demo: , }; 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..0cabf76cdeb --- /dev/null +++ b/src-docs/src/views/tables/basic/props.tsx @@ -0,0 +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> = () =>
; 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 3ada08a1b25..3f69432e32e 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -177,10 +177,16 @@ export type EuiBasicTableColumn = | 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; @@ -188,6 +194,9 @@ export interface Criteria { } 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; @@ -198,24 +207,81 @@ 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; + /** + * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured). See #Criteria or #CriteriaWithPagination + */ onChange?: (criteria: Criteria) => 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< diff --git a/src/components/basic_table/index.ts b/src/components/basic_table/index.ts index 28abc47f05c..f9301c3cf2d 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 { @@ -32,3 +34,5 @@ export { EuiTableSelectionType, EuiTableSortingType, } from './table_types'; +export { Pagination } from './pagination_bar'; +export { DefaultItemAction, CustomItemAction } 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..3dc227d0595 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,84 @@ 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 one of the objects: #DefaultItemAction or #CustomItemAction + */ 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[]; }