lucid-ui
Version:
A UI component library from Xandr.
152 lines • 8.4 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioGroupDumb = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var RadioGroup_reducers_1 = __importDefault(require("./RadioGroup.reducers"));
var state_management_1 = require("../../util/state-management");
var RadioButtonLabeled_1 = __importDefault(require("../RadioButtonLabeled/RadioButtonLabeled"));
var RadioButton_1 = __importDefault(require("../RadioButton/RadioButton"));
var cx = style_helpers_1.lucidClassNames.bind('&-RadioGroup');
var func = prop_types_1.default.func, node = prop_types_1.default.node, number = prop_types_1.default.number, string = prop_types_1.default.string, bool = prop_types_1.default.bool;
/** RadioGroup Label */
var RadioGroupLabel = function (props) { return null; };
RadioGroupLabel.peek = {
description: "Support radio button labels as `RadioGroup.Label` component which can be provided as a child of a `RadioGroup.RadioButton` component.",
};
RadioGroupLabel.propTypes = {
children: node,
};
RadioGroupLabel.displayName = 'RadioGroup.Label';
var defaultProps = {
name: (0, style_helpers_1.uniqueName)("".concat(cx('&'), "-")),
onSelect: lodash_1.default.noop,
selectedIndex: 0,
isDisabled: false,
};
/** TODO: Remove this constant when the component is converted to a functional component */
var nonPassThroughs = [
'children',
'className',
'name',
'onSelect',
'selectedIndex',
'isDisabled',
];
var RadioGroup = function (props) {
var children = props.children, className = props.className, name = props.name, selectedIndex = props.selectedIndex, isDisabled = props.isDisabled, passThroughs = __rest(props, ["children", "className", "name", "selectedIndex", "isDisabled"]);
var handleSelected = function (event, childProps, isSelected, selectedIndex) {
if (selectedIndex !== undefined) {
var clickedRadioButtonProps = lodash_1.default.get(lodash_1.default.map((0, component_types_1.findTypes)(props, RadioGroup.RadioButton), 'props'), selectedIndex);
// If the `RadioGroup.RadioButton` child has an `onSelect` prop that is
// a function, call that prior to calling the group's `onSelect` prop.
if (lodash_1.default.isFunction(clickedRadioButtonProps.onSelect)) {
clickedRadioButtonProps.onSelect(isSelected, {
event: event,
props: childProps,
});
}
props.onSelect(selectedIndex, { event: event, props: childProps });
}
};
var radioButtonChildProps = lodash_1.default.map((0, component_types_1.findTypes)(props, RadioGroup.RadioButton), 'props');
var selectedIndexFromChildren = lodash_1.default.findLastIndex(radioButtonChildProps, {
isSelected: true,
});
// If there are any `RadioGroup.RadioButton` children with `isSelected`
// equal to true, then the index of the last one should override the
// value of the `selectedIndex` prop.
var actualSelectedIndex = selectedIndexFromChildren !== -1
? selectedIndexFromChildren
: selectedIndex;
return (react_1.default.createElement("span", __assign({}, lodash_1.default.omit(passThroughs, nonPassThroughs), { className: cx('&', className) }),
lodash_1.default.map(radioButtonChildProps, function (radioButtonChildProp, index) {
var isSelected = actualSelectedIndex === index;
return (react_1.default.createElement(RadioButtonLabeled_1.default, __assign({}, radioButtonChildProp, { isDisabled: isDisabled || radioButtonChildProp.isDisabled, isSelected: isSelected, key: index, callbackId: index, name: name, onSelect: function (isSelected, _a) {
var event = _a.event, props = _a.props;
handleSelected(event, props, isSelected, index);
}, Label: lodash_1.default.get((0, component_types_1.getFirst)(radioButtonChildProp, RadioGroup.Label), 'props', null) })));
}),
(0, component_types_1.rejectTypes)(children, RadioGroup.RadioButton)));
};
exports.RadioGroupDumb = RadioGroup;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.propTypes = {
/**
Should be instances of \`RadioGroup.RadioButton\` which supports the same
props as \`RadioButton\`.
*/
children: node,
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
/**
Passed along to the \`RadioGroup.RadioButton\` children whose \`name\`
props are ignored.
*/
name: string,
/**
Called when the user clicks on one of the child radio buttons or when
they press the space key while one is in focus, and only called when the
component is in the unselected state. \`props\` refers to the child
\`RadioButton\` props. Signature: \`(selectedIndex, { event, props }) => {}\`
*/
onSelect: func,
/**
Indicates which of the \`RadioGroup.RadioButton\` children is currently
selected. The index of the last \`RadioGroup.RadioButton\` child with
\`isSelected\` equal to true takes precedence over this prop.
*/
selectedIndex: number,
/**
Indicates whether all \`RadioGroup.RadioButton\` children should appear
and act disabled by having a "greyed out" palette and ignoring user
interactions.
*/
isDisabled: bool,
};
RadioGroup.peek = {
description: "A composite of the `RadioButton` component and the native `label` element.",
notes: {
overview: "\n\t\t\tA round two-state toggle with a label that explains the action or selection. This is a composite of `RadioButton` and the native\n\t\t\t`label` element.\t\t",
intendedUse: "\n\t\t\t- Use radio button to allow users to select one item. Commonly used to select filters or settings. For interactions where users can select mutiple options, use `CheckboxLabeled`. \n\t\t\t- Use radio buttons for 2-3 options where you want to expose all options.\n\t\t\t- Use `SingleSelect` for 3-10 options where it is not a priority to expose all options.\n\t\t\t- Use `RadioGroup` for horizontal lists of options. Use `RadioButtonLabeled` for vertical lists of options.\n\t",
technicalRecommendations: "\n\t\t\t- Use the styles on the parent container of `RadioGroup` to ensure only the radio buttons and their labels are clickable.\n\t\t\t- Any props that are not explicitly defined in `propTypes` are passed to the native radio button control.\n\t\t",
},
categories: ['controls', 'toggles'],
madeFrom: ['RadioButton'],
};
RadioGroup.defaultProps = defaultProps;
RadioGroup.reducers = RadioGroup_reducers_1.default;
RadioGroup.RadioButton = RadioButton_1.default;
RadioGroup.Label = RadioGroupLabel;
exports.default = (0, state_management_1.buildModernHybridComponent)(RadioGroup, { reducers: RadioGroup_reducers_1.default });
//# sourceMappingURL=RadioGroup.js.map