@grandlinex/react-components
Version:
39 lines (38 loc) • 2.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sidebar = Sidebar;
const react_1 = __importDefault(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const components_1 = require("../../../components");
const util_1 = require("../../../util");
function Sidebar(props) {
const { topMenu, botMenu, onClickItem } = props;
return (react_1.default.createElement("div", { className: "sidebar--container" },
react_1.default.createElement("div", { className: "sidebar--container-up" }, topMenu.map(({ icon, onClick, key, name, labelNum }, index, array) => (react_1.default.createElement(components_1.Tooltip, { key: `tip_${key}`, text: name, position: "right" },
react_1.default.createElement("button", { key: `btn_${key}`, type: "button", className: "menu-button", onClick: () => {
if (onClick) {
onClick();
}
else if (onClickItem) {
onClickItem(array[index]);
}
} },
labelNum?.map((l) => (react_1.default.createElement("span", { key: `${key}_${l.pos}`, className: (0, util_1.cnx)('label--num', [l.pos === 'left', 'label--num-left'], [l.pos === 'right', 'label--num-right'], [l.pos === 'bottom', 'label--num-bottom']), style: l.color
? {
backgroundColor: l.color,
}
: undefined }, l.value))),
(0, react_icons_1.getIcon)(icon)({ size: 20 })))))),
react_1.default.createElement("div", { className: "sidebar--container-down" }, botMenu.map(({ icon, key, onClick, name }, index, array) => (react_1.default.createElement(components_1.Tooltip, { key: `tip_${key}`, text: name, position: "right" },
react_1.default.createElement("button", { key: `btn_${key}`, type: "button", className: "menu-button", onClick: () => {
if (onClick) {
onClick();
}
else if (onClickItem) {
onClickItem(array[index]);
}
} }, (0, react_icons_1.getIcon)(icon)({ size: 20 }))))))));
}