ding-react-admin 2.0.0 → 2.0.4

package/src/layouts/AuthPageLayout.tsx

@@ -1,81 +1,87 @@
-import { Flex, theme } from "antd";
-import type { ReactNode } from "react";
-import { ThemeToolbar } from "../components/ThemeToolbar";
-
-export type AuthPageLayoutProps = {
-  children: ReactNode;
-  /** Brand mark centered above the card. */
-  brand?: ReactNode;
-  /** Row below the card (e.g. link to register or login). */
-  footer?: ReactNode;
-  showThemeToolbar?: boolean;
-};
-
-export function AuthPageLayout({
-  children,
-  brand,
-  footer,
-  showThemeToolbar = true,
-}: AuthPageLayoutProps) {
-  const { token } = theme.useToken();
-
-  return (
-    <Flex
-      vertical
-      align="stretch"
-      style={{
-        height: "100dvh",
-        maxHeight: "100dvh",
-        width: "100%",
-        overflow: "hidden",
-        background: token.colorBgLayout,
-      }}
-    >
-      {showThemeToolbar ? (
-        <Flex
-          justify="flex-end"
-          style={{
-            flexShrink: 0,
-            width: "100%",
-            padding: 16,
-            background: token.colorBgLayout,
-          }}
-        >
-          <ThemeToolbar />
-        </Flex>
-      ) : null}
-      {brand ? (
-        <div
-          style={{
-            flexShrink: 0,
-            textAlign: "center",
-            padding: "0 24px 16px",
-          }}
-        >
-          {brand}
-        </div>
-      ) : null}
-      <Flex
-        flex={1}
-        vertical
-        align="center"
-        justify="flex-start"
-        style={{
-          width: "100%",
-          minHeight: 0,
-          padding: "0 24px 24px",
-          overflow: "auto",
-          overflowX: "hidden",
-          background: token.colorBgLayout,
-        }}
-      >
-        {children}
-        {footer ? (
-          <div style={{ marginTop: 16, width: "100%", maxWidth: 520 }}>
-            {footer}
-          </div>
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-}
+import { Flex, theme } from "antd";
+import type { ReactNode } from "react";
+import { ScrollableArea } from "../components/ScrollableArea";
+import { ThemeToolbar } from "../components/ThemeToolbar";
+
+export type AuthPageLayoutProps = {
+  children: ReactNode;
+  /** Brand mark centered above the card. */
+  brand?: ReactNode;
+  /** Row below the card (e.g. link to register or login). */
+  footer?: ReactNode;
+  showThemeToolbar?: boolean;
+};
+
+export function AuthPageLayout({
+  children,
+  brand,
+  footer,
+  showThemeToolbar = true,
+}: AuthPageLayoutProps) {
+  const { token } = theme.useToken();
+
+  return (
+    <Flex
+      vertical
+      align="stretch"
+      style={{
+        height: "100dvh",
+        maxHeight: "100dvh",
+        width: "100%",
+        overflow: "hidden",
+        background: token.colorBgLayout,
+      }}
+    >
+      {showThemeToolbar ? (
+        <Flex
+          justify="flex-end"
+          style={{
+            flexShrink: 0,
+            width: "100%",
+            padding: 16,
+            background: token.colorBgLayout,
+          }}
+        >
+          <ThemeToolbar />
+        </Flex>
+      ) : null}
+      {brand ? (
+        <div
+          style={{
+            flexShrink: 0,
+            textAlign: "center",
+            padding: "0 24px 16px",
+          }}
+        >
+          {brand}
+        </div>
+      ) : null}
+      <ScrollableArea
+        style={{
+          flex: 1,
+          minHeight: 0,
+          width: "100%",
+          background: token.colorBgLayout,
+        }}
+      >
+        <Flex
+          vertical
+          align="center"
+          justify="flex-start"
+          style={{
+            width: "100%",
+            minHeight: "100%",
+            padding: "0 24px 24px",
+          }}
+        >
+          {children}
+          {footer ? (
+            <div style={{ marginTop: 16, width: "100%", maxWidth: 520 }}>
+              {footer}
+            </div>
+          ) : null}
+        </Flex>
+      </ScrollableArea>
+    </Flex>
+  );
+}

package/src/layouts/navFilter.ts

@@ -0,0 +1,49 @@
+import type { NavItem } from "../types";
+
+export function getNavItemLabel(item: NavItem): string {
+  const { label } = item;
+  if (typeof label === "string") return label;
+  if (typeof label === "number") return String(label);
+  return "";
+}
+
+export function filterNavItems(items: NavItem[], query: string): NavItem[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+
+  function walk(nodes: NavItem[]): NavItem[] {
+    const result: NavItem[] = [];
+    for (const node of nodes) {
+      const label = getNavItemLabel(node).toLowerCase();
+      const selfMatch = label.includes(q);
+
+      if (node.children?.length) {
+        const filteredChildren = walk(node.children);
+        if (selfMatch) {
+          result.push(node);
+        } else if (filteredChildren.length > 0) {
+          result.push({ ...node, children: filteredChildren });
+        }
+      } else if (selfMatch) {
+        result.push(node);
+      }
+    }
+    return result;
+  }
+
+  return walk(items);
+}
+
+export function collectSubmenuKeys(items: NavItem[]): string[] {
+  const keys: string[] = [];
+  function walk(nodes: NavItem[]) {
+    for (const node of nodes) {
+      if (node.children?.length) {
+        keys.push(node.path);
+        walk(node.children);
+      }
+    }
+  }
+  walk(items);
+  return keys;
+}

package/src/layouts/navMenuItems.tsx

@@ -0,0 +1,44 @@
+import type { MenuProps } from "antd";
+import { NavMenuLabel } from "../components/NavMenuLabel";
+import type { NavItem } from "../types";
+import { getNavItemLabel } from "./navFilter";
+
+export function navItemsToAntdItems(
+  items: NavItem[],
+  options?: { showLabelTooltip?: boolean },
+): NonNullable<MenuProps["items"]> {
+  const showLabelTooltip = options?.showLabelTooltip !== false;
+
+  return items.map((item) => {
+    const IconComp = item.Icon;
+    const icon = IconComp ? <IconComp /> : undefined;
+    const title = getNavItemLabel(item);
+    const label =
+      title && showLabelTooltip ? (
+        <NavMenuLabel label={item.label} title={title} />
+      ) : (
+        item.label
+      );
+
+    // Expanded: NavMenuLabel tooltip only (omit `title` to avoid native DOM tooltip).
+    // Collapsed: string title for the sider icon tooltip.
+    const itemTitle: { title?: string } =
+      !showLabelTooltip && title ? { title } : {};
+
+    if (item.children?.length) {
+      return {
+        key: item.path,
+        icon,
+        label,
+        ...itemTitle,
+        children: navItemsToAntdItems(item.children, options),
+      };
+    }
+    return {
+      key: item.path,
+      icon,
+      label,
+      ...itemTitle,
+    };
+  });
+}

package/src/pages/LoginPage.tsx

@@ -1,80 +1,80 @@
-import { Button, Card, Form, Input, Typography } from "antd";
-import { useNavigate } from "react-router-dom";
-import { AuthAlternateLink } from "../components/AuthAlternateLink";
-import { useAuth } from "../context/AuthProvider";
-import { AuthPageLayout } from "../layouts/AuthPageLayout";
-import type { LoginPageProps } from "../types";
-
-export function LoginPage({
-  title = "Sign in",
-  description = "Use any username and password to continue.",
-  logo,
-  brand,
-  extraFields,
-  showThemeToolbar = true,
-  afterLoginPath = "/",
-  alternateAuth,
-  footer,
-}: LoginPageProps) {
-  const { login } = useAuth();
-  const navigate = useNavigate();
-  const brandNode = brand ?? logo;
-
-  const resolvedFooter =
-    footer ??
-    (alternateAuth ? (
-      <AuthAlternateLink
-        prompt={alternateAuth.prompt ?? "Don't have an account?"}
-        linkText={alternateAuth.linkText}
-        to={alternateAuth.to}
-      />
-    ) : null);
-
-  return (
-    <AuthPageLayout
-      brand={brandNode}
-      footer={resolvedFooter}
-      showThemeToolbar={showThemeToolbar}
-    >
-      <Card style={{ width: "100%", maxWidth: 360 }} title={title}>
-        {description ? (
-          <Typography.Paragraph type="secondary" style={{ marginTop: 0 }}>
-            {description}
-          </Typography.Paragraph>
-        ) : null}
-        <Form
-          layout="vertical"
-          onFinish={async (values: Record<string, unknown>) => {
-            await login({
-              username: String(values.username ?? ""),
-              password: String(values.password ?? ""),
-              ...values,
-            });
-            navigate(afterLoginPath, { replace: true });
-          }}
-        >
-          <Form.Item
-            name="username"
-            label="Username"
-            rules={[{ required: true, message: "Required" }]}
-          >
-            <Input autoComplete="username" />
-          </Form.Item>
-          <Form.Item
-            name="password"
-            label="Password"
-            rules={[{ required: true, message: "Required" }]}
-          >
-            <Input.Password autoComplete="current-password" />
-          </Form.Item>
-          {extraFields}
-          <Form.Item style={{ marginBottom: 0 }}>
-            <Button type="primary" htmlType="submit" block>
-              Log in
-            </Button>
-          </Form.Item>
-        </Form>
-      </Card>
-    </AuthPageLayout>
-  );
-}
+import { Button, Card, Form, Input, Typography } from "antd";
+import { useNavigate } from "react-router-dom";
+import { AuthAlternateLink } from "../components/AuthAlternateLink";
+import { useAuth } from "../context/AuthProvider";
+import { AuthPageLayout } from "../layouts/AuthPageLayout";
+import type { LoginPageProps } from "../types";
+
+export function LoginPage({
+  title = "Sign in",
+  description = "Use any username and password to continue.",
+  logo,
+  brand,
+  extraFields,
+  showThemeToolbar = true,
+  afterLoginPath = "/",
+  alternateAuth,
+  footer,
+}: LoginPageProps) {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const brandNode = brand ?? logo;
+
+  const resolvedFooter =
+    footer ??
+    (alternateAuth ? (
+      <AuthAlternateLink
+        prompt={alternateAuth.prompt ?? "Don't have an account?"}
+        linkText={alternateAuth.linkText}
+        to={alternateAuth.to}
+      />
+    ) : null);
+
+  return (
+    <AuthPageLayout
+      brand={brandNode}
+      footer={resolvedFooter}
+      showThemeToolbar={showThemeToolbar}
+    >
+      <Card style={{ width: "100%", maxWidth: 360 }} title={title}>
+        {description ? (
+          <Typography.Paragraph type="secondary" style={{ marginTop: 0 }}>
+            {description}
+          </Typography.Paragraph>
+        ) : null}
+        <Form
+          layout="vertical"
+          onFinish={async (values: Record<string, unknown>) => {
+            await login({
+              username: String(values.username ?? ""),
+              password: String(values.password ?? ""),
+              ...values,
+            });
+            navigate(afterLoginPath, { replace: true });
+          }}
+        >
+          <Form.Item
+            name="username"
+            label="Username"
+            rules={[{ required: true, message: "Required" }]}
+          >
+            <Input autoComplete="username" />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: true, message: "Required" }]}
+          >
+            <Input.Password autoComplete="current-password" />
+          </Form.Item>
+          {extraFields}
+          <Form.Item style={{ marginBottom: 0 }}>
+            <Button type="primary" htmlType="submit" block>
+              Log in
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </AuthPageLayout>
+  );
+}

package/src/pages/PlaceholderPage.tsx

@@ -1,9 +1,9 @@
-import { Typography } from "antd";
-
-export function PlaceholderPage({ title }: { title: string }) {
-  return (
-    <Typography.Title level={3} style={{ marginTop: 0 }}>
-      {title}
-    </Typography.Title>
-  );
-}
+import { Typography } from "antd";
+
+export function PlaceholderPage({ title }: { title: string }) {
+  return (
+    <Typography.Title level={3} style={{ marginTop: 0 }}>
+      {title}
+    </Typography.Title>
+  );
+}

package/src/permissions/resourcePermissions.ts

@@ -1,47 +1,47 @@
-import type { PermissionsChecker } from "../context/PermissionsProvider";
-
-/** Opaque permission strings per CRUD action (values come from your backend). */
-export type ResourcePermissions = {
-  /** List page, nav, route guard */
-  list?: string;
-  /** getOne — falls back to `list` when omitted */
-  read?: string;
-  /** New button, create modal, POST */
-  add?: string;
-  /** Edit / Quick edit, PATCH/PUT */
-  change?: string;
-  /** Row delete, bulk delete */
-  delete?: string;
-};
-
-export type ResourcePermissionSlot = keyof ResourcePermissions;
-
-/** When `permissions` is omitted, allow. When provided, missing slot → deny. */
-export function checkResourcePermission(
-  can: PermissionsChecker,
-  permissions: ResourcePermissions | undefined,
-  slot: ResourcePermissionSlot,
-): boolean {
-  if (!permissions) return true;
-  let perm = permissions[slot];
-  if (slot === "read" && !perm) perm = permissions.list;
-  if (!perm) return false;
-  return can(perm);
-}
-
-export function filterNavByPermission<T extends { permission?: string; children?: T[] }>(
-  items: T[],
-  can: PermissionsChecker,
-): T[] {
-  return items
-    .map((item) => {
-      if (item.children?.length) {
-        const children = filterNavByPermission(item.children, can);
-        if (children.length === 0) return null;
-        return { ...item, children };
-      }
-      if (item.permission && !can(item.permission)) return null;
-      return item;
-    })
-    .filter((item): item is T => item !== null);
-}
+import type { PermissionsChecker } from "../context/PermissionsProvider";
+
+/** Opaque permission strings per CRUD action (values come from your backend). */
+export type ResourcePermissions = {
+  /** List page, nav, route guard */
+  list?: string;
+  /** getOne — falls back to `list` when omitted */
+  read?: string;
+  /** New button, create modal, POST */
+  add?: string;
+  /** Edit / Quick edit, PATCH/PUT */
+  change?: string;
+  /** Row delete, bulk delete */
+  delete?: string;
+};
+
+export type ResourcePermissionSlot = keyof ResourcePermissions;
+
+/** When `permissions` is omitted, allow. When provided, missing slot → deny. */
+export function checkResourcePermission(
+  can: PermissionsChecker,
+  permissions: ResourcePermissions | undefined,
+  slot: ResourcePermissionSlot,
+): boolean {
+  if (!permissions) return true;
+  let perm = permissions[slot];
+  if (slot === "read" && !perm) perm = permissions.list;
+  if (!perm) return false;
+  return can(perm);
+}
+
+export function filterNavByPermission<T extends { permission?: string; children?: T[] }>(
+  items: T[],
+  can: PermissionsChecker,
+): T[] {
+  return items
+    .map((item) => {
+      if (item.children?.length) {
+        const children = filterNavByPermission(item.children, can);
+        if (children.length === 0) return null;
+        return { ...item, children };
+      }
+      if (item.permission && !can(item.permission)) return null;
+      return item;
+    })
+    .filter((item): item is T => item !== null);
+}

package/src/router/createAdminRouter.tsx

@@ -1,64 +1,64 @@
-import { Navigate, createBrowserRouter } from "react-router-dom";
-import { AdminLayout } from "../layouts/AdminLayout";
-import type { CreateAdminRouterOptions } from "../types";
-import { GuestOnly, Protected } from "./guards";
-import {
-  deriveAuthPaths,
-  partitionAdminRoutes,
-  toProtectedRouteObject,
-  toRouterSegment,
-} from "./routeAccess";
-
-export function createAdminRouter({
-  navItems,
-  children,
-  layoutProps,
-  redirects,
-}: CreateAdminRouterOptions) {
-  const { loginPath, homePath } = deriveAuthPaths(children, redirects);
-  const { guest, public: publicRoutes, protected: protectedRoutes } =
-    partitionAdminRoutes(children);
-
-  const routerRoutes = [];
-
-  for (const route of guest) {
-    if (!("path" in route) || !route.path) continue;
-    routerRoutes.push({
-      path: toRouterSegment(route.path),
-      element: (
-        <GuestOnly redirectTo={homePath}>{route.element}</GuestOnly>
-      ),
-    });
-  }
-
-  for (const route of publicRoutes) {
-    if (!("path" in route) || !route.path) continue;
-    routerRoutes.push({
-      path: toRouterSegment(route.path),
-      element: route.element,
-    });
-  }
-
-  if (protectedRoutes.length > 0) {
-    routerRoutes.push({
-      path: "/",
-      element: (
-        <Protected redirectTo={loginPath}>
-          <AdminLayout
-            navItems={navItems}
-            loginPath={loginPath}
-            {...layoutProps}
-          />
-        </Protected>
-      ),
-      children: protectedRoutes.map(toProtectedRouteObject),
-    });
-  }
-
-  routerRoutes.push({
-    path: "*",
-    element: <Navigate to={homePath} replace />,
-  });
-
-  return createBrowserRouter(routerRoutes);
-}
+import { Navigate, createBrowserRouter } from "react-router-dom";
+import { AdminLayout } from "../layouts/AdminLayout";
+import type { CreateAdminRouterOptions } from "../types";
+import { GuestOnly, Protected } from "./guards";
+import {
+  deriveAuthPaths,
+  partitionAdminRoutes,
+  toProtectedRouteObject,
+  toRouterSegment,
+} from "./routeAccess";
+
+export function createAdminRouter({
+  navItems,
+  children,
+  layoutProps,
+  redirects,
+}: CreateAdminRouterOptions) {
+  const { loginPath, homePath } = deriveAuthPaths(children, redirects);
+  const { guest, public: publicRoutes, protected: protectedRoutes } =
+    partitionAdminRoutes(children);
+
+  const routerRoutes = [];
+
+  for (const route of guest) {
+    if (!("path" in route) || !route.path) continue;
+    routerRoutes.push({
+      path: toRouterSegment(route.path),
+      element: (
+        <GuestOnly redirectTo={homePath}>{route.element}</GuestOnly>
+      ),
+    });
+  }
+
+  for (const route of publicRoutes) {
+    if (!("path" in route) || !route.path) continue;
+    routerRoutes.push({
+      path: toRouterSegment(route.path),
+      element: route.element,
+    });
+  }
+
+  if (protectedRoutes.length > 0) {
+    routerRoutes.push({
+      path: "/",
+      element: (
+        <Protected redirectTo={loginPath}>
+          <AdminLayout
+            navItems={navItems}
+            loginPath={loginPath}
+            {...layoutProps}
+          />
+        </Protected>
+      ),
+      children: protectedRoutes.map(toProtectedRouteObject),
+    });
+  }
+
+  routerRoutes.push({
+    path: "*",
+    element: <Navigate to={homePath} replace />,
+  });
+
+  return createBrowserRouter(routerRoutes);
+}