Skip to content

resource-select-control

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

resource-select-control

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
index.js
index.js
 
 
readme.md
readme.md
 
 
style.scss
style.scss
 
 

readme.md

ResourceSelectControl

Demo

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

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:

<MyResourceSelectControl />

To your render method.