@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
95 lines (94 loc) • 4.55 kB
JavaScript
;
/**
* @name Toolbar
*
* @description
* An element used to provide contextually based actions for the content below. *
*
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var PropTypes = __importStar(require("prop-types"));
var Button_1 = require("../Button");
var Icon_1 = require("../Icon");
var Menu;
(function (Menu) {
Menu[Menu["None"] = 0] = "None";
Menu[Menu["Account"] = 1] = "Account";
Menu[Menu["Admin"] = 2] = "Admin";
Menu[Menu["Help"] = 3] = "Help";
})(Menu || (Menu = {}));
var propTypes = {
showHelp: PropTypes.bool,
showAccount: PropTypes.bool,
showAdmin: PropTypes.bool,
helpBody: PropTypes.node,
accountBody: PropTypes.node,
adminBody: PropTypes.node,
testId: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
};
var Toolbar = function (_a) {
var showHelp = _a.showHelp, showAccount = _a.showAccount, showAdmin = _a.showAdmin, helpBody = _a.helpBody, accountBody = _a.accountBody, adminBody = _a.adminBody, testId = _a.testId, children = _a.children;
var _b = React.useState(Menu.None), activeMenu = _b[0], setActiveMenu = _b[1];
React.useEffect(function () {
var listener = function (e) {
var isTargetingPopup = e.target.closest('.flyout-container') != null;
if (!isTargetingPopup) {
setActiveMenu(Menu.None);
}
};
document.body.addEventListener('click', listener);
return function () {
document.body.removeEventListener('click', listener);
};
});
var btnStyle = { color: '#000', marginTop: '-5px' };
var iconStyle = {
border: '1px solid black',
borderRadius: '12px',
padding: '4px',
width: '24px',
height: '24px',
};
return (React.createElement("div", { className: "Grid Toolbar", "data-testid": testId },
children,
React.createElement("div", { className: "Grid-cell u-flexAuto u-sizeFit u-flex u-flexAlignContentCenter u-flexJustifyEnd u-padXs flyout-container" },
React.createElement("div", null,
React.createElement(Button_1.Button, { type: "link", style: btnStyle, onClick: function () { return setActiveMenu(Menu.Help); } }, showHelp && React.createElement(Icon_1.Icon, { className: "Icon u-spaceLeftLg", name: "help", style: iconStyle })),
activeMenu === Menu.Help && (React.createElement("div", { className: "u-posAbsolute Toolbar-flyout" }, helpBody))),
React.createElement("div", null,
React.createElement(Button_1.Button, { type: "link", style: btnStyle, onClick: function () { return setActiveMenu(Menu.Account); } }, showAccount && React.createElement(Icon_1.Icon, { className: "Icon u-spaceLeftLg", name: "user", style: iconStyle })),
activeMenu === Menu.Account && (React.createElement("div", { className: "u-posAbsolute Toolbar-flyout" }, accountBody))),
showAdmin && (React.createElement("div", null,
React.createElement(Button_1.Button, { type: "link", style: btnStyle, onClick: function () { return setActiveMenu(Menu.Admin); } },
React.createElement(Icon_1.Icon, { className: "Icon u-spaceLeftLg", name: "wrench", style: iconStyle })),
activeMenu === Menu.Admin && (React.createElement("div", { className: "u-posAbsolute Toolbar-flyout" }, adminBody)))))));
};
Toolbar.propTypes = propTypes;
Toolbar.defaultProps = {
showAccount: true,
showAdmin: true,
showHelp: true,
testId: null,
};
exports.default = Toolbar;