@codeamp/block-components
Version:
React components for the WordPress block editor
73 lines (64 loc) • 3.68 kB
Markdown
# ResourceSelectControl
A resource select control useful for selecting external data with additional action links.
- Takes an array of value/label pairs for populating the options
- Supply primary and secondary actions to be performed on the selected resource
## Properties
| Name | Type | Default | Description |
|------------------------|------------|-------------|-------------------------------------------------------------------------------------------------------------|
| `value` | `string` | `undefined` | A string or numeric value representing the selected option. |
| `options` | `array` | `undefined` | An array of objects with value/label pairs |
| `label` | `string` | `''` | Renders a label for the field. |
| `onPrimaryAction` | `function` | `undefined` | A function to be called when the primary action is clicked. |
| `onSecondaryAction` | `function` | `undefined` | A function to be called when the secondary action is clicked. |
| `primaryActionLabel` | `string` | `'Edit'` | A string to be used as the primary action label. |
| `secondaryActionLabel` | `string` | `'Add new'` | A string to be used as the secondary action label. |
| `showPrimaryAction` | `boolean` | `true` | A string to be used as the secondary action label. |
| `showSecondaryAction` | `boolean` | `true` | A string to be used as the secondary action label. |
| `primaryActionProps` | `object` | `undefined` | An object of props to be passed to the primary action button. |
| `secondaryActionProps` | `object` | `undefined` | An object of props to be passed to the secondary action button. |
| `id` | `string` | `undefined` | A string to be used as the id attribute of the select element. Leave undefined for one to be autogenerated. |
| `className` | `string` | `undefined` | A string to be used as the class attribute of the component. |
## Usage
```jsx
import { ResourceSelectControl } from '@codeamp/block-components';
import { withState } from '@wordpress/compose';
const MyResourceSelectControl = withState( {
value: [],
options: [
{
value: 'africa',
label: 'Africa',
},
{
value: 'america',
label: 'America',
},
{
value: 'asia',
label: 'Asia',
},
{
value: 'europe',
label: 'Europe',
},
{
value: 'oceania',
label: 'Oceania',
},
],
} )( ( { value, options, setState } ) => (
<ResourceSelectControl
value={ value }
options={ options }
onChange={ value => setState( { value } ) }
onPrimaryAction={ () => console.log( 'Primary action clicked' ) }
onSecondaryAction={ () => console.log( 'Secondary action clicked' ) }
/>
) );
```
Then add:
```jsx
<MyResourceSelectControl />
```
To your render method.