ribbon-react-menu
Version:
Menu Ribbon para React
114 lines (113 loc) • 7.5 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var Button_1 = __importDefault(require("@mui/material/Button"));
var ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
var ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
var ClickAwayListener_1 = __importDefault(require("@mui/material/ClickAwayListener"));
var Grow_1 = __importDefault(require("@mui/material/Grow"));
var Paper_1 = __importDefault(require("@mui/material/Paper"));
var Popper_1 = __importDefault(require("@mui/material/Popper"));
var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
var MenuList_1 = __importDefault(require("@mui/material/MenuList"));
var Divider_1 = __importDefault(require("@mui/material/Divider"));
var system_1 = require("@mui/system");
var CustomButtonGroup = (0, system_1.styled)(ButtonGroup_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #ffffff;\n border: 1px solid #c1c1c1;\n min-height: 32px;\n padding-top: 4px;\n padding-bottom: 4px;\n font-size: 0.8rem;\n\n & .MuiButton-root {\n color: #5a5a5a;\n font-size: 0.8rem;\n }\n\n & .MuiButton-contained {\n background-color: #ffffff;\n }\n\n & .MuiButton-root:hover {\n background-color: #f5f5f5;\n }\n"], ["\n background-color: #ffffff;\n border: 1px solid #c1c1c1;\n min-height: 32px;\n padding-top: 4px;\n padding-bottom: 4px;\n font-size: 0.8rem;\n\n & .MuiButton-root {\n color: #5a5a5a;\n font-size: 0.8rem;\n }\n\n & .MuiButton-contained {\n background-color: #ffffff;\n }\n\n & .MuiButton-root:hover {\n background-color: #f5f5f5;\n }\n"])));
var CustomMenuItem = (0, system_1.styled)(MenuItem_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 0.8rem;\n"], ["\n font-size: 0.8rem;\n"])));
var RibbonSplitButton = function (_a) {
var options = _a.options, defaultSelectedIndex = _a.defaultSelectedIndex, icon = _a.icon, displayIcon = _a.displayIcon;
var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
var anchorRef = (0, react_1.useRef)(null);
var _c = (0, react_1.useState)(defaultSelectedIndex || 0), selectedIndex = _c[0], setSelectedIndex = _c[1];
var handleClick = function () {
if (options && options[selectedIndex]) {
console.info("You clicked ".concat(options[selectedIndex]));
}
else {
console.warn("No options available or invalid selectedIndex.");
}
};
var handleMenuItemClick = function (event, index) {
setSelectedIndex(index);
setOpen(false);
};
var handleToggle = function () {
setOpen(function (prevOpen) { return !prevOpen; });
};
var handleClose = function (event) {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(CustomButtonGroup, { variant: "contained", ref: anchorRef, "aria-label": "split button" },
!displayIcon && (react_1.default.createElement(Button_1.default, { onClick: handleClick }, options && options[selectedIndex] ? (
// @ts-ignore
react_1.default.createElement(react_1.default.Fragment, null, typeof options[selectedIndex] === "string"
? options[selectedIndex]
: options[selectedIndex])) : (""))),
react_1.default.createElement(Button_1.default, { size: "small", "aria-controls": open ? "split-button-menu" : undefined, "aria-expanded": open ? "true" : undefined, "aria-label": "select merge strategy", "aria-haspopup": "menu", onClick: handleToggle },
icon && react_1.default.createElement("span", { style: { marginRight: "0.25rem" } }, icon),
react_1.default.createElement(ArrowDropDown_1.default, { fontSize: "small" }))),
react_1.default.createElement(Popper_1.default, { sx: {
zIndex: 1,
}, open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true }, function (_a) {
var TransitionProps = _a.TransitionProps, placement = _a.placement;
return (react_1.default.createElement(Grow_1.default, __assign({}, TransitionProps, { style: {
transformOrigin: placement === "bottom" ? "center top" : "center bottom",
} }),
react_1.default.createElement(Paper_1.default, null,
react_1.default.createElement(ClickAwayListener_1.default, { onClickAway: handleClose },
react_1.default.createElement(MenuList_1.default, { id: "split-button-menu", autoFocusItem: true }, options &&
Array.isArray(options) &&
options.map(function (option, index) {
return typeof option === "object" && option !== null && "type" in option && option.type === "divider" ? (react_1.default.createElement(Divider_1.default, { key: "divider-".concat(index) })) : (react_1.default.createElement(CustomMenuItem, { key: typeof option === "string" ? option : "option-".concat(index), selected: index === selectedIndex,
// @ts-ignore
onClick: function (event) { return handleMenuItemClick(event, index); } }, typeof option === "string" ? option : ""));
}))))));
})));
};
exports.default = RibbonSplitButton;
var templateObject_1, templateObject_2;