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

A UI component library from AppNexus.

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import _ from 'lodash';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps, } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Button');
const { arrayOf, bool, func, node, oneOf, oneOfType, string } = PropTypes;
const defaultProps = {
    isDisabled: false,
    isActive: false,
    onClick: _.noop,
    type: 'button',
    hasOnlyIcon: false,
};
/** Test Button description */
export const Button = (props) => {
    const { isDisabled, isActive, onClick, hasOnlyIcon, kind, size, className, children, type, ...passThroughs } = props;
    const buttonRef = React.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, props: props });
        }
    }
    return (React.createElement("button", Object.assign({}, omitProps(passThroughs, undefined, [
        ..._.keys(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.createElement("span", { className: cx('&-content') }, children)));
};
Button.defaultProps = defaultProps;
Button.displayName = 'Button';
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'],
};
Button.propName = 'Button';
Button.propTypes = {
    isDisabled: bool `
		Disables the Button by greying it out
	`,
    isActive: bool `
		Activates the Button by giving it a "pressed down" look
	`,
    className: string `
		Class names that are appended to the defaults
	`,
    hasOnlyIcon: bool `
		Set this to \`true\` if you want the Button to only contain an icon.
	`,
    children: oneOfType([node, arrayOf(node)]) `
		Any valid React children
	`,
    kind: oneOf(['primary', 'link', 'danger', 'invisible']) `
		Style variations of the Button
	`,
    size: oneOf(['short', 'small', 'large']) `
		Size variations of the Button
	`,
    onClick: func `
		Called when the user clicks the \`Button\`.
	`,
    type: string `
		Form element type variations of Button. Passed through to DOM Button.
	`,
};
export default Button;