lucid-ui/dist/cjs/components/SwitchLabeled/SwitchLabeled.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 });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var react_transition_group_1 = require("react-transition-group");
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var Switch_1 = __importDefault(require("../Switch/Switch"));
var react_2 = require("react");
var react_3 = require("react");
var cx = style_helpers_1.lucidClassNames.bind('&-SwitchLabeled');
var any = prop_types_1.default.any, node = prop_types_1.default.node, object = prop_types_1.default.object, string = prop_types_1.default.string;
var defaultProps = {
    isDisabled: false,
    isSelected: false,
    onSelect: lodash_1.default.noop,
};
var defaultState = {
    _labelKey: 0,
};
var SwitchLabeled = function (props) {
    var className = props.className, isDisabled = props.isDisabled, isSelected = props.isSelected, onSelect = props.onSelect, style = props.style, passThroughs = __rest(props, ["className", "isDisabled", "isSelected", "onSelect", "style"]);
    var _a = react_2.useState(defaultState), state = _a[0], setState = _a[1];
    var currentLabel = lodash_1.default.get(component_types_1.getFirst(props, SwitchLabeled.Label), 'props.children', null);
    react_3.useEffect(function () {
        setState({ _labelKey: state._labelKey + 1 });
    }, [currentLabel]);
    var labelChildProps = lodash_1.default.get(component_types_1.getFirst(props, SwitchLabeled.Label), 'props');
    var isShown = !!labelChildProps;
    return (react_1.default.createElement("label", { className: cx('&', {
            '&-is-disabled': isDisabled,
            '&-is-selected': isSelected,
        }, className), style: style },
        react_1.default.createElement(Switch_1.default, __assign({ className: className, isDisabled: isDisabled, isSelected: isSelected, onSelect: onSelect }, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(SwitchLabeled.propTypes), false))),
        labelChildProps && (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isShown, classNames: cx('&-text'), timeout: 100, style: { position: 'relative' }, className: cx('&-text'), unmountOnExit: true },
            react_1.default.createElement("span", { key: state._labelKey }, labelChildProps.children || labelChildProps)))));
};
SwitchLabeled.defaultProps = defaultProps;
SwitchLabeled.displayName = 'SwitchLabeled';
SwitchLabeled.peek = {
    description: "\n\t\tThis is a composite of the `Switch` component and the native\n\t\t`label` element.\n\t",
    categories: ['controls', 'toggles'],
    madeFrom: ['Switch'],
};
var Label = function () {
    return null;
};
Label.displayName = 'SwitchLabeled.Label';
Label.peek = {
    description: "\n\t\tLabel to be shown alongside the switch.\n\t",
};
Label.propName = 'Label';
Label.propTypes = {
    children: node(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tUsed to identify the purpose of this switch to the user -- can be any\n\t\trenderable content.\n\t"], ["\n\t\tUsed to identify the purpose of this switch to the user -- can be any\n\t\trenderable content.\n\t"]))),
};
SwitchLabeled.Label = Label;
SwitchLabeled.propTypes = __assign(__assign({}, Switch_1.default.propTypes), { className: string(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t"]))), style: object(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tPassed through to the root element.\n\t"], ["\n\t\tPassed through to the root element.\n\t"]))), Label: any(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tChild element whose children are used to identify the purpose of this\n\t\tswitch to the user.\n\t"], ["\n\t\tChild element whose children are used to identify the purpose of this\n\t\tswitch to the user.\n\t"]))) });
exports.default = SwitchLabeled;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=SwitchLabeled.js.map