# ResourceSelectControl

![Demo](https://github.com/Code-Amp/block-components/blob/main/_resources/resource-select-control.gif)

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.