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

87 lines
2.2 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';
/**
* Create a panel of styled selectable options rendering stylized checkboxes and labels
*/
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 = {
/**
* Additional CSS classes.
*/
className: PropTypes.string,
/**
* An Array of options to render. The array needs to be composed of objects with properties `label` and `value`.
*/
options: PropTypes.arrayOf(
PropTypes.shape( {
value: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
} )
).isRequired,
/**
* Value of selected item.
*/
selected: PropTypes.string,
/**
* Callback to be executed after selection
*/
onSelect: PropTypes.func.isRequired,
/**
* This will be the key in the key and value arguments supplied to `onSelect`.
*/
name: PropTypes.string.isRequired,
/**
* Create a legend visible to screen readers.
*/
legend: PropTypes.string.isRequired,
};
export default SegmentedSelection;