@antsoo-lib/components 0.1.2 → 0.1.4

package/src/message/index.tsx

@@ -0,0 +1,263 @@
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'
+import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
+
+import type { CSSProperties } from 'vue'
+
+import classNames from '../_util/classNames'
+import type { Key, VueNode } from '../_util/type'
+import Notification from '../vc-notification'
+import type { NotificationInstance } from '../vc-notification/Notification'
+import useStyle from './style'
+import useMessage from './useMessage'
+
+let defaultDuration = 3
+let defaultTop: string
+let messageInstance: NotificationInstance
+let key = 1
+let localPrefixCls = ''
+let transitionName = 'move-up'
+let hasTransitionName = false
+let getContainer = () => document.body
+let maxCount: number
+let rtl = false
+
+export function getKeyThenIncreaseKey() {
+  return key++
+}
+
+export interface ConfigOptions {
+  top?: string
+  duration?: number
+  prefixCls?: string
+  getContainer?: () => HTMLElement
+  transitionName?: string
+  maxCount?: number
+  rtl?: boolean
+}
+
+function setMessageConfig(options: ConfigOptions) {
+  if (options.top !== undefined) {
+    defaultTop = options.top
+    messageInstance = null // delete messageInstance for new defaultTop
+  }
+  if (options.duration !== undefined) {
+    defaultDuration = options.duration
+  }
+
+  if (options.prefixCls !== undefined) {
+    localPrefixCls = options.prefixCls
+  }
+  if (options.getContainer !== undefined) {
+    getContainer = options.getContainer
+    messageInstance = null // delete messageInstance for new getContainer
+  }
+  if (options.transitionName !== undefined) {
+    transitionName = options.transitionName
+    messageInstance = null // delete messageInstance for new transitionName
+    hasTransitionName = true
+  }
+  if (options.maxCount !== undefined) {
+    maxCount = options.maxCount
+    messageInstance = null
+  }
+  if (options.rtl !== undefined) {
+    rtl = options.rtl
+  }
+}
+
+function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationInstance) => void) {
+  if (messageInstance) {
+    callback(messageInstance)
+    return
+  }
+
+  Notification.newInstance(
+    {
+      appContext: args.appContext,
+      prefixCls: args.prefixCls || localPrefixCls,
+      rootPrefixCls: args.rootPrefixCls,
+      transitionName,
+      hasTransitionName,
+      style: { top: defaultTop }, // 覆盖原来的样式
+      getContainer: getContainer || args.getPopupContainer,
+      maxCount,
+      name: 'message',
+      useStyle,
+    },
+    (instance: any) => {
+      if (messageInstance) {
+        callback(messageInstance)
+        return
+      }
+      messageInstance = instance
+      callback(instance)
+    },
+  )
+}
+
+export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'
+
+export interface ThenableArgument {
+  (val: any): void
+}
+
+const typeToIcon = {
+  info: InfoCircleFilled,
+  success: CheckCircleFilled,
+  error: CloseCircleFilled,
+  warning: ExclamationCircleFilled,
+  loading: LoadingOutlined,
+}
+export const typeList = Object.keys(typeToIcon) as NoticeType[]
+export interface MessageType extends PromiseLike<any> {
+  (): void
+}
+
+export interface MessageArgsProps {
+  content: string | (() => VueNode) | VueNode
+  duration?: number
+  type?: NoticeType
+  prefixCls?: string
+  rootPrefixCls?: string
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement
+  onClose?: () => void
+  icon?: (() => VueNode) | VueNode
+  key?: string | number
+  style?: CSSProperties
+  class?: string
+  appContext?: any
+  onClick?: (e: MouseEvent) => void
+}
+
+function notice(args: MessageArgsProps): MessageType {
+  const duration = args.duration !== undefined ? args.duration : defaultDuration
+
+  const target = args.key || getKeyThenIncreaseKey()
+  const closePromise = new Promise((resolve) => {
+    const callback = () => {
+      if (typeof args.onClose === 'function') {
+        args.onClose()
+      }
+      return resolve(true)
+    }
+    getMessageInstance(args, (instance) => {
+      instance.notice({
+        key: target,
+        duration,
+        style: args.style || {},
+        class: args.class,
+        content: ({ prefixCls }) => {
+          const Icon = typeToIcon[args.type]
+          const iconNode = Icon ? <Icon /> : ''
+          const messageClass = classNames(`${prefixCls}-custom-content`, {
+            [`${prefixCls}-${args.type}`]: args.type,
+            [`${prefixCls}-rtl`]: rtl === true,
+          })
+          return (
+            <div class={messageClass}>
+              {typeof args.icon === 'function' ? args.icon() : args.icon || iconNode}
+              <span>{typeof args.content === 'function' ? args.content() : args.content}</span>
+            </div>
+          )
+        },
+        onClose: callback,
+        onClick: args.onClick,
+      })
+    })
+  })
+  const result: any = () => {
+    if (messageInstance) {
+      messageInstance.removeNotice(target)
+    }
+  }
+  result.then = (filled: ThenableArgument, rejected: ThenableArgument) =>
+    closePromise.then(filled, rejected)
+  result.promise = closePromise
+  return result
+}
+
+type ConfigDuration = number
+type JointContent = VueNode | MessageArgsProps
+export type ConfigOnClose = () => void
+
+function isArgsProps(content: JointContent): content is MessageArgsProps {
+  return (
+    Object.prototype.toString.call(content) === '[object Object]' &&
+    !!(content as MessageArgsProps).content
+  )
+}
+
+const api: any = {
+  open: notice,
+  config: setMessageConfig,
+  destroy(messageKey?: Key) {
+    if (messageInstance) {
+      if (messageKey) {
+        const { removeNotice } = messageInstance
+        removeNotice(messageKey)
+      } else {
+        const { destroy } = messageInstance
+        destroy()
+        messageInstance = null
+      }
+    }
+  },
+}
+
+export function attachTypeApi(originalApi: MessageApi, type: NoticeType) {
+  originalApi[type] = (
+    content: JointContent,
+    duration?: ConfigDuration,
+    onClose?: ConfigOnClose,
+  ) => {
+    if (isArgsProps(content)) {
+      return originalApi.open({ ...content, type })
+    }
+
+    if (typeof duration === 'function') {
+      onClose = duration
+      duration = undefined
+    }
+
+    return originalApi.open({ content, duration, type, onClose })
+  }
+}
+
+typeList.forEach((type) => attachTypeApi(api, type))
+
+api.warn = api.warning
+api.useMessage = useMessage
+export interface MessageInstance {
+  info: (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => MessageType
+  success: (
+    content: JointContent,
+    duration?: ConfigDuration,
+    onClose?: ConfigOnClose,
+  ) => MessageType
+  error: (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => MessageType
+  warning: (
+    content: JointContent,
+    duration?: ConfigDuration,
+    onClose?: ConfigOnClose,
+  ) => MessageType
+  loading: (
+    content: JointContent,
+    duration?: ConfigDuration,
+    onClose?: ConfigOnClose,
+  ) => MessageType
+  open: (args: MessageArgsProps) => MessageType
+  useMessage: typeof useMessage
+}
+
+export interface MessageApi extends MessageInstance {
+  warn: (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => MessageType
+  config: (options: ConfigOptions) => void
+  destroy: (messageKey?: Key) => void
+}
+
+export const getInstance = () => (process.env.NODE_ENV === 'test' ? messageInstance : null)
+
+export default api as MessageApi

package/src/message/index.zh-CN.md

@@ -0,0 +1,122 @@
+---
+category: Components
+type: 反馈
+title: Message
+subtitle: 全局提示
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JjZBT6N1MusAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7qMTRoq3ZGkAAAAAAAAAAAAADrJ8AQ/original
+---
+
+全局展示操作反馈信息。
+
+## 何时使用
+
+- 可提供成功、警告和错误等反馈信息。
+- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
+
+## API
+
+组件提供了一些静态方法，使用方式和参数如下：
+
+- `message.success(content, [duration], onClose)`
+- `message.error(content, [duration], onClose)`
+- `message.info(content, [duration], onClose)`
+- `message.warning(content, [duration], onClose)`
+- `message.warn(content, [duration], onClose)` // alias of warning
+- `message.loading(content, [duration], onClose)`
+
+| 参数     | 说明                                          | 类型                          | 默认值 |
+| -------- | --------------------------------------------- | ----------------------------- | ------ |
+| content  | 提示内容                                      | string\| VNode \| () => VNode | -      |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number                        | 3      |
+| onClose  | 关闭时触发的回调函数                          | function                      | -      |
+
+组件同时提供 promise 接口
+
+- `message[level](content, [duration]).then(afterClose)`
+- `message[level](content, [duration], onClose).then(afterClose)`
+
+其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise 。
+
+也可以对象的形式传递参数：
+
+- `message.open(config)`
+- `message.success(config)`
+- `message.error(config)`
+- `message.info(config)`
+- `message.warning(config)`
+- `message.warn(config)` // alias of warning
+- `message.loading(config)`
+
+`config` 对象属性如下：
+
+| 参数     | 说明                                          | 类型                         | 默认值 | 版本 |
+| -------- | --------------------------------------------- | ---------------------------- | ------ | ---- |
+| class    | 自定义 CSS class                              | string                       | -      |      |
+| content  | 提示内容                                      | string\| VNode \| ()=> VNode | -      |      |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number                       | 3      |      |
+| icon     | 自定义图标                                    | VNode \| () => VNode         | -      |      |
+| key      | 当前提示的唯一标志                            | string \| number             | -      |      |
+| style    | 自定义内联样式                                | CSSProperties                | -      |      |
+| onClick  | 点击 message 时触发的回调函数                 | function                     | -      |      |
+| onClose  | 关闭时触发的回调函数                          | function                     | -      |      |
+
+### 全局方法
+
+还提供了全局配置和全局销毁方法：
+
+- `message.config(options)`
+- `message.destroy()`
+- `message.useMessage()`
+
+#### message.config
+
+```js
+message.config({
+  top: `100px`,
+  duration: 2,
+  maxCount: 3,
+  rtl: true,
+  prefixCls: 'my-message',
+})
+```
+
+| 参数         | 说明                                           | 类型              | 默认值              | 版本 |     |
+| ------------ | ---------------------------------------------- | ----------------- | ------------------- | ---- | --- |
+| duration     | 默认自动关闭延时，单位秒                       | number            | 3                   |      |     |
+| getContainer | 配置渲染节点的输出位置                         | () => HTMLElement | () => document.body |      |     |
+| maxCount     | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number            | -                   |      |     |
+| prefixCls    | 消息节点的 className 前缀                      | string            | `ant-message`       | 3.0  |     |
+| rtl          | 是否开启 RTL 模式                              | boolean           | false               |      |     |
+| top          | 消息距离顶部的位置                             | string            | `8px`               |      |     |
+
+## FAQ
+
+### 为什么 message 不能获取 context、Pinia 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
+
+直接调用 message 方法，antdv 会通过 `Vue.render` 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
+
+当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `message.useMessage` 方法会返回 `api` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：
+
+```html
+<template>
+  <contextHolder />
+  <!-- <component :is='contextHolder'/> -->
+</template>
+<script setup>
+  import { message } from 'ant-design-vue'
+
+  const [messageApi, contextHolder] = message.useMessage()
+  messageApi.open({
+    // ...
+  })
+</script>
+```
+
+**异同**：通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。
+
+> 可通过 [App 包裹组件](/components/app-cn) 简化 `useMessage` 等方法需要手动植入 contextHolder 的问题。
+
+### 静态方法如何设置 prefixCls ？
+
+你可以通过 [`ConfigProvider.config`](/components/config-provider-cn#configproviderconfig-4130) 进行设置。

package/src/message/interface.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'vue'
+
+import type { Key, VueNode } from '../_util/type'
+
+export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'
+
+export interface ConfigOptions {
+  top?: number | string
+  duration?: number
+  prefixCls?: string
+  getContainer?: () => HTMLElement
+  transitionName?: string
+  maxCount?: number
+  rtl?: boolean
+}
+
+export interface ArgsProps {
+  content: string | (() => VueNode) | VueNode
+  duration?: number
+  type?: NoticeType
+  onClose?: () => void
+  icon?: (() => VueNode) | VueNode
+  key?: string | number
+  style?: CSSProperties
+  class?: string
+  onClick?: (e: Event) => void
+}
+
+export type JointContent = VueNode | ArgsProps
+
+export interface MessageType extends PromiseLike<boolean> {
+  (): void
+}
+
+export type TypeOpen = (
+  content: JointContent,
+  duration?: number | VoidFunction, // Also can use onClose directly
+  onClose?: VoidFunction,
+) => MessageType
+
+export interface MessageInstance {
+  info: TypeOpen
+  success: TypeOpen
+  error: TypeOpen
+  warning: TypeOpen
+  loading: TypeOpen
+  open: (args: ArgsProps) => MessageType
+  destroy: (key?: Key) => void
+}

package/src/message/style/index.ts

@@ -0,0 +1,180 @@
+// deps-lint-skip-all
+import { Keyframes } from '../../_util/cssinjs'
+import { resetComponent } from '../../style'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+  height: number
+  zIndexPopup: number
+}
+
+interface MessageToken extends FullToken<'Message'> {
+  // Custom token here
+  messageNoticeContentPadding: string
+}
+
+const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
+  const {
+    componentCls,
+    iconCls,
+    boxShadowSecondary,
+    colorBgElevated,
+    colorSuccess,
+    colorError,
+    colorWarning,
+    colorInfo,
+    fontSizeLG,
+    motionEaseInOutCirc,
+    motionDurationSlow,
+    marginXS,
+    paddingXS,
+    borderRadiusLG,
+    zIndexPopup,
+    // Custom token
+    messageNoticeContentPadding,
+  } = token
+
+  const messageMoveIn = new Keyframes('MessageMoveIn', {
+    '0%': {
+      padding: 0,
+      transform: 'translateY(-100%)',
+      opacity: 0,
+    },
+
+    '100%': {
+      padding: paddingXS,
+      transform: 'translateY(0)',
+      opacity: 1,
+    },
+  })
+
+  const messageMoveOut = new Keyframes('MessageMoveOut', {
+    '0%': {
+      maxHeight: token.height,
+      padding: paddingXS,
+      opacity: 1,
+    },
+    '100%': {
+      maxHeight: 0,
+      padding: 0,
+      opacity: 0,
+    },
+  })
+
+  return [
+    // ============================ Holder ============================
+    {
+      [componentCls]: {
+        ...resetComponent(token),
+        position: 'fixed',
+        top: marginXS,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: '100%',
+        pointerEvents: 'none',
+        zIndex: zIndexPopup,
+
+        [`${componentCls}-move-up`]: {
+          animationFillMode: 'forwards',
+        },
+        [`
+        ${componentCls}-move-up-appear,
+        ${componentCls}-move-up-enter
+      `]: {
+          animationName: messageMoveIn,
+          animationDuration: motionDurationSlow,
+          animationPlayState: 'paused',
+          animationTimingFunction: motionEaseInOutCirc,
+        },
+        [`
+        ${componentCls}-move-up-appear${componentCls}-move-up-appear-active,
+        ${componentCls}-move-up-enter${componentCls}-move-up-enter-active
+      `]: {
+          animationPlayState: 'running',
+        },
+        [`${componentCls}-move-up-leave`]: {
+          animationName: messageMoveOut,
+          animationDuration: motionDurationSlow,
+          animationPlayState: 'paused',
+          animationTimingFunction: motionEaseInOutCirc,
+        },
+        [`${componentCls}-move-up-leave${componentCls}-move-up-leave-active`]: {
+          animationPlayState: 'running',
+        },
+        '&-rtl': {
+          direction: 'rtl',
+          span: {
+            direction: 'rtl',
+          },
+        },
+      },
+    },
+
+    // ============================ Notice ============================
+    {
+      [`${componentCls}-notice`]: {
+        padding: paddingXS,
+        textAlign: 'center',
+
+        [iconCls]: {
+          verticalAlign: 'text-bottom',
+          marginInlineEnd: marginXS, // affected by ltr or rtl
+          fontSize: fontSizeLG,
+        },
+
+        [`${componentCls}-notice-content`]: {
+          display: 'inline-block',
+          padding: messageNoticeContentPadding,
+          background: colorBgElevated,
+          borderRadius: borderRadiusLG,
+          boxShadow: boxShadowSecondary,
+          pointerEvents: 'all',
+        },
+
+        [`${componentCls}-success ${iconCls}`]: {
+          color: colorSuccess,
+        },
+        [`${componentCls}-error ${iconCls}`]: {
+          color: colorError,
+        },
+        [`${componentCls}-warning ${iconCls}`]: {
+          color: colorWarning,
+        },
+        [`
+        ${componentCls}-info ${iconCls},
+        ${componentCls}-loading ${iconCls}`]: {
+          color: colorInfo,
+        },
+      },
+    },
+
+    // ============================= Pure =============================
+    {
+      [`${componentCls}-notice-pure-panel`]: {
+        padding: 0,
+        textAlign: 'start',
+      },
+    },
+  ]
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Message',
+  (token) => {
+    // Gen-style functions here
+    const combinedToken = mergeToken<MessageToken>(token, {
+      messageNoticeContentPadding: `${
+        (token.controlHeightLG - token.fontSize * token.lineHeight) / 2
+      }px ${token.paddingSM}px`,
+    })
+    return [genMessageStyle(combinedToken)]
+  },
+  (token) => ({
+    height: 150,
+    zIndexPopup: token.zIndexPopupBase + 10,
+  }),
+)