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

Provide standardised MasterDetail

Browse Source 
Summary:
Noticed in reviews during the convertathon there is still quite some boilerplate in things that happen on the boundary of UI and plugin state, such as setting up menu entries and providing common functionality like clear, master/detail layout, etc.

This diff introduces the `MasterDetail` component, which takes a higher level approach by merely needing to provide the state atoms and desired features, and taking care of the wiring.

Applied it to createTablePlugin, to prove that going from `createTablePlugin` to `MasterDetail` will be a much smaller step now.

Verified on the funnel logger plugin

Reviewed By: passy

Differential Revision: D28090362

fbshipit-source-id: 146f8c315fea903901ad4e3e46711642f16cf0e6
This commit is contained in:
Michel Weststrate
2021-04-29 07:30:56 -07:00
committed by Facebook GitHub Bot
parent e7cdbcbe85
commit e26a8c5ad0
9 changed files with 347 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/extending/flipper-plugin.mdx
View File

@@ -824,6 +824,27 @@ See `View > Flipper Style Guide` inside the Flipper application for more details
### ElementsInspectorElement
### ElementsInspectorProps
Coming soon
### MasterDetail
The `MasterDetail` provides a default setup for a `DataTable` in combination with a sidebar, and some super common features like keyboard shortcuts, paste integration, and clear / pause-resume buttons.
The `MasterDetail` component accepts all `DataTable` props, and beyond that the following props.
* The `sidebarPosition` prop controls here to display the details of the currently selected record:
* `'main'` (default): show the details in the standard, centrally controlled right sidebar
* `'right'`: show a resizable pane to the right
* `'bottom'`: show a resizable pane to the bottom
* `'none'`: don't show details at all
* `sidebarComponent`: Component that accepts a 'record' prop that is used to render details.If none is provided, a standard `DataInspector` component will be used to display the entire record.
* `sidebarSize`: Default size of the sidebar.
* `selection`: If provided, this atom will be used to store selection in.
* `isPaused`: If provided, this atom will be used to store pause/resume state in, and a pause/resume toggle will be shown
* `enableClear: If set, a clear button will be shown.By default this will clear the dataSource (if any).
* `onClear`: Callback to be called when clear action is used.
* `enableMenuEntries`: If provided, standard menu entries will be created for clear, goToBottom and createPaste.
### Panel
A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.