tessl/npm-ant-design--pro-layout

Standard, yet flexible, middle and backend layout component for React applications with Ant Design integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Pro Layout

Name: tessl/npm-ant-design--pro-layout
Author: tessl

Pro Layout is a comprehensive enterprise-grade layout component for React applications built with Ant Design. It provides a standardized yet flexible middle and backend layout solution with automatic menu generation from route configurations, one-click layout switching capabilities, breadcrumb generation, page headers, and footer toolbar integration.

Package Information

Package Name: @ant-design/pro-layout
Package Type: npm
Language: TypeScript
Installation: npm install @ant-design/pro-layout

Core Imports

import ProLayout from "@ant-design/pro-layout";

For named imports:

import {
  ProLayout,
  PageContainer,
  FooterToolbar,
  SettingDrawer,
  WaterMark,
  getPageTitle,
  getMenuData
} from "@ant-design/pro-layout";

For CommonJS:

const ProLayout = require("@ant-design/pro-layout");
const { PageContainer, FooterToolbar } = require("@ant-design/pro-layout");

Basic Usage

import React from "react";
import ProLayout from "@ant-design/pro-layout";
import type { MenuDataItem } from "@ant-design/pro-layout";

const menuData: MenuDataItem[] = [
  {
    path: "/dashboard",
    name: "Dashboard",
    icon: "DashboardOutlined",
  },
  {
    path: "/users",
    name: "Users",
    icon: "UserOutlined",
  },
];

function App() {
  return (
    <ProLayout
      title="My Admin App"
      menu={{ request: async () => menuData }}
      route={{
        children: menuData,
      }}
    >
      <div>Your page content here</div>
    </ProLayout>
  );
}

Architecture

Pro Layout is built around several key architectural components:

Core Layout System: The main ProLayout component manages overall layout structure including sidebar, header, and footer
Page Management: PageContainer provides standardized page content with headers, breadcrumbs, and tabs
Context System: RouteContext shares layout state and configuration across all components
Settings System: Comprehensive theme and layout configuration with SettingDrawer for runtime customization
Utility Functions: Helper functions for page titles, menu data processing, and route handling
Component Ecosystem: Specialized components for footers, headers, toolbars, and content areas

Capabilities

Main Layout Component

The core ProLayout component providing enterprise-grade layout with sidebar navigation, responsive design, and comprehensive customization options.

function ProLayout(props: ProLayoutProps): React.ReactElement;

interface ProLayoutProps {
  /** Minimal mode without layout chrome */
  pure?: boolean;
  /** Logo configuration */
  logo?: React.ReactNode | false | (() => React.ReactNode);
  /** Page change callback */
  onPageChange?: (location?: { pathname?: string }) => void;
  /** Global loading state */
  loading?: boolean;
  /** Sidebar collapse state */
  collapsed?: boolean;
  /** Collapse state handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Layout settings */
  layout?: 'side' | 'top' | 'mix';
  /** Navigation theme */
  navTheme?: 'realDark' | 'light';
  /** Content width mode */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Footer render function */
  footerRender?: WithFalse<(props: any) => React.ReactNode>;
  /** Breadcrumb render function */
  breadcrumbRender?: WithFalse<(routers: any[]) => React.ReactNode>;
  /** Menu configuration */
  menu?: MenuConfig;
  /** Route configuration */
  route?: Route;
  /** Layout title */
  title?: string | false;
  children?: React.ReactNode;
}

interface MenuConfig {
  /** Internationalization */
  locale?: boolean;
  /** Default open all menus */
  defaultOpenAll?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Async menu data request */
  request?: (params: any, defaultMenuData: MenuDataItem[]) => Promise<MenuDataItem[]>;
  /** Menu type */
  type?: 'sub' | 'group';
}

Main Layout

Page Components

Page-level components for content containers, headers, and page structure management.

function PageContainer(props: PageContainerProps): React.ReactElement;

interface PageContainerProps {
  /** Page title */
  title?: React.ReactNode | false;
  /** Page description content */
  content?: React.ReactNode;
  /** Extra content area */
  extraContent?: React.ReactNode;
  /** Loading configuration */
  loading?: boolean | SpinProps | React.ReactNode;
  /** Header configuration */
  header?: Partial<PageHeaderProps>;
  /** Custom header renderer */
  pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
  /** Breadcrumb renderer */
  breadcrumbRender?: ((route: any, params: any, routes: any[], paths: any[]) => React.ReactNode) | false;
  /** Watermark configuration */
  waterMarkProps?: WaterMarkProps;
  children?: React.ReactNode;
}

Page Components

Layout Configuration

Settings and configuration system for themes, layout modes, and runtime customization.

interface ProSettings {
  /** Navigation theme */
  navTheme?: 'realDark' | 'light';
  /** Layout type */
  layout?: 'side' | 'top' | 'mix';
  /** Content width mode */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Fixed header */
  fixedHeader?: boolean;
  /** Fixed sidebar */
  fixSiderbar?: boolean;
  /** Menu configuration */
  menu?: MenuSettings;
  /** Layout title */
  title?: string | false;
  /** Custom icon font URL */
  iconfontUrl?: string;
  /** Primary brand color */
  colorPrimary?: string;
  /** Split menu mode (mix layout only) */
  splitMenus?: boolean;
}

function SettingDrawer(props: SettingDrawerProps): React.ReactElement;

Layout Configuration

Footer and Toolbar Components

Footer components and toolbar utilities for actions and navigation.

function FooterToolbar(props: FooterToolbarProps): React.ReactElement;

interface FooterToolbarProps {
  /** Extra content area */
  extra?: React.ReactNode;
  /** Custom content renderer */
  renderContent?: (props: FooterToolbarProps & RouteContextType & { leftWidth?: string }, dom: JSX.Element) => React.ReactNode;
  /** Portal rendering */
  portalDom?: boolean;
  children?: React.ReactNode;
}

function DefaultFooter(props: FooterProps): React.ReactElement;

Footer and Toolbar

Context and State Management

Context providers and state management for sharing layout configuration and route information.

const RouteContext: React.Context<RouteContextType>;

interface RouteContextType {
  /** Breadcrumb configuration */
  breadcrumb?: Record<string, MenuDataItem>;
  /** Menu data array */
  menuData?: MenuDataItem[];
  /** Mobile device detection */
  isMobile?: boolean;
  /** Sidebar collapse state */
  collapsed?: boolean;
  /** Sidebar visibility */
  hasSiderMenu?: boolean;
  /** Header visibility */
  hasHeader?: boolean;
  /** Sidebar width */
  siderWidth?: number;
  /** Page title information */
  pageTitleInfo?: PageTitleInfo;
  /** Matched menu items */
  matchMenus?: MenuDataItem[];
  /** Current active menu */
  currentMenu?: MenuDataItem;
}

Context and State

Utility Functions

Helper functions for page titles, menu processing, and common layout operations.

function getPageTitle(props: GetPageTitleProps, ignoreTitle?: boolean): string;

interface GetPageTitleProps {
  pathname?: string;
  breadcrumb?: Record<string, MenuDataItem>;
  menu?: MenuDataItem[];
  title?: string;
  pageName?: string;
}

function getMenuData(
  routes: Route[],
  menu?: any,
  formatMessage?: any,
  menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
): {
  breadcrumb: Record<string, MenuDataItem>;
  breadcrumbMap: Map<string, MenuDataItem>;
  menuData: MenuDataItem[];
};

Utility Functions

Help System

Comprehensive help and documentation system components.

function ProHelp<ValueType = any>(props: ProHelpProps<ValueType>): React.ReactElement;

interface ProHelpProps<ValueType> {
  /** Help data source */
  dataSource: ProHelpDataSource[];
  /** Value type mapping for custom rendering */
  valueTypeMap?: Map<string, any>;
  /** Async content loader */
  onLoadContext?: (dataSource: ProHelpDataSource) => Promise<any>;
  children?: React.ReactNode;
}

Help System

Types

Core Types

interface MenuDataItem {
  /** Child menu items */
  children?: MenuDataItem[];
  /** Hide children in menu */
  hideChildrenInMenu?: boolean;
  /** Hide item in menu */
  hideInMenu?: boolean;
  /** Menu icon */
  icon?: React.ReactNode;
  /** Internationalization key */
  locale?: string | false;
  /** Menu item display name */
  name?: string;
  /** Unique identifier */
  key?: string;
  /** Disable menu item */
  disabled?: boolean;
  /** Route path or external URL */
  path?: string;
  /** Parent selection keys */
  parentKeys?: string[];
  /** Link target */
  target?: string;
  /** Tooltip text */
  tooltip?: string;
  /** Flatten menu structure */
  flatMenu?: boolean;
}

interface Route {
  children?: Route[];
  /** Menu item properties */
  [key: string]: any;
}

type WithFalse<T> = T | false;

interface WaterMarkProps {
  /** Horizontal gap between marks */
  gapX?: number;
  /** Vertical gap between marks */
  gapY?: number;
  /** Z-index value */
  zIndex?: number;
  /** Watermark width */
  width?: number;
  /** Watermark height */
  height?: number;
  /** Rotation angle in degrees */
  rotate?: number;
  /** Image source URL */
  image?: string;
  /** Text content */
  content?: string | string[];
  /** Font color */
  fontColor?: string;
  /** Font size */
  fontSize?: number;
}

Default Configuration

const defaultSettings: ProSettings = {
  navTheme: 'light',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  iconfontUrl: '',
  colorPrimary: '#1677FF',
  splitMenus: false,
};