react-antd-admin-panel
Version:
Easy prototyping admin panel using React and Antd
67 lines • 3.48 kB
JavaScript
import React from "react";
import { Menu } from "antd";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const Sider = (props) => {
const main = props.main;
const [openKeys, setOpenKeys] = React.useState([]);
const [defaultKey, setDefaultKey] = React.useState([]);
const [selectedKeys, setSelectedKeys] = React.useState([]);
const Icon = (model, marginRight = 8) => {
var _a, _b;
if ((_a = model._action) === null || _a === void 0 ? void 0 : _a._fontawesome)
return (React.createElement(FontAwesomeIcon, { style: { opacity: .6, marginRight: marginRight, width: 26 }, icon: model._action._fontawesome }));
if (model._fontawesome)
return (React.createElement(FontAwesomeIcon, { style: { opacity: .6, marginRight: marginRight, width: 26 }, icon: model._fontawesome }));
if ((_b = model._action) === null || _b === void 0 ? void 0 : _b._icon)
return React.createElement(model._action._icon, null);
if (model._icon)
return React.createElement(model._icon, null);
return React.createElement(Empty, null);
};
const Empty = () => {
return (React.createElement(React.Fragment, null));
};
function getItem(i, field, handleClick, children = undefined) {
var _a, _b, _c, _d;
let access = main.$access(field._access);
let hide = access.hidden;
let el = hide ? null : {
disabled: !access.access,
key: field._fields.length ? `sub-${i}` : (_a = main.$path(field._action._route())) === null || _a === void 0 ? void 0 : _a._matchedPath,
icon: Icon(field),
label: (_d = (_c = (_b = field._action) === null || _b === void 0 ? void 0 : _b._label) !== null && _c !== void 0 ? _c : field._label) !== null && _d !== void 0 ? _d : '',
};
if (el && children != undefined) {
el['children'] = children;
}
else if (el) {
el['onClick'] = () => handleClick(field._action._route());
}
return el;
}
function handleClick(to) {
console.log(to);
let goTo = typeof to === 'function' ? to() : to;
setSelectedKeys([goTo]);
main.$route(goTo);
}
const onOpenChange = (keys) => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
};
props.main.$function((e) => setSelectedKeys(e), 'setSelectedKeys');
return (React.createElement(React.Fragment, null,
React.createElement(Menu, { mode: "inline", style: { height: 'calc(100vh - 236px)', paddingTop: 0 }, openKeys: openKeys, onOpenChange: onOpenChange, selectedKeys: selectedKeys.length ? selectedKeys : [main.$config.config.defaultRoute()], defaultSelectedKeys: defaultKey.length ? defaultKey : [main.$config.config.defaultRoute()], items: props.model._fields.map((field, i) => {
if (!field._fields.length) {
return getItem(i, field, handleClick);
}
else {
let children = field._fields.map((f, y) => {
return getItem(`${i}-${y}`, f, handleClick);
});
return getItem(i, field, handleClick, children);
}
}) })));
};
export default Sider;
//# sourceMappingURL=Sider.js.map