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