@wordpress/components
Version:
UI components for WordPress.
90 lines (67 loc) • 1.76 kB
Markdown
# TreeSelect
TreeSelect component is used to generate select input fields.
## Usage
Render a user interface to select the parent page in a hierarchy of pages:
```jsx
import { TreeSelect } from '@wordpress/components';
import { withState } from '@wordpress/compose';
const MyTreeSelect = withState( {
page: 'p21',
} )( ( { page, setState } ) => (
<TreeSelect
label="Parent page"
noOptionLabel="No parent page"
onChange={ ( page ) => setState( { page } ) }
selectedId={ page }
tree={ [
{
name: 'Page 1',
id: 'p1',
children: [
{ name: 'Descend 1 of page 1', id: 'p11' },
{ name: 'Descend 2 of page 1', id: 'p12' },
],
},
{
name: 'Page 2',
id: 'p2',
children: [
{
name: 'Descend 1 of page 2',
id: 'p21',
children: [
{
name: 'Descend 1 of Descend 1 of page 2',
id: 'p211',
},
],
},
],
},
] }
/>
) );
```
## Props
The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the SelectControl component being used.
### label
If this property is added, a label will be generated using label property as the content.
- Type: `String`
- Required: No
### noOptionLabel
If this property is added, an option will be added with this label to represent empty selection.
- Type: `String`
- Required: No
### onChange
A function that receives the id of the new node element that is being selected.
- Type: `function`
- Required: Yes
### selectedId
The id of the currently selected node.
- Type: `Object`
- Required: No
### tree
An array containing the tree objects with the possible nodes the user can select.
- Type: `String`
- Required: No