@dsh-plugin/dsh-ui-components 0.0.1 → 0.1.0-dev.43616582648

package/src/feedback/global.tsx

@@ -1,110 +1,110 @@
-/**
- * 全局提示：消息条、通知与确认气泡。
- *
- * `Message` 与 `Notification` 是命令式接口，默认挂到 body 层的容器上；容器带
- * `.dsh-ui-overlay`，因此即使在 body 层也能读到同一套皮肤变量。Arco 的这两个
- * 命名空间不读 `ConfigProvider` 的 `getPopupContainer`，所以每次调用都要显式
- * 传 `getContainer`。
- *
- * @module @dsh-plugin/dsh-ui-components/feedback/global
- */
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import * as React from 'react'
-import { ensureOverlayContainer } from '../foundation/style.js'
-import { injectFeedbackStyles } from './styles.js'
-
-/**
- * 命令式浮层使用的容器解析函数。
- *
- * @returns 带皮肤变量的 body 级容器。
- */
-function overlayContainer(): HTMLElement {
-  return ensureOverlayContainer() ?? document.body
-}
-
-/** 是否已经把消息与通知指向了本包的容器。 */
-let containerBound = false
-
-/**
- * 把消息条与通知挂到带皮肤变量的容器上。
- *
- * Arco 的这两个命名空间只接受 `config` 级别的 `getContainer`，不能在每次调用
- * 时覆盖，所以首次使用时统一设置一次。
- */
-function bindContainer(): void {
-  if (containerBound) return
-  Arco.Message.config({ getContainer: overlayContainer })
-  Arco.Notification.config({ getContainer: overlayContainer })
-  containerBound = true
-}
-
-/** 消息条的可选项。 */
-type MessageOptions = Parameters<typeof Arco.Message.info>[0]
-
-/** 通知的可选项。 */
-type NotificationOptions = Parameters<typeof Arco.Notification.info>[0]
-
-/**
- * 顶部居中的短消息，默认 3 秒后自动消失。
- *
- * @param options - 与 Arco 的 `Message` 一致。
- * @returns 可用于手动关闭的句柄。
- */
-export function message(options: MessageOptions): ReturnType<typeof Arco.Message.info> {
-  injectFeedbackStyles()
-  bindContainer()
-  return Arco.Message.info(options)
-}
-
-/** 成功消息。 */
-export function messageSuccess(content: string): ReturnType<typeof Arco.Message.info> {
-  injectFeedbackStyles()
-  bindContainer()
-  return Arco.Message.success({ content })
-}
-
-/** 失败消息。 */
-export function messageError(content: string): ReturnType<typeof Arco.Message.info> {
-  injectFeedbackStyles()
-  bindContainer()
-  return Arco.Message.error({ content })
-}
-
-/** 警告消息。 */
-export function messageWarning(content: string): ReturnType<typeof Arco.Message.info> {
-  injectFeedbackStyles()
-  bindContainer()
-  return Arco.Message.warning({ content })
-}
-
-/**
- * 右上角的通知卡片。
- *
- * @param options - 与 Arco 的 `Notification` 一致。
- * @returns 用于手动关闭的句柄。
- */
-export function notification(options: NotificationOptions): ReturnType<typeof Arco.Notification.info> {
-  injectFeedbackStyles()
-  bindContainer()
-  return Arco.Notification.info(options)
-}
-
-/** {@link Message} 组件本身，供需要内联渲染的场景使用。 */
-export const Message: typeof Arco.Message = Arco.Message
-
-/** {@link Notification} 命名空间，命令式通知。 */
-export const Notification: typeof Arco.Notification = Arco.Notification
-
-/** {@link Popconfirm} 的 props。 */
-export type PopconfirmProps = React.ComponentPropsWithoutRef<typeof Arco.Popconfirm>
-
-/**
- * 气泡确认框，浮层由 `DshProvider` 的容器设置接管。
- *
- * @param props - 见 {@link PopconfirmProps}。
- * @returns 确认气泡元素。
- */
-export function Popconfirm(props: PopconfirmProps): React.ReactElement {
-  injectFeedbackStyles()
-  return <Arco.Popconfirm {...props} />
-}
+/**
+ * 全局提示：消息条、通知与确认气泡。
+ *
+ * `Message` 与 `Notification` 是命令式接口，默认挂到 body 层的容器上；容器带
+ * `.dsh-ui-overlay`，因此即使在 body 层也能读到同一套皮肤变量。Arco 的这两个
+ * 命名空间不读 `ConfigProvider` 的 `getPopupContainer`，所以每次调用都要显式
+ * 传 `getContainer`。
+ *
+ * @module @dsh-plugin/dsh-ui-components/feedback/global
+ */
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import * as React from 'react'
+import { ensureOverlayContainer } from '../foundation/style.js'
+import { injectFeedbackStyles } from './styles.js'
+
+/**
+ * 命令式浮层使用的容器解析函数。
+ *
+ * @returns 带皮肤变量的 body 级容器。
+ */
+function overlayContainer(): HTMLElement {
+  return ensureOverlayContainer() ?? document.body
+}
+
+/** 是否已经把消息与通知指向了本包的容器。 */
+let containerBound = false
+
+/**
+ * 把消息条与通知挂到带皮肤变量的容器上。
+ *
+ * Arco 的这两个命名空间只接受 `config` 级别的 `getContainer`，不能在每次调用
+ * 时覆盖，所以首次使用时统一设置一次。
+ */
+function bindContainer(): void {
+  if (containerBound) return
+  Arco.Message.config({ getContainer: overlayContainer })
+  Arco.Notification.config({ getContainer: overlayContainer })
+  containerBound = true
+}
+
+/** 消息条的可选项。 */
+type MessageOptions = Parameters<typeof Arco.Message.info>[0]
+
+/** 通知的可选项。 */
+type NotificationOptions = Parameters<typeof Arco.Notification.info>[0]
+
+/**
+ * 顶部居中的短消息，默认 3 秒后自动消失。
+ *
+ * @param options - 与 Arco 的 `Message` 一致。
+ * @returns 可用于手动关闭的句柄。
+ */
+export function message(options: MessageOptions): ReturnType<typeof Arco.Message.info> {
+  injectFeedbackStyles()
+  bindContainer()
+  return Arco.Message.info(options)
+}
+
+/** 成功消息。 */
+export function messageSuccess(content: string): ReturnType<typeof Arco.Message.info> {
+  injectFeedbackStyles()
+  bindContainer()
+  return Arco.Message.success({ content })
+}
+
+/** 失败消息。 */
+export function messageError(content: string): ReturnType<typeof Arco.Message.info> {
+  injectFeedbackStyles()
+  bindContainer()
+  return Arco.Message.error({ content })
+}
+
+/** 警告消息。 */
+export function messageWarning(content: string): ReturnType<typeof Arco.Message.info> {
+  injectFeedbackStyles()
+  bindContainer()
+  return Arco.Message.warning({ content })
+}
+
+/**
+ * 右上角的通知卡片。
+ *
+ * @param options - 与 Arco 的 `Notification` 一致。
+ * @returns 用于手动关闭的句柄。
+ */
+export function notification(options: NotificationOptions): ReturnType<typeof Arco.Notification.info> {
+  injectFeedbackStyles()
+  bindContainer()
+  return Arco.Notification.info(options)
+}
+
+/** {@link Message} 组件本身，供需要内联渲染的场景使用。 */
+export const Message: typeof Arco.Message = Arco.Message
+
+/** {@link Notification} 命名空间，命令式通知。 */
+export const Notification: typeof Arco.Notification = Arco.Notification
+
+/** {@link Popconfirm} 的 props。 */
+export type PopconfirmProps = React.ComponentPropsWithoutRef<typeof Arco.Popconfirm>
+
+/**
+ * 气泡确认框，浮层由 `DshProvider` 的容器设置接管。
+ *
+ * @param props - 见 {@link PopconfirmProps}。
+ * @returns 确认气泡元素。
+ */
+export function Popconfirm(props: PopconfirmProps): React.ReactElement {
+  injectFeedbackStyles()
+  return <Arco.Popconfirm {...props} />
+}

package/src/feedback/index.ts

@@ -1,19 +1,19 @@
-/**
- * 反馈与浮层出口。
- *
- * @module @dsh-plugin/dsh-ui-components/feedback
- */
-export {
-  Message,
-  Notification,
-  Popconfirm,
-  message,
-  messageError,
-  messageSuccess,
-  messageWarning,
-  notification,
-  type PopconfirmProps,
-} from './global.js'
-export { Alert, Progress, Result, type AlertProps, type ProgressProps, type ResultProps } from './inline.js'
-export { Drawer, Modal, confirm, type DrawerProps, type ModalConfirmOptions, type ModalProps } from './panel.js'
-export { FEEDBACK_CSS, injectFeedbackStyles } from './styles.js'
+/**
+ * 反馈与浮层出口。
+ *
+ * @module @dsh-plugin/dsh-ui-components/feedback
+ */
+export {
+  Message,
+  Notification,
+  Popconfirm,
+  message,
+  messageError,
+  messageSuccess,
+  messageWarning,
+  notification,
+  type PopconfirmProps,
+} from './global.js'
+export { Alert, Progress, Result, type AlertProps, type ProgressProps, type ResultProps } from './inline.js'
+export { Drawer, Modal, confirm, type DrawerProps, type ModalConfirmOptions, type ModalProps } from './panel.js'
+export { FEEDBACK_CSS, injectFeedbackStyles } from './styles.js'

package/src/feedback/inline.tsx

@@ -1,50 +1,50 @@
-/**
- * 容器内的反馈组件：提示条、进度、结果。
- *
- * @module @dsh-plugin/dsh-ui-components/feedback/inline
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { injectFeedbackStyles } from './styles.js'
-
-/** {@link Alert} 的 props。 */
-export type AlertProps = React.ComponentPropsWithoutRef<typeof Arco.Alert>
-
-/**
- * 页面内的提示条，用于需要常驻的说明与警告。
- *
- * @param props - 见 {@link AlertProps}。
- * @returns 提示条元素。
- */
-export function Alert(props: AlertProps): React.ReactElement {
-  injectFeedbackStyles()
-  return <Arco.Alert {...props} />
-}
-
-/** {@link Progress} 的 props。 */
-export type ProgressProps = React.ComponentPropsWithoutRef<typeof Arco.Progress>
-
-/**
- * 进度条。
- *
- * @param props - 见 {@link ProgressProps}。
- * @returns 进度条元素。
- */
-export function Progress(props: ProgressProps): React.ReactElement {
-  injectFeedbackStyles()
-  return <Arco.Progress {...props} />
-}
-
-/** {@link Result} 的 props。 */
-export type ResultProps = React.ComponentPropsWithoutRef<typeof Arco.Result>
-
-/**
- * 结果页，用于操作完成、失败或无权限等终态。
- *
- * @param props - 见 {@link ResultProps}。
- * @returns 结果页元素。
- */
-export function Result(props: ResultProps): React.ReactElement {
-  injectFeedbackStyles()
-  return <Arco.Result {...props} />
-}
+/**
+ * 容器内的反馈组件：提示条、进度、结果。
+ *
+ * @module @dsh-plugin/dsh-ui-components/feedback/inline
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { injectFeedbackStyles } from './styles.js'
+
+/** {@link Alert} 的 props。 */
+export type AlertProps = React.ComponentPropsWithoutRef<typeof Arco.Alert>
+
+/**
+ * 页面内的提示条，用于需要常驻的说明与警告。
+ *
+ * @param props - 见 {@link AlertProps}。
+ * @returns 提示条元素。
+ */
+export function Alert(props: AlertProps): React.ReactElement {
+  injectFeedbackStyles()
+  return <Arco.Alert {...props} />
+}
+
+/** {@link Progress} 的 props。 */
+export type ProgressProps = React.ComponentPropsWithoutRef<typeof Arco.Progress>
+
+/**
+ * 进度条。
+ *
+ * @param props - 见 {@link ProgressProps}。
+ * @returns 进度条元素。
+ */
+export function Progress(props: ProgressProps): React.ReactElement {
+  injectFeedbackStyles()
+  return <Arco.Progress {...props} />
+}
+
+/** {@link Result} 的 props。 */
+export type ResultProps = React.ComponentPropsWithoutRef<typeof Arco.Result>
+
+/**
+ * 结果页，用于操作完成、失败或无权限等终态。
+ *
+ * @param props - 见 {@link ResultProps}。
+ * @returns 结果页元素。
+ */
+export function Result(props: ResultProps): React.ReactElement {
+  injectFeedbackStyles()
+  return <Arco.Result {...props} />
+}

package/src/feedback/panel.tsx

@@ -1,93 +1,93 @@
-/**
- * 弹窗与抽屉。
- *
- * 两者都按全局规范处理尺寸：与窗口顶部、底部各留至少 120px，最大高度
- * `calc(100dvh - 240px)`，超出部分在内部滚动，标题与操作行保持可见。样式
- * 已由 `feedback/styles` 落实，组件这一层只负责把 Arco 的 API 接到 DSH 的
- * 语义上：`title`、`footer`、`content` 三个位置固定，`scroll` 打开时内容区
- * 换成宿主统一的滚动容器。
- *
- * @module @dsh-plugin/dsh-ui-components/feedback/panel
- */
-import * as React from 'react'
-import { Arco, Scrollbar } from '@dsh-plugin/dsh-loader/client'
-import { ensureOverlayContainer } from '../foundation/style.js'
-import { injectFeedbackStyles } from './styles.js'
-
-/**
- * 把浮层挂到带皮肤变量的容器上。
- *
- * Arco 的 `Modal` 与 `Drawer` 自带 `getPopupContainer` 默认值，它直接返回
- * `document.body` 且不读 `ConfigProvider`，因此这两类组件必须逐次传入，否则
- * 弹层会在 body 层渲染，拿不到 `.dsh-ui` 上的 DSH 变量。
- *
- * @returns 浮层容器；服务端渲染时退回 `document.body`。
- */
-function overlayContainer(): HTMLElement {
-  return ensureOverlayContainer() ?? document.body
-}
-
-/** {@link Modal} 的 props。 */
-export type ModalProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Modal>, 'children'> & {
-  /** 弹窗标题。 */
-  title?: React.ReactNode
-  /** 内容。 */
-  children?: React.ReactNode
-  /** 底部操作行。 */
-  footer?: React.ReactNode
-  /** 内容超出高度时是否启用宿主统一的滚动容器，默认启用。 */
-  scroll?: boolean
-}
-
-/**
- * 居中弹窗。
- *
- * @param props - 见 {@link ModalProps}。
- * @returns 弹窗元素。
- */
-export function Modal({ title, children, footer, scroll = true, getPopupContainer, ...rest }: ModalProps): React.ReactElement {
-  injectFeedbackStyles()
-  const body = scroll === true ? <Scrollbar style={{ maxHeight: '100%' }}>{children}</Scrollbar> : children
-  return (
-    <Arco.Modal
-      {...rest}
-      getPopupContainer={getPopupContainer ?? overlayContainer}
-      title={title}
-      footer={footer}
-      alignCenter
-    >
-      {body}
-    </Arco.Modal>
-  )
-}
-
-/** {@link Modal.confirm} 的参数。 */
-export type ModalConfirmOptions = Parameters<typeof Arco.Modal.confirm>[0]
-
-/**
- * 打开一个确认弹窗。
- *
- * @param options - 与 Arco 的 `Modal.confirm` 一致。
- * @returns 可用于手动关闭的句柄。
- */
-export function confirm(options: ModalConfirmOptions): ReturnType<typeof Arco.Modal.confirm> {
-  injectFeedbackStyles()
-  return Arco.Modal.confirm({
-    getPopupContainer: overlayContainer,
-    ...options,
-  })
-}
-
-/** {@link Drawer} 的 props。 */
-export type DrawerProps = React.ComponentPropsWithoutRef<typeof Arco.Drawer>
-
-/**
- * 侧边抽屉，高度同样受 240px 上下留白约束。
- *
- * @param props - 见 {@link DrawerProps}。
- * @returns 抽屉元素。
- */
-export function Drawer({ getPopupContainer, ...props }: DrawerProps): React.ReactElement {
-  injectFeedbackStyles()
-  return <Arco.Drawer {...props} getPopupContainer={getPopupContainer ?? overlayContainer} />
-}
+/**
+ * 弹窗与抽屉。
+ *
+ * 两者都按全局规范处理尺寸：与窗口顶部、底部各留至少 120px，最大高度
+ * `calc(100dvh - 240px)`，超出部分在内部滚动，标题与操作行保持可见。样式
+ * 已由 `feedback/styles` 落实，组件这一层只负责把 Arco 的 API 接到 DSH 的
+ * 语义上：`title`、`footer`、`content` 三个位置固定，`scroll` 打开时内容区
+ * 换成宿主统一的滚动容器。
+ *
+ * @module @dsh-plugin/dsh-ui-components/feedback/panel
+ */
+import * as React from 'react'
+import { Arco, Scrollbar } from '@dsh-plugin/dsh-loader/client'
+import { ensureOverlayContainer } from '../foundation/style.js'
+import { injectFeedbackStyles } from './styles.js'
+
+/**
+ * 把浮层挂到带皮肤变量的容器上。
+ *
+ * Arco 的 `Modal` 与 `Drawer` 自带 `getPopupContainer` 默认值，它直接返回
+ * `document.body` 且不读 `ConfigProvider`，因此这两类组件必须逐次传入，否则
+ * 弹层会在 body 层渲染，拿不到 `.dsh-ui` 上的 DSH 变量。
+ *
+ * @returns 浮层容器；服务端渲染时退回 `document.body`。
+ */
+function overlayContainer(): HTMLElement {
+  return ensureOverlayContainer() ?? document.body
+}
+
+/** {@link Modal} 的 props。 */
+export type ModalProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Modal>, 'children'> & {
+  /** 弹窗标题。 */
+  title?: React.ReactNode
+  /** 内容。 */
+  children?: React.ReactNode
+  /** 底部操作行。 */
+  footer?: React.ReactNode
+  /** 内容超出高度时是否启用宿主统一的滚动容器，默认启用。 */
+  scroll?: boolean
+}
+
+/**
+ * 居中弹窗。
+ *
+ * @param props - 见 {@link ModalProps}。
+ * @returns 弹窗元素。
+ */
+export function Modal({ title, children, footer, scroll = true, getPopupContainer, ...rest }: ModalProps): React.ReactElement {
+  injectFeedbackStyles()
+  const body = scroll === true ? <Scrollbar style={{ maxHeight: '100%' }}>{children}</Scrollbar> : children
+  return (
+    <Arco.Modal
+      {...rest}
+      getPopupContainer={getPopupContainer ?? overlayContainer}
+      title={title}
+      footer={footer}
+      alignCenter
+    >
+      {body}
+    </Arco.Modal>
+  )
+}
+
+/** {@link Modal.confirm} 的参数。 */
+export type ModalConfirmOptions = Parameters<typeof Arco.Modal.confirm>[0]
+
+/**
+ * 打开一个确认弹窗。
+ *
+ * @param options - 与 Arco 的 `Modal.confirm` 一致。
+ * @returns 可用于手动关闭的句柄。
+ */
+export function confirm(options: ModalConfirmOptions): ReturnType<typeof Arco.Modal.confirm> {
+  injectFeedbackStyles()
+  return Arco.Modal.confirm({
+    getPopupContainer: overlayContainer,
+    ...options,
+  })
+}
+
+/** {@link Drawer} 的 props。 */
+export type DrawerProps = React.ComponentPropsWithoutRef<typeof Arco.Drawer>
+
+/**
+ * 侧边抽屉，高度同样受 240px 上下留白约束。
+ *
+ * @param props - 见 {@link DrawerProps}。
+ * @returns 抽屉元素。
+ */
+export function Drawer({ getPopupContainer, ...props }: DrawerProps): React.ReactElement {
+  injectFeedbackStyles()
+  return <Arco.Drawer {...props} getPopupContainer={getPopupContainer ?? overlayContainer} />
+}