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

User experience improvements

Browse Source 
Summary:
This diff has some jak-shaving UX improvements after playing with the DataTable a bit more:

Selection
* deselecting a row from a larger set will make the last selected item the default selection
* re-selecting an item in a single selection will unselect it

Column Filtering
* Introduced button to toggle between filtering on all, nothing, and the values present in the current selection

Column sorting
* The up / down arrows are now inidividually clickable, rather than action as a general toggle
* Title still works as a general toggle between asc / desc / not sorted

Context menu
* I found the context menu for column selection and on the selected rows itself a bit finicky to find and click and not super intuitive for noob users. Merged both menus instead into a single hamburger menu adjacent to the search bar

Reviewed By: passy

Differential Revision: D26580038

fbshipit-source-id: 220f501a1d996acbd51088c08ea866caed768572
This commit is contained in:
Michel Weststrate
2021-03-16 14:54:53 -07:00
committed by Facebook GitHub Bot
parent 59a1327261
commit 59e6c98669
10 changed files with 309 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
desktop/flipper-plugin/src/ui/datatable/__tests__/DataTable.node.tsx
View File

@@ -195,7 +195,7 @@ test('sorting', async () => {
}
// sort asc
act(() => {
ref.current?.sortColumn('title');
ref.current?.sortColumn('title', 'down');
});
{
const elem = await rendering.findAllByText(/item/);
@@ -208,7 +208,7 @@ test('sorting', async () => {
}
// sort desc
act(() => {
ref.current?.sortColumn('title');
ref.current?.sortColumn('title', 'up');
});
{
const elem = await rendering.findAllByText(/item/);
@@ -219,9 +219,9 @@ test('sorting', async () => {
'item a',
]);
}
// another click resets again
// reset sort
act(() => {
ref.current?.sortColumn('title');
ref.current?.sortColumn('title', undefined);
});
{
const elem = await rendering.findAllByText(/item/);