woocommerce/plugins/woocommerce-admin/client/components/segmented-selection/index.js

66 lines
1.8 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { partial, uniqueId } from 'lodash';
/**
* Internal dependencies
*/
import './style.scss';
class SegmentedSelection extends Component {
render() {
const { className, options, selected, onSelect, name, legend } = this.props;
return (
<fieldset className="woocommerce-segmented-selection">
<legend className="screen-reader-text">{ legend }</legend>
<div className={ classnames( className, 'woocommerce-segmented-selection__container' ) }>
{ options.map( ( { value, label } ) => {
if ( ! value || ! label ) {
return null;
}
const id = uniqueId( `${ value }_` );
return (
<Fragment key={ value }>
{ /* eslint-disable jsx-a11y/label-has-for */ }
<input
className="woocommerce-segmented-selection__input"
type="radio"
name={ name }
id={ id }
checked={ selected === value }
onChange={ partial( onSelect, { [ name ]: value } ) }
/>
<label htmlFor={ id }>
<span className="woocommerce-segmented-selection__label">{ label }</span>
</label>
{ /* eslint-enable jsx-a11y/label-has-for */ }
</Fragment>
);
} ) }
</div>
</fieldset>
);
}
}
SegmentedSelection.propTypes = {
className: PropTypes.string,
options: PropTypes.arrayOf(
PropTypes.shape( {
value: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
} )
).isRequired,
selected: PropTypes.string,
onSelect: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
legend: PropTypes.string.isRequired,
};
export default SegmentedSelection;