jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed layout issue with undefined column widths

Browse Source 
Summary: This fixes an earlier reported issue with Messages plugin, if no column widths are set values can jump around per row

Reviewed By: passy

Differential Revision: D28090807

fbshipit-source-id: be124b94f507584cf177710816035cd280a5ef01
This commit is contained in:
Michel Weststrate
2021-04-29 07:30:56 -07:00
committed by Facebook GitHub Bot
parent e26a8c5ad0
commit e3cb16d870
4 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
View File

@@ -442,8 +442,22 @@ function loadStateFromStorage(storageKey: string): PersistedState | undefined {
function computeInitialColumns(
columns: DataTableColumn<any>[],
): DataTableColumn<any>[] {
const visibleColumnCount = columns.filter((c) => c.visible !== false).length;
const columnsWithoutWidth = columns.filter((c) => c.width === undefined)
.length;
return columns.map((c) => ({
...c,
width:
c.width ??
// if the width is not set, and there are multiple columns with unset widths,
// there will be multiple columns ith the same flex weight (1), meaning that
// they will all resize a best fits in a specifc row.
// To address that we distribute space equally
// (this need further fine tuning in the future as with a subset of fixed columns width can become >100%)
(columnsWithoutWidth > 1
? `${Math.floor(100 / visibleColumnCount)}%`
: undefined),
filters:
c.filters?.map((f) => ({
...f,

15
desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
View File

@@ -53,12 +53,14 @@ test('update and append', async () => {
class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
</div>
@@ -105,12 +107,14 @@ test('column visibility', async () => {
class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
</div>
@@ -130,7 +134,8 @@ test('column visibility', async () => {
class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>

6
desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
View File

@@ -47,12 +47,14 @@ test('update and append', async () => {
class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
</div>

21
desktop/plugins/public/flipper-messages/__tests__/flipper_messages.node.tsx
View File

@@ -119,33 +119,40 @@ test('It can render rows', async () => {
class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
>
00:00:00.000
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
>
Android Phone
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
>
FB4A
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
>
unique-string
</div>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
/>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
/>
<div
class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
width="14%"
>
toClient
</div>