@wix/design-system
Version:
@wix/design-system
98 lines • 4.58 kB
JavaScript
import React, { isValidElement } from 'react';
import PropTypes from 'prop-types';
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',
};
RadioGroup.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
disabledRadios: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
vAlign: PropTypes.oneOf(['center', 'top']),
disabled: PropTypes.bool,
display: PropTypes.oneOf(['vertical', 'horizontal']),
selectionArea: PropTypes.oneOf(['none', 'hover', 'always']),
selectionAreaSkin: PropTypes.oneOf(['filled', 'outlined']),
selectionAreaPadding: PropTypes.string,
children: PropTypes.node,
spacing: PropTypes.string,
name: PropTypes.string,
fullWidth: PropTypes.bool,
size: PropTypes.oneOf(['small', 'medium']),
};
export default RadioGroup;
//# sourceMappingURL=RadioGroup.js.map