ribbon-react-menu
Version:
Menu Ribbon para React
248 lines (247 loc) • 13 kB
JavaScript
;
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
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 material_1 = require("@mui/material");
var lab_1 = require("@mui/lab");
var CustomRibbonButton_1 = __importDefault(require("./CustomRibbonButton"));
var CustomRibbonButtonGroup_1 = __importDefault(require("./CustomRibbonButtonGroup"));
var RibbonSplitButton_1 = __importDefault(require("./RibbonSplitButton"));
var RibbonButton_1 = __importDefault(require("./RibbonButton"));
var RibbonIconButton_1 = __importDefault(require("./RibbonIconButton"));
var BasicSpeedDial_1 = __importDefault(require("./speeddial/BasicSpeedDial"));
var ribbonTabs_1 = require("./ribbonTabs");
var system_1 = require("@mui/system");
var icons_material_1 = require("@mui/icons-material");
var link_1 = __importDefault(require("next/link"));
var system_2 = require("@mui/system");
var componentMap = {
Input: material_1.Input,
TextArea: material_1.TextareaAutosize,
Select: material_1.Select,
Switch: material_1.Switch,
};
var StyledMobileStepper = (0, system_1.styled)(material_1.MobileStepper)(function (_a) {
var theme = _a.theme;
return ({
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: 0,
});
});
var StyledTabs = (0, system_1.styled)(material_1.Tabs)(function (_a) {
var theme = _a.theme;
return ({
backgroundColor: theme.palette.background.default,
minHeight: "auto",
borderBottom: "1px solid ".concat(theme.palette.divider),
});
});
var StyledTab = (0, system_1.styled)(material_1.Tab)(function (_a) {
var theme = _a.theme;
return ({
textTransform: "none",
minHeight: "auto",
minWidth: "auto",
fontSize: "0.6rem",
fontWeight: "bold",
padding: theme.spacing(1, 3),
margin: 0,
borderRadius: "12px 12px 0 0",
borderTop: "1px solid ".concat(theme.palette.divider),
borderLeft: "1px solid ".concat(theme.palette.divider),
borderRight: "1px solid ".concat(theme.palette.divider),
"&:first-of-type": {
borderLeft: 0,
},
"&.Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.primary.main,
borderBottom: "1px solid transparent",
},
"&:hover": {
backgroundColor: theme.palette.grey[200],
},
});
});
var StyledTabPanel = (0, system_1.styled)(lab_1.TabPanel)(function (_a) {
var theme = _a.theme;
return ({
backgroundColor: theme.palette.background.default,
padding: 0,
position: 'relative',
width: '100%'
});
});
var convertIconName = function (iconName) {
return iconName;
};
var Ribbon = function (_a) {
var customTabs = _a.customTabs, onButtonClick = _a.onButtonClick;
var themex = (0, system_2.createTheme)({
palette: {
primary: {
main: '#1b5a90'
},
},
});
var tabsToUse = customTabs ? customTabs : ribbonTabs_1.ribbonTabs ? ribbonTabs_1.ribbonTabs : [];
var _b = react_1.default.useState(0), selectedTabIndex = _b[0], setSelectedTabIndex = _b[1];
var theme = (0, system_1.useTheme)(themex);
var isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down("sm"));
var RibbonIcon = function (_a) {
var iconName = _a.iconName;
if (!iconName) {
return { iconComponent: null, displayIcon: false };
}
var IconComponent = require("@mui/icons-material")[convertIconName(iconName)];
if (!IconComponent) {
return { iconComponent: null, displayIcon: false };
}
return { iconComponent: react_1.default.createElement(IconComponent, null), displayIcon: true };
};
var handleTabChange = function (event, newValue) {
setSelectedTabIndex(newValue);
};
var renderReactComponent = (0, react_1.useCallback)(function (button, index) {
var Component = button.component ? componentMap[button.component] : undefined;
if (!Component)
return null;
var wrappedComponent = button.component === "Select" ? (react_1.default.createElement(Component, { onChange: button.onChange }, button.options.items.map(function (item, itemIndex) { return (react_1.default.createElement(material_1.MenuItem, { key: itemIndex, value: item.value }, item.label)); }))) : (react_1.default.createElement(Component, __assign({}, button.options, { onChange: button.onChange })));
return (react_1.default.createElement("div", { style: { display: "inline-flex", flexDirection: "row" }, key: index },
react_1.default.createElement(CustomRibbonButton_1.default, { caption: button.caption }, wrappedComponent)));
}, []);
// interface RibbonButton extends Omit<ButtonProps, 'onClick'> {
// onClick?: () => void;
// }
var renderButton = (0, react_1.useCallback)(function (button, index) {
if (button.component && componentMap[button.component]) {
return renderReactComponent(button, index);
}
var ribbonIconResult = RibbonIcon({ iconName: button.icon });
var buttonProps = {
buttonKey: index,
caption: button.caption,
icon: ribbonIconResult.iconComponent,
onClick: function () {
console.log("Clic en el bot\u00F3n: ".concat(button.icon));
button.onClick && button.onClick();
//@ts-ignore
onButtonClick && onButtonClick(button);
},
};
switch (button.type) {
case "RibbonButton":
return react_1.default.createElement(RibbonButton_1.default, __assign({}, buttonProps));
case "RibbonIconButton":
return react_1.default.createElement(RibbonIconButton_1.default, __assign({}, buttonProps));
case "RibbonSplitButton":
var splitButtonOptions = button.dropdownItems
? button.dropdownItems.map(function (item) { return item.caption; })
: [];
var ribbonIconResult_1 = RibbonIcon({ iconName: button.icon });
return (react_1.default.createElement(RibbonSplitButton_1.default, { key: index, options: splitButtonOptions, defaultSelectedIndex: button.defaultSelectedIndex, icon: ribbonIconResult_1.iconComponent, displayIcon: ribbonIconResult_1.displayIcon }));
default:
return null;
}
}, [onButtonClick]);
var wrapWithLink = function (button, buttonComponent) {
return button.route ? (react_1.default.createElement(link_1.default, { href: button.route },
react_1.default.createElement("span", { style: { textDecoration: 'none', cursor: 'pointer' } }, buttonComponent))) : (buttonComponent);
};
var renderButtons = (0, react_1.useCallback)(function (buttons, parentKey) {
if (parentKey === void 0) { parentKey = ''; }
return buttons.map(function (button, index) {
var buttonElement = renderButton(button, index);
return (react_1.default.createElement(react_1.default.Fragment, { key: "".concat(parentKey, "-").concat(index) }, wrapWithLink(button, buttonElement)));
});
}, [onButtonClick]);
var chunkArray = (0, react_1.useCallback)(function (array, chunkSize) {
var results = [];
while (array.length) {
results.push(array.splice(0, chunkSize));
}
return results;
}, []);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(system_2.ThemeProvider, { theme: theme },
react_1.default.createElement(lab_1.TabContext, { value: selectedTabIndex.toString() },
isMobile ? (react_1.default.createElement(StyledMobileStepper, { activeStep: selectedTabIndex, steps: ribbonTabs_1.ribbonTabs.length, position: "static", nextButton: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: function () {
return setSelectedTabIndex(function (prev) {
return prev === ribbonTabs_1.ribbonTabs.length - 1 ? 0 : prev + 1;
});
}, "aria-label": "next" },
react_1.default.createElement(icons_material_1.KeyboardArrowRight, null)), backButton: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: function () {
return setSelectedTabIndex(function (prev) {
return prev === 0 ? ribbonTabs_1.ribbonTabs.length - 1 : prev - 1;
});
}, "aria-label": "back" },
react_1.default.createElement(icons_material_1.KeyboardArrowLeft, null)) })) : (react_1.default.createElement(StyledTabs, { value: selectedTabIndex, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto" }, tabsToUse.map(function (tab, tabIndex) { return (react_1.default.createElement(StyledTab, { key: tabIndex, label: tab.label, iconPosition: "start", icon: RibbonIcon({ iconName: tab.icon }).iconComponent || undefined })); }))),
tabsToUse.map(function (tab, tabIndex) { return (react_1.default.createElement(StyledTabPanel, { key: tabIndex, value: tabIndex.toString(), id: "tabpanel-".concat(tabIndex), "aria-labelledby": "tab-".concat(tabIndex) },
tab.buttonGroups.map(function (group, groupIndex) {
if (group.flexDirection === "column") {
var chunkedButtons = chunkArray(__spreadArray([], group.buttons, true), 2);
return chunkedButtons.map(function (chunk, chunkIndex) { return (react_1.default.createElement(CustomRibbonButtonGroup_1.default, { key: "".concat(groupIndex, "-").concat(chunkIndex), style: {
flexDirection: group.flexDirection,
paddingTop: "0.5rem",
paddingBottom: "0.5rem",
}, caption: group.caption }, renderButtons(chunk, "".concat(groupIndex, "-").concat(chunkIndex)))); });
}
else {
return (react_1.default.createElement(CustomRibbonButtonGroup_1.default, { key: groupIndex, style: {
flexDirection: group.flexDirection,
paddingTop: "0.5rem",
paddingBottom: "0.5rem",
}, caption: group.caption },
//@ts-ignore
renderButtons(group.buttons, groupIndex)));
}
}),
react_1.default.createElement(BasicSpeedDial_1.default, null))); })))));
};
exports.default = Ribbon;