ding-react-admin 2.2.0 → 2.2.1

package/dist/index.js

@@ -1342,52 +1342,59 @@ function zn({ title: e }) {
 }
 //#endregion
 //#region src/components/AppHub.tsx
-function Bn({ apps: e, menuItems: t, onAppClick: n, onMenuClick: r, menuSearchPlaceholder: i = "Search menus across apps…", className: a, maxWidth: o = 960 }) {
-	let s = v(), { token: c } = G.useToken(), [u, f] = d(""), p = (e) => {
+function Bn({ apps: e, menuItems: t, onAppClick: n, onMenuClick: r, menuSearchPlaceholder: i = "Search menus across apps…", className: a, maxWidth: o = 960, loading: s = !1 }) {
+	let c = v(), { token: u } = G.useToken(), [f, p] = d(""), m = (e) => {
 		if (n) {
 			n(e);
 			return;
 		}
-		s(e.path);
-	}, m = (e) => {
+		c(e.path);
+	}, h = (e) => {
 		if (r) {
 			r(e);
 			return;
 		}
-		s(e.path);
-	}, h = u.trim(), g = l(() => t && h ? bt(t, h) : [], [t, h]), _ = !!(t && h);
+		c(e.path);
+	}, g = f.trim(), _ = l(() => t && g ? bt(t, g) : [], [t, g]), y = !!(t && g);
 	return /* @__PURE__ */ J("div", {
 		className: a,
 		style: {
 			width: "100%",
 			maxWidth: o,
 			marginInline: "auto",
-			paddingInline: c.paddingMD
+			paddingInline: u.paddingMD
 		},
-		children: [t?.length ? /* @__PURE__ */ q("div", {
+		children: [t?.length && !s ? /* @__PURE__ */ q("div", {
 			style: {
 				maxWidth: 480,
 				margin: "0 auto 24px"
 			},
 			children: /* @__PURE__ */ q(it, {
-				value: u,
-				onChange: f,
+				value: f,
+				onChange: p,
 				placeholder: i,
 				variant: "app"
 			})
-		}) : null, _ ? /* @__PURE__ */ q(te, {
+		}) : null, s ? /* @__PURE__ */ q("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center",
+				padding: u.paddingXL
+			},
+			children: /* @__PURE__ */ q(oe, { size: "large" })
+		}) : y ? /* @__PURE__ */ q(te, {
 			bordered: !0,
-			dataSource: g,
+			dataSource: _,
 			locale: { emptyText: "No menus match your search." },
 			style: {
-				background: c.colorBgContainer,
-				borderRadius: c.borderRadiusLG
+				background: u.colorBgContainer,
+				borderRadius: u.borderRadiusLG
 			},
 			renderItem: (e) => {
 				let t = e.Icon;
 				return /* @__PURE__ */ q(te.Item, {
 					style: { cursor: "pointer" },
-					onClick: () => m(e),
+					onClick: () => h(e),
 					children: /* @__PURE__ */ q(te.Item.Meta, {
 						avatar: t ? /* @__PURE__ */ q("span", {
 							style: {
@@ -1414,10 +1421,10 @@ function Bn({ apps: e, menuItems: t, onAppClick: n, onMenuClick: r, menuSearchPl
 					style: { maxWidth: 200 },
 					children: /* @__PURE__ */ q(T, {
 						hoverable: !0,
-						onClick: () => p(e),
+						onClick: () => m(e),
 						styles: { body: {
 							textAlign: "center",
-							padding: c.paddingLG
+							padding: u.paddingLG
 						} },
 						children: /* @__PURE__ */ J(B, {
 							orientation: "vertical",

package/dist/src/components/AppHub.d.ts

@@ -10,6 +10,8 @@ export type AppHubProps = {
     className?: string;
     /** Max width of the centered hub content. Default `960`. */
     maxWidth?: number;
+    /** When true, shows a centered spinner instead of the app grid. */
+    loading?: boolean;
 };
-export declare function AppHub({ apps, menuItems, onAppClick, onMenuClick, menuSearchPlaceholder, className, maxWidth, }: AppHubProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppHub({ apps, menuItems, onAppClick, onMenuClick, menuSearchPlaceholder, className, maxWidth, loading, }: AppHubProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppHub.d.ts.map

package/dist/src/components/AppHub.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHub.d.ts","sourceRoot":"","sources":["../../../src/components/AppHub.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGxC,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,qBAAmD,EACnD,SAAS,EACT,QAAc,GACf,EAAE,WAAW,2CA2Gb"}
+{"version":3,"file":"AppHub.d.ts","sourceRoot":"","sources":["../../../src/components/AppHub.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGxC,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,qBAAmD,EACnD,SAAS,EACT,QAAc,EACd,OAAe,GAChB,EAAE,WAAW,2CA+Gb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ding-react-admin",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "license": "MIT",
   "description": "Composable admin shell (Ant Design + React Router): quick-start AdminApp or build your own layout.",

package/src/components/AppHub.tsx

@@ -1,4 +1,4 @@
-import { Card, Col, List, Row, Space, Typography, theme } from "antd";
+import { Card, Col, List, Row, Space, Spin, Typography, theme } from "antd";
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
@@ -19,6 +19,8 @@ export type AppHubProps = {
   className?: string;
   /** Max width of the centered hub content. Default `960`. */
   maxWidth?: number;
+  /** When true, shows a centered spinner instead of the app grid. */
+  loading?: boolean;
 };
 
 export function AppHub({
@@ -29,6 +31,7 @@ export function AppHub({
   menuSearchPlaceholder = "Search menus across apps…",
   className,
   maxWidth = 960,
+  loading = false,
 }: AppHubProps) {
   const navigate = useNavigate();
   const { token } = theme.useToken();
@@ -70,7 +73,7 @@ export function AppHub({
         paddingInline: token.paddingMD,
       }}
     >
-      {menuItems?.length ? (
+      {menuItems?.length && !loading ? (
         <div style={{ maxWidth: 480, margin: "0 auto 24px" }}>
           <NavMenuSearch
             value={query}
@@ -81,7 +84,11 @@ export function AppHub({
         </div>
       ) : null}
 
-      {isSearching ? (
+      {loading ? (
+        <div style={{ display: "flex", justifyContent: "center", padding: token.paddingXL }}>
+          <Spin size="large" />
+        </div>
+      ) : isSearching ? (
         <List
           bordered
           dataSource={menuResults}