wix-style-react
Version:
wix-style-react
187 lines (186 loc) • 7.01 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _Radio = _interopRequireDefault(require("../Radio/Radio"));
var _RadioGroupSt = require("./RadioGroup.st.css");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/RadioGroup/RadioGroup.js";
/**
* 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.default.PureComponent {
_getSpacing(index) {
var {
display: orientation,
spacing,
fullWidth
} = this.props;
if (index > 0) {
if (orientation === 'vertical') {
return {
marginTop: spacing
};
}
if (orientation === 'horizontal' && !fullWidth) {
return {
marginInlineStart: spacing
};
}
}
return {};
}
render() {
var _this$props$children, _this$props$spacing, _this$props;
var {
dataHook,
className,
name,
onChange: _onChange,
disabledRadios,
value,
vAlign,
display: orientation,
selectionArea,
selectionAreaSkin,
selectionAreaPadding,
fullWidth
} = this.props;
var uniqueName = name || (0, _uniqueId.default)('RadioGroup_');
return /*#__PURE__*/_react.default.createElement("div", {
role: "radiogroup",
"data-hook": dataHook,
className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.root, {
orientation,
fullWidth
}, className),
"data-display": orientation,
style: fullWidth && orientation === 'horizontal' ? {
gridTemplateColumns: "repeat(".concat((_this$props$children = this.props.children) == null ? void 0 : _this$props$children.length, ", 1fr)"),
columnGap: (_this$props$spacing = (_this$props = this.props) == null ? void 0 : _this$props.spacing) !== null && _this$props$spacing !== void 0 ? _this$props$spacing : '6px'
} : null,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 7
}
}, _react.default.Children.map(this.props.children, (radio, index) => {
if (!radio) {
return radio;
}
var checked = radio.props.value === value;
var radioName = radio.props.name || uniqueName;
var disabled = this.props.disabled || disabledRadios.indexOf(radio.props.value) !== -1;
var radioDataHook = "".concat(_constants.dataHooks.RadioContainer, "-").concat(radio.props.value);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.optionContainer, {
selectionArea,
selectionAreaSkin,
checked,
disabled
}),
"data-hook": _constants.dataHooks.RadioOptionContainer,
style: this._getSpacing(index),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _RadioGroupSt.classes.radioContainer,
"data-hook": radioDataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_Radio.default, {
style: {
minHeight: '24px',
padding: selectionAreaPadding
},
className: _RadioGroupSt.classes.radio,
dataHook: radio.props.dataHook,
value: radio.props.value,
name: radioName,
id: (0, _uniqueId.default)("".concat(radioName, "_")),
onChange: () => _onChange(radio.props.value),
onMouseEnter: radio.props.onMouseEnter,
onMouseLeave: radio.props.onMouseLeave,
alignItems: vAlign,
disabled: disabled,
checked: checked,
label: radio.props.children,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 17
}
})), radio.props.content && /*#__PURE__*/_react.default.createElement("div", {
className: _RadioGroupSt.classes.content,
"data-hook": _constants.dataHooks.RadioContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 17
}
}, radio.props.content));
}));
}
}
RadioGroup.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string,
/** Defines a callback function which is called every time user selects a different value */
onChange: _propTypes.default.func,
/** Specifies the selected radio value */
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Specify the values of the disabled radio buttons */
disabledRadios: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/** Controls radio alignment to the label on Y axis */
vAlign: _propTypes.default.oneOf(['center', 'top']),
/** Disables the entire group */
disabled: _propTypes.default.bool,
/** Control options direction */
display: _propTypes.default.oneOf(['vertical', 'horizontal']),
/** Controls selection area highlight visibility */
selectionArea: _propTypes.default.oneOf(['none', 'hover', 'always']),
/** Sets the design of the selection area */
selectionAreaSkin: _propTypes.default.oneOf(['filled', 'outlined']),
/** Sets the amount of white space around the radio label in pixels */
selectionAreaPadding: _propTypes.default.string,
/** Lists RadioGroup items. You're recommended to use it with <RadioGroup.Radio/>. */
children: _propTypes.default.node,
/** Controls the distance between options */
spacing: _propTypes.default.string,
/** Sets a unique name of a radio group */
name: _propTypes.default.string,
/** Makes component full width and divides all available horizontal space into even parts for each radio button */
fullWidth: _propTypes.default.bool
};
RadioGroup.defaultProps = {
disabledRadios: [],
onChange: () => {},
value: '',
vAlign: 'center',
display: 'vertical',
selectionArea: 'none',
selectionAreaSkin: 'filled',
fullWidth: false
};
RadioGroup.Radio = _Radio.default;
RadioGroup.displayName = 'RadioGroup';
var _default = exports.default = RadioGroup;
//# sourceMappingURL=RadioGroup.js.map