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

A UI component library from Xandr.

"use strict";
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.Button = void 0;
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var lodash_1 = __importDefault(require("lodash"));
var style_helpers_1 = require("../../util/style-helpers");
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,
};
/** Button */
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({}, passThroughs, { 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: "A basic button. Any props that are not explicitly called out below will be passed through to the native `Button` component.",
    categories: ['controls', 'buttons'],
};
exports.Button.propName = 'Button';
exports.Button.propTypes = {
    /**
        Disables the Button by greying it out
    */
    isDisabled: bool,
    /**
        Activates the Button by giving it a "pressed down" look
    */
    isActive: bool,
    /**
        Class names that are appended to the defaults
    */
    className: string,
    /**
        Set this to \`true\` if you want the Button to only contain an icon.
    */
    hasOnlyIcon: bool,
    /**
        Any valid React children
    */
    children: oneOfType([node, arrayOf(node)]),
    /**
        Style variations of the Button
    */
    kind: oneOf(['primary', 'link', 'danger', 'invisible']),
    /**
        Size variations of the Button
    */
    size: oneOf(['short', 'small', 'large']),
    /**
        Called when the user clicks the \`Button\`.
    */
    onClick: func,
    /**
        Form element type variations of Button. Passed through to DOM Button.
    */
    type: string,
};
exports.default = exports.Button;
//# sourceMappingURL=Button.js.map