5f1a0548f5
Summary: Docusaurus 2 is quite a lot more powerful than docu 1 it turns out. This should convert the website fully. * [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 * [done] Convert landing page html * [done] Convert all images to img tags * [done] Convert all .md files to .mdx * [done] Make sure ui-doc generation and including still works * [done] Scan every page visually for sanity check * [done] Make sure footer still works * [done] Make sure search still works * [done] Change all links/ to links/index * [done] Change all links.md to links * [done] Add some custom css to make the navbar look like the old one and darken the footer. Reviewed By: passy Differential Revision: D21158717 fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
66 lines
2.1 KiB
Plaintext
66 lines
2.1 KiB
Plaintext
---
|
|
id: search-and-filter
|
|
title: Searching and Filtering
|
|
---
|
|
|
|
Many plugins need the ability to make their content searchable and filterable. Flipper provides a component for this use-case called `Searchable`. This is a higher-order-component that can be used to wrap any table, list, or generic React component and adds Flipper's search bar on top of it.
|
|
|
|
We differentiate between search and filter, but both functionalities are provided by the `Searchable` component. Search is a custom string entered by the user. Filters cannot be added by the user directly, but are added programmatically from within your plugin.
|
|
|
|
## Filters
|
|
Every filter has a key and a value. The key represents an attribute of the items you are filtering, and the value is the value that is compared with the items to see if the attribute matches. As an example, if you were filtering rows of a table, a filter key would be the id of a column.
|
|
|
|
There are two different types of filters:
|
|
- **include/exclude filters**: An arbitrary string that must (or must not) be included in the filterable item.
|
|
- **enum**: Allows the user to select one or more from a set of values, using a dropdown.
|
|
|
|
## Higher Order Component
|
|
The `Searchable()` function adds three props to a React component:
|
|
|
|
`addFilter: (filter: Filter) => void`
|
|
|
|
Function allowing the component to add filters.
|
|
|
|
`searchTerm: string`
|
|
|
|
The search term entered into the search bar by the user.
|
|
|
|
`filters: Array<Filter>`
|
|
|
|
The list of filters that are currently applied.
|
|
|
|
|
|
### Example
|
|
```
|
|
import type {SearchableProps} from 'flipper';
|
|
import {Searchable} from 'flipper';
|
|
|
|
class MyPluginTable extends Component<{
|
|
...SearchableProps
|
|
}> {
|
|
getRows() {
|
|
const {rows, searchTerm, filters} = this.props;
|
|
return rows.filter(row => {
|
|
// filter rows for searchTerm and applied filters
|
|
});
|
|
}
|
|
|
|
addFilter () {
|
|
this.props.addFilter({
|
|
type: 'include',
|
|
key: '...',
|
|
value: '...',
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return <div>
|
|
<Button onClick={this.addFilter}>Filter</Button>
|
|
<Table rows={this.getRows()} />
|
|
</div>
|
|
}
|
|
}
|
|
|
|
export default SearchableTable = Searchable(MyPluginTable);
|
|
```
|