glass-app-manager

Version:
Informatica's Glass Framework CLI for bootstrapping
87 lines (69 loc) • 2.49 kB
JavaScript
// @flow

import * as React from "react";
import classNames from "classnames";

const ENTER = 13;
const SPACE = 32;

type Props = {
    /**
     * Additional class selectors to pass to the button component.
     * This can be any icon library like fontawesome or our
     * very own Archipelago icon font library.
     */
    className?: string,

    /**
     * Provide a custom renderer for the `Icon` component by providing
     * the element to represent the button as (e.g. `a` or `em`).
     */
    component: string,

    /**
     * Callback to execute when the Icon is clicked.
     */
    onClick?: (e: SyntheticEvent<HTMLElement>) => void,

    /**
     * Set true to mark the Icon component as disabled.
     */
    disabled?: boolean,

    /**
     * Optionally add a custom onKeyUp handler for building
     * accessible icons. By default, the user needs to press
     * either the `Enter` key or `Space Bar` to call `onClick`.
     * Override if you need to customize this behavior.
     */
    onKeyUp?: (e: SyntheticKeyboardEvent<HTMLElement>) => void,
};

const Icon = React.forwardRef(({ className, component, ...rest }: Props, ref) => {
    let onKeyUp = null;

    if (rest.onClick || rest.onKeyUp) {
        onKeyUp = React.useMemo(
            e => (e: SyntheticKeyboardEvent<HTMLElement>) => {
                if (rest.onKeyUp) {
                    rest.onKeyUp(e);

                    return;
                }

                if ((e.keyCode === ENTER || e.keyCode === SPACE) && rest.onClick) {
                    rest.onClick(e);
                }
            },
            [rest.onClick, rest.onKeyUp]
        );
    }

    return React.createElement(component, {
        ref,
        className: classNames("droplets-icon", rest.disabled ? "icon--disabled" : null, className),
        tabIndex: "0",
        onClick: rest.onClick,
        onKeyUp: onKeyUp,
        disabled: rest.disabled,

        // Add the `aria-disabled` prop in case the component is changed to one that doesn't
        // natively support the "disabled" prop
        ...(rest.disabled ? { "aria-disabled": true } : {}),

        // Add some button-specific properties if a button, otherwise
        // set the button role
        ...(component !== "button" ? { role: "button" } : { type: "button" }),

        ...rest,
    });
});

Icon.defaultProps = {
    component: "i",
};

export default Icon;