woocommerce/plugins/woocommerce-admin/docs/components/packages/search-list-control.md

191 lines
3.3 KiB
Markdown
Raw Normal View History

`SearchListControl` (component)
===============================
Component to display a searchable, selectable list of items.
Props
-----
### `className`
- Type: String
- Default: null
Additional CSS classes.
### `isHierarchical`
- Type: Boolean
- Default: null
Whether the list of items is hierarchical or not. If true, each list item is expected to
have a parent property.
### `isLoading`
- Type: Boolean
- Default: null
Whether the list of items is still loading.
### `isSingle`
- Type: Boolean
- Default: null
Restrict selections to one item.
### `list`
- Type: Array
- id: Number
- name: String
- Default: null
A complete list of item objects, each with id, name properties. This is displayed as a
clickable/keyboard-able list, and possibly filtered by the search term (searches name).
### `messages`
- Type: Object
- clear: String - A more detailed label for the "Clear all" button, read to screen reader users.
- list: String - Label for the list of selectable items, only read to screen reader users.
- noItems: String - Message to display when the list is empty (implies nothing loaded from the server
or parent component).
- noResults: String - Message to display when no matching results are found. %s is the search term.
- search: String - Label for the search input
- selected: Function - Label for the selected items. This is actually a function, so that we can pass
through the count of currently selected items.
- updated: String - Label indicating that search results have changed, read to screen reader users.
- Default: null
Messages displayed or read to the user. Configure these to reflect your object type.
See `defaultMessages` above for examples.
### `onChange`
- **Required**
- Type: Function
- Default: null
Callback fired when selected items change, whether added, cleared, or removed.
Passed an array of item objects (as passed in via props.list).
### `onSearch`
- Type: Function
- Default: null
Callback fired when the search field is used.
### `renderItem`
- Type: Function
- Default: null
Callback to render each item in the selection list, allows any custom object-type rendering.
### `selected`
- **Required**
- Type: Array
- Default: null
The list of currently selected items.
### `search`
- Type: String
- Default: null
### `setState`
- Type: Function
- Default: null
### `debouncedSpeak`
- Type: Function
- Default: null
### `instanceId`
- Type: Number
- Default: null
`SearchListItem` (component)
============================
Props
-----
### `className`
- Type: String
- Default: null
Additional CSS classes.
### `countLabel`
- Type: ReactNode
- Default: null
Label to display if `showCount` is set to true. If undefined, it will use `item.count`.
### `depth`
- Type: Number
- Default: `0`
Depth, non-zero if the list is hierarchical.
### `item`
- Type: Object
- Default: null
Current item to display.
### `isSelected`
- Type: Boolean
- Default: null
Whether this item is selected.
### `isSingle`
- Type: Boolean
- Default: null
Whether this should only display a single item (controls radio vs checkbox icon).
### `onSelect`
- Type: Function
- Default: null
Callback for selecting the item.
### `search`
- Type: String
- Default: `''`
Search string, used to highlight the substring in the item name.
### `showCount`
- Type: Boolean
- Default: `false`
Toggles the "count" bubble on/off.