@wix/design-system
Version:
@wix/design-system
183 lines (182 loc) • 7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(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.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 {
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,
size
} = this.props;
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$props = this.props) == null ? void 0 : _this$props.spacing) !== null && _this$props$spacing !== void 0 ? _this$props$spacing : '6px'
} : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
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: 122,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _RadioGroupSt.classes.radioContainer,
"data-hook": radioDataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
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: 133,
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: 155,
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'
};
RadioGroup.propTypes = {
dataHook: _propTypes.default.string,
className: _propTypes.default.string,
onChange: _propTypes.default.func,
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
disabledRadios: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
vAlign: _propTypes.default.oneOf(['center', 'top']),
disabled: _propTypes.default.bool,
display: _propTypes.default.oneOf(['vertical', 'horizontal']),
selectionArea: _propTypes.default.oneOf(['none', 'hover', 'always']),
selectionAreaSkin: _propTypes.default.oneOf(['filled', 'outlined']),
selectionAreaPadding: _propTypes.default.string,
children: _propTypes.default.node,
spacing: _propTypes.default.string,
name: _propTypes.default.string,
fullWidth: _propTypes.default.bool,
size: _propTypes.default.oneOf(['small', 'medium'])
};
var _default = exports.default = RadioGroup;
//# sourceMappingURL=RadioGroup.js.map