-
Notifications
You must be signed in to change notification settings - Fork 837
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EuiDataGrid] Set up
ref that exposes focus/popover internal APIs (#…
…5499) * Set up types * Set up forwardRef * Add setFocusedCell API to returned grid ref obj * Add colIndex prop to cell actions - so that cell actions that trigger modals or flyouts can re-focus into the correct cell using the new ref API * Add documentation + example + props * Add changelog * [PR feedback] Types Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * [PR feedback] Clean up unit test * [Rebase] Tweak useImperativeHandle location - Moving it below fullscreen logic, as we're oging to expose setIsFullScreen as an API shortly Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
- Loading branch information
1 parent
dff7a77
commit 59461c7
Showing
13 changed files
with
725 additions
and
366 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { GuideSectionTypes } from '../../components'; | ||
| import { | ||
| EuiCode, | ||
| EuiCodeBlock, | ||
| EuiSpacer, | ||
| EuiCallOut, | ||
| } from '../../../../src/components'; | ||
|
|
||
| import { EuiDataGridRefProps } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types'; | ||
| import DataGridRef from './ref'; | ||
| const dataGridRefSource = require('!!raw-loader!./ref'); | ||
| const dataGridRefSnippet = `const dataGridRef = useRef(); | ||
| <EuiDataGrid ref={dataGridRef} {...props} /> | ||
| // Mnaually focus a specific cell within the data grid | ||
| dataGridRef.current.setFocusedCell({ rowIndex, colIndex }); | ||
| `; | ||
|
|
||
| export const DataGridRefExample = { | ||
| title: 'Data grid ref methods', | ||
| sections: [ | ||
| { | ||
| source: [ | ||
| { | ||
| type: GuideSectionTypes.JS, | ||
| code: dataGridRefSource, | ||
| }, | ||
| ], | ||
| text: ( | ||
| <> | ||
| <p> | ||
| For advanced use cases, and particularly for data grids that manage | ||
| associated modals/flyouts and need to manually control their grid | ||
| cell popovers & focus states, we expose certain internal methods via | ||
| the <EuiCode>ref</EuiCode> prop of EuiDataGrid. These methods are: | ||
| </p> | ||
| <ul> | ||
| <li> | ||
| <EuiCode>setFocusedCell({'{ rowIndex, colIndex }'})</EuiCode> - | ||
| focuses the specified cell in the grid. | ||
| <EuiSpacer size="s" /> | ||
| <EuiCallOut | ||
| iconType="accessibility" | ||
| title="Using this method is an accessibility requirement if your data | ||
| grid toggles a modal or flyout." | ||
| > | ||
| Your modal or flyout should restore focus into the grid on close | ||
| to prevent keyboard or screen reader users from being stranded. | ||
| </EuiCallOut> | ||
| </li> | ||
| </ul> | ||
| <EuiCodeBlock language="jsx">{dataGridRefSnippet}</EuiCodeBlock> | ||
| <p> | ||
| The below example shows how to use the internal APIs for a data grid | ||
| that opens a modal via cell actions. | ||
| </p> | ||
| </> | ||
| ), | ||
| components: { DataGridRef }, | ||
| demo: <DataGridRef />, | ||
| snippet: dataGridRefSnippet, | ||
| props: { EuiDataGridRefProps }, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| import React, { useCallback, useMemo, useState, useRef } from 'react'; | ||
| import { fake } from 'faker'; | ||
|
|
||
| import { | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiSpacer, | ||
| EuiFormRow, | ||
| EuiFieldNumber, | ||
| EuiButton, | ||
| EuiDataGrid, | ||
| EuiModal, | ||
| EuiModalBody, | ||
| EuiModalFooter, | ||
| EuiModalHeader, | ||
| EuiModalHeaderTitle, | ||
| EuiText, | ||
| } from '../../../../src/components/'; | ||
|
|
||
| const raw_data = []; | ||
| for (let i = 1; i < 100; i++) { | ||
| raw_data.push({ | ||
| name: fake('{{name.lastName}}, {{name.firstName}}'), | ||
| email: fake('{{internet.email}}'), | ||
| location: fake('{{address.city}}, {{address.country}}'), | ||
| account: fake('{{finance.account}}'), | ||
| date: fake('{{date.past}}'), | ||
| }); | ||
| } | ||
|
|
||
| export default () => { | ||
| const dataGridRef = useRef(); | ||
|
|
||
| // Modal | ||
| const [isModalVisible, setIsModalVisible] = useState(false); | ||
| const [lastFocusedCell, setLastFocusedCell] = useState({}); | ||
|
|
||
| const closeModal = useCallback(() => { | ||
| setIsModalVisible(false); | ||
| 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); | ||
| setLastFocusedCell({ rowIndex, colIndex }); // Store the cell that opened this modal | ||
| }, []); | ||
|
|
||
| const openModalAction = useCallback( | ||
| ({ Component, rowIndex, colIndex }) => { | ||
| return ( | ||
| <Component | ||
| onClick={() => showModal({ rowIndex, colIndex })} | ||
| iconType="faceHappy" | ||
| aria-label="Open modal" | ||
| > | ||
| Open modal | ||
| </Component> | ||
| ); | ||
| }, | ||
| [showModal] | ||
| ); | ||
|
|
||
| // Columns | ||
| const columns = useMemo( | ||
| () => [ | ||
| { | ||
| id: 'name', | ||
| displayAsText: 'Name', | ||
| cellActions: [openModalAction], | ||
| }, | ||
| { | ||
| id: 'email', | ||
| displayAsText: 'Email address', | ||
| initialWidth: 130, | ||
| cellActions: [openModalAction], | ||
| }, | ||
| { | ||
| id: 'location', | ||
| displayAsText: 'Location', | ||
| cellActions: [openModalAction], | ||
| }, | ||
| { | ||
| id: 'account', | ||
| displayAsText: 'Account', | ||
| cellActions: [openModalAction], | ||
| }, | ||
| { | ||
| id: 'date', | ||
| displayAsText: 'Date', | ||
| cellActions: [openModalAction], | ||
| }, | ||
| ], | ||
| [openModalAction] | ||
| ); | ||
|
|
||
| // Column visibility | ||
| const [visibleColumns, setVisibleColumns] = useState(() => | ||
| columns.map(({ id }) => id) | ||
| ); | ||
|
|
||
| // Pagination | ||
| const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 }); | ||
| const onChangePage = useCallback( | ||
| (pageIndex) => | ||
| setPagination((pagination) => ({ ...pagination, pageIndex })), | ||
| [] | ||
| ); | ||
|
|
||
| // Manual cell focus | ||
| const [rowIndexAction, setRowIndexAction] = useState(0); | ||
| const [colIndexAction, setColIndexAction] = useState(0); | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiFlexGroup alignItems="flexEnd" gutterSize="s" style={{ width: 500 }}> | ||
| <EuiFlexItem> | ||
| <EuiFormRow label="Row index"> | ||
| <EuiFieldNumber | ||
| min={0} | ||
| max={24} | ||
| value={rowIndexAction} | ||
| onChange={(e) => setRowIndexAction(Number(e.target.value))} | ||
| compressed | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <EuiFormRow label="Column index"> | ||
| <EuiFieldNumber | ||
| min={0} | ||
| max={4} | ||
| value={colIndexAction} | ||
| onChange={(e) => setColIndexAction(Number(e.target.value))} | ||
| compressed | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <EuiButton | ||
| size="s" | ||
| onClick={() => | ||
| dataGridRef.current.setFocusedCell({ | ||
| rowIndex: rowIndexAction, | ||
| colIndex: colIndexAction, | ||
| }) | ||
| } | ||
| > | ||
| Set cell focus | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| <EuiSpacer /> | ||
|
|
||
| <EuiDataGrid | ||
| aria-label="Data grid demo" | ||
| columns={columns} | ||
| columnVisibility={{ visibleColumns, setVisibleColumns }} | ||
| rowCount={raw_data.length} | ||
| renderCellValue={({ rowIndex, columnId }) => | ||
| raw_data[rowIndex][columnId] | ||
| } | ||
| pagination={{ | ||
| ...pagination, | ||
| pageSizeOptions: [25], | ||
| onChangePage: onChangePage, | ||
| }} | ||
| height={400} | ||
| ref={dataGridRef} | ||
| /> | ||
| {isModalVisible && ( | ||
| <EuiModal onClose={closeModal} style={{ width: 500 }}> | ||
| <EuiModalHeader> | ||
| <EuiModalHeaderTitle> | ||
| <h2>Example modal</h2> | ||
| </EuiModalHeaderTitle> | ||
| </EuiModalHeader> | ||
|
|
||
| <EuiModalBody> | ||
| <EuiText> | ||
| <p> | ||
| When closed, this modal should re-focus into the cell that | ||
| toggled it. | ||
| </p> | ||
| </EuiText> | ||
| </EuiModalBody> | ||
|
|
||
| <EuiModalFooter> | ||
| <EuiButton onClick={closeModal} fill> | ||
| Close | ||
| </EuiButton> | ||
| </EuiModalFooter> | ||
| </EuiModal> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.