@wix/design-system
Version:
@wix/design-system
79 lines • 3.78 kB
JavaScript
import React, { isValidElement } from 'react';
import uniqueId from 'lodash/uniqueId';
import Radio from '../Radio/Radio';
import { st, classes } from './RadioGroup.st.css.js';
import { dataHooks } from './constants';
/**
* component for easy radio group creation.
*
* similar to HTML `<input type="radio"/>` except you don't need to handle `name` or click handlers
*/
class RadioGroup extends React.PureComponent {
constructor() {
super(...arguments);
this.uniqueName = uniqueId('RadioGroup_');
}
_getSpacing(index) {
const { display: orientation, spacing, fullWidth } = this.props;
if (index > 0) {
if (orientation === 'vertical') {
return { marginTop: spacing };
}
if (orientation === 'horizontal' && !fullWidth) {
return { marginInlineStart: spacing };
}
}
return {};
}
render() {
const { dataHook, className, name, onChange = () => { }, disabledRadios = [], value, vAlign, display: orientation, selectionArea, selectionAreaSkin, selectionAreaPadding, fullWidth, size, } = this.props;
const uniqueName = name || this.uniqueName;
return (React.createElement("div", { role: "radiogroup", "data-hook": dataHook, className: st(classes.root, {
orientation,
fullWidth,
size,
}, className), "data-display": orientation, style: fullWidth && orientation === 'horizontal'
? {
// @ts-expect-error
gridTemplateColumns: `repeat(${this.props.children?.length}, 1fr)`,
columnGap: this.props?.spacing ?? '6px',
}
: undefined }, React.Children.map(this.props.children, (radio, index) => {
if (!radio || !isValidElement(radio)) {
return radio;
}
const checked = radio.props.value === value;
const radioName = radio.props.name || uniqueName;
const disabled = this.props.disabled ||
disabledRadios.indexOf(radio.props.value) !== -1;
const radioDataHook = `${dataHooks.RadioContainer}-${radio.props.value}`;
return (React.createElement("div", { className: st(classes.optionContainer, {
selectionArea,
selectionAreaSkin,
checked,
disabled,
}), "data-hook": dataHooks.RadioOptionContainer, style: this._getSpacing(index) },
React.createElement("div", { className: classes.radioContainer, "data-hook": radioDataHook },
React.createElement(Radio, { style: {
minHeight: '24px',
padding: selectionAreaPadding,
}, className: classes.radio, dataHook: radio.props.dataHook, value: radio.props.value, name: radioName, id: `${radioName}_${index}`, onChange: () => onChange(radio.props.value), onMouseEnter: radio.props.onMouseEnter, onMouseLeave: radio.props.onMouseLeave, alignItems: vAlign, disabled: disabled, checked: checked, label: radio.props.children, size: size })),
radio.props.content && (React.createElement("div", { className: classes.content, "data-hook": dataHooks.RadioContent }, radio.props.content))));
})));
}
}
RadioGroup.Radio = Radio;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.defaultProps = {
disabledRadios: [],
onChange: () => { },
value: '',
vAlign: 'center',
display: 'vertical',
selectionArea: 'none',
selectionAreaSkin: 'filled',
fullWidth: false,
size: 'medium',
};
export default RadioGroup;
//# sourceMappingURL=RadioGroup.js.map