@unicom-cloud/ui 0.8.158 → 0.8.160

package/notice/Notice.js

@@ -1,149 +1,131 @@
-/* 潘启宝 2026-05-08 09:13:14 星期五 */
-import { isNumber as e, isUndefined as t } from "../utils/is.js";
-import n from "../utils/className.js";
-import r from "../hooks/use-merge-props/index.js";
-import i from "../config-provider/context.js";
-import a from "../icon-hover/index.js";
-import ee from "../config-provider/index.js";
-import { forwardRef as o, useContext as s, useEffect as c, useImperativeHandle as l, useRef as u } from "react";
-import d from "@unicom-cloud/icons/context";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import te from "@unicom-cloud/icons/IconUiCheckCircleFill";
-import ne from "@unicom-cloud/icons/IconUiClose";
-import re from "@unicom-cloud/icons/IconUiCloseCircleFill";
-import ie from "@unicom-cloud/icons/IconUiExclamationCircleFill";
-import h from "@unicom-cloud/icons/IconUiInfoCircleFill";
-import g from "@unicom-cloud/icons/IconUiLoading";
+/* 潘启宝 2026-05-18 15:17:02 星期一 */
+import { isFunction as e, isNumber as t, isUndefined as n } from "../utils/is.js";
+import r from "../utils/className.js";
+import { NOTICE_COMPONENT_INFO as i } from "../utils/names.js";
+import a from "../hooks/use-merge-props/index.js";
+import ee from "../config-provider/context.js";
+import te from "../hooks/use-memoized-fn/index.js";
+import o from "../hooks/use-previous/index.js";
+import ne from "../icon-hover/index.js";
+import { NOTICE_DURATION as s } from "./constants.js";
+import re from "../config-provider/index.js";
+import { forwardRef as c, memo as l, useContext as ie, useEffect as u, useImperativeHandle as ae, useRef as d } from "react";
+import f from "@unicom-cloud/icons/context";
+import { jsx as p } from "react/jsx-runtime";
+import oe from "@unicom-cloud/icons/IconUiCheckCircleFill";
+import se from "@unicom-cloud/icons/IconUiClose";
+import m from "@unicom-cloud/icons/IconUiCloseCircleFill";
+import h from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import g from "@unicom-cloud/icons/IconUiInfoCircleFill";
+import _ from "@unicom-cloud/icons/IconUiLoading";
 //#region components/pc/notice/Notice.tsx
-var _ = "Notice", ae = {
+var v = {
 	type: "info",
 	showIcon: !0,
 	noticeType: "message",
-	duration: 3e3
-}, { setTimeout: v, clearTimeout: y, requestAnimationFrame: b, cancelAnimationFrame: x } = window;
-function S(o, b) {
-	let x = s(i), { prefixCls: S, getPrefixCls: C, componentConfig: w, rtl: T } = x, E = r(o, ae, w?.Notice), D = C?.("notice"), O = u(null), k = u(null), A = u(void 0), { title: j, content: M, showIcon: N, className: oe, style: se, type: P, btn: F, icon: I, prefixCls: L = D, closable: R, noticeType: z, iconPrefix: B, rtl: V = T, closeIcon: H, classPrefixCls: U } = E, W = L, G = z === "message", ce = z === "notification", le = "closable" in E || G ? R : !0, K = N;
-	P === "normal" && !I && (K = !1);
-	let q = { ...x };
-	U && (q.prefixCls = U);
-	function J() {
-		let { duration: e, onClose: t, id: n } = E;
-		e === 0 || (O.current = v(() => {
-			t?.(n), Y();
+	duration: s
+}, { setTimeout: y, clearTimeout: b, requestAnimationFrame: ce, cancelAnimationFrame: x } = window;
+function S(s, c) {
+	let l = ie(ee), { prefixCls: ce, getPrefixCls: x, componentConfig: S, rtl: C } = l, w = x?.("notice"), T = a(s, v, S?.Notice), E = d(null), D = d(null);
+	o(T.id);
+	let O = o(T.duration), { title: k, content: A, showIcon: j, className: M, style: N, type: P, btn: F, icon: I, prefixCls: L = w, closable: R, noticeType: z, iconPrefix: B, rtl: V = C, closeIcon: H, classPrefixCls: U, contentRender: W } = T, G = L, K = R, q = j;
+	P === "normal" && !I && (q = !1);
+	let J = { ...l };
+	U && (J.prefixCls = U);
+	let Y = te(() => {
+		let { duration: e, onClose: t, id: n } = T;
+		e === 0 || (X(), E.current = y(() => {
+			t?.(n), X();
 		}, e));
+	});
+	function X() {
+		let e = E.current;
+		t(e) && (b(e), E.current = null);
 	}
-	function Y() {
-		e(O.current) && (y(O.current), O.current = null);
+	function Z(e) {
+		T.onClose?.(T.id);
 	}
-	function X(e) {
-		E.onClose?.(E.id);
-	}
-	function Z() {
-		let { showIcon: e, icon: t, type: n, iconPrefix: r } = E;
+	function le() {
+		let { showIcon: e, icon: t, type: n, iconPrefix: r } = T;
 		if (t === !1) return;
 		let i;
 		if (t) i = t;
 		else if (e) {
 			switch (n) {
 				case "info":
-					i = /* @__PURE__ */ p(h, {});
+					i = /* @__PURE__ */ p(g, {});
 					break;
 				case "success":
-					i = /* @__PURE__ */ p(te, {});
+					i = /* @__PURE__ */ p(oe, {});
 					break;
 				case "error":
-					i = /* @__PURE__ */ p(re, {});
+					i = /* @__PURE__ */ p(m, {});
 					break;
 				case "warning":
-					i = /* @__PURE__ */ p(ie, {});
+					i = /* @__PURE__ */ p(h, {});
 					break;
 				case "loading":
-					i = /* @__PURE__ */ p(g, {});
+					i = /* @__PURE__ */ p(_, {});
 					break;
 				default: break;
 			}
-			i = /* @__PURE__ */ p(d.Provider, {
+			i = /* @__PURE__ */ p(f.Provider, {
 				value: r ? { prefixCls: r } : {},
 				children: i
 			});
 		}
-		return i && /* @__PURE__ */ p("span", {
-			className: `${W}-icon`,
+		let a;
+		return i && (a = /* @__PURE__ */ p("span", {
+			className: `${G}-icon`,
 			children: i
-		});
+		})), a;
 	}
 	function ue() {
-		Y();
+		X();
 	}
 	function de() {
-		Y(), J();
+		X(), Y();
 	}
-	c(() => {
-		let e = A.current;
-		return (e && e.duration !== E.duration || E.update) && (Y(), J()), A.current = E, () => {};
-	}, [E.duration, E.update]), c(() => (J(), () => {
-		Y();
-	}), []), l(b, () => ({ getRootElement() {
-		return k.current;
+	u(() => ((O && O !== T.duration || T._update) && (X(), Y()), () => {}), [T.duration, T._update]), u(() => (Y(), () => {
+		X();
+	}), []), ae(c, () => ({ getRootElement() {
+		return D.current;
 	} }));
 	let Q, $;
-	return le && ($ = t(H) ? /* @__PURE__ */ p(a, {
-		prefix: W,
-		className: `${W}-close-btn`,
-		onClick: X,
-		children: /* @__PURE__ */ p(d.Provider, {
+	return K && ($ = n(H) ? /* @__PURE__ */ p(ne, {
+		prefix: G,
+		className: `${G}-close-btn`,
+		onClick: Z,
+		children: /* @__PURE__ */ p(f.Provider, {
 			value: B ? { prefixCls: B } : {},
-			children: /* @__PURE__ */ p(ne, {})
+			children: /* @__PURE__ */ p(se, {})
 		})
 	}) : /* @__PURE__ */ p("span", {
-		onClick: X,
-		className: `${W}-close-btn`,
+		onClick: Z,
+		className: `${G}-close-btn`,
 		children: H
-	})), G && (Q = /* @__PURE__ */ m(f, { children: [
-		K && Z(),
-		/* @__PURE__ */ p("span", {
-			className: `${W}-content`,
-			children: M
-		}),
-		$
-	] })), ce && (Q = /* @__PURE__ */ m(f, { children: [
-		K && /* @__PURE__ */ p("div", {
-			className: `${W}-left`,
-			children: Z()
-		}),
-		/* @__PURE__ */ m("div", {
-			className: `${W}-right`,
-			children: [
-				j && /* @__PURE__ */ p("div", {
-					className: `${W}-title`,
-					children: j
-				}),
-				/* @__PURE__ */ p("div", {
-					className: `${W}-content`,
-					children: M
-				}),
-				F && /* @__PURE__ */ p("div", {
-					className: `${W}-btn-wrapper`,
-					children: F
-				})
-			]
-		}),
-		$
-	] })), Q &&= /* @__PURE__ */ p(ee, {
-		...q,
-		childrenName: _,
+	})), e(W) && (Q = W({
+		shouldRenderIcon: q,
+		closeIcon: $,
+		icon: le(),
+		title: k,
+		content: A,
+		button: F
+	})), Q &&= /* @__PURE__ */ p(re, {
+		...J,
+		childrenName: i.displayName,
 		effectGlobalModal: !1,
 		effectGlobalNotice: !1,
 		children: /* @__PURE__ */ p("div", {
-			ref: k,
-			className: n(`${D}-${z}`, w?.Notice?.className, V && [`${W}-rtl`], oe),
+			ref: D,
+			className: r(`${w}-${z}`, S?.Notice?.className, V && [`${G}-rtl`], M),
 			onMouseEnter: ue,
 			onMouseLeave: de,
 			children: /* @__PURE__ */ p("div", {
-				style: se,
-				className: n(W, `${W}-${P}`, {
-					[`${W}-closable`]: R,
-					[`${W}-rtl`]: V
+				style: N,
+				className: r(G, `${G}-${P}`, {
+					[`${G}-closable`]: K,
+					[`${G}-rtl`]: V
 				}),
 				role: "alert",
 				children: Q
@@ -151,8 +133,8 @@ function S(o, b) {
 		})
 	}), Q;
 }
-var C = o(S);
-C.displayName = _;
+var C = l(c(S));
+C.displayName = i.displayName;
 //#endregion
 export { C as default };
 /* 独立思考，明辨是非 */

package/notice/constants.d.ts

@@ -0,0 +1 @@
+export declare const NOTICE_DURATION = 3000;

package/notice/constants.js

@@ -0,0 +1,6 @@
+/* 潘启宝 2026-05-18 15:17:02 星期一 */
+//#region components/pc/notice/constants.ts
+var e = 3e3;
+//#endregion
+export { e as NOTICE_DURATION };
+/* 独立思考，明辨是非 */

package/notice/index.d.ts

@@ -1,4 +1,9 @@
 import type { NoticeProps } from './interface';
-declare const Draw: import("react").ForwardRefExoticComponent<NoticeProps & import("react").RefAttributes<unknown>>;
-export default Draw;
+import withNotice from './withNotice';
+declare const Notice: import("react").NamedExoticComponent<NoticeProps & import("react").RefAttributes<unknown>> & {
+    id: string;
+    withNotice: typeof withNotice;
+};
+export { withNotice };
+export default Notice;
 export type { NoticeProps };

package/notice/index.js

@@ -1,7 +1,12 @@
-/* 潘启宝 2026-05-08 09:13:14 星期五 */
-import e from "./Notice.js";
-//#region components/pc/notice/index.tsx
-var t = Object.assign(e, {});
+/* 潘启宝 2026-05-18 15:17:02 星期一 */
+import { NOTICE_COMPONENT_INFO as e } from "../utils/names.js";
+import t from "./Notice.js";
+import n from "./withNotice.js";
+//#region components/pc/notice/index.ts
+var r = Object.assign(t, {
+	id: e.id,
+	withNotice: n
+});
 //#endregion
-export { t as default };
+export { r as default, n as withNotice };
 /* 独立思考，明辨是非 */

package/notice/interface.d.ts

@@ -1,23 +1,81 @@
 import { CSSProperties, ReactNode } from 'react';
-export interface NoticeProps {
+/**
+ * @title Notice
+ */
+export interface NoticeProps extends NoticeHandle {
     style?: CSSProperties;
     className?: string;
+    prefixCls?: string;
+    /**
+     * @zh 通知标题
+     * @en Notification title
+     */
     title?: ReactNode | string;
+    /**
+     * @zh 通知内容
+     * @en Notification content
+     */
     content?: ReactNode | string;
-    duration?: number;
+    /**
+     * @zh 是否显示图标
+     * @en Whether to show the icon
+     * @defaultValue true
+     */
     showIcon?: boolean;
+    /**
+     * @zh 自定义图标
+     * @en Custom icon
+     */
     icon?: ReactNode;
+    /**
+     * @zh 自动关闭的时间，单位为 `ms`
+     * @en Automatic shutdown time, the unit is `ms`
+     * @defaultValue 3000
+     */
+    duration?: number;
+    /**
+     * @zh 关闭时的回调
+     * @en Callback when close
+     */
+    onClose?: () => void;
+    /**
+     * @zh 当前通知的唯一标识，可以用来更新消息
+     * @en The unique identifier of the current notification, which can be used to update the message
+     */
     id?: string;
-    onClose?: (id: any) => void;
-    position?: string;
-    type?: string;
+    /**
+     * @zh 消息的位置，分为 `topLeft` 左上方、`topRight` 右上方、`bottomLeft` 左下方和 `bottomRight` 右下方
+     * @en The position of the message
+     */
+    position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+    /**
+     * @zh 添加操作按钮
+     * @en Add action button
+     */
     btn?: ReactNode;
-    prefixCls?: string;
-    classPrefixCls?: string;
-    iconPrefix?: string;
-    noticeType?: 'message' | 'notification';
-    update?: boolean;
+    /**
+     * @zh 是否显示关闭按钮
+     * @en Whether to show the close button
+     * @defaultValue true
+     */
     closable?: boolean;
-    rtl?: boolean;
+    /**
+     * @zh 自定义右上角关闭按钮
+     * @en Custom the close button on top-right of the drawer dialog
+     */
     closeIcon?: ReactNode;
+    type?: string;
+    rtl?: boolean;
+    getContainer?: () => HTMLElement;
+    notices: NoticeProps[];
+    contentRender?: (o: {}) => ReactNode;
+    maxCount?: number;
+}
+export interface NoticeHandle {
+    notices: NoticeProps[];
+    add: (newNotice: NoticeProps) => string;
+    update: (newNotice: NoticeProps) => void;
+    shift: () => void;
+    remove: (id: string) => void;
+    clear: () => void;
 }

package/notice/utils.d.ts

@@ -0,0 +1 @@
+export declare function getID(): string;

package/notice/utils.js

@@ -0,0 +1,9 @@
+/* 潘启宝 2026-05-18 15:17:02 星期一 */
+import e from "../utils/uuid.js";
+//#region components/pc/notice/utils.ts
+function t() {
+	return `pqb_notice_id_${e()}`;
+}
+//#endregion
+export { t as getID };
+/* 独立思考，明辨是非 */

package/notice/withNotice.d.ts

@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+declare function withNotice<T>(WrappedComponent: ComponentType<T>): T;
+export default withNotice;

package/notice/withNotice.js

@@ -0,0 +1,83 @@
+/* 潘启宝 2026-05-18 15:17:02 星期一 */
+import { isUndefined as e } from "../utils/is.js";
+import t from "../hooks/use-controllable-value/index.js";
+import n from "../hooks/use-create/index.js";
+import r from "../hooks/use-memoized-fn/index.js";
+import i from "../hooks/use-is-first-render/index.js";
+import { getID as a } from "./utils.js";
+import { forwardRef as o, useEffect as s, useImperativeHandle as c, useLayoutEffect as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region components/pc/notice/withNotice.tsx
+function d(d) {
+	function f(o, f) {
+		let { notices: p = [] } = o, [m, h] = t({ ...o }, {
+			defaultValue: [],
+			defaultValuePropName: "defaultNotices",
+			defaultValueParser(e) {
+				return e.map((e, t, n) => (e.id ??= a(), { ...e }));
+			},
+			valuePropName: "notices",
+			triggerPropName: !1
+		});
+		i();
+		let g = r((t) => {
+			let n = t?.id, r = n ?? a();
+			return h((i) => {
+				if (!e(n)) {
+					let e = i.findIndex((e, t, r) => e.id === n);
+					if (e !== -1) {
+						let n = [...i];
+						return n[e] = _(t), n;
+					}
+				}
+				return [...i, {
+					...t,
+					id: r
+				}];
+			}), r;
+		});
+		function _(e) {
+			return {
+				...e,
+				_update: a()
+			};
+		}
+		let v = r((t) => {
+			h((n) => {
+				let r = t?.id;
+				return e(r) ? n : n.map((e, n, i) => r === e.id ? _(t) : e);
+			});
+		}), y = r(() => {
+			h((e) => {
+				let t = [...e];
+				return t.shift(), t;
+			});
+		}), b = r((t) => {
+			h((n) => (t ??= n?.at(-1)?.id, e(t) ? n : n.filter((e, n, r) => e.id !== t)));
+		}), x = r(() => {
+			h((e) => []);
+		});
+		return n(() => {}), l(() => () => {}, []), s(() => () => {}, []), c(f, () => ({
+			get notices() {
+				return m;
+			},
+			add: g,
+			update: v,
+			shift: y,
+			remove: b,
+			clear: x
+		})), /* @__PURE__ */ u(d, {
+			...o,
+			notices: m,
+			add: g,
+			update: v,
+			shift: y,
+			remove: b,
+			clear: x
+		});
+	}
+	return o(f);
+}
+//#endregion
+export { d as default };
+/* 独立思考，明辨是非 */

package/notification/Notification.d.ts

@@ -1,20 +1,17 @@
-import React, { JSX, ReactInstance } from 'react';
-import type { ConfigProps, NotificationHookReturnType, NotificationProps } from './interface';
-import useNotification from './useNotification';
+import { JSX, ReactInstance } from 'react';
+import type { NotificationHookReturnType, NotificationProps } from './interface';
 interface ComponentStaticProps {
-    displayName?: string;
-    useNotification?: (config?: ConfigProps) => [NotificationHookReturnType, JSX.Element];
+    useNotification?: (config?: Partial<NotificationProps>) => [NotificationHookReturnType, JSX.Element];
     success: (config: NotificationProps) => ReactInstance;
     info: (config: NotificationProps) => ReactInstance;
     warning: (config: NotificationProps) => ReactInstance;
     error: (config: NotificationProps) => ReactInstance;
     normal: (config: NotificationProps) => ReactInstance;
-    config: (options: ConfigProps) => void;
+    config: (options: Partial<NotificationProps>) => void;
     clear: () => void;
     remove: (id: string) => void;
     addInstance: (config: NotificationProps) => () => object;
 }
-declare const Notification: React.FC<NotificationProps> & ComponentStaticProps;
-export { useNotification };
-export default Notification;
+declare const NotificationWrapper: Partial<ComponentStaticProps>;
+export default NotificationWrapper;
 export type { NotificationProps };