lucid-ui/dist/cjs/components/RadioGroup/RadioGroup.js

A UI component library from AppNexus.

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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("react-peek/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;
var RadioGroupLabel = function (props) { return null; };
RadioGroupLabel.peek = {
    description: "\n        Support radio button labels as `RadioGroup.Label` component which\n        can be provided as a child of a `RadioGroup.RadioButton`\n        component.\n    ",
};
RadioGroupLabel.propTypes = {
    children: node,
};
RadioGroupLabel.displayName = 'RadioGroup.Label';
var defaultProps = {
    name: style_helpers_1.uniqueName(cx('&') + "-"),
    onSelect: lodash_1.default.noop,
    selectedIndex: 0,
    isDisabled: false,
};
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 (isSelected, _a) {
        var event = _a.event, childProps = _a.props;
        var callbackId = childProps.callbackId;
        if (callbackId !== undefined) {
            var clickedRadioButtonProps = lodash_1.default.get(lodash_1.default.map(component_types_1.findTypes(props, RadioGroup.RadioButton), 'props'), callbackId);
            // 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(callbackId, { event: event, props: childProps });
        }
    };
    var radioButtonChildProps = lodash_1.default.map(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({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(RadioGroup.propTypes)), { className: cx('&', className) }),
        lodash_1.default.map(radioButtonChildProps, function (radioButtonChildProp, index) {
            return (react_1.default.createElement(RadioButtonLabeled_1.default, __assign({}, radioButtonChildProp, { isDisabled: isDisabled || radioButtonChildProp.isDisabled, isSelected: actualSelectedIndex === index, key: index, callbackId: index, name: name, onSelect: handleSelected, Label: lodash_1.default.get(component_types_1.getFirst(radioButtonChildProp, RadioGroup.Label), 'props', null) })));
        }),
        component_types_1.rejectTypes(children, RadioGroup.RadioButton)));
};
exports.RadioGroupDumb = RadioGroup;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.propTypes = {
    children: node(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    \t\t\tShould be instances of `RadioGroup.RadioButton` which supports the same\n    \t\t\tprops as `RadioButton`.\n    \t\t"], ["\n    \t\t\tShould be instances of \\`RadioGroup.RadioButton\\` which supports the same\n    \t\t\tprops as \\`RadioButton\\`.\n    \t\t"]))),
    className: string(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    \t\t\tAppended to the component-specific class names set on the root element.\n    \t\t"], ["\n    \t\t\tAppended to the component-specific class names set on the root element.\n    \t\t"]))),
    name: string(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    \t\t\tPassed along to the `RadioGroup.RadioButton` children whose `name`\n    \t\t\tprops are ignored.\n    \t\t"], ["\n    \t\t\tPassed along to the \\`RadioGroup.RadioButton\\` children whose \\`name\\`\n    \t\t\tprops are ignored.\n    \t\t"]))),
    onSelect: func(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    \t\t\tCalled when the user clicks on one of the child radio buttons or when\n    \t\t\tthey press the space key while one is in focus, and only called when the\n    \t\t\tcomponent is in the unselected state. `props` refers to the child\n    \t\t\t`RadioButton` props.  Signature: `(selectedIndex, { event, props }) => {}`\n    \t\t"], ["\n    \t\t\tCalled when the user clicks on one of the child radio buttons or when\n    \t\t\tthey press the space key while one is in focus, and only called when the\n    \t\t\tcomponent is in the unselected state. \\`props\\` refers to the child\n    \t\t\t\\`RadioButton\\` props.  Signature: \\`(selectedIndex, { event, props }) => {}\\`\n    \t\t"]))),
    selectedIndex: number(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    \t\t\tIndicates which of the `RadioGroup.RadioButton` children is currently\n    \t\t\tselected. The index of the last `RadioGroup.RadioButton` child with\n    \t\t\t`isSelected` equal to true takes precedence over this prop.\n    \t\t"], ["\n    \t\t\tIndicates which of the \\`RadioGroup.RadioButton\\` children is currently\n    \t\t\tselected. The index of the last \\`RadioGroup.RadioButton\\` child with\n    \t\t\t\\`isSelected\\` equal to true takes precedence over this prop.\n    \t\t"]))),
    isDisabled: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    \t\t\tIndicates whether all `RadioGroup.RadioButton` children should appear\n    \t\t\tand act disabled by having a \"greyed out\" palette and ignoring user\n    \t\t\tinteractions.\n    \t\t"], ["\n    \t\t\tIndicates whether all \\`RadioGroup.RadioButton\\` children should appear\n    \t\t\tand act disabled by having a \"greyed out\" palette and ignoring user\n    \t\t\tinteractions.\n    \t\t"]))),
};
RadioGroup.peek = {
    description: "\n\t\tThis is a composite of the `RadioButton` component and the native\n\t\t`label` element.\n",
    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 = state_management_1.buildModernHybridComponent(RadioGroup, { reducers: RadioGroup_reducers_1.default });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=RadioGroup.js.map