@wix/design-system
Version:
@wix/design-system
164 lines (163 loc) • 6.58 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _Radio = _interopRequireDefault(require("../Radio/Radio"));
var _RadioGroupSt = require("./RadioGroup.st.css.js");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RadioGroup/RadioGroup.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* 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 {
constructor() {
super(...arguments);
this.uniqueName = (0, _uniqueId.default)('RadioGroup_');
}
_getSpacing(index) {
var _this$props = this.props,
orientation = _this$props.display,
spacing = _this$props.spacing,
fullWidth = _this$props.fullWidth;
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$props3;
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
className = _this$props2.className,
name = _this$props2.name,
_this$props2$onChange = _this$props2.onChange,
_onChange = _this$props2$onChange === void 0 ? () => {} : _this$props2$onChange,
_this$props2$disabled = _this$props2.disabledRadios,
disabledRadios = _this$props2$disabled === void 0 ? [] : _this$props2$disabled,
value = _this$props2.value,
vAlign = _this$props2.vAlign,
orientation = _this$props2.display,
selectionArea = _this$props2.selectionArea,
selectionAreaSkin = _this$props2.selectionAreaSkin,
selectionAreaPadding = _this$props2.selectionAreaPadding,
fullWidth = _this$props2.fullWidth,
size = _this$props2.size;
var uniqueName = name || this.uniqueName;
return /*#__PURE__*/_react.default.createElement("div", {
role: "radiogroup",
"data-hook": dataHook,
className: (0, _RadioGroupSt.st)(_RadioGroupSt.classes.root, {
orientation,
fullWidth,
size
}, className),
"data-display": orientation,
style: fullWidth && orientation === 'horizontal' ? {
// @ts-expect-error
gridTemplateColumns: "repeat(".concat((_this$props$children = this.props.children) == null ? void 0 : _this$props$children.length, ", 1fr)"),
columnGap: (_this$props$spacing = (_this$props3 = this.props) == null ? void 0 : _this$props3.spacing) !== null && _this$props$spacing !== void 0 ? _this$props$spacing : '6px'
} : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 7
}
}, _react.default.Children.map(this.props.children, (radio, index) => {
if (!radio || ! /*#__PURE__*/(0, _react.isValidElement)(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: 99,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _RadioGroupSt.classes.radioContainer,
"data-hook": radioDataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
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: "".concat(radioName, "_").concat(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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
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: 132,
columnNumber: 17
}
}, radio.props.content));
}));
}
}
RadioGroup.Radio = _Radio.default;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.defaultProps = {
disabledRadios: [],
onChange: () => {},
value: '',
vAlign: 'center',
display: 'vertical',
selectionArea: 'none',
selectionAreaSkin: 'filled',
fullWidth: false,
size: 'medium'
};
var _default = exports.default = RadioGroup;
//# sourceMappingURL=RadioGroup.js.map