Introduce column filters

Summary:
Beyond a search across all columns, it is now possible to specific columns for specific values:

* for a row to be visible, all active column filters need to be matched (e.g. both a filter on time and app has to be satisfied)
* if multiple values within a column are filtered for, these are -or-ed.
* if no value at all within a column is checked, even when they are defined, the column won't take part in filtering
* if there is a general search and column filters, a row has to satisfy both

Filters can be preconfigured, pre-configured filters cannot be removed.

Reseting will reset the filters back to their original

Move `useMemoize` to flipper-plugin

Merged the `ui/utils` and `utils` folder inside `flipper-plugin`

Reviewed By: nikoant

Differential Revision: D26450260

fbshipit-source-id: 11693d5d140cea03cad91c1e0f3438d7b129cf29
This commit is contained in:
Michel Weststrate
2021-03-16 14:54:53 -07:00
committed by Facebook GitHub Bot
parent 8aabce477b
commit 11eb19da4c
23 changed files with 529 additions and 93 deletions

View File

@@ -494,6 +494,30 @@ Utility that wraps React's `useCallback` with tracking capabilities.
The API is similar, except that the first argument describes the interaction handled by the given event handler.
See [Tracked](#tracked) for more info.
### useMemoize
Slight variation on useMemo that encourages to create hoistable memoization functions,
which encourages reuse and testability by no longer closing over variables that are used by the memoized function, but rather receiving them as arguments so that these functions beome pure.
```javascript
function MyComponent() {
const {findMetroDevice} = props;
const connections = useSomeHook();
const metroDevice = useMemoize(
findMetroDevice,
[connections.devices],
);
// etc
}
export function findMetroDevice(findMetroDevice, deviceList) {
return deviceList.find(findMetroDevice);
}
```
## UI components
### Layout.*