@woocommerce/components
Version:
UI components for WooCommerce.
65 lines (64 loc) • 2.86 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* External dependencies
*/
const element_1 = require("@wordpress/element");
const clsx_1 = __importDefault(require("clsx"));
const prop_types_1 = __importDefault(require("prop-types"));
const lodash_1 = require("lodash");
/**
* Create a panel of styled selectable options rendering stylized checkboxes and labels
*/
class SegmentedSelection extends element_1.Component {
render() {
const { className, options, selected, onSelect, name, legend } = this.props;
return ((0, element_1.createElement)("fieldset", { className: "woocommerce-segmented-selection" },
(0, element_1.createElement)("legend", { className: "screen-reader-text" }, legend),
(0, element_1.createElement)("div", { className: (0, clsx_1.default)(className, 'woocommerce-segmented-selection__container') }, options.map(({ value, label }) => {
if (!value || !label) {
return null;
}
const id = (0, lodash_1.uniqueId)(`${value}_`);
return ((0, element_1.createElement)("div", { className: "woocommerce-segmented-selection__item", key: value },
(0, element_1.createElement)("input", { className: "woocommerce-segmented-selection__input", type: "radio", name: name, id: id, checked: selected === value, onChange: (0, lodash_1.partial)(onSelect, {
[name]: value,
}) }),
(0, element_1.createElement)("label", { htmlFor: id },
(0, element_1.createElement)("span", { className: "woocommerce-segmented-selection__label" }, label))));
}))));
}
}
SegmentedSelection.propTypes = {
/**
* Additional CSS classes.
*/
className: prop_types_1.default.string,
/**
* An Array of options to render. The array needs to be composed of objects with properties `label` and `value`.
*/
options: prop_types_1.default.arrayOf(prop_types_1.default.shape({
value: prop_types_1.default.string.isRequired,
label: prop_types_1.default.string.isRequired,
})).isRequired,
/**
* Value of selected item.
*/
selected: prop_types_1.default.string,
/**
* Callback to be executed after selection
*/
onSelect: prop_types_1.default.func.isRequired,
/**
* This will be the key in the key and value arguments supplied to `onSelect`.
*/
name: prop_types_1.default.string.isRequired,
/**
* Create a legend visible to screen readers.
*/
legend: prop_types_1.default.string.isRequired,
};
exports.default = SegmentedSelection;