glass-app-manager

Version:
Informatica's Glass Framework CLI for bootstrapping
93 lines (78 loc) • 2.85 kB
JavaScript
// @flow
import * as React from "react";
import classNames from "classnames";

import Popup from "../popup/Popup";

import ReactResizeDetector from "react-resize-detector";

type Props = {
    /**
     * Children of Toolbar can be any component such as `Input`, `Button`, `Dropdown`
     */
    children: React.Node,

    /**
     * Whether toolbar should align to left (default align to right)
     */
    alignLeft?: boolean,

    /**
     * Whether toolbar should be responsive. When toolbar is responsive and available width is less than overflowCutoff, toolbar will become a dropdown. Content in `Toolbar.Overflow` child component will be show in dropdow.
     */
    responsive?: boolean,

    /**
     * cutoff width to show toolbar as a dropdown
     */
    overflowCutoff?: number,

    /**
     * Additional class selectors to pass to component.
     */
    className?: string,
};

export default function Toolbar(props: Props) {
    const { alignLeft, children, className, overflowCutoff, responsive, ...rest } = props;

    let overflow: React.Element<any>;
    let items = [];

    const filterChild = (child: React.Element<any>) => {
        if (child.type === Toolbar.Overflow) {
            overflow = child;
        } else {
            items.push(child);
        }
    };

    const aChildren = React.Children.toArray(children);
    aChildren.forEach(filterChild);
    return (
        <div className={classNames("toolbar", className, { "align-left": alignLeft })} {...rest}>
            {responsive ? (
                <ReactResizeDetector handleWidth>
                    {width => {
                        if (width > overflowCutoff) {
                            return <div className="toolbar__content">{items}</div>;
                        }
                        return (
                            <Popup
                                on="click"
                                trigger={<i className="aicon aicon__hamburger" />}
                                content={overflow || items}
                                position="bottom"
                            />
                        );
                    }}
                </ReactResizeDetector>
            ) : (
                <div className="toolbar__content">{items}</div>
            )}
        </div>
    );
}

Toolbar.defaultProps = {
    alignLeft: false,
    responsive: false,
    overflowCutoff: 400,
};

Toolbar.Separator = () => {
    return <span className="toolbar__separator" />;
};
Toolbar.Overflow = (props: { children: Array<React.Node> | React.Node }) => {
    return <div>{props.children}</div>;
};

Toolbar.displayName = "Toolbar";
Toolbar.Separator.displayName = "ToolbarSeparator";
Toolbar.Overflow.displayName = "ToolbarOverflow";