@xiongtaoiot/xt-layout v0.0.6

Xt Layout

Example

import XtLayout, { MenuItem } from "@xiongtaoiot/xt-layout";
import { HeartOutlined, SmileOutlined } from "@ant-design/icons";
import { createBrowserHistory } from "history";

const IconMap: Record<string, React.ReactNode> = {
  smile: <SmileOutlined />,
  heart: <HeartOutlined />,
};

const componentMap: Record<string, React.ReactNode> = {
  welcome: <div>hello welcome</div>,
  demo: <div>demo here</div>,
};

const defaultMenus = [
  {
    path: "/",
    name: "欢迎",
    icon: "smile",
    children: [
      {
        path: "/welcome",
        name: "一",
        icon: "smile",
        component: "welcome",
      },
    ],
  },
  {
    path: "/demo",
    name: "示例",
    icon: "heart",
    component: "demo",
  },
];

const loopMenuItem = (menus: any[]): MenuItem[] =>
  menus.map(({ component, icon, children, ...item }) => ({
    ...item,
    icon: icon && IconMap[icon as string],
    component: component && componentMap[component as string],
    children: children && loopMenuItem(children),
  }));

export default () => {
  return (
    <XtLayout
      history={createBrowserHistory()}
      menu={{ request: async () => loopMenuItem(defaultMenus) }}
      title="菜单布局"
      menuFooterRender={() => <div>menu footer here</div>}
      headerContentRender={() => <div>header here</div>}
    />
  );
};