From 46f34264154eef771881b2c034020f2325534764 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 16 Nov 2020 12:30:50 -0700 Subject: [PATCH 1/2] Export useDataGridColumnSorting, useDataGridColumnSelector, and useDataGridStyleSelector from EUI --- src/components/datagrid/column_selector.tsx | 2 +- src/components/datagrid/column_sorting.tsx | 2 +- src/components/datagrid/data_grid.tsx | 14 ++++++++------ src/components/datagrid/index.ts | 3 +++ src/components/datagrid/style_selector.tsx | 2 +- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx index f28e62cccd0..3822478aff1 100644 --- a/src/components/datagrid/column_selector.tsx +++ b/src/components/datagrid/column_selector.tsx @@ -56,7 +56,7 @@ const getShowColumnSelectorValue = ( return showColumnSelector[valueName] !== false; }; -export const useColumnSelector = ( +export const useDataGridColumnSelector = ( availableColumns: EuiDataGridColumn[], columnVisibility: EuiDataGridColumnVisibility, showColumnSelector: EuiDataGridToolBarVisibilityOptions['showColumnSelector'], diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx index cbece737c9f..890d1562d61 100644 --- a/src/components/datagrid/column_sorting.tsx +++ b/src/components/datagrid/column_sorting.tsx @@ -45,7 +45,7 @@ import { } from './data_grid_schema'; import { EuiToken } from '../token'; -export const useColumnSorting = ( +export const useDataGridColumnSorting = ( columns: EuiDataGridColumn[], sorting: EuiDataGridSorting | undefined, schema: EuiDataGridSchema, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index c69e64cba18..11f533b916b 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -61,8 +61,8 @@ import { EuiDataGridCellProps } from './data_grid_cell'; import { EuiButtonEmpty } from '../button'; import { keys, htmlIdGenerator } from '../../services'; import { EuiDataGridBody } from './data_grid_body'; -import { useColumnSelector } from './column_selector'; -import { useStyleSelector, startingStyles } from './style_selector'; +import { useDataGridColumnSelector } from './column_selector'; +import { useDataGridStyleSelector, startingStyles } from './style_selector'; import { EuiTablePagination } from '../table/table_pagination'; import { EuiFocusTrap } from '../focus_trap'; import { @@ -76,7 +76,7 @@ import { useDetectSchema, schemaDetectors as providedSchemaDetectors, } from './data_grid_schema'; -import { useColumnSorting } from './column_sorting'; +import { useDataGridColumnSorting } from './column_sorting'; import { EuiMutationObserver } from '../observer/mutation_observer'; import { DataGridContext } from './data_grid_context'; @@ -769,20 +769,22 @@ export const EuiDataGrid: FunctionComponent = (props) => { orderedVisibleColumns, setVisibleColumns, switchColumnPos, - ] = useColumnSelector( + ] = useDataGridColumnSelector( columns, columnVisibility, checkOrDefaultToolBarDiplayOptions(toolbarVisibility, 'showColumnSelector'), displayValues ); - const columnSorting = useColumnSorting( + const columnSorting = useDataGridColumnSorting( orderedVisibleColumns, sorting, mergedSchema, allSchemaDetectors, displayValues ); - const [styleSelector, gridStyles] = useStyleSelector(gridStyleWithDefaults); + const [styleSelector, gridStyles] = useDataGridStyleSelector( + gridStyleWithDefaults + ); // compute the default column width from the container's clientWidth and count of visible columns const defaultColumnWidth = useDefaultColumnWidth( diff --git a/src/components/datagrid/index.ts b/src/components/datagrid/index.ts index 6ff40c756e8..2ceffd67b49 100644 --- a/src/components/datagrid/index.ts +++ b/src/components/datagrid/index.ts @@ -36,5 +36,8 @@ export { EuiDataGridSchemaDetector, SchemaTypeScore, } from './data_grid_schema'; +export { useDataGridColumnSelector } from './column_selector'; +export { useDataGridColumnSorting } from './column_sorting'; +export { useDataGridStyleSelector } from './style_selector'; export * from './data_grid_types'; diff --git a/src/components/datagrid/style_selector.tsx b/src/components/datagrid/style_selector.tsx index a2eb51aa38a..5a836b998f6 100644 --- a/src/components/datagrid/style_selector.tsx +++ b/src/components/datagrid/style_selector.tsx @@ -49,7 +49,7 @@ const densityStyles: { [key: string]: Partial } = { }, }; -export const useStyleSelector = ( +export const useDataGridStyleSelector = ( initialStyles: EuiDataGridStyle ): [ReactElement, EuiDataGridStyle] => { // track styles specified by the user at run time From 62c04684d85e0756a144e58ab110cff8fafc3f19 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 16 Nov 2020 12:41:05 -0700 Subject: [PATCH 2/2] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 723587f9ee3..7276e45e685 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Added `eql` glyph in `EuiIcon` ([#4110](https://github.com/elastic/eui/pull/4110)) - Added `testenv` mock for `htmlIdGenerator` ([#4212](https://github.com/elastic/eui/pull/4212)) - Added several Sass mixins for handling of unified focus/hover states ([#4242](https://github.com/elastic/eui/pull/4242)) +- Exported `useDataGridColumnSelector`, `useDataGridColumnSorting`, and `useDataGridStyleSelector` hooks ([#4271](https://github.com/elastic/eui/pull/4271)) **Theme: Amsterdam**