Skip to content

Instantly share code, notes, and snippets.

/radioimage Secret
Created Feb 6, 2018

Embed
What would you like to do?
import React, { Component } from 'react'
/**
* External dependencies
*/
import { isEmpty } from 'lodash';
/**
* WordPress dependencies
*/
const { withInstanceId } = wp.components;
/**
* Internal dependencies
*/
import BaseControl from './index';
import Svgicon from './svgicon';
function Radioimage( { label, selected, help, instanceId, onChange, options = [] } ) {
const id = 'inspector-radio-control-' + instanceId;
const onChangeValue = ( event ) => onChange( event.target.value );
return ! isEmpty( options ) && (
<BaseControl label={ label } id={ id } help={ help } className="blocks-radio-control">
{ options.map( ( option, index ) =>
<div
key={ ( id + '-' + index ) }
className="blocks-radio-control__option"
>
<input
id={ ( id + '-' + index ) }
className="blocks-radio-control__input"
type="radio"
name={ id }
value={ option.value }
onChange={ onChangeValue }
selected={ option.value === selected }
aria-describedby={ !! help ? id + '__help' : undefined }
/>
<label key={ option.value } htmlFor={ ( id + '-' + index ) }>
{ option.label }
</label>
<Svgicon/>
</div>
) }
</BaseControl>
);
}
export default withInstanceId( Radioimage );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.