lucid-ui/dist/cjs/components/Button/Button.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 __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var lodash_1 = __importDefault(require("lodash"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-Button');
var arrayOf = prop_types_1.default.arrayOf, bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, oneOf = prop_types_1.default.oneOf, oneOfType = prop_types_1.default.oneOfType, string = prop_types_1.default.string;
var defaultProps = {
    isDisabled: false,
    isActive: false,
    onClick: lodash_1.default.noop,
    type: 'button',
    hasOnlyIcon: false,
};
/** Test Button description */
var Button = function (props) {
    var isDisabled = props.isDisabled, isActive = props.isActive, onClick = props.onClick, hasOnlyIcon = props.hasOnlyIcon, kind = props.kind, size = props.size, className = props.className, children = props.children, type = props.type, passThroughs = __rest(props, ["isDisabled", "isActive", "onClick", "hasOnlyIcon", "kind", "size", "className", "children", "type"]);
    var buttonRef = react_1.default.createRef();
    function handleClick(event) {
        if (!isDisabled) {
            // required to correctly apply the focus state in Safari and Firefox
            // (still valid 2019-07-22)
            if (buttonRef.current) {
                buttonRef.current.focus();
            }
            onClick({ event: event, props: props });
        }
    }
    return (react_1.default.createElement("button", __assign({}, component_types_1.omitProps(passThroughs, undefined, __spreadArrays(lodash_1.default.keys(exports.Button.propTypes), [
        'callbackId',
    ])), { ref: buttonRef, className: cx('&', {
            '&-is-disabled': isDisabled,
            '&-is-active': isActive,
            '&-primary': kind === 'primary',
            '&-link': kind === 'link',
            '&-invisible': kind === 'invisible',
            '&-danger': kind === 'danger',
            '&-short': size === 'short',
            '&-small': size === 'small',
            '&-large': size === 'large',
            '&-has-only-icon': hasOnlyIcon,
        }, className), onClick: handleClick, disabled: isDisabled, type: type }),
        react_1.default.createElement("span", { className: cx('&-content') }, children)));
};
exports.Button = Button;
exports.Button.defaultProps = defaultProps;
exports.Button.displayName = 'Button';
exports.Button.peek = {
    description: "\n\t\tA basic button. Any props that are not explicitly called out below will\n\t\tbe passed through to the native `button` component.\n\t",
    categories: ['controls', 'buttons'],
};
exports.Button.propName = 'Button';
exports.Button.propTypes = {
    isDisabled: bool(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tDisables the Button by greying it out\n\t"], ["\n\t\tDisables the Button by greying it out\n\t"]))),
    isActive: bool(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tActivates the Button by giving it a \"pressed down\" look\n\t"], ["\n\t\tActivates the Button by giving it a \"pressed down\" look\n\t"]))),
    className: string(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tClass names that are appended to the defaults\n\t"], ["\n\t\tClass names that are appended to the defaults\n\t"]))),
    hasOnlyIcon: bool(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tSet this to `true` if you want the Button to only contain an icon.\n\t"], ["\n\t\tSet this to \\`true\\` if you want the Button to only contain an icon.\n\t"]))),
    children: oneOfType([node, arrayOf(node)])(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tAny valid React children\n\t"], ["\n\t\tAny valid React children\n\t"]))),
    kind: oneOf(['primary', 'link', 'danger', 'invisible'])(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tStyle variations of the Button\n\t"], ["\n\t\tStyle variations of the Button\n\t"]))),
    size: oneOf(['short', 'small', 'large'])(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tSize variations of the Button\n\t"], ["\n\t\tSize variations of the Button\n\t"]))),
    onClick: func(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\tCalled when the user clicks the `Button`.\n\t"], ["\n\t\tCalled when the user clicks the \\`Button\\`.\n\t"]))),
    type: string(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\tForm element type variations of Button. Passed through to DOM Button.\n\t"], ["\n\t\tForm element type variations of Button. Passed through to DOM Button.\n\t"]))),
};
exports.default = exports.Button;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=Button.js.map