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

[EuiDataGrid] Major reorganization of data_grid.tsx and data_grid_body.tsx #5506

Merged
merged 30 commits into from
Jan 5, 2022
Merged

[EuiDataGrid] Major reorganization of data_grid.tsx and data_grid_body.tsx #5506

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
9505c34
[inMemory] Move useInMemoryValues to memory-specific util file
cee-chen Dec 22, 2021
8d71f62
[focus] Move focus utils to separate util file
cee-chen Dec 22, 2021
9986aa0
[focus] Add focusedCell to focus context
cee-chen Dec 22, 2021
5dc3b81
[focus] Move onFocusUpdate and focus cells map to useFocus
cee-chen Dec 22, 2021
da5ab3c
[focus] Remove unnecessary scrollTop workaround
cee-chen Dec 22, 2021
9d9d162
[focus/header] Move headerIsInteractive logic to its own file
cee-chen Dec 22, 2021
877ce96
[focus] Move header setFocusedCell workaround to its own useEffect
cee-chen Dec 22, 2021
2f878a0
[focus + row/col count] Clean up createKeyDownHandler, DRY out row & …
cee-chen Dec 22, 2021
c684d88
[row/col count] DRY out row/col count logic repeated in EuiDataGridBody
cee-chen Dec 22, 2021
37aa207
[widths] Refactor width-related fns to separate util files
cee-chen Dec 22, 2021
1cfb668
[width/height] Move final grid width/height logic + useConstrainedHei…
cee-chen Dec 22, 2021
f91887d
[row heights] Refactor more row heights logic to utils
cee-chen Dec 22, 2021
fac6105
[schema] Move slightly more schema logic to separate schema file
cee-chen Dec 22, 2021
1e039dc
[sorting] Move `rowMap` and `getCorrectRowIndex` logic to sorting uti…
cee-chen Dec 23, 2021
c67feff
[focus] Move `preventTabbing` and `getParentCellContent` to focus uti…
cee-chen Dec 23, 2021
f47c46f
[body] Move popover content merging from body to top-level grid
cee-chen Dec 23, 2021
6d1e9d6
[grid] Clean up width/height observers
cee-chen Dec 23, 2021
f31c602
[misc] Clean up control column fallbacks
cee-chen Dec 23, 2021
55e97c0
[grid] Organize code by concern & w/ comment headings
cee-chen Dec 23, 2021
9d8eb5a
[body] Organize code by concern w/ comment headings
cee-chen Dec 23, 2021
aecf1b3
[misc] Remove data_grid_context file
cee-chen Dec 23, 2021
c95cf81
[dom cleanup] Combine `dataGridWrapper` and `euiDataGridBody` divs
cee-chen Dec 23, 2021
45e919c
[dom cleanup] Remove verticalScroll and overflow div wrappers
cee-chen Dec 23, 2021
10e5ff6
[gridRef setup] Store gridRef at top-level data_grid
cee-chen Dec 23, 2021
f55a0a1
[pagination] Move scroll fix into pagination concern
cee-chen Dec 23, 2021
e15ca0d
[toolbar/misc] DRY out IS_JEST_ENVIRONMENT
cee-chen Jan 4, 2022
7cde62e
Merge branch 'main' into datagrid/refactor
cee-chen Jan 4, 2022
c3fde77
[PR feedback] Add breaking changelog
cee-chen Jan 4, 2022
1ebdc5b
Merge branch 'main' into datagrid/refactor
cee-chen Jan 5, 2022
e155cc4
[PR feedback] Fix header focus workaround
cee-chen Jan 5, 2022
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
1,824 changes: 902 additions & 922 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/components/datagrid/_data_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
font-feature-settings: 'tnum' 1; // Tabular numbers
max-width: 100%;
width: 100%;
overflow: hidden;
z-index: 2; // Sits above the pagination below it, but below the controls above it
background: $euiColorEmptyShade;
}
Expand Down
215 changes: 105 additions & 110 deletions src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,156 +2,151 @@

exports[`EuiDataGridBody renders 1`] = `
<div
data-test-subj="euiDataGridBody"
style="width:100%;height:100%;overflow:hidden"
class="euiDataGrid__virtualized"
style="position:relative;height:9007199254740991px;width:9007199254740991px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
>
<div
class="euiDataGrid__virtualized"
style="position:relative;height:9007199254740991px;width:9007199254740991px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
style="height:34px;width:200px"
>
<div
style="height:34px;width:200px"
class="euiDataGridHeader"
data-test-subj="dataGridHeader"
role="row"
>
<div
class="euiDataGridHeader"
data-test-subj="dataGridHeader"
role="row"
class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean"
data-test-subj="dataGridHeaderCell-columnA"
role="columnheader"
style="width:100px"
tabindex="-1"
>
<div
class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean"
data-test-subj="dataGridHeaderCell-columnA"
role="columnheader"
style="width:100px"
tabindex="-1"
class="euiDataGridColumnResizer"
data-test-subj="dataGridColumnResizer"
style="margin-right:0px"
/>
<div
class="euiPopover euiPopover--anchorDownCenter"
offset="7"
>
<div
class="euiDataGridColumnResizer"
data-test-subj="dataGridColumnResizer"
style="margin-right:0px"
/>
<div
class="euiPopover euiPopover--anchorDownCenter"
offset="7"
class="euiPopover__anchor euiDataGridHeaderCell__anchor"
>
<div
class="euiPopover__anchor euiDataGridHeaderCell__anchor"
<button
class="euiDataGridHeaderCell__button"
>
<button
class="euiDataGridHeaderCell__button"
<div
class="euiDataGridHeaderCell__content"
>
<div
class="euiDataGridHeaderCell__content"
>
columnA
</div>
<span
aria-label="Header actions"
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
</button>
</div>
columnA
</div>
<span
aria-label="Header actions"
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
</button>
</div>
</div>
</div>
<div
class="euiDataGridHeaderCell euiDataGridHeaderCell--string"
data-test-subj="dataGridHeaderCell-columnB"
role="columnheader"
style="width:100px"
tabindex="-1"
>
<div
class="euiDataGridColumnResizer"
data-test-subj="dataGridColumnResizer"
style="margin-right:0px"
/>
<div
class="euiDataGridHeaderCell euiDataGridHeaderCell--string"
data-test-subj="dataGridHeaderCell-columnB"
role="columnheader"
style="width:100px"
tabindex="-1"
class="euiPopover euiPopover--anchorDownCenter"
offset="7"
>
<div
class="euiDataGridColumnResizer"
data-test-subj="dataGridColumnResizer"
style="margin-right:0px"
/>
<div
class="euiPopover euiPopover--anchorDownCenter"
offset="7"
class="euiPopover__anchor euiDataGridHeaderCell__anchor"
>
<div
class="euiPopover__anchor euiDataGridHeaderCell__anchor"
<button
class="euiDataGridHeaderCell__button"
>
<button
class="euiDataGridHeaderCell__button"
<div
class="euiDataGridHeaderCell__content"
>
<div
class="euiDataGridHeaderCell__content"
>
columnB
</div>
<span
aria-label="Header actions"
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
</button>
</div>
columnB
</div>
<span
aria-label="Header actions"
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
tabindex="-1"
>
<div
class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
tabindex="-1"
class="euiDataGridRowCell__expandFlex"
>
<div
class="euiDataGridRowCell__expandFlex"
class="euiDataGridRowCell__expandContent"
>
<div
class="euiDataGridRowCell__expandContent"
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
<div
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
<span>
cell content
</span>
</div>
<p
class="euiScreenReaderOnly"
>
Row: 1; Column: 1
</p>
<span>
cell content
</span>
</div>
<p
class="euiScreenReaderOnly"
>
Row: 1; Column: 1
</p>
</div>
</div>
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
tabindex="-1"
>
<div
class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
tabindex="-1"
class="euiDataGridRowCell__expandFlex"
>
<div
class="euiDataGridRowCell__expandFlex"
class="euiDataGridRowCell__expandContent"
>
<div
class="euiDataGridRowCell__expandContent"
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
<div
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
<span>
cell content
</span>
</div>
<p
class="euiScreenReaderOnly"
>
Row: 1; Column: 2
</p>
<span>
cell content
</span>
</div>
<p
class="euiScreenReaderOnly"
>
Row: 1; Column: 2
</p>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/datagrid/body/data_grid_body.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ describe('EuiDataGridBody', () => {
rowHeightUtils: mockRowHeightUtils,
gridStyles: {},
gridWidth: 300,
wrapperRef: { current: document.createElement('div') },
};

beforeAll(() => {
Expand Down
Loading