react-openfin-mat-impl/layouts/LaunchBar/LaunchBar.js

Materialize UI implementation of react-openfin

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_1 = require("react");
const react_openfin_1 = require("react-openfin");
const classnames_1 = require("classnames");
const react_custom_scrollbars_1 = require("react-custom-scrollbars");
const styles_1 = require("@material-ui/styles");
const AppBar_1 = require("@material-ui/core/AppBar");
const Toolbar_1 = require("@material-ui/core/Toolbar");
const Fab_1 = require("@material-ui/core/Fab");
const IconButton_1 = require("@material-ui/core/IconButton");
const AllOut_1 = require("@material-ui/icons/AllOut");
const ArrowBack_1 = require("@material-ui/icons/ArrowBack");
const ArrowForward_1 = require("@material-ui/icons/ArrowForward");
const Clear_1 = require("@material-ui/icons/Clear");
const Remove_1 = require("@material-ui/icons/Remove");
const ZoomOutMap_1 = require("@material-ui/icons/ZoomOutMap");
const jss_1 = require("../../assets/jss");
const useStyles = styles_1.makeStyles(jss_1.launchBarLayoutStyle);
const LaunchBarComp = ({ appLogo, items, firstAppBar, }) => {
    const classes = useStyles({});
    const { state: { docked, launchBarCollapse, }, actions: { onUndock, launchNewWin, onLaunchBarToggle, onLaunchBarToggleCollapse, onMinimize, onLaunchBarClose, } } = react_1.useContext(react_openfin_1.ApplicationContext);
    const collapse = launchBarCollapse;
    // const _launchBarItems = launchBarItems;
    const shownItems = react_openfin_1.getAllShownItems(items);
    const buttonContainerWidth = shownItems.length < 10 ? shownItems.length * 64 : 576;
    const handleLaunchBarItemBtnClick = (item) => () => {
        launchNewWin(item.appJson);
    };
    return (React.createElement("span", null,
        React.createElement(AppBar_1.default, { position: "static" },
            React.createElement(Toolbar_1.default, { className: classes.toolBar },
                firstAppBar ?
                    React.createElement("div", { className: classes.firstAppBarContainer }, firstAppBar) :
                    React.createElement("img", { src: appLogo, className: classes.appLogoImg }),
                docked && onUndock ?
                    React.createElement(Fab_1.default, { className: classnames_1.default(classes.undockCtrlBtn, classes.controlBtn, classes.controlBtnRose), color: 'inherit', "aria-label": 'undock', onClick: onUndock },
                        React.createElement(AllOut_1.default, null))
                    : null,
                React.createElement(react_custom_scrollbars_1.Scrollbars, { className: classnames_1.default(classes.buttonContainer, {
                        [classes.buttonContainerCollapse]: collapse,
                    }), style: {
                        width: `${buttonContainerWidth}px`,
                    } }, shownItems.map((item, index) => {
                    if (item.icon) {
                        return React.createElement(IconButton_1.default, { key: index, className: classes.baseButton, disabled: item.disabled, onClick: handleLaunchBarItemBtnClick(item) }, React.createElement(item.icon));
                    }
                    else {
                        return React.createElement(IconButton_1.default, { key: index, className: classes.svgButton, disabled: item.disabled, onClick: handleLaunchBarItemBtnClick(item) },
                            React.createElement("img", { src: item.svg }));
                    }
                })),
                React.createElement("div", { className: classes.controlPanelContainer },
                    React.createElement(Fab_1.default, { className: classnames_1.default(classes.controlBtn, classes.controlBtnInfo), color: 'secondary', "aria-label": 'collapse', onClick: onLaunchBarToggleCollapse }, collapse ?
                        React.createElement(ArrowForward_1.default, null) :
                        React.createElement(ArrowBack_1.default, null)),
                    React.createElement(Fab_1.default, { className: classnames_1.default(classes.controlBtn, classes.controlBtnSuccess), color: 'secondary', "aria-label": 'minimize', onClick: onMinimize },
                        React.createElement(Remove_1.default, null)),
                    React.createElement(Fab_1.default, { className: classnames_1.default(classes.controlBtn, classes.controlBtnWarning), color: 'secondary', "aria-label": 'expand', onClick: onLaunchBarToggle },
                        React.createElement(ZoomOutMap_1.default, null)),
                    React.createElement(Fab_1.default, { className: classnames_1.default(classes.controlBtn, classes.controlBtnDanger), color: 'secondary', "aria-label": 'close', onClick: onLaunchBarClose },
                        React.createElement(Clear_1.default, null)))))));
};
exports.default = LaunchBarComp;
//# sourceMappingURL=LaunchBar.js.map