Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

feature: EuiDataGrid type improvements to support React 18 #6958

Merged
merged 10 commits into from
Jul 25, 2023
Merged

feature: EuiDataGrid type improvements to support React 18 #6958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
222ee71
fix: type EuiDataGridCell context
tkajtoch Jul 18, 2023
d442619
fix: type pagination and sorting callbacks
tkajtoch Jul 18, 2023
d5792fb
fix: type EuiDataGrid cell and action callbacks
tkajtoch Jul 18, 2023
395f0c8
fix: add remaining EuiDataGrid types
tkajtoch Jul 18, 2023
32692b2
refactor: modify renderAdditionalControls to ensure correct typing
tkajtoch Jul 18, 2023
50a5a27
fix!: update EuiDataGridCellProps renderCellValue types to fix type i…
tkajtoch Jul 18, 2023
8e28960
refactor: make renderAdditionalControls cleaner
tkajtoch Jul 24, 2023
8b4ca34
fix: allow declare fields
tkajtoch Jul 24, 2023
43d487e
fix: use event.currentTarget instead of event.target
tkajtoch Jul 24, 2023
a112385
fix: update EuiDataGridColumnCellAction type to ComponentType
tkajtoch Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/babel/proptypes-from-ts-props/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function stripTypeScript(filename, ast) {
return babelCore.transform(babelCore.transformFromAst(ast).code, {
filename: filename,
babelrc: false,
presets: ['@babel/typescript'],
presets: [['@babel/typescript', { allowDeclareFields: true }]],
}).code;
}

Expand Down
11 changes: 7 additions & 4 deletions src-docs/src/views/datagrid/advanced/custom_renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ import {
EuiSpacer,
useEuiTheme,
logicalCSS,
EuiDataGridPaginationProps,
EuiDataGridSorting,
EuiDataGridColumnSortingConfig,
} from '../../../../../src';

const raw_data: Array<{ [key: string]: string }> = [];
Expand Down Expand Up @@ -166,16 +169,16 @@ export default () => {

// Pagination
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
const onChangePage = useCallback((pageIndex) => {
const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>((pageIndex) => {
setPagination((pagination) => ({ ...pagination, pageIndex }));
}, []);
const onChangePageSize = useCallback((pageSize) => {
const onChangePageSize = useCallback<EuiDataGridPaginationProps['onChangeItemsPerPage']>((pageSize) => {
setPagination((pagination) => ({ ...pagination, pageSize }));
}, []);

// Sorting
const [sortingColumns, setSortingColumns] = useState([]);
const onSort = useCallback((sortingColumns) => {
const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
const onSort = useCallback<EuiDataGridSorting['onSort']>((sortingColumns) => {
setSortingColumns(sortingColumns);
}, []);

Expand Down
38 changes: 26 additions & 12 deletions src-docs/src/views/datagrid/advanced/ref.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ import {
EuiModalHeader,
EuiModalHeaderTitle,
EuiText,
EuiDataGridColumnCellAction,
EuiDataGridColumnSortingConfig,
EuiDataGridPaginationProps,
EuiDataGridSorting,
} from '../../../../../src';

const raw_data: Array<{ [key: string]: string }> = [];
Expand Down Expand Up @@ -44,13 +48,16 @@ export default () => {
dataGridRef.current!.setFocusedCell(lastFocusedCell); // Set the data grid focus back to the cell that opened the modal
}, [lastFocusedCell]);

const showModal = useCallback(({ rowIndex, colIndex }) => {
setIsModalVisible(true);
dataGridRef.current!.closeCellPopover(); // Close any open cell popovers
setLastFocusedCell({ rowIndex, colIndex }); // Store the cell that opened this modal
}, []);
const showModal = useCallback(
({ rowIndex, colIndex }: { rowIndex: number; colIndex: number }) => {
setIsModalVisible(true);
dataGridRef.current!.closeCellPopover(); // Close any open cell popovers
setLastFocusedCell({ rowIndex, colIndex }); // Store the cell that opened this modal
},
[]
);

const openModalAction = useCallback(
const openModalAction = useCallback<EuiDataGridColumnCellAction>(
({ Component, rowIndex, colIndex }) => {
return (
<Component
Expand Down Expand Up @@ -105,16 +112,23 @@ export default () => {

// Pagination
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
const onChangePage = useCallback((pageIndex) => {
setPagination((pagination) => ({ ...pagination, pageIndex }));
}, []);
const onChangePageSize = useCallback((pageSize) => {
const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
(pageIndex) => {
setPagination((pagination) => ({ ...pagination, pageIndex }));
},
[]
);
const onChangePageSize = useCallback<
EuiDataGridPaginationProps['onChangeItemsPerPage']
>((pageSize) => {
setPagination((pagination) => ({ ...pagination, pageSize }));
}, []);

// Sorting
const [sortingColumns, setSortingColumns] = useState([]);
const onSort = useCallback((sortingColumns) => {
const [sortingColumns, setSortingColumns] = useState<
EuiDataGridColumnSortingConfig[]
>([]);
const onSort = useCallback<EuiDataGridSorting['onSort']>((sortingColumns) => {
setSortingColumns(sortingColumns);
}, []);

Expand Down
15 changes: 11 additions & 4 deletions src-docs/src/views/datagrid/styling/row_height_auto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import {
EuiText,
EuiSpacer,
formatDate,
EuiDataGridSorting,
EuiDataGridColumnSortingConfig,
EuiDataGridPaginationProps,
} from '../../../../../src';

interface DataShape {
Expand Down Expand Up @@ -146,15 +149,19 @@ export default () => {
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });

// Sorting
const [sortingColumns, setSortingColumns] = useState([]);
const onSort = useCallback(
const [sortingColumns, setSortingColumns] = useState<
EuiDataGridColumnSortingConfig[]
>([]);
const onSort = useCallback<EuiDataGridSorting['onSort']>(
(sortingColumns) => {
setSortingColumns(sortingColumns);
},
[setSortingColumns]
);

const onChangeItemsPerPage = useCallback(
const onChangeItemsPerPage = useCallback<
EuiDataGridPaginationProps['onChangeItemsPerPage']
>(
(pageSize) =>
setPagination((pagination) => ({
...pagination,
Expand All @@ -164,7 +171,7 @@ export default () => {
[setPagination]
);

const onChangePage = useCallback(
const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
(pageIndex) =>
setPagination((pagination) => ({ ...pagination, pageIndex })),
[setPagination]
Expand Down
11 changes: 7 additions & 4 deletions src-docs/src/views/datagrid/styling/row_height_fixed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import {
EuiText,
EuiSpacer,
formatDate,
EuiDataGridSorting,
EuiDataGridColumnSortingConfig,
EuiDataGridPaginationProps,
} from '../../../../../src';

interface DataShape {
Expand Down Expand Up @@ -146,15 +149,15 @@ export default () => {
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });

// Sorting
const [sortingColumns, setSortingColumns] = useState([]);
const onSort = useCallback(
const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
const onSort = useCallback<EuiDataGridSorting['onSort']>(
(sortingColumns) => {
setSortingColumns(sortingColumns);
},
[setSortingColumns]
);

const onChangeItemsPerPage = useCallback(
const onChangeItemsPerPage = useCallback<EuiDataGridPaginationProps['onChangeItemsPerPage']>(
(pageSize) =>
setPagination((pagination) => ({
...pagination,
Expand All @@ -164,7 +167,7 @@ export default () => {
[setPagination]
);

const onChangePage = useCallback(
const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
(pageIndex) =>
setPagination((pagination) => ({ ...pagination, pageIndex })),
[setPagination]
Expand Down
21 changes: 16 additions & 5 deletions src-docs/src/views/datagrid/styling/row_line_height.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,14 @@ import React, {
} from 'react';
import githubData from '../_row_auto_height_data.json';

import { EuiDataGrid, EuiDataGridProps, formatDate } from '../../../../../src';
import {
EuiDataGrid,
EuiDataGridColumnSortingConfig,
EuiDataGridPaginationProps,
EuiDataGridProps,
EuiDataGridSorting,
formatDate,
} from '../../../../../src';

interface DataShape {
html_url: string;
Expand Down Expand Up @@ -96,15 +103,19 @@ export default () => {
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });

// Sorting
const [sortingColumns, setSortingColumns] = useState([]);
const onSort = useCallback(
const [sortingColumns, setSortingColumns] = useState<
EuiDataGridColumnSortingConfig[]
>([]);
const onSort = useCallback<EuiDataGridSorting['onSort']>(
(sortingColumns) => {
setSortingColumns(sortingColumns);
},
[setSortingColumns]
);

const onChangeItemsPerPage = useCallback(
const onChangeItemsPerPage = useCallback<
EuiDataGridPaginationProps['onChangeItemsPerPage']
>(
(pageSize) =>
setPagination((pagination) => ({
...pagination,
Expand All @@ -114,7 +125,7 @@ export default () => {
[setPagination]
);

const onChangePage = useCallback(
const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
(pageIndex) =>
setPagination((pagination) => ({ ...pagination, pageIndex })),
[setPagination]
Expand Down
7 changes: 5 additions & 2 deletions src-docs/src/views/datagrid/toolbar/additional_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
EuiContextMenuItem,
EuiContextMenuPanel,
EuiPopover,
EuiDataGridPaginationProps,
} from '../../../../../src';

const columns = [
Expand Down Expand Up @@ -94,12 +95,14 @@ export default () => {
columns.map(({ id }) => id)
);

const setPageIndex = useCallback(
const setPageIndex = useCallback<EuiDataGridPaginationProps['onChangePage']>(
(pageIndex) =>
setPagination((pagination) => ({ ...pagination, pageIndex })),
[]
);
const setPageSize = useCallback(
const setPageSize = useCallback<
EuiDataGridPaginationProps['onChangeItemsPerPage']
>(
(pageSize) =>
setPagination((pagination) => ({
...pagination,
Expand Down
3 changes: 2 additions & 1 deletion src/components/datagrid/body/data_grid_body_custom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';

import {
EuiDataGridBodyProps,
EuiDataGridCustomBodyProps,
EuiDataGridSetCustomGridBodyProps,
} from '../data_grid_types';
import { useDataGridHeader } from './header';
Expand Down Expand Up @@ -140,7 +141,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
rowHeightUtils,
};

const _Cell = useCallback(
const _Cell = useCallback<EuiDataGridCustomBodyProps['Cell']>(
({ colIndex, visibleRowIndex, ...rest }) => {
const style = {
height: rowHeightUtils.isAutoHeight(visibleRowIndex, rowHeightsOptions)
Expand Down
2 changes: 2 additions & 0 deletions src/components/datagrid/body/data_grid_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import classNames from 'classnames';
import React, {
Component,
ContextType,
createRef,
FocusEvent,
FunctionComponent,
Expand Down Expand Up @@ -143,6 +144,7 @@ export class EuiDataGridCell extends Component<
style = null;

static contextType = DataGridFocusContext;
declare context: ContextType<typeof DataGridFocusContext>;

getInteractables = () => {
const tabbingRef = this.cellContentsRef;
Expand Down
4 changes: 3 additions & 1 deletion src/components/datagrid/body/data_grid_cell_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ export const useCellPopover = (): {
>({});

const closeCellPopover = useCallback(() => setPopoverIsOpen(false), []);
const openCellPopover = useCallback(
const openCellPopover = useCallback<
DataGridCellPopoverContextShape['openCellPopover']
>(
({ rowIndex, colIndex }) => {
// Prevent popover DOM issues when re-opening the same popover
if (
Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/body/data_grid_row_manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const useRowManager = ({
}): EuiDataGridRowManager => {
const rowIdToElements = useRef(new Map<number, HTMLDivElement>());

const getRow = useCallback(
const getRow = useCallback<EuiDataGridRowManager['getRow']>(
({ rowIndex, visibleRowIndex, top, height }) => {
let rowElement = rowIdToElements.current.get(rowIndex);

Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/body/header/data_grid_header_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ export const useSortingUtils = ({
export const usePopoverArrowNavigation = () => {
const popoverPanelRef = useRef<HTMLElement | null>(null);
const actionsRef = useRef<FocusableElement[] | undefined>(undefined);
const panelRef = useCallback((ref) => {
const panelRef = useCallback((ref: HTMLElement | null) => {
popoverPanelRef.current = ref;
actionsRef.current = ref ? tabbable(ref) : undefined;
}, []);
Expand Down
Loading