Use DataTable as list base

Summary:
Changelog: Standardized DataList component

This diff standardizes the DataList component, by reusing the DataList. This is done to be able to take full advantage of all its features like virtualisation, keyboard support, datasource support, etc.

Also cleaned up DataTable properties a bit, by prefixing all flags with `enableXXX` and setting clear defaults

Reviewed By: passy

Differential Revision: D28119721

fbshipit-source-id: b7b241ea18d788bfa035389cc8c6ae7ea95ecadb
This commit is contained in:
Michel Weststrate
2021-05-04 13:49:11 -07:00
committed by Facebook GitHub Bot
parent 5bf9541e05
commit d903a862d2
11 changed files with 244 additions and 157 deletions

View File

@@ -254,7 +254,8 @@ The benefit of `useValue(instance.rows)` over using `rows.get()`, is that the fi
Since both `usePlugin` and `useValue` are hooks, they usual React rules for them apply; they need to be called unconditionally.
So it is recommended to put them at the top of your component body.
Both hooks can not only be used in the root `Component`, but also in any other component in your plugin component tree.
So it is not necessary to grab all the data at the root, or pass down the `instance` to all child components.
So it is not necessary to grab all the data at the root and pass it down using props.
Using `useValue` as deep in the component tree as possible will benefit performance.
Finally (`(4)`) we render the data we have. The details have been left out here, as from here it is just idiomatic React code.
The source of the other `MammalCard` component can be found [here](https://github.com/facebook/flipper/blob/master/desktop/plugins/public/seamammals/src/index.tsx#L113-L165).