+ {isShowIcon ? (
+
+ )}
+
+ {message ?
+ {action ? {message}
: null}
+ {description ? {description}
: null}
+ {action}
: null}
+
+
+`;
+
+exports[`renders components/alert/demo/action.tsx extend context correctly 2`] = `
+[
+ "Warning: [antd: Button] \`link\` or \`text\` button can't be a \`ghost\` button.",
+]
+`;
+
+exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Error Description Error Description Error Description Error Description
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/banner.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/basic.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/alert/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/closable.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/closable.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/description.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Detailed description and advices about successful copywriting.
+
+
+
+
+
+
+
+
+
+
+ Additional description and informations about copywriting.
+
+
+
+
+
+
+
+
+
+
+ This is a warning notice about copywriting.
+
+
+
+
+
+
+
+
+
+
+ This is an error message about copywriting.
+
+
+
+`;
+
+exports[`renders components/alert/demo/description.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/icon.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Detailed description and advice about successful copywriting.
+
+
+
+
+
+
+
+
+
+
+ Additional description and information about copywriting.
+
+
+
+
+
+
+
+
+
+
+
+ This is a warning notice about copywriting.
+
+
+
+
+
+
+
+
+
+
+ This is an error message about copywriting.
+
+
+
+`;
+
+exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/alert/demo/style.tsx extend context correctly 1`] = `
+
+
+
+
+
+ + click the close button to see the effect +
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/style.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/alert/__tests__/__snapshots__/demo.test.ts.snap b/packages/meta/src/alert/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 0000000..01a258b
--- /dev/null
+++ b/packages/meta/src/alert/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,1598 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/alert/demo/action.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Error Description Error Description Error Description Error Description
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/basic.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/description.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Detailed description and advices about successful copywriting.
+
+
+
+
+
+
+
+
+
+
+ Additional description and informations about copywriting.
+
+
+
+
+
+
+
+
+
+
+ This is a warning notice about copywriting.
+
+
+
+
+
+
+
+
+
+
+ This is an error message about copywriting.
+
+
+
+`;
+
+exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Detailed description and advice about successful copywriting.
+
+
+
+
+
+
+
+
+
+
+ Additional description and information about copywriting.
+
+
+
+
+
+
+
+
+
+
+
+ This is a warning notice about copywriting.
+
+
+
+
+
+
+
+
+
+
+ This is an error message about copywriting.
+
+
+
+`;
+
+exports[`renders components/alert/demo/style.tsx correctly 1`] = `
+
+
+
+
+
+ + click the close button to see the effect +
+
+
+
+
+
+`;
diff --git a/packages/meta/src/alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/alert/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..374770f
--- /dev/null
+++ b/packages/meta/src/alert/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert custom action 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
+
+`;
diff --git a/packages/meta/src/alert/__tests__/demo-extend.test.ts b/packages/meta/src/alert/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..e8239ae
--- /dev/null
+++ b/packages/meta/src/alert/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] });
diff --git a/packages/meta/src/alert/__tests__/demo.test.ts b/packages/meta/src/alert/__tests__/demo.test.ts
new file mode 100644
index 0000000..2972543
--- /dev/null
+++ b/packages/meta/src/alert/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] });
diff --git a/packages/meta/src/alert/__tests__/image.test.ts b/packages/meta/src/alert/__tests__/image.test.ts
new file mode 100644
index 0000000..26d429d
--- /dev/null
+++ b/packages/meta/src/alert/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Alert image', () => {
+ imageDemoTest('alert');
+});
diff --git a/packages/meta/src/alert/__tests__/index.test.tsx b/packages/meta/src/alert/__tests__/index.test.tsx
new file mode 100644
index 0000000..7965d4b
--- /dev/null
+++ b/packages/meta/src/alert/__tests__/index.test.tsx
@@ -0,0 +1,171 @@
+import userEvent from '@testing-library/user-event';
+import { resetWarned } from 'rc-util/lib/warning';
+import React from 'react';
+import Alert from '..';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { act, render, screen } from '../../../tests/utils';
+import Button from '../../button';
+import Popconfirm from '../../popconfirm';
+import Tooltip from '../../tooltip';
+
+const { ErrorBoundary } = Alert;
+
+describe('Alert', () => {
+ rtlTest(Alert);
+ accessibilityTest(Alert);
+
+ beforeAll(() => {
+ jest.useFakeTimers();
+ });
+
+ afterAll(() => {
+ jest.useRealTimers();
+ });
+
+ it('should show close button and could be closed', async () => {
+ const onClose = jest.fn();
+ render(
+
+
+
+
+
+
+
+click the close button to see the effect
+基本
+四种样式
+可关闭的警告提示
+含有辅助性文字介绍
+图标
+顶部公告
+
+平滑地卸载
+React 错误处理
+自定义图标
+操作
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| action | 自定义操作项 | ReactNode | - | 4.9.0 |
+| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
+| banner | 是否用作顶部公告 | boolean | false | |
+| closeIcon | 自定义关闭 Icon，>=5.7.0: 设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | `
+
+
+
+
+`;
+
+exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] = `
+
+
+
+
+
+`;
+
+exports[`Avatar Render adjusts component size to 40 when window size is md 1`] = `
+
+
+
+
+
+`;
+
+exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] = `
+
+
+
+
+
+`;
+
+exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] = `
+
+
+
+
+
+`;
+
+exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`] = `
+
+
+
+
+
+`;
+
+exports[`Avatar Render fallback 1`] = `
+
+
+ A
+
+
+`;
+
+exports[`Avatar Render rtl render component should be rendered correctly in RTL direction 1`] = `
+
+
+
+`;
+
+exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
+
+ Avatar
+
+`;
+
+exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
+
+ xx
+
+`;
+
+exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `
+
+ Avatar
+
+`;
+
+exports[`Avatar Render should handle onError correctly 1`] = `
+
+
+
+`;
+
+exports[`renders components/avatar/demo/badge.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/avatar/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+ 
+
+
+
+
+
+
,
+
+
+
+
+ 
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ant User
+
+
+
,
+]
+`;
+
+exports[`renders components/avatar/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/dynamic.tsx extend context correctly 1`] = `
+Array [
+
+
+ U
+
+ ,
+ ,
+ ,
+]
+`;
+
+exports[`renders components/avatar/demo/dynamic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/fallback.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/avatar/demo/fallback.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/group.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ant User
+
+
+
+ 
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ant User
+
+
+
+ 
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
,
+ ,
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ant User
+
+
+
+
+ A
+
+
+
+
+ K
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/avatar/demo/group.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/responsive.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/avatar/demo/responsive.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/toggle-debug.tsx extend context correctly 1`] = `
+Array [
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/avatar/demo/toggle-debug.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] = `
+
+
+`;
+
+exports[`renders components/avatar/demo/type.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/packages/meta/src/avatar/__tests__/__snapshots__/demo.test.tsx.snap
new file mode 100644
index 0000000..f207eae
--- /dev/null
+++ b/packages/meta/src/avatar/__tests__/__snapshots__/demo.test.tsx.snap
@@ -0,0 +1,1065 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/avatar/demo/badge.tsx correctly 1`] = `
+
+
+
+
+
+
+ U
+
+
+
+
+
+
+ USER
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ U
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/avatar/demo/component-token.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
+
+
+
+
+
,
+
+
+
+
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/avatar/demo/dynamic.tsx correctly 1`] = `
+Array [
+
+
+ U
+
+ ,
+ ,
+ ,
+]
+`;
+
+exports[`renders components/avatar/demo/fallback.tsx correctly 1`] = `
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/avatar/demo/group.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ K
+
+
+
+
+
+
,
+ ,
+
+
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
,
+ ,
+
+
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
,
+ ,
+
+
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
,
+ ,
+
+
+
+
+ K
+
+
+
+
+ +2
+
+
+
+
+
+ A
+
+
+
+
+ K
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/avatar/demo/responsive.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/avatar/demo/toggle-debug.tsx correctly 1`] = `
+Array [
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/avatar/demo/type.tsx correctly 1`] = `
+
+
+`;
diff --git a/packages/meta/src/avatar/__tests__/demo-extend.test.ts b/packages/meta/src/avatar/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..8688dc2
--- /dev/null
+++ b/packages/meta/src/avatar/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('avatar');
diff --git a/packages/meta/src/avatar/__tests__/demo.test.tsx b/packages/meta/src/avatar/__tests__/demo.test.tsx
new file mode 100644
index 0000000..71d78cb
--- /dev/null
+++ b/packages/meta/src/avatar/__tests__/demo.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('avatar');
+
+rootPropsTest(
+ 'avatar',
+ (Avatar, props) => (
+
+
+
+
+
+
+ U
+
+
+
+
+
+
+ USER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ U
+
+
+
+
+
+
+
+
+ Avatar
+
+
+ Invalid
+
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/avatar/demo/type.md b/packages/meta/src/avatar/demo/type.md
new file mode 100644
index 0000000..ee9e5e5
--- /dev/null
+++ b/packages/meta/src/avatar/demo/type.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
+
+## en-US
+
+Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
diff --git a/packages/meta/src/avatar/demo/type.tsx b/packages/meta/src/avatar/demo/type.tsx
new file mode 100644
index 0000000..5a799a4
--- /dev/null
+++ b/packages/meta/src/avatar/demo/type.tsx
@@ -0,0 +1,19 @@
+import { UserOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Avatar, Space } from '@zhst/meta';
+
+const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
+
+const App: React.FC = () => (
+
+
+ Avatar
+
+
+ Invalid
+
+
+
+ {childrenShow}
+
+
+ {childrenWithProps}
+
+ 基本
+类型
+自动调整字符大小
+带徽标的头像
+Avatar.Group
+隐藏情况下计算字符对齐
+响应式尺寸
+图片不存在时
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### Avatar
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| alt | 图像无法显示时的替代文本 | string | - | |
+| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
+| icon | 设置头像的自定义图标 | ReactNode | - | |
+| shape | 指定头像的形状 | `circle` \| `square` | `circle` | |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
+| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
+| srcSet | 设置图片类头像响应式资源地址 | string | - | |
+| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | true | |
+| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
+| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
+
+> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
+
+### Avatar.Group (4.5.0+)
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| maxCount | 显示的最大头像个数 | number | - | |
+| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
+| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
+| maxStyle | 多余头像样式 | CSSProperties | - | |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+| shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 |
diff --git a/packages/meta/src/avatar/style/index.ts b/packages/meta/src/avatar/style/index.ts
new file mode 100644
index 0000000..ffcc7db
--- /dev/null
+++ b/packages/meta/src/avatar/style/index.ts
@@ -0,0 +1,219 @@
+import { type CSSObject, unit } from '@ant-design/cssinjs';
+
+import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+
+export interface ComponentToken {
+ /**
+ * @desc 头像尺寸
+ * @descEN Size of Avatar
+ */
+ containerSize: number;
+ /**
+ * @desc 大号头像尺寸
+ * @descEN Size of large Avatar
+ */
+ containerSizeLG: number;
+ /**
+ * @desc 小号头像尺寸
+ * @descEN Size of small Avatar
+ */
+ containerSizeSM: number;
+ /**
+ * @desc 头像文字大小
+ * @descEN Font size of Avatar
+ */
+ textFontSize: number;
+ /**
+ * @desc 大号头像文字大小
+ * @descEN Font size of large Avatar
+ */
+ textFontSizeLG: number;
+ /**
+ * @desc 小号头像文字大小
+ * @descEN Font size of small Avatar
+ */
+ textFontSizeSM: number;
+ /**
+ * @desc 头像组间距
+ * @descEN Spacing between avatars in a group
+ */
+ groupSpace: number;
+ /**
+ * @desc 头像组重叠宽度
+ * @descEN Overlapping of avatars in a group
+ */
+ groupOverlapping: number;
+ /**
+ * @desc 头像组边框颜色
+ * @descEN Border color of avatars in a group
+ */
+ groupBorderColor: string;
+}
+// @ts-ignore
+type AvatarToken = FullToken<'Avatar'> & {
+ avatarBgColor: string;
+ avatarBg: string;
+ avatarColor: string;
+};
+
+const genBaseStyle: GenerateStyle基本
+通知事项日历
+卡片模式
+选择功能
+农历日历
+自定义头部
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+**注意**：Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。
+
+```js
+// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
+// import dayjs from 'dayjs';
+// import 'dayjs/locale/zh-cn';
+// dayjs.locale('zh-cn');
+
+-
+ {actions.map
- + {action} + + ); + })} +
+
+ );
+ }
+ const coverDom = cover ?
+ {title &&
+ {tabs}
+ {title}
}
+ {extra && {extra}
}
+ {cover}
: null;
+ const body = (
+
+ {loading ? loadingBlock : children}
+
+ );
+
+ const actionDom =
+ actions && actions.length ?
+ {head}
+ {coverDom}
+ {body}
+ {actionDom}
+
,
+ );
+});
+
+export default Card;
diff --git a/packages/meta/src/card/Grid.tsx b/packages/meta/src/card/Grid.tsx
new file mode 100644
index 0000000..5b4f87e
--- /dev/null
+++ b/packages/meta/src/card/Grid.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
+
+export interface CardGridProps extends React.HTMLAttributes{avatar}
+ ) : null;
+
+ const titleDom: React.ReactNode = title ? (
+ {title}
+ ) : null;
+
+ const descriptionDom: React.ReactNode = description ? (
+ {description}
+ ) : null;
+
+ const MetaDetail: React.ReactNode =
+ titleDom || descriptionDom ? (
+
+ {titleDom}
+ {descriptionDom}
+
+ ) : null;
+
+ return (
+
+ {avatarDom}
+ {MetaDetail}
+
+ );
+};
+
+export default Meta;
diff --git a/packages/meta/src/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/meta/src/card/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 0000000..766a5ee
--- /dev/null
+++ b/packages/meta/src/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,1347 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/card/demo/basic.tsx extend context correctly 1`] = `
+
+
+`;
+
+exports[`renders components/card/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/border-less.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+ Default size card
+
+
+
+ More
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+
+
+
+
+
+
+
+
+
+ Small size card
+
+
+
+ More
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+
+
+`;
+
+exports[`renders components/card/demo/border-less.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+ Card title
+
+
+
++ Card content +
++ Card content +
++ Card content +
+
+
,
+
+
+
+
+
+ Card title
+
+
+ More
+
+
+
+
+
+
+
+
+
+
+
+
+ tab1
+
+
+
+
+
+ tab2
+
+
+
+
+
+
+
+
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+-
+
- + + + + + + +
- + + + + + + +
- + + + + + + +
+
,
+]
+`;
+
+exports[`renders components/card/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/flexible-content.tsx extend context correctly 1`] = `
+
+
+
+
+
+ Small size card
+
+
+
+ More
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+
+
+`;
+
+exports[`renders components/card/demo/flexible-content.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/grid-card.tsx extend context correctly 1`] = `
+
+ 
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/card/demo/grid-card.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/in-column.tsx extend context correctly 1`] = `
+
+
+
+
+
+ Card Title
+
+
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+
+`;
+
+exports[`renders components/card/demo/in-column.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/inner.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+ Card content
+
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+ Card content
+
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+ Card content
+
+
+
+`;
+
+exports[`renders components/card/demo/inner.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/loading.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+ Card title
+
+
+
,
+
+
+
+
+
+
+ -
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/card/demo/loading.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/meta.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
-
+
- + + + + + + +
- + + + + + + +
- + + + + + + +
+
+`;
+
+exports[`renders components/card/demo/meta.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/simple.tsx extend context correctly 1`] = `
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+ -
+
- + + + + + + +
- + + + + + + +
- + + + + + + +
+
+`;
+
+exports[`renders components/card/demo/simple.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/card/demo/tabs.tsx extend context correctly 1`] = `
+Array [
+
+
++ Card content +
++ Card content +
++ Card content +
+
+
,
+
+
+
+
+
+ Card title
+
+
+
+ More
+
+
+
+
+
+
+
+
+
+
+
+
+
+ tab1
+
+
+
+
+
+ tab2
+
+
+
+
+
+
+
+
+
+
+
+
+ + content1 +
+, +
, +
+
,
+]
+`;
+
+exports[`renders components/card/demo/tabs.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/card/__tests__/__snapshots__/demo.test.ts.snap b/packages/meta/src/card/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 0000000..4f440f2
--- /dev/null
+++ b/packages/meta/src/card/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,1254 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/card/demo/basic.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + app content +
+
+
+`;
+
+exports[`renders components/card/demo/border-less.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+ Default size card
+
+
+
+ More
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+
+
+
+
+
+
+
+
+
+ Small size card
+
+
+
+ More
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+
+
+`;
+
+exports[`renders components/card/demo/component-token.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+ Card title
+
+
+
++ Card content +
++ Card content +
++ Card content +
+
+
,
+
+
+
+
+
+ Card title
+
+
+ More
+
+
+
+
+
+
+
+
+
+
+
+
+ tab1
+
+
+
+
+
+ tab2
+
+
+
+
+
+
+
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+-
+
- + + + + + + +
- + + + + + + +
- + + + + + + +
+
,
+]
+`;
+
+exports[`renders components/card/demo/flexible-content.tsx correctly 1`] = `
+
+
+
+
+
+ Small size card
+
+
+
+ More
+
+
+
+
+ + Card content +
++ Card content +
++ Card content +
+
+
+`;
+
+exports[`renders components/card/demo/grid-card.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/card/demo/in-column.tsx correctly 1`] = `
+
+
+
+
+
+ Card Title
+
+
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+ Content
+
+
+
+`;
+
+exports[`renders components/card/demo/inner.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+ Card content
+
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+ Card content
+
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+ Card content
+
+
+
+`;
+
+exports[`renders components/card/demo/loading.tsx correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+ Card title
+
+
+
,
+
+
+
+
+
+
+ -
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/card/demo/meta.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
-
+
- + + + + + + +
- + + + + + + +
- + + + + + + +
+
+`;
+
+exports[`renders components/card/demo/simple.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + + + + + + +
- + + + + + + +
- + + + + + + +
+
+`;
+
+exports[`renders components/card/demo/tabs.tsx correctly 1`] = `
+Array [
+
+
++ Card content +
++ Card content +
++ Card content +
+
+
,
+
+
+
+
+
+ Card title
+
+
+
+ More
+
+
+
+
+
+
+
+
+
+
+
+
+
+ tab1
+
+
+
+
+
+ tab2
+
+
+
+
+
+
+
+
+
+
+
+ + content1 +
+, +
, +
+
,
+]
+`;
diff --git a/packages/meta/src/card/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/card/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..91a0c52
--- /dev/null
+++ b/packages/meta/src/card/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,340 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card correct pass tabList props 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + app content +
+
+
+`;
+
+exports[`Card rtl render component should be rendered correctly in RTL direction 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Basic
+
+
+
+
+
+ Deprecated
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ NotClosable
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card should still have padding when card which set padding to 0 is loading 1`] = `
+
+
+`;
+
+exports[`Card title should be vertically aligned 1`] = `
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+`;
diff --git a/packages/meta/src/card/__tests__/demo-extend.test.ts b/packages/meta/src/card/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..fda8cb5
--- /dev/null
+++ b/packages/meta/src/card/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('card');
diff --git a/packages/meta/src/card/__tests__/demo.test.ts b/packages/meta/src/card/__tests__/demo.test.ts
new file mode 100644
index 0000000..de86307
--- /dev/null
+++ b/packages/meta/src/card/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('card');
diff --git a/packages/meta/src/card/__tests__/image.test.ts b/packages/meta/src/card/__tests__/image.test.ts
new file mode 100644
index 0000000..5c86506
--- /dev/null
+++ b/packages/meta/src/card/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Card image', () => {
+ imageDemoTest('card');
+});
diff --git a/packages/meta/src/card/__tests__/index.test.tsx b/packages/meta/src/card/__tests__/index.test.tsx
new file mode 100644
index 0000000..4615039
--- /dev/null
+++ b/packages/meta/src/card/__tests__/index.test.tsx
@@ -0,0 +1,177 @@
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { render, screen } from '../../../tests/utils';
+import Button from '../../button/index';
+import Card from '../index';
+
+describe('Card', () => {
+ mountTest(Card);
+ rtlTest(Card);
+
+ beforeAll(() => {
+ jest.useFakeTimers();
+ });
+
+ afterAll(() => {
+ jest.useRealTimers();
+ });
+
+ it('should still have padding when card which set padding to 0 is loading', () => {
+ const { container } = render(
+
+
+
+
+
+ Card title
+
+
+
+
+
+
++ Card content +
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+ +Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+ +Card content
+Card content
+Card content
+Card content
+Card content
+Card content
+content1
, + tab2:content2
, +}; + +const tabListNoTitle = [ + { + key: 'article', + label: 'article', + }, + { + key: 'app', + label: 'app', + }, + { + key: 'project', + label: 'project', + }, +]; + +const contentListNoTitle: Recordarticle content
, + app:app content
, + project:project content
, +}; + +const App: React.FC = () => { + const [activeTabKey1, setActiveTabKey1] = useState+
+
典型卡片
+无边框
+简洁卡片
+更灵活的内容展示
+栅格卡片
+预加载的卡片
+网格型内嵌卡片
+内部卡片
+带页签的卡片
+支持更多内容配置
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+```js
+
diff --git a/packages/meta/src/checkbox/demo/debug-line.tsx b/packages/meta/src/checkbox/demo/debug-line.tsx
index c3e8a11..6806c1f 100644
--- a/packages/meta/src/checkbox/demo/debug-line.tsx
+++ b/packages/meta/src/checkbox/demo/debug-line.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Checkbox, ConfigProvider, Radio, Space } from 'antd';
+import { Checkbox, ConfigProvider, Radio, Space } from '@zhst/meta';
const sharedStyle: React.CSSProperties = {
border: '1px solid red',
diff --git a/packages/meta/src/checkbox/demo/disabled.tsx b/packages/meta/src/checkbox/demo/disabled.tsx
index aeb519f..f8d6625 100644
--- a/packages/meta/src/checkbox/demo/disabled.tsx
+++ b/packages/meta/src/checkbox/demo/disabled.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Checkbox } from 'antd';
+import { Checkbox } from '@zhst/meta';
const App: React.FC = () => (
<>
diff --git a/packages/meta/src/checkbox/demo/group.tsx b/packages/meta/src/checkbox/demo/group.tsx
index a7c8c9c..fdeb7bb 100644
--- a/packages/meta/src/checkbox/demo/group.tsx
+++ b/packages/meta/src/checkbox/demo/group.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { Checkbox } from 'antd';
-import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import { Checkbox } from '@zhst/meta';
+import type { CheckboxValueType } from '@zhst/meta';
const onChange = (checkedValues: CheckboxValueType[]) => {
console.log('checked = ', checkedValues);
diff --git a/packages/meta/src/checkbox/demo/layout.tsx b/packages/meta/src/checkbox/demo/layout.tsx
index ec3df13..65c8352 100644
--- a/packages/meta/src/checkbox/demo/layout.tsx
+++ b/packages/meta/src/checkbox/demo/layout.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { Checkbox, Col, Row } from 'antd';
-import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import { Checkbox, Col, Row } from '@zhst/meta';
+import type { CheckboxValueType } from '@zhst/meta';
const onChange = (checkedValues: CheckboxValueType[]) => {
console.log('checked = ', checkedValues);
diff --git a/packages/meta/src/config-provider/demo/direction.tsx b/packages/meta/src/config-provider/demo/direction.tsx
index bb6cb8a..6bfdc4d 100644
--- a/packages/meta/src/config-provider/demo/direction.tsx
+++ b/packages/meta/src/config-provider/demo/direction.tsx
@@ -8,7 +8,7 @@ import {
SmileOutlined,
} from '@ant-design/icons';
import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { RadioChangeEvent } from '@zhst/meta';
import {
Badge,
Button,
@@ -29,7 +29,7 @@ import {
Switch,
Tree,
TreeSelect,
-} from 'antd';
+} from '@zhst/meta';
import type { DirectionType } from 'antd/es/config-provider';
const InputGroup = Input.Group;
diff --git a/packages/meta/src/config-provider/demo/locale.tsx b/packages/meta/src/config-provider/demo/locale.tsx
index f49a206..09fdc50 100644
--- a/packages/meta/src/config-provider/demo/locale.tsx
+++ b/packages/meta/src/config-provider/demo/locale.tsx
@@ -5,7 +5,7 @@
import { EllipsisOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import React, { useState } from 'react';
-import type { RadioChangeEvent, TourProps, UploadFile } from 'antd';
+import type { RadioChangeEvent, TourProps, UploadFile } from '@zhst/meta';
import {
Upload,
Tour,
@@ -29,7 +29,7 @@ import {
Image,
InputNumber,
Divider,
-} from 'antd';
+} from '@zhst/meta';
import type { Locale } from 'antd/es/locale';
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
diff --git a/packages/meta/src/date-picker/demo/basic.tsx b/packages/meta/src/date-picker/demo/basic.tsx
index 9a943c1..3d49ea3 100644
--- a/packages/meta/src/date-picker/demo/basic.tsx
+++ b/packages/meta/src/date-picker/demo/basic.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import type { DatePickerProps } from 'antd';
-import { DatePicker, Space } from 'antd';
+import type { DatePickerProps } from '@zhst/meta';
+import { DatePicker, Space } from '@zhst/meta';
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(date, dateString);
diff --git a/packages/meta/src/date-picker/demo/bordered.tsx b/packages/meta/src/date-picker/demo/bordered.tsx
index 058476f..ee5c774 100644
--- a/packages/meta/src/date-picker/demo/bordered.tsx
+++ b/packages/meta/src/date-picker/demo/bordered.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/cell-render.tsx b/packages/meta/src/date-picker/demo/cell-render.tsx
index f54a60b..fd1743f 100644
--- a/packages/meta/src/date-picker/demo/cell-render.tsx
+++ b/packages/meta/src/date-picker/demo/cell-render.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { DatePicker, Space, theme } from 'antd';
+import { DatePicker, Space, theme } from '@zhst/meta';
import type { Dayjs } from 'dayjs';
import type { CellRenderInfo } from 'rc-picker/es/interface';
diff --git a/packages/meta/src/date-picker/demo/component-token.tsx b/packages/meta/src/date-picker/demo/component-token.tsx
index 97b5710..0a7a833 100644
--- a/packages/meta/src/date-picker/demo/component-token.tsx
+++ b/packages/meta/src/date-picker/demo/component-token.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import type { DatePickerProps } from 'antd';
-import { ConfigProvider, DatePicker, Space, TimePicker } from 'antd';
+import type { DatePickerProps } from '@zhst/meta';
+import { ConfigProvider, DatePicker, Space, TimePicker } from '@zhst/meta';
import dayjs from 'dayjs';
/** Test usage. Do not use in your production. */
diff --git a/packages/meta/src/date-picker/demo/disabled-date.tsx b/packages/meta/src/date-picker/demo/disabled-date.tsx
index 2c08389..617fa01 100644
--- a/packages/meta/src/date-picker/demo/disabled-date.tsx
+++ b/packages/meta/src/date-picker/demo/disabled-date.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { DatePicker, Space } from 'antd';
-import type { RangePickerProps } from 'antd/es/date-picker';
+import { DatePicker, Space } from '@zhst/meta';
+import type { RangePickerProps } from '@zhst/meta';
dayjs.extend(customParseFormat);
diff --git a/packages/meta/src/date-picker/demo/disabled.tsx b/packages/meta/src/date-picker/demo/disabled.tsx
index 5e38222..74f70b3 100644
--- a/packages/meta/src/date-picker/demo/disabled.tsx
+++ b/packages/meta/src/date-picker/demo/disabled.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
dayjs.extend(customParseFormat);
diff --git a/packages/meta/src/date-picker/demo/extra-footer.tsx b/packages/meta/src/date-picker/demo/extra-footer.tsx
index 6a1405b..6754319 100644
--- a/packages/meta/src/date-picker/demo/extra-footer.tsx
+++ b/packages/meta/src/date-picker/demo/extra-footer.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/format.tsx b/packages/meta/src/date-picker/demo/format.tsx
index ff37abe..a8663da 100644
--- a/packages/meta/src/date-picker/demo/format.tsx
+++ b/packages/meta/src/date-picker/demo/format.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
-import type { DatePickerProps } from 'antd';
-import { DatePicker, Space } from 'antd';
+import type { DatePickerProps } from '@zhst/meta';
+import { DatePicker, Space } from '@zhst/meta';
dayjs.extend(customParseFormat);
diff --git a/packages/meta/src/date-picker/demo/mode.tsx b/packages/meta/src/date-picker/demo/mode.tsx
index 4b64a5a..5d95122 100644
--- a/packages/meta/src/date-picker/demo/mode.tsx
+++ b/packages/meta/src/date-picker/demo/mode.tsx
@@ -1,8 +1,8 @@
import React, { useState } from 'react';
import type { Dayjs } from 'dayjs';
-import type { DatePickerProps } from 'antd';
-import { DatePicker, Space } from 'antd';
-import type { RangePickerProps } from 'antd/es/date-picker';
+import type { DatePickerProps } from '@zhst/meta';
+import { DatePicker, Space } from '@zhst/meta';
+import type { RangePickerProps } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/placement.tsx b/packages/meta/src/date-picker/demo/placement.tsx
index a980b75..c08a1eb 100644
--- a/packages/meta/src/date-picker/demo/placement.tsx
+++ b/packages/meta/src/date-picker/demo/placement.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import type { DatePickerProps, RadioChangeEvent } from 'antd';
-import { DatePicker, Radio } from 'antd';
+import type { DatePickerProps, RadioChangeEvent } from '@zhst/meta';
+import { DatePicker, Radio } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/preset-ranges.tsx b/packages/meta/src/date-picker/demo/preset-ranges.tsx
index cecbab0..5c94b1e 100644
--- a/packages/meta/src/date-picker/demo/preset-ranges.tsx
+++ b/packages/meta/src/date-picker/demo/preset-ranges.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
-import type { TimeRangePickerProps } from 'antd';
-import { DatePicker, Space } from 'antd';
+import type { TimeRangePickerProps } from '@zhst/meta';
+import { DatePicker, Space } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/range-picker.tsx b/packages/meta/src/date-picker/demo/range-picker.tsx
index 215d730..205c30f 100644
--- a/packages/meta/src/date-picker/demo/range-picker.tsx
+++ b/packages/meta/src/date-picker/demo/range-picker.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/render-panel.tsx b/packages/meta/src/date-picker/demo/render-panel.tsx
index bdab140..9002e22 100644
--- a/packages/meta/src/date-picker/demo/render-panel.tsx
+++ b/packages/meta/src/date-picker/demo/render-panel.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { DatePicker } from 'antd';
+import { DatePicker } from '@zhst/meta';
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDatePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/select-in-range.tsx b/packages/meta/src/date-picker/demo/select-in-range.tsx
index 0222e1f..41cf5ea 100644
--- a/packages/meta/src/date-picker/demo/select-in-range.tsx
+++ b/packages/meta/src/date-picker/demo/select-in-range.tsx
@@ -1,6 +1,6 @@
import type { Dayjs } from 'dayjs';
import React, { useState } from 'react';
-import { DatePicker } from 'antd';
+import { DatePicker } from '@zhst/meta';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/size.tsx b/packages/meta/src/date-picker/demo/size.tsx
index 17250bd..6d1b309 100644
--- a/packages/meta/src/date-picker/demo/size.tsx
+++ b/packages/meta/src/date-picker/demo/size.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
-import { DatePicker, Radio, Space } from 'antd';
+import type { RadioChangeEvent } from '@zhst/meta';
+import { DatePicker, Radio, Space } from '@zhst/meta';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
const { RangePicker } = DatePicker;
diff --git a/packages/meta/src/date-picker/demo/start-end.tsx b/packages/meta/src/date-picker/demo/start-end.tsx
index 78247e0..e8eb384 100644
--- a/packages/meta/src/date-picker/demo/start-end.tsx
+++ b/packages/meta/src/date-picker/demo/start-end.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import type { Dayjs } from 'dayjs';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
const App: React.FC = () => {
const [startValue, setStartValue] = useState(null);
diff --git a/packages/meta/src/date-picker/demo/status.tsx b/packages/meta/src/date-picker/demo/status.tsx
index 6aa6074..7f53e9a 100644
--- a/packages/meta/src/date-picker/demo/status.tsx
+++ b/packages/meta/src/date-picker/demo/status.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
const App: React.FC = () => (
diff --git a/packages/meta/src/date-picker/demo/suffix.tsx b/packages/meta/src/date-picker/demo/suffix.tsx
index 01c5d69..9a6cbfd 100644
--- a/packages/meta/src/date-picker/demo/suffix.tsx
+++ b/packages/meta/src/date-picker/demo/suffix.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import type { Dayjs } from 'dayjs';
-import { DatePicker, Space } from 'antd';
+import { DatePicker, Space } from '@zhst/meta';
const smileIcon = ;
+```
+
+## FAQ
+
+### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？
+
+请参考[常见问答](/docs/react/faq#当我指定了-datepickerrangepicker-的-mode-属性后点击后无法选择年份月份)
+
+### 为何日期选择年份后返回的是日期面板而不是月份面板？
+
+当用户选择完年份后，系统会直接切换至日期面板，而非显式提供月份选择。这样做的设计在于用户只需进行一次点击即可完成年份修改，无需再次点击进入月份选择界面，从而减少了用户的操作负担，同时也避免需要额外感知月份的记忆负担。
+
+### 如何在 DatePicker 中使用自定义日期库（如 Moment.js ）？
+
+请参考[《使用自定义日期库》](/docs/react/use-custom-date-library#datepicker)
+
+### 为什么时间类组件的国际化 locale 设置不生效？
+
+参考 FAQ [为什么时间类组件的国际化 locale 设置不生效？](/docs/react/faq#为什么时间类组件的国际化-locale-设置不生效)。
+
+### 如何修改周的起始日？
+
+请使用正确的[语言包](/docs/react/i18n-cn)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 dayjs 的 `locale` 配置：
+
+```js
+import dayjs from 'dayjs';
+
+import 'dayjs/locale/zh-cn';
+
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(updateLocale);
+dayjs.updateLocale('zh-cn', {
+ weekStart: 0,
+});
+```
+
+### 为何使用 `panelRender` 时，原来面板无法切换？
+
+当你通过 `panelRender` 动态改变层级结构时，会使得原本的 Panel 被当做新的节点删除并创建。这使得其原本的状态会被重置，保持结构稳定即可。详情请参考 [#27263](https://github.com/ant-design/ant-design/issues/27263)。
diff --git a/packages/meta/src/index.tsx b/packages/meta/src/index.tsx
index ce7f37d..544fb69 100644
--- a/packages/meta/src/index.tsx
+++ b/packages/meta/src/index.tsx
@@ -8,8 +8,12 @@ export type { VideoViewProps, VideoViewRef } from './VideoPlayer'
export { default as Tabs } from './tabs'
export type { TabPaneProps, TabsProps } from './tabs';
export { default as Button } from './button'
+export { default as message } from './message'
+export type { ArgsProps } from './message'
export type { ButtonProps, ButtonGroupProps } from './button';
export { default as Space } from './space'
+export { default as Slider } from './slider'
+export type { SliderBaseProps, SliderMarks, SliderRangeProps, SliderSingleProps, SliderTooltipProps } from './slider';
export type { SpaceProps } from './space';
export { default as Switch } from './switch'
export type { SwitchProps } from './switch';
@@ -21,8 +25,8 @@ export type { ColProps } from './col';
export { default as TimePicker } from './time-picker'
export type { TimePickerProps } from './time-picker';
export { default as DatePicker } from './date-picker'
-export type { DatePickerProps } from './date-picker';
-export { default as Calender } from './calendar'
+export type { DatePickerProps, DatePickerType, WeekPickerProps, MonthPickerProps, RangePickerProps } from './date-picker';
+export { default as Calendar } from './calendar'
export type { CalendarProps } from './calendar';
export { default as Empty } from './empty'
export type { EmptyProps } from './empty';
@@ -33,7 +37,8 @@ export type { SelectProps } from './select';
export { default as Radio } from './radio'
export type { RadioProps, RadioChangeEvent, RadioGroupButtonStyle, RadioChangeEventTarget, RadioGroupContextProps, RadioGroupProps, RadioGroupOptionType } from './radio';
export { default as Checkbox } from './checkbox'
-export type { CheckboxProps, CheckboxGroupProps } from './checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxChangeEvent } from './checkbox';
+export type { CheckboxOptionType, CheckboxValueType } from './checkbox/Group';
export { default as Input } from './input'
export type { InputProps, PasswordProps, SearchProps, GroupProps } from './input';
export { default as ConfigProvider } from './config-provider'
@@ -57,3 +62,22 @@ export { default as Flex } from './flex'
export { default as Score } from './score'
export { default as Progress } from './progress'
export type { ProgressProps, ProgressAriaProps } from './progress'
+export { default as theme } from './theme'
+export { default as Badge } from './badge'
+export type { BadgeProps } from './badge'
+export { default as Alert } from './alert'
+export type { AlertProps } from './alert'
+export { default as Popover } from './popover'
+export type { PopoverProps } from './popover'
+export { default as Avatar } from './avatar'
+export type { AvatarProps } from './avatar'
+export { default as Card } from './card'
+export type { CardGridProps, CardInterface, CardMetaProps, CardProps, CardTabListType } from './card'
+export { default as Skeleton } from './skeleton'
+export type { SkeletonProps } from './skeleton'
+export { default as Tooltip } from './tooltip'
+export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWithOverlay, AbstractTooltipProps, TooltipPropsWithTitle, TooltipRef } from './tooltip'
+export { default as Tour } from './tour'
+export type { TourLocale, TourProps, TourStepProps } from './tour/interface'
+export { default as Segmented } from './segmented'
+export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented'
diff --git a/packages/meta/src/message/PurePanel.tsx b/packages/meta/src/message/PurePanel.tsx
new file mode 100644
index 0000000..9213b4c
--- /dev/null
+++ b/packages/meta/src/message/PurePanel.tsx
@@ -0,0 +1,75 @@
+import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import classNames from 'classnames';
+import { Notice } from 'rc-notification';
+import type { NoticeProps } from 'rc-notification/lib/Notice';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import type { NoticeType } from './interface';
+import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+
+export const TypeIcon = {
+ info: = ({ prefixCls, type, icon, children }) => (
+ ,
+ Omit {
+ prefixCls?: string;
+}
+
+/** @private Internal Component. Do not use in your production. */
+const PurePanel: React.FC = (props) => {
+ const { prefixCls: staticPrefixCls, className, type, icon, content, ...restProps } = props;
+ const { getPrefixCls } = React.useContext(ConfigContext);
+
+ const prefixCls = staticPrefixCls || getPrefixCls('message');
+
+ const rootCls = useCSSVarCls(prefixCls);
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+
+ return wrapCSSVar(
+
+ {content}
+
+ }
+ />,
+ );
+};
+
+export default PurePanel;
diff --git a/packages/meta/src/message/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/meta/src/message/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 0000000..e6af62b
--- /dev/null
+++ b/packages/meta/src/message/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,254 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+]
+`;
+
+exports[`renders components/message/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/custom-style.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/duration.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/duration.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/hooks.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/hooks.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/info.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/info.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/loading.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/loading.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/other.tsx extend context correctly 1`] = `
+
+
+
+ {holder}
+
+
+ );
+ };
+
+ const { container } = render(
+
+
+ {holder}
+
+
+ );
+ };
+
+ const { container } = render(
+
+ {holder}
+
+ );
+ };
+
+ const { container } = render(
+ {holder}
+
+
+ );
+ };
+
+ const { container } = render({holder} ;
+ };
+
+ render(
+ {holder}
+
+ );
+ };
+
+ render(
+
+
+
+
+);
diff --git a/packages/meta/src/message/demo/custom-style.md b/packages/meta/src/message/demo/custom-style.md
new file mode 100644
index 0000000..04c8e9c
--- /dev/null
+++ b/packages/meta/src/message/demo/custom-style.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `style` 和 `className` 来定义样式。
+
+## en-US
+
+The `style` and `className` are available to customize Message.
diff --git a/packages/meta/src/message/demo/custom-style.tsx b/packages/meta/src/message/demo/custom-style.tsx
new file mode 100644
index 0000000..c431a44
--- /dev/null
+++ b/packages/meta/src/message/demo/custom-style.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, message } from '@zhst/meta';
+
+const App: React.FC = () => {
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const success = () => {
+ messageApi.open({
+ type: 'success',
+ content: 'This is a prompt message with custom className and style',
+ className: 'custom-class',
+ style: {
+ marginTop: '20vh',
+ },
+ });
+ };
+
+ return (
+ <>
+ {contextHolder}
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/message/demo/duration.md b/packages/meta/src/message/demo/duration.md
new file mode 100644
index 0000000..3522d7e
--- /dev/null
+++ b/packages/meta/src/message/demo/duration.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义时长 `10s`，默认时长为 `3s`。
+
+## en-US
+
+Customize message display duration from default `3s` to `10s`.
diff --git a/packages/meta/src/message/demo/duration.tsx b/packages/meta/src/message/demo/duration.tsx
new file mode 100644
index 0000000..408be7f
--- /dev/null
+++ b/packages/meta/src/message/demo/duration.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button, message } from '@zhst/meta';
+
+const App: React.FC = () => {
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const success = () => {
+ messageApi.open({
+ type: 'success',
+ content: 'This is a prompt message for success, and it will disappear in 10 seconds',
+ duration: 10,
+ });
+ };
+
+ return (
+ <>
+ {contextHolder}
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/message/demo/hooks.md b/packages/meta/src/message/demo/hooks.md
new file mode 100644
index 0000000..757383d
--- /dev/null
+++ b/packages/meta/src/message/demo/hooks.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `message.useMessage` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过顶层注册的方式代替 `message` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
+
+## en-US
+
+Use `message.useMessage` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `message` static method, because static method cannot consume context, and ConfigProvider data will not work.
diff --git a/packages/meta/src/message/demo/hooks.tsx b/packages/meta/src/message/demo/hooks.tsx
new file mode 100644
index 0000000..d9c2471
--- /dev/null
+++ b/packages/meta/src/message/demo/hooks.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button, message } from '@zhst/meta';
+
+const App: React.FC = () => {
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const info = () => {
+ messageApi.info('Hello, Ant Design!');
+ };
+
+ return (
+ <>
+ {contextHolder}
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/message/demo/info.md b/packages/meta/src/message/demo/info.md
new file mode 100644
index 0000000..b913751
--- /dev/null
+++ b/packages/meta/src/message/demo/info.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+静态方法无法消费 Context，推荐优先使用 Hooks 版本。
+
+## en-US
+
+Static methods cannot consume Context. Please use hooks first.
diff --git a/packages/meta/src/message/demo/info.tsx b/packages/meta/src/message/demo/info.tsx
new file mode 100644
index 0000000..fcb7e28
--- /dev/null
+++ b/packages/meta/src/message/demo/info.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, message } from '@zhst/meta';
+
+const info = () => {
+ message.info('This is a normal message');
+};
+
+const App: React.FC = () => (
+
+);
+
+export default App;
diff --git a/packages/meta/src/message/demo/loading.md b/packages/meta/src/message/demo/loading.md
new file mode 100644
index 0000000..2ed153d
--- /dev/null
+++ b/packages/meta/src/message/demo/loading.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+进行全局 loading，异步自行移除。
+
+## en-US
+
+Display a global loading indicator, which is dismissed by itself asynchronously.
diff --git a/packages/meta/src/message/demo/loading.tsx b/packages/meta/src/message/demo/loading.tsx
new file mode 100644
index 0000000..db66e34
--- /dev/null
+++ b/packages/meta/src/message/demo/loading.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button, message } from '@zhst/meta';
+
+const App: React.FC = () => {
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const success = () => {
+ messageApi.open({
+ type: 'loading',
+ content: 'Action in progress..',
+ duration: 0,
+ });
+ // Dismiss manually and asynchronously
+ setTimeout(messageApi.destroy, 2500);
+ };
+ return (
+ <>
+ {contextHolder}
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/message/demo/other.md b/packages/meta/src/message/demo/other.md
new file mode 100644
index 0000000..1090944
--- /dev/null
+++ b/packages/meta/src/message/demo/other.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+包括成功、失败、警告。
+
+## en-US
+
+Messages of success, error and warning types.
diff --git a/packages/meta/src/message/demo/other.tsx b/packages/meta/src/message/demo/other.tsx
new file mode 100644
index 0000000..6c2b83c
--- /dev/null
+++ b/packages/meta/src/message/demo/other.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, message, Space } from '@zhst/meta';
+
+const App: React.FC = () => {
+ const [messageApi, contextHolder] = message.useMessage();
+
+ const success = () => {
+ messageApi.open({
+ type: 'success',
+ content: 'This is a success message',
+ });
+ };
+
+ const error = () => {
+ messageApi.open({
+ type: 'error',
+ content: 'This is an error message',
+ });
+ };
+
+ const warning = () => {
+ messageApi.open({
+ type: 'warning',
+ content: 'This is a warning message',
+ });
+ };
+
+ return (
+ <>
+ {contextHolder}
+
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/message/demo/render-panel.md b/packages/meta/src/message/demo/render-panel.md
new file mode 100644
index 0000000..70bcbec
--- /dev/null
+++ b/packages/meta/src/message/demo/render-panel.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
diff --git a/packages/meta/src/message/demo/render-panel.tsx b/packages/meta/src/message/demo/render-panel.tsx
new file mode 100644
index 0000000..49740c6
--- /dev/null
+++ b/packages/meta/src/message/demo/render-panel.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { message } from '@zhst/meta';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
+
+export default () => | void = (callback) => callback();
+
+interface GlobalMessage {
+ fragment: DocumentFragment;
+ instance?: MessageInstance | null;
+ sync?: VoidFunction;
+}
+
+interface OpenTask {
+ type: 'open';
+ config: ArgsProps;
+ resolve: VoidFunction;
+ setCloseFn: (closeFn: VoidFunction) => void;
+ skipped?: boolean;
+}
+
+interface TypeTask {
+ type: NoticeType;
+ args: Parameters;
+ resolve: VoidFunction;
+ setCloseFn: (closeFn: VoidFunction) => void;
+ skipped?: boolean;
+}
+
+type Task =
+ | OpenTask
+ | TypeTask
+ | {
+ type: 'destroy';
+ key: React.Key;
+ skipped?: boolean;
+ };
+
+let taskQueue: Task[] = [];
+
+let defaultGlobalConfig: ConfigOptions = {};
+
+function getGlobalContext() {
+ const {
+ prefixCls: globalPrefixCls,
+ getContainer: globalGetContainer,
+ duration,
+ rtl,
+ maxCount,
+ top,
+ } = defaultGlobalConfig;
+ const mergedPrefixCls = globalPrefixCls ?? globalConfig().getPrefixCls('message');
+ const mergedContainer = globalGetContainer?.() || document.body;
+
+ return {
+ prefixCls: mergedPrefixCls,
+ getContainer: () => mergedContainer!,
+ duration,
+ rtl,
+ maxCount,
+ top,
+ };
+}
+
+interface GlobalHolderRef {
+ instance: MessageInstance;
+ sync: () => void;
+}
+
+const GlobalHolder = React.forwardRef((_, ref) => {
+ const [messageConfig, setMessageConfig] = React.useState(getGlobalContext);
+
+ const [api, holder] = useInternalMessage(messageConfig);
+
+ const global = globalConfig();
+ const rootPrefixCls = global.getRootPrefixCls();
+ const rootIconPrefixCls = global.getIconPrefixCls();
+ const theme = global.getTheme();
+
+ const sync = () => {
+ setMessageConfig(getGlobalContext);
+ };
+
+ React.useEffect(sync, []);
+
+ React.useImperativeHandle(ref, () => {
+ const instance: MessageInstance = { ...api };
+ // @ts-ignore
+ Object.keys(instance).forEach((method: keyof MessageInstance) => {
+ instance[method] = (...args: any[]) => {
+ sync();
+ return (api as any)[method](...args);
+ };
+ });
+
+ return {
+ instance,
+ sync,
+ };
+ });
+
+ return (
+
+ {holder}
+
+ );
+});
+
+function flushNotice() {
+ if (!message) {
+ const holderFragment = document.createDocumentFragment();
+
+ const newMessage: GlobalMessage = {
+ fragment: holderFragment,
+ };
+
+ message = newMessage;
+
+ // Delay render to avoid sync issue
+ act(() => {
+ render(
+ {
+ const { instance, sync } = node || {};
+
+ // React 18 test env will throw if call immediately in ref
+ Promise.resolve().then(() => {
+ if (!newMessage.instance && instance) {
+ newMessage.instance = instance;
+ newMessage.sync = sync;
+ flushNotice();
+ }
+ });
+ }}
+ />,
+ holderFragment,
+ );
+ });
+
+ return;
+ }
+
+ // Notification not ready
+ if (!message.instance) {
+ return;
+ }
+
+ // >>> Execute task
+ taskQueue.forEach((task) => {
+ const { type, skipped } = task;
+
+ // Only `skipped` when user call notice but cancel it immediately
+ // and instance not ready
+ if (!skipped) {
+ switch (type) {
+ case 'open': {
+ act(() => {
+ const closeFn = message!.instance!.open({
+ ...defaultGlobalConfig,
+ ...task.config,
+ });
+
+ closeFn?.then(task.resolve);
+ task.setCloseFn(closeFn);
+ });
+ break;
+ }
+
+ case 'destroy':
+ act(() => {
+ message?.instance!.destroy(task.key);
+ });
+ break;
+
+ // Other type open
+ default: {
+ act(() => {
+ const closeFn = message!.instance;
+
+ closeFn?.then(task.resolve);
+ task.setCloseFn(closeFn);
+ });
+ }
+ }
+ }
+ });
+
+ // Clean up
+ taskQueue = [];
+}
+
+// ==============================================================================
+// == Export ==
+// ==============================================================================
+
+function setMessageGlobalConfig(config: ConfigOptions) {
+ defaultGlobalConfig = {
+ ...defaultGlobalConfig,
+ ...config,
+ };
+
+ // Trigger sync for it
+ act(() => {
+ message?.sync?.();
+ });
+}
+
+function open(config: ArgsProps): MessageType {
+ const result = wrapPromiseFn((resolve) => {
+ let closeFn: VoidFunction;
+
+ const task: OpenTask = {
+ type: 'open',
+ config,
+ resolve,
+ setCloseFn: (fn) => {
+ closeFn = fn;
+ },
+ };
+ taskQueue.push(task);
+
+ return () => {
+ if (closeFn) {
+ act(() => {
+ closeFn();
+ });
+ } else {
+ task.skipped = true;
+ }
+ };
+ });
+
+ flushNotice();
+
+ return result;
+}
+
+function typeOpen(type: NoticeType, args: Parameters): MessageType {
+ // Warning if exist theme
+ if (process.env.NODE_ENV !== 'production') {
+ warnContext('message');
+ }
+
+ const result = wrapPromiseFn((resolve) => {
+ let closeFn: VoidFunction;
+
+ const task: TypeTask = {
+ type,
+ args,
+ resolve,
+ setCloseFn: (fn) => {
+ closeFn = fn;
+ },
+ };
+
+ taskQueue.push(task);
+
+ return () => {
+ if (closeFn) {
+ act(() => {
+ closeFn();
+ });
+ } else {
+ task.skipped = true;
+ }
+ };
+ });
+
+ flushNotice();
+
+ return result;
+}
+
+function destroy(key: React.Key) {
+ taskQueue.push({
+ type: 'destroy',
+ key,
+ });
+ flushNotice();
+}
+
+interface BaseMethods {
+ open: (config: ArgsProps) => MessageType;
+ destroy: (key?: React.Key) => void;
+ config: typeof setMessageGlobalConfig;
+ useMessage: typeof useMessage;
+ /** @private Internal Component. Do not use in your production. */
+ _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+}
+
+interface MessageMethods {
+ info: TypeOpen;
+ success: TypeOpen;
+ error: TypeOpen;
+ warning: TypeOpen;
+ loading: TypeOpen;
+}
+
+const methods: (keyof MessageMethods)[] = ['success', 'info', 'warning', 'error', 'loading'];
+
+const baseStaticMethods: BaseMethods = {
+ open,
+// @ts-ignore
+ destroy,
+ config: setMessageGlobalConfig,
+ useMessage,
+ _InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
+};
+
+const staticMethods = baseStaticMethods as MessageMethods & BaseMethods;
+
+methods.forEach((type: keyof MessageMethods) => {
+ staticMethods[type] = (...args: Parameters) => typeOpen(type, args);
+});
+
+// ==============================================================================
+// == Test ==
+// ==============================================================================
+const noop = () => {};
+
+/** @internal Only Work in test env */
+// eslint-disable-next-line import/no-mutable-exports
+export let actWrapper: (wrapper: any) => void = noop;
+
+if (process.env.NODE_ENV === 'test') {
+ actWrapper = (wrapper) => {
+ act = wrapper;
+ };
+}
+
+/** @internal Only Work in test env */
+// eslint-disable-next-line import/no-mutable-exports
+export let actDestroy = noop;
+
+if (process.env.NODE_ENV === 'test') {
+ actDestroy = () => {
+ message = null;
+ };
+}
+
+export default staticMethods;
diff --git a/packages/meta/src/message/index.zh-CN.md b/packages/meta/src/message/index.zh-CN.md
new file mode 100644
index 0000000..e5a5d22
--- /dev/null
+++ b/packages/meta/src/message/index.zh-CN.md
@@ -0,0 +1,143 @@
+---
+category: Components
+subtitle: 全局提示
+group: 反馈
+noinstant: true
+title: Message 全局提示
+demo:
+ cols: 2
+---
+
+全局展示操作反馈信息。
+
+## 何时使用
+
+- 可提供成功、警告和错误等反馈信息。
+- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
+
+## 代码演示
+
+
+
+ {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}
+ {contextHolder}
+
+ {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}
+
+
+);
+```
+
+**异同**：通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。
+
+> 可通过 [App 包裹组件](/components/app-cn) 简化 `useMessage` 等方法需要手动植入 contextHolder 的问题。
+
+### 静态方法如何设置 prefixCls ？
+
+你可以通过 [`ConfigProvider.config`](/components/config-provider-cn#configproviderconfig-4130) 进行设置。
diff --git a/packages/meta/src/message/interface.ts b/packages/meta/src/message/interface.ts
new file mode 100644
index 0000000..78a9bd0
--- /dev/null
+++ b/packages/meta/src/message/interface.ts
@@ -0,0 +1,47 @@
+import type * as React from 'react';
+
+export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+
+export interface ConfigOptions {
+ top?: number;
+ duration?: number;
+ prefixCls?: string;
+ getContainer?: () => HTMLElement;
+ transitionName?: string;
+ maxCount?: number;
+ rtl?: boolean;
+}
+
+export interface ArgsProps {
+ content: React.ReactNode;
+ duration?: number;
+ type?: NoticeType;
+ onClose?: () => void;
+ icon?: React.ReactNode;
+ key?: string | number;
+ style?: React.CSSProperties;
+ className?: string;
+ onClick?: (e: React.MouseEvent) => void;
+}
+
+export type JointContent = React.ReactNode | ArgsProps;
+
+export interface MessageType extends PromiseLike {
+ (): 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?: React.Key): void;
+}
diff --git a/packages/meta/src/message/style/index.ts b/packages/meta/src/message/style/index.ts
new file mode 100644
index 0000000..94c8264
--- /dev/null
+++ b/packages/meta/src/message/style/index.ts
@@ -0,0 +1,213 @@
+// deps-lint-skip-all
+import type { CSSProperties } from 'react';
+import type { CSSObject } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
+import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+ // Component token here
+ /**
+ * @desc 提示框 z-index
+ * @descEN z-index of Message
+ */
+ zIndexPopup: number;
+ /**
+ * @desc 提示框背景色
+ * @descEN Background color of Message
+ */
+ contentBg: string;
+ /**
+ * @desc 提示框内边距
+ * @descEN Padding of Message
+ */
+ contentPadding: CSSProperties['padding'];
+}
+// @ts-ignore
+interface MessageToken extends FullToken<'Message'> {
+ // Custom token here
+ height: number;
+}
+
+const genMessageStyle: GenerateStyle = (token) => {
+ const {
+ componentCls,
+ iconCls,
+ boxShadow,
+ colorText,
+ colorSuccess,
+ colorError,
+ colorWarning,
+ colorInfo,
+ fontSizeLG,
+ motionEaseInOutCirc,
+ motionDurationSlow,
+ marginXS,
+ paddingXS,
+ borderRadiusLG,
+ // @ts-ignore
+ zIndexPopup,
+ // Custom token
+ // @ts-ignore
+ contentPadding,
+ // @ts-ignore
+ contentBg,
+ } = token;
+
+ const noticeCls = `${componentCls}-notice`;
+
+ 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,
+ },
+ });
+
+ const noticeStyle: CSSObject = {
+ padding: paddingXS,
+ textAlign: 'center',
+
+ [`${componentCls}-custom-content > ${iconCls}`]: {
+ verticalAlign: 'text-bottom',
+ marginInlineEnd: marginXS, // affected by ltr or rtl
+ fontSize: fontSizeLG,
+ },
+
+ [`${noticeCls}-content`]: {
+ display: 'inline-block',
+ padding: contentPadding,
+ background: contentBg,
+ borderRadius: borderRadiusLG,
+ boxShadow,
+ 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,
+ },
+ };
+
+ return [
+ // ============================ Holder ============================
+ {
+ [componentCls]: {
+ ...resetComponent(token),
+ color: colorText,
+ position: 'fixed',
+ top: marginXS,
+ 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]: {
+ [`${noticeCls}-wrapper`]: {
+ ...noticeStyle,
+ },
+ },
+ },
+
+ // ============================= Pure =============================
+ {
+ [`${componentCls}-notice-pure-panel`]: {
+ ...noticeStyle,
+ padding: 0,
+ textAlign: 'start',
+ },
+ },
+ ];
+};
+// @ts-ignore
+export const prepareComponentToken: GetDefaultToken<'Message'> = (token) => ({
+ zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
+ contentBg: token.colorBgElevated,
+ contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
+ token.paddingSM
+ }px`,
+});
+
+// ============================== Export ==============================
+// @ts-ignore
+export default genStyleHooks(
+ // @ts-ignore
+ 'Message',
+ (token) => {
+ // Gen-style functions here
+ const combinedToken = mergeToken(token, {
+ height: 150,
+ });
+ return [genMessageStyle(combinedToken)];
+ },
+ prepareComponentToken,
+);
diff --git a/packages/meta/src/message/useMessage.tsx b/packages/meta/src/message/useMessage.tsx
new file mode 100644
index 0000000..f29dbf8
--- /dev/null
+++ b/packages/meta/src/message/useMessage.tsx
@@ -0,0 +1,250 @@
+import * as React from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import classNames from 'classnames';
+import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
+import type { NotificationAPI, NotificationConfig as RcNotificationConfig } from 'rc-notification';
+
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import type { ComponentStyleConfig } from '../config-provider/context';
+import type {
+ ArgsProps,
+ ConfigOptions,
+ MessageInstance,
+ MessageType,
+ NoticeType,
+ TypeOpen,
+} from './interface';
+import { PureContent } from './PurePanel';
+import useStyle from './style';
+import { getMotion, wrapPromiseFn } from './util';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+
+const DEFAULT_OFFSET = 8;
+const DEFAULT_DURATION = 3;
+
+// ==============================================================================
+// == Holder ==
+// ==============================================================================
+type HolderProps = ConfigOptions & {
+ onAllRemoved?: VoidFunction;
+};
+
+interface HolderRef extends NotificationAPI {
+ prefixCls: string;
+ message?: ComponentStyleConfig;
+}
+
+const Wrapper: FC> = ({ children, prefixCls }) => {
+ const rootCls = useCSSVarCls(prefixCls);
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+ return wrapCSSVar(
+
+ {children}
+ ,
+ );
+};
+
+const renderNotifications: RcNotificationConfig['renderNotifications'] = (
+ node,
+ { prefixCls, key },
+) => (
+
+ {node}
+
+);
+
+const Holder = React.forwardRef((props, ref) => {
+ const {
+ top,
+ prefixCls: staticPrefixCls,
+ getContainer: staticGetContainer,
+ maxCount,
+ duration = DEFAULT_DURATION,
+ rtl,
+ transitionName,
+ onAllRemoved,
+ } = props;
+ const { getPrefixCls, getPopupContainer, message } = React.useContext(ConfigContext);
+
+ const prefixCls = staticPrefixCls || getPrefixCls('message');
+
+ // =============================== Style ===============================
+ const getStyle = (): React.CSSProperties => ({
+ left: '50%',
+ transform: 'translateX(-50%)',
+ top: top ?? DEFAULT_OFFSET,
+ });
+
+ const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl });
+
+ // ============================== Motion ===============================
+ const getNotificationMotion = () => getMotion(prefixCls, transitionName);
+
+ // ============================ Close Icon =============================
+ const mergedCloseIcon = (
+
+ (null);
+
+ const warning = devUseWarning('Message');
+
+ // ================================ API ================================
+ const wrapAPI = React.useMemo(() => {
+ // Wrap with notification content
+
+ // >>> close
+ const close = (key: React.Key) => {
+ holderRef.current?.close(key);
+ };
+
+ // >>> Open
+ const open = (config: ArgsProps): MessageType => {
+ if (!holderRef.current) {
+ warning(
+ false,
+ 'usage',
+ 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.',
+ );
+
+ const fakeResult: any = () => {};
+ fakeResult.then = () => {};
+ return fakeResult;
+ }
+
+ const { open: originOpen, prefixCls, message } = holderRef.current;
+ const noticePrefixCls = `${prefixCls}-notice`;
+
+ const { content, icon, type, key, className, style, onClose, ...restConfig } = config;
+
+ let mergedKey: React.Key = key!;
+ if (mergedKey === undefined || mergedKey === null) {
+ keyIndex += 1;
+ mergedKey = `antd-message-${keyIndex}`;
+ }
+
+ return wrapPromiseFn((resolve) => {
+ originOpen({
+ ...restConfig,
+ key: mergedKey,
+ content: (
+
+ {content}
+
+ ),
+ placement: 'top',
+ className: classNames(
+ type && `${noticePrefixCls}-${type}`,
+ className,
+ message?.className,
+ ),
+ style: { ...message?.style, ...style },
+ onClose: () => {
+ onClose?.();
+ resolve();
+ },
+ });
+
+ // Return close function
+ return () => {
+ close(mergedKey);
+ };
+ });
+ };
+
+ // >>> destroy
+ const destroy = (key?: React.Key) => {
+ if (key !== undefined) {
+ close(key);
+ } else {
+ holderRef.current?.destroy();
+ }
+ };
+
+ const clone = {
+ open,
+ destroy,
+ } as MessageInstance;
+
+ const keys: NoticeType[] = ['info', 'success', 'warning', 'error', 'loading'];
+ keys.forEach((type) => {
+ const typeOpen: TypeOpen = (jointContent, duration, onClose) => {
+ let config: ArgsProps;
+ if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
+ config = jointContent;
+ } else {
+ config = {
+ content: jointContent,
+ };
+ }
+
+ // Params
+ let mergedDuration: number | undefined;
+ let mergedOnClose: VoidFunction | undefined;
+ if (typeof duration === 'function') {
+ mergedOnClose = duration;
+ } else {
+ mergedDuration = duration;
+ mergedOnClose = onClose;
+ }
+
+ const mergedConfig = {
+ onClose: mergedOnClose,
+ duration: mergedDuration,
+ ...config,
+ type,
+ };
+
+ return open(mergedConfig);
+ };
+
+ clone[type] = typeOpen;
+ });
+
+ return clone;
+ }, []);
+
+ // ============================== Return ===============================
+ return [wrapAPI, ((resolve) => {
+ closeFn = openFn(() => {
+ resolve(true);
+ });
+ });
+
+ const result: any = () => {
+ closeFn?.();
+ };
+
+ result.then = (filled: VoidFunction, rejected: VoidFunction) =>
+ closePromise.then(filled, rejected);
+ result.promise = closePromise;
+
+ return result;
+}
diff --git a/packages/meta/src/popover/PurePanel.tsx b/packages/meta/src/popover/PurePanel.tsx
new file mode 100644
index 0000000..fe76c7c
--- /dev/null
+++ b/packages/meta/src/popover/PurePanel.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Popup } from 'rc-tooltip';
+
+import type { PopoverProps } from '.';
+import { getRenderPropValue } from '../_util/getRenderPropValue';
+import { ConfigContext } from '../config-provider';
+import useStyle from './style';
+
+export const getOverlay = (
+ prefixCls?: string,
+ title?: PopoverProps['title'],
+ content?: PopoverProps['content'],
+) => {
+ if (!title && !content) {
+ return null;
+ }
+ return (
+ <>
+ {title && {
+ children?: React.ReactNode;
+}
+
+interface RawPurePanelProps extends PopoverProps {
+ hashId: string;
+}
+
+export const RawPurePanel: React.FC = (props) => {
+ const {
+ hashId,
+ prefixCls,
+ className,
+ style,
+ placement = 'top',
+ title,
+ content,
+ children,
+ } = props;
+
+ return (
+ = (props) => {
+ const { prefixCls: customizePrefixCls, className, ...restProps } = props;
+ const { getPrefixCls } = React.useContext(ConfigContext);
+
+ const prefixCls = getPrefixCls('popover', customizePrefixCls);
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
+ return wrapCSSVar(
+
+
+
+ ),
+ { findRootElements: () => document.querySelector('.ant-popover')! },
+);
diff --git a/packages/meta/src/popover/__tests__/image.test.ts b/packages/meta/src/popover/__tests__/image.test.ts
new file mode 100644
index 0000000..cf5ab59
--- /dev/null
+++ b/packages/meta/src/popover/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Popover image', () => {
+ imageDemoTest('popover');
+});
diff --git a/packages/meta/src/popover/__tests__/index.test.tsx b/packages/meta/src/popover/__tests__/index.test.tsx
new file mode 100644
index 0000000..d3bfd0d
--- /dev/null
+++ b/packages/meta/src/popover/__tests__/index.test.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import Popover from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import { fireEvent, render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
+import type { TooltipRef } from '../../tooltip';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanelDoNotUseOrYouWillBeFired } = Popover;
+
+describe('Popover', () => {
+ mountTest(Popover);
+
+ it('should show overlay when trigger is clicked', () => {
+ const ref = React.createRef();
+ const { container } = render(
+
+ show me your code
+ ,
+ );
+ expect(container.querySelector('.ant-popover-inner-content')).toBeFalsy();
+ fireEvent.click(container.querySelector('span')!);
+ expect(container.querySelector('.ant-popover-inner-content')).toBeTruthy();
+ });
+
+ it('shows content for render functions', () => {
+ const renderTitle = () => 'some-title';
+ const renderContent = () => 'some-content';
+ const ref = React.createRef();
+ const { container } = render(
+
+ show me your code
+ ,
+ );
+ fireEvent.click(container.querySelector('span')!);
+ const popup = document.querySelector('.ant-popover')!;
+ expect(popup).not.toBe(null);
+ expect(popup.innerHTML).toContain('some-title');
+ expect(popup.innerHTML).toContain('some-content');
+ expect(popup.innerHTML).toMatchSnapshot();
+ });
+
+ it('handles empty title/content props safely', () => {
+ const { container } = render(
+
+ show me your code
+ ,
+ );
+ fireEvent.click(container.querySelector('span')!);
+
+ const popup = document.querySelector('.ant-popover');
+ expect(popup).toBe(null);
+ });
+
+ it('should not render popover when the title & content props is empty', () => {
+ const { container } = render(
+
+ show me your code
+ ,
+ );
+ fireEvent.click(container.querySelector('span')!);
+
+ const popup = document.querySelector('.ant-popover');
+ expect(popup).toBe(null);
+ });
+
+ it('props#overlay do not warn anymore', () => {
+ const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+ const overlay = jest.fn();
+ render(
+
+ show me your code
+ ,
+ );
+
+ expect(errorSpy).not.toHaveBeenCalled();
+ expect(overlay).not.toHaveBeenCalled();
+ });
+
+ it(`should be rendered correctly in RTL direction`, () => {
+ const { container } = render(
+
+
+ show me your Rtl demo
+
+ ,
+ );
+ expect(Array.from(container.children)).toMatchSnapshot();
+ });
+
+ it('should right work when content is null & title is null', () => {
+ expect(() => {
+ render(
+ setArrow(val)}
+ style={{ marginBottom: 24 }}
+ />
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/popover/demo/basic.md b/packages/meta/src/popover/demo/basic.md
new file mode 100644
index 0000000..2954cf6
--- /dev/null
+++ b/packages/meta/src/popover/demo/basic.md
@@ -0,0 +1,13 @@
+## zh-CN
+
+最简单的用法，浮层的大小由内容区域决定。
+
+## en-US
+
+The most basic example. The size of the floating layer depends on the contents region.
+
+
diff --git a/packages/meta/src/popover/demo/basic.tsx b/packages/meta/src/popover/demo/basic.tsx
new file mode 100644
index 0000000..2838b61
--- /dev/null
+++ b/packages/meta/src/popover/demo/basic.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, Popover } from 'antd';
+
+const content = (
+
+
+
+);
+
+export default App;
diff --git a/packages/meta/src/popover/demo/component-token.md b/packages/meta/src/popover/demo/component-token.md
new file mode 100644
index 0000000..de91480
--- /dev/null
+++ b/packages/meta/src/popover/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
diff --git a/packages/meta/src/popover/demo/component-token.tsx b/packages/meta/src/popover/demo/component-token.tsx
new file mode 100644
index 0000000..701300e
--- /dev/null
+++ b/packages/meta/src/popover/demo/component-token.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { ConfigProvider, Popover } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
+
+const content = (
+
+
+);
+
+export default App;
diff --git a/packages/meta/src/popover/demo/control.md b/packages/meta/src/popover/demo/control.md
new file mode 100644
index 0000000..3c46666
--- /dev/null
+++ b/packages/meta/src/popover/demo/control.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `open` 属性控制浮层显示。
+
+## en-US
+
+Use `open` prop to control the display of the card.
diff --git a/packages/meta/src/popover/demo/control.tsx b/packages/meta/src/popover/demo/control.tsx
new file mode 100644
index 0000000..ae245f9
--- /dev/null
+++ b/packages/meta/src/popover/demo/control.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Button, Popover } from 'antd';
+
+const App: React.FC = () => {
+ const [open, setOpen] = useState(false);
+
+ const hide = () => {
+ setOpen(false);
+ };
+
+ const handleOpenChange = (newOpen: boolean) => {
+ setOpen(newOpen);
+ };
+
+ return (
+ Close}
+ title="Title"
+ trigger="click"
+ open={open}
+ onOpenChange={handleOpenChange}
+ >
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/popover/demo/hover-with-click.md b/packages/meta/src/popover/demo/hover-with-click.md
new file mode 100644
index 0000000..5d49e5a
--- /dev/null
+++ b/packages/meta/src/popover/demo/hover-with-click.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+以下示例显示如何创建可悬停和单击的弹出窗口。
+
+## en-US
+
+The following example shows how to create a popover which can be hovered and clicked.
diff --git a/packages/meta/src/popover/demo/hover-with-click.tsx b/packages/meta/src/popover/demo/hover-with-click.tsx
new file mode 100644
index 0000000..bb39ac9
--- /dev/null
+++ b/packages/meta/src/popover/demo/hover-with-click.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Button, Popover } from 'antd';
+
+const App: React.FC = () => {
+ const [clicked, setClicked] = useState(false);
+ const [hovered, setHovered] = useState(false);
+
+ const hide = () => {
+ setClicked(false);
+ setHovered(false);
+ };
+
+ const handleHoverChange = (open: boolean) => {
+ setHovered(open);
+ setClicked(false);
+ };
+
+ const handleClickChange = (open: boolean) => {
+ setHovered(false);
+ setClicked(open);
+ };
+
+ const hoverContent =
+
+ {clickContent}
+ Close
+
+ }
+ title="Click title"
+ trigger="click"
+ open={clicked}
+ onOpenChange={handleClickChange}
+ >
+
+
+
+ );
+};
+
+export default App;
diff --git a/packages/meta/src/popover/demo/placement.md b/packages/meta/src/popover/demo/placement.md
new file mode 100644
index 0000000..061df30
--- /dev/null
+++ b/packages/meta/src/popover/demo/placement.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+位置有十二个方向。
+
+## en-US
+
+There are 12 `placement` options available.
diff --git a/packages/meta/src/popover/demo/placement.tsx b/packages/meta/src/popover/demo/placement.tsx
new file mode 100644
index 0000000..6debfc2
--- /dev/null
+++ b/packages/meta/src/popover/demo/placement.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button, Popover, ConfigProvider } from 'antd';
+
+const text = Title;
+
+const content = (
+ 基本
+范围选择器
+
+日期格式
+日期时间选择
+禁用
+不可选择日期和时间
+选择不超过七天的范围
+预设范围
+额外的页脚
+三种大小
+
+自定义状态
+无边框
+弹出位置
+受控面板
+自定义日期范围选择
+后缀图标
+\_InternalPanelDoNotUseOrYouWillBeFired
+
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+日期类组件包括以下五种形式。
+
+- DatePicker
+- DatePicker\[picker="month"]
+- DatePicker\[picker="week"]
+- DatePicker\[picker="year"]
+- DatePicker\[picker="quarter"] (4.1.0 新增)
+- RangePicker
+
+### 国际化配置
+
+默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
+
+如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
+
+
+:::warning
+在搭配 Nextjs 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
+:::
+
+```js
+import locale from 'antd/es/date-picker/locale/zh_CN';
+
+import 'dayjs/locale/zh-cn';
+
+
+ {icon || TypeIcon[type!]}
+ {children}
+
+);
+
+export interface PurePanelProps
+ extends Omit
+
+`;
+
+exports[`renders components/message/demo/other.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/render-panel.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/render-panel.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/thenable.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/thenable.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/message/demo/update.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/update.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/message/__tests__/__snapshots__/demo.test.ts.snap b/packages/meta/src/message/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 0000000..27458a2
--- /dev/null
+++ b/packages/meta/src/message/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,234 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+]
+`;
+
+exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/duration.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/hooks.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/info.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/loading.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/other.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/message/demo/render-panel.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/thenable.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/message/demo/update.tsx correctly 1`] = `
+
+`;
diff --git a/packages/meta/src/message/__tests__/config.test.tsx b/packages/meta/src/message/__tests__/config.test.tsx
new file mode 100644
index 0000000..62bfc20
--- /dev/null
+++ b/packages/meta/src/message/__tests__/config.test.tsx
@@ -0,0 +1,221 @@
+import message, { actWrapper } from '..';
+import { act } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
+import { awaitPromise, triggerMotionEnd } from './util';
+
+describe('message.config', () => {
+ beforeAll(() => {
+ actWrapper(act);
+ });
+
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ afterEach(async () => {
+ // Clean up
+ message.destroy();
+ await triggerMotionEnd();
+
+ jest.useRealTimers();
+
+ await awaitPromise();
+ });
+
+ it('should be able to config top', async () => {
+ message.config({
+ top: 100,
+ });
+
+ message.info('whatever');
+ await awaitPromise();
+
+ expect(document.querySelector('.ant-message')).toHaveStyle({
+ top: '100px',
+ });
+ });
+
+ it('should be able to config rtl', async () => {
+ message.config({
+ rtl: true,
+ });
+
+ message.info('whatever');
+ await awaitPromise();
+
+ expect(document.querySelector('.ant-message-rtl')).toBeTruthy();
+ });
+
+ it('should be able to config getContainer', async () => {
+ const div = document.createElement('div');
+ div.className = 'custom-container';
+ document.body.appendChild(div);
+
+ message.config({
+ getContainer: () => div,
+ });
+
+ message.info('whatever');
+ await awaitPromise();
+
+ expect(div.querySelector('.ant-message')).toBeTruthy();
+
+ message.config({
+ getContainer: undefined,
+ });
+
+ document.body.removeChild(div);
+ });
+
+ it('should be able to config maxCount', async () => {
+ message.config({
+ maxCount: 5,
+ });
+ for (let i = 0; i < 10; i += 1) {
+ message.info('test');
+ }
+
+ message.info('last');
+ await awaitPromise();
+
+ const noticeWithoutLeaving = Array.from(
+ document.querySelectorAll('.ant-message-notice-wrapper'),
+ ).filter((ele) => !ele.classList.contains('ant-message-move-up-leave'));
+
+ expect(noticeWithoutLeaving).toHaveLength(5);
+ expect(noticeWithoutLeaving[4].textContent).toEqual('last');
+
+ await triggerMotionEnd();
+ expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
+
+ message.config({
+ maxCount: undefined,
+ });
+ });
+
+ it('should be able to config duration', async () => {
+ message.config({
+ duration: 5,
+ });
+
+ message.info('last');
+ await awaitPromise();
+
+ expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
+
+ act(() => {
+ jest.advanceTimersByTime(4000);
+ });
+
+ expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
+
+ act(() => {
+ jest.advanceTimersByTime(2000);
+ });
+
+ await triggerMotionEnd('.ant-message-notice-wrapper');
+
+ expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
+
+ message.config({
+ duration: undefined,
+ });
+ });
+
+ it('customize prefix should auto get transition prefixCls', async () => {
+ message.config({
+ prefixCls: 'light-message',
+ });
+
+ message.info('bamboo');
+ await awaitPromise();
+
+ expect(document.querySelector('.light-message-move-up')).toBeTruthy();
+
+ message.config({
+ prefixCls: undefined,
+ });
+ });
+
+ it('should be able to global config rootPrefixCls', async () => {
+ ConfigProvider.config({ prefixCls: 'prefix-test', iconPrefixCls: 'bamboo' });
+
+ message.info('last');
+ await awaitPromise();
+
+ expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
+ expect(document.querySelectorAll('.prefix-test-message-notice')).toHaveLength(1);
+ expect(document.querySelectorAll('.bamboo-info-circle')).toHaveLength(1);
+ ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: null! });
+ });
+
+ it('should be able to config prefixCls', async () => {
+ message.config({
+ prefixCls: 'prefix-test',
+ });
+
+ message.info('last');
+ await awaitPromise();
+
+ expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
+ expect(document.querySelectorAll('.prefix-test-notice')).toHaveLength(1);
+ message.config({
+ prefixCls: '', // can be set to empty, ant default value is set in ConfigProvider
+ });
+ });
+
+ it('should be able to config transitionName', async () => {
+ message.config({
+ transitionName: '',
+ });
+
+ message.info('last');
+ await awaitPromise();
+
+ expect(document.querySelector('.ant-message-notice')).toBeTruthy();
+ expect(document.querySelectorAll('.ant-move-up-enter')).toHaveLength(0);
+ message.config({
+ transitionName: undefined,
+ });
+ });
+
+ it('should be able to config getContainer, although messageInstance already exists', async () => {
+ function createContainer(): [HTMLElement, VoidFunction] {
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+ return [
+ container,
+ () => {
+ document.body.removeChild(container);
+ },
+ ];
+ }
+ const [container1, removeContainer1] = createContainer();
+ const [container2, removeContainer2] = createContainer();
+ expect(container1.querySelector('.ant-message-notice')).toBeFalsy();
+ expect(container2.querySelector('.ant-message-notice')).toBeFalsy();
+
+ message.config({
+ getContainer: () => container1,
+ });
+ const messageText1 = 'mounted in container1';
+
+ message.info(messageText1);
+ await awaitPromise();
+ expect(container1.querySelector('.ant-message-notice')!.textContent).toEqual(messageText1);
+
+ // Config will directly change container
+ message.config({
+ getContainer: () => container2,
+ });
+ const messageText2 = 'mounted in container2';
+
+ message.info(messageText2);
+ expect(container2.querySelectorAll('.ant-message-notice')[1]!.textContent).toEqual(
+ messageText2,
+ );
+
+ removeContainer1();
+ removeContainer2();
+ });
+});
diff --git a/packages/meta/src/message/__tests__/demo-extend.test.ts b/packages/meta/src/message/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..54ac135
--- /dev/null
+++ b/packages/meta/src/message/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('message');
diff --git a/packages/meta/src/message/__tests__/demo.test.ts b/packages/meta/src/message/__tests__/demo.test.ts
new file mode 100644
index 0000000..707bf8f
--- /dev/null
+++ b/packages/meta/src/message/__tests__/demo.test.ts
@@ -0,0 +1,6 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('message', {
+ testRootProps: false,
+ nameCheckPathOnly: true,
+});
diff --git a/packages/meta/src/message/__tests__/hooks.test.tsx b/packages/meta/src/message/__tests__/hooks.test.tsx
new file mode 100644
index 0000000..d5ba98c
--- /dev/null
+++ b/packages/meta/src/message/__tests__/hooks.test.tsx
@@ -0,0 +1,302 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useEffect } from 'react';
+import { act } from 'react-dom/test-utils';
+import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+import message from '..';
+import { fireEvent, render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
+import { triggerMotionEnd } from './util';
+
+describe('message.hooks', () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('should work', () => {
+ const Context = React.createContext('light');
+
+ const Demo: React.FC = () => {
+ const [api, holder] = message.useMessage();
+
+ return (
+
+
+
+
+
+
+
+
+
+Hooks 调用（推荐）
+其他提示类型
+修改延时
+加载中
+Promise 接口
+自定义样式
+更新消息内容
+静态方法（不推荐）
+_InternalPanelDoNotUseOrYouWillBeFired
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+组件提供了一些静态方法，使用方式和参数如下：
+
+- `message.success(content, [duration], onClose)`
+- `message.error(content, [duration], onClose)`
+- `message.info(content, [duration], onClose)`
+- `message.warning(content, [duration], onClose)`
+- `message.loading(content, [duration], onClose)`
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -------- | ------------------------------------------- | ------------------- | ------ |
+| content | 提示内容 | ReactNode \| config | - |
+| 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.loading(config)`
+
+`config` 对象属性如下：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| className | 自定义 CSS class | string | - |
+| content | 提示内容 | ReactNode | - |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
+| icon | 自定义图标 | ReactNode | - |
+| key | 当前提示的唯一标志 | string \| number | - |
+| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
+| onClick | 点击 message 时触发的回调函数 | function | - |
+| onClose | 关闭时触发的回调函数 | function | - |
+
+### 全局方法
+
+还提供了全局配置和全局销毁方法：
+
+- `message.config(options)`
+- `message.destroy()`
+
+> 也可通过 `message.destroy(key)` 来关闭一条消息。
+
+#### message.config
+
+> 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)
+>
+> 当你想单独使用，可通过如下设置开启 RTL 模式。
+
+```js
+message.config({
+ top: 100,
+ duration: 2,
+ maxCount: 3,
+ rtl: true,
+ prefixCls: 'my-message',
+});
+```
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| duration | 默认自动关闭延时，单位秒 | number | 3 | |
+| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body | |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
+| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 |
+| rtl | 是否开启 RTL 模式 | boolean | false | |
+| top | 消息距离顶部的位置 | number | 8 | |
+
+## 主题变量（Design Token）
+
+## FAQ
+
+### 为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
+
+直接调用 message 方法，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
+
+当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `message.useMessage` 方法会返回 `api` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：
+
+```js
+const [api, contextHolder] = message.useMessage();
+
+return (
+ {getRenderPropValue(title)}
}
+ {getRenderPropValue(content)}
+
+ );
+};
+
+export interface PurePanelProps extends Omit
+
+
+ {children || getOverlay(prefixCls, title, content)}
+
+
+ );
+};
+
+const PurePanel: React.FC
+
,
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/arrow.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/basic.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/control.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/control.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/hover-with-click.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+ Title
+
+
+
+ Close
+
+
+
+
+
,
+
+
+
+
+
+ Click title
+
+
+
+
+
+
+ This is click content.
+
+
+ Close
+
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/hover-with-click.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/placement.tsx extend context correctly 1`] = `
+
+
+
+
+
+ Hover title
+
+
+
+
+ This is hover content.
+
+
+
+`;
+
+exports[`renders components/popover/demo/placement.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/render-panel.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/render-panel.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/triggerType.tsx extend context correctly 1`] = `
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+`;
+
+exports[`renders components/popover/demo/triggerType.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/popover/demo/wireframe.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/wireframe.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/popover/__tests__/__snapshots__/demo.test.tsx.snap b/packages/meta/src/popover/__tests__/__snapshots__/demo.test.tsx.snap
new file mode 100644
index 0000000..cd623d1
--- /dev/null
+++ b/packages/meta/src/popover/__tests__/__snapshots__/demo.test.tsx.snap
@@ -0,0 +1,613 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
,
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/basic.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/popover/demo/component-token.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/control.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/popover/demo/hover-with-click.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+`;
+
+exports[`renders components/popover/demo/render-panel.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`renders components/popover/demo/triggerType.tsx correctly 1`] = `
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+`;
+
+exports[`renders components/popover/demo/wireframe.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
diff --git a/packages/meta/src/popover/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/popover/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..b2ed21c
--- /dev/null
+++ b/packages/meta/src/popover/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover should be rendered correctly in RTL direction 1`] = `
+Array [
+
+ show me your Rtl demo
+ ,
+
+
+
+
+
+ Title
+
+
+
+
+
+ + Content +
++ Content +
+
+
+
,
+]
+`;
+
+exports[`Popover shows content for render functions 1`] = `"
+
+
+
+
+ RTL
+
+
+ some-title
some-content
+
+);
+
+const App: React.FC = () => {
+ const [arrow, setArrow] = useState('Show');
+
+ const mergedArrow = useMemo(() => {
+ if (arrow === 'Hide') {
+ return false;
+ }
+
+ if (arrow === 'Show') {
+ return true;
+ }
+
+ return {
+ pointAtCenter: true,
+ };
+ }, [arrow]);
+
+ return (
+ Content
+Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const App: React.FC = () => (
+ Content
+Content
+
+
+);
+
+const App: React.FC = () => (
+ Content
+Content
+This is hover content.
;
+ const clickContent = This is click content.
;
+ return (
+
+
+);
+
+const buttonWidth = 80;
+
+const App: React.FC = () => (
+ Content
+Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const App: React.FC = () => (
+ <>
+ Content
+Content
+
+
+);
+
+const App: React.FC = () => (
+ Content
+Content
+
+
+);
+
+const App: React.FC = () => (
+ Content
+Content
+{getRenderPropValue(title)}
}
+ {getRenderPropValue(content)}
+
+);
+
+const Popover = React.forwardRef基本
+三种触发方式
+位置
+箭头展示
+从浮层内关闭
+悬停点击弹出窗口
+_InternalPanelDoNotUseOrYouWillBeFired
+线框风格
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| ------- | -------- | ---------------------------- | ------ | ---- |
+| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
+| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
+
+更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
+
+## 注意
+
+请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+
+## FAQ
+
+请参考 [Tooltip FAQ](/components/tooltip#faq)。
diff --git a/packages/meta/src/popover/style/index.ts b/packages/meta/src/popover/style/index.ts
new file mode 100644
index 0000000..702c264
--- /dev/null
+++ b/packages/meta/src/popover/style/index.ts
@@ -0,0 +1,244 @@
+import { resetComponent } from '../../style';
+import { initZoomMotion } from '../../style/motion';
+import type { ArrowOffsetToken } from '../../style/placementArrow';
+import getArrowStyle, { getArrowOffsetToken } from '../../style/placementArrow';
+import type {
+ FullToken,
+ GenerateStyle,
+ GetDefaultToken,
+ PresetColorType,
+} from '../../theme/internal';
+import { PresetColors, genStyleHooks, mergeToken } from '../../theme/internal';
+import type { ArrowToken } from '../../style/roundedArrow';
+import { getArrowToken } from '../../style/roundedArrow';
+
+export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
+ /**
+ * @deprecated Please use `titleMinWidth` instead
+ * @desc 气泡卡片宽度
+ * @descEN Width of Popover
+ */
+ width?: number;
+ /**
+ * @deprecated Please use `titleMinWidth` instead
+ * @desc 气泡卡片最小宽度
+ * @descEN Min width of Popover
+ */
+ minWidth?: number;
+ /**
+ * @desc 气泡卡片标题最小宽度
+ * @descEN Min width of Popover title
+ */
+ titleMinWidth: number;
+ /**
+ * @desc 气泡卡片 z-index
+ * @descEN z-index of Popover
+ */
+ zIndexPopup: number;
+ /** @internal */
+ innerPadding: number;
+ /** @internal */
+ titlePadding: number | string;
+ /** @internal */
+ titleMarginBottom: number;
+ /** @internal */
+ titleBorderBottom: string;
+ /** @internal */
+ innerContentPadding: number | string;
+}
+// @ts-ignore
+export type PopoverToken = FullToken<'Popover'> & {
+ popoverBg: string;
+ popoverColor: string;
+};
+
+const genBaseStyle: GenerateStyle
+
+`;
+
+exports[`renders components/segmented/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/block.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/block.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/componentToken.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/componentToken.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/controlled.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/controlled.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/controlled-two.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
,
+ ,
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/segmented/demo/controlled-two.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/custom.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/custom.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/disabled.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/disabled.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/dynamic.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/dynamic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/icon-only.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/icon-only.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/size.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/size-consistent.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/size-consistent.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lucy
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/segmented/__tests__/__snapshots__/demo.test.ts.snap b/packages/meta/src/segmented/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 0000000..6931afb
--- /dev/null
+++ b/packages/meta/src/segmented/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,1459 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/controlled-two.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
,
+ ,
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lucy
+
+
+
+
+
+`;
diff --git a/packages/meta/src/segmented/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/segmented/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..7f7b105
--- /dev/null
+++ b/packages/meta/src/segmented/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,785 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Segmented render empty segmented 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render label with ReactNode 1`] = `
+
+
+`;
+
+exports[`Segmented render segmented ok 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with \`block\` 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with \`size#large\` 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with \`size#small\` 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with mixed options 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with numeric options 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with options null/undefined 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with options: disabled 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with string options 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented with thumb 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render segmented: disabled 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented render with icons 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Segmented rtl render component should be rendered correctly in RTL direction 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/packages/meta/src/segmented/__tests__/demo-extend.test.ts b/packages/meta/src/segmented/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..c7e9ef8
--- /dev/null
+++ b/packages/meta/src/segmented/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('segmented');
diff --git a/packages/meta/src/segmented/__tests__/demo.test.ts b/packages/meta/src/segmented/__tests__/demo.test.ts
new file mode 100644
index 0000000..6a3124c
--- /dev/null
+++ b/packages/meta/src/segmented/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('segmented');
diff --git a/packages/meta/src/segmented/__tests__/image.test.ts b/packages/meta/src/segmented/__tests__/image.test.ts
new file mode 100644
index 0000000..03f761f
--- /dev/null
+++ b/packages/meta/src/segmented/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Segmented image', () => {
+ imageDemoTest('segmented');
+});
diff --git a/packages/meta/src/segmented/__tests__/index.test.tsx b/packages/meta/src/segmented/__tests__/index.test.tsx
new file mode 100644
index 0000000..3b789c6
--- /dev/null
+++ b/packages/meta/src/segmented/__tests__/index.test.tsx
@@ -0,0 +1,350 @@
+import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render } from '../../../tests/utils';
+
+import type { SegmentedValue } from '../index';
+import Segmented from '../index';
+
+// Make CSSMotion working without transition
+jest.mock('rc-motion/lib/util/motion', () => ({
+ ...jest.requireActual('rc-motion/lib/util/motion'),
+ supportTransition: false,
+}));
+
+const prefixCls = 'ant-segmented';
+
+function expectMatchChecked(container: HTMLElement, checkedList: boolean[]) {
+ const inputList = Array.from(
+ container.querySelectorAllMonthly
, value: 'Monthly' }, + ]} + />, + ); + + expect(asFragment().firstChild).toMatchSnapshot(); + + expectMatchChecked(container, [true, false, false]); + + expect(container.querySelector('#weekly')?.textContent).toContain('Weekly'); + expect(container.querySelectorAll('h2')[0].textContent).toContain('Monthly'); + }); + + it('render segmented with defaultValue', () => { + const { container } = render( +{value}
+ {
+ setValue(e.target.value);
+ }}
+ />
+
+ );
+ };
+ const { container } = render(User 1
+
+ ),
+ value: 'user1',
+ },
+ {
+ label: (
+
+ K
+
+ ),
+ value: 'user2',
+ },
+ {
+ label: (
+ User 2
+
+
+ ),
+ value: 'user3',
+ },
+ ]}
+ />
+ User 3
+ Spring
+ Jan-Mar
+
+ ),
+ value: 'spring',
+ },
+ {
+ label: (
+
+
+ ),
+ value: 'summer',
+ },
+ {
+ label: (
+ Summer
+ Apr-Jun
+
+
+ ),
+ value: 'autumn',
+ },
+ {
+ label: (
+ Autumn
+ Jul-Sept
+
+
+ ),
+ value: 'winter',
+ },
+ ]}
+ />
+ Winter
+ Oct-Dec
+
+
+
+
+
+
+ 基本
+Block 分段选择器
+不可用
+受控模式
+自定义渲染
+动态数据
+三种大小
+设置图标
+只设置图标
+受控同步模式
+统一高度
+自定义组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+> 自 `antd@4.20.0` 版本开始提供该组件。
+
+### Segmented
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| block | 将宽度调整为父元素宽度的选项 | boolean | false | |
+| defaultValue | 默认选中的值 | string \| number | | |
+| disabled | 是否禁用 | boolean | false | |
+| onChange | 选项变化时的回调函数 | function(value: string \| number) | | |
+| options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
+| size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | |
+| value | 当前选中的值 | string \| number | | |
diff --git a/packages/meta/src/segmented/style/index.ts b/packages/meta/src/segmented/style/index.ts
new file mode 100644
index 0000000..c2c2690
--- /dev/null
+++ b/packages/meta/src/segmented/style/index.ts
@@ -0,0 +1,274 @@
+// @ts-nocheck
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { resetComponent, textEllipsis } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+import { unit } from '@ant-design/cssinjs';
+
+export interface ComponentToken {
+ /**
+ * @desc 选项文本颜色
+ * @descEN Text color of item
+ */
+ itemColor: string;
+ /**
+ * @desc 选项悬浮态文本颜色
+ * @descEN Text color of item when hover
+ */
+ itemHoverColor: string;
+ /**
+ * @desc 选项悬浮态背景颜色
+ * @descEN Background color of item when hover
+ */
+ itemHoverBg: string;
+ /**
+ * @desc 选项激活态背景颜色
+ * @descEN Background color of item when active
+ */
+ itemActiveBg: string;
+ /**
+ * @desc 选项选中时背景颜色
+ * @descEN Background color of item when selected
+ */
+ itemSelectedBg: string;
+ /**
+ * @desc 选项选中时文字颜色
+ * @descEN Text color of item when selected
+ */
+ itemSelectedColor: string;
+}
+
+interface SegmentedToken extends FullToken<'Segmented'> {
+ segmentedPadding: number;
+ segmentedBgColor: string;
+ segmentedPaddingHorizontal: number | string;
+ segmentedPaddingHorizontalSM: number | string;
+}
+
+// ============================== Mixins ==============================
+function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
+ return {
+ [`${cls}, ${cls}:hover, ${cls}:focus`]: {
+ color: token.colorTextDisabled,
+ cursor: 'not-allowed',
+ },
+ };
+}
+
+function getItemSelectedStyle(token: SegmentedToken): CSSObject {
+ return {
+ // @ts-ignore
+ backgroundColor: token.itemSelectedBg,
+ boxShadow: token.boxShadowTertiary,
+ };
+}
+
+const segmentedTextEllipsisCss: CSSObject = {
+ overflow: 'hidden',
+ // handle text ellipsis
+ ...textEllipsis,
+};
+
+// ============================== Styles ==============================
+const genSegmentedStyle: GenerateStyle
+
,
+ );
+};
+
+export default SkeletonAvatar;
diff --git a/packages/meta/src/skeleton/Button.tsx b/packages/meta/src/skeleton/Button.tsx
new file mode 100644
index 0000000..0645d6e
--- /dev/null
+++ b/packages/meta/src/skeleton/Button.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import type { SkeletonElementProps } from './Element';
+import Element from './Element';
+
+import useStyle from './style';
+
+export interface SkeletonButtonProps extends Omit
+
,
+ );
+};
+
+export default SkeletonButton;
diff --git a/packages/meta/src/skeleton/Element.tsx b/packages/meta/src/skeleton/Element.tsx
new file mode 100644
index 0000000..160e076
--- /dev/null
+++ b/packages/meta/src/skeleton/Element.tsx
@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+export interface SkeletonElementProps {
+ prefixCls?: string;
+ className?: string;
+ rootClassName?: string;
+ style?: React.CSSProperties;
+ size?: 'large' | 'small' | 'default' | number;
+ shape?: 'circle' | 'square' | 'round' | 'default';
+ active?: boolean;
+}
+
+const Element: React.FC
+
,
+ );
+};
+
+export default SkeletonImage;
diff --git a/packages/meta/src/skeleton/Input.tsx b/packages/meta/src/skeleton/Input.tsx
new file mode 100644
index 0000000..4df9784
--- /dev/null
+++ b/packages/meta/src/skeleton/Input.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import type { SkeletonElementProps } from './Element';
+import Element from './Element';
+
+import useStyle from './style';
+
+export interface SkeletonInputProps extends Omit
+
+
+
+
,
+ );
+};
+
+export default SkeletonInput;
diff --git a/packages/meta/src/skeleton/Node.tsx b/packages/meta/src/skeleton/Node.tsx
new file mode 100644
index 0000000..a924d26
--- /dev/null
+++ b/packages/meta/src/skeleton/Node.tsx
@@ -0,0 +1,49 @@
+import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
+import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import type { SkeletonElementProps } from './Element';
+import useStyle from './style';
+
+export interface SkeletonNodeProps extends Omit
+
,
+ );
+};
+
+export default SkeletonNode;
diff --git a/packages/meta/src/skeleton/Paragraph.tsx b/packages/meta/src/skeleton/Paragraph.tsx
new file mode 100644
index 0000000..19a6af4
--- /dev/null
+++ b/packages/meta/src/skeleton/Paragraph.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+type widthUnit = number | string;
+
+export interface SkeletonParagraphProps {
+ prefixCls?: string;
+ className?: string;
+ style?: React.CSSProperties;
+ width?: widthUnit | Array
+ {content}
+
+ -
+ {rowList}
+
+
+ );
+ }
+
+ let contentNode: React.ReactNode;
+ if (hasTitle || hasParagraph) {
+ // Title
+ let $title: React.ReactNode;
+ if (hasTitle) {
+ const titleProps: SkeletonTitleProps = {
+ prefixCls: `${prefixCls}-title`,
+ ...getTitleBasicProps(hasAvatar, hasParagraph),
+ ...getComponentProps(title),
+ };
+
+ $title =
+ {$title}
+ {paragraphNode}
+
+ );
+ }
+
+ const cls = classNames(
+ prefixCls,
+ {
+ [`${prefixCls}-with-avatar`]: hasAvatar,
+ [`${prefixCls}-active`]: active,
+ [`${prefixCls}-rtl`]: direction === 'rtl',
+ [`${prefixCls}-round`]: round,
+ },
+ skeleton?.className,
+ className,
+ rootClassName,
+ hashId,
+ cssVarCls,
+ );
+
+ return wrapCSSVar(
+
+ {avatarNode}
+ {contentNode}
+
,
+ );
+ }
+ return typeof children !== 'undefined' ? (children as React.ReactElement) : null;
+};
+
+Skeleton.Button = SkeletonButton;
+Skeleton.Avatar = SkeletonAvatar;
+Skeleton.Input = SkeletonInput;
+Skeleton.Image = SkeletonImage;
+Skeleton.Node = SkeletonNode;
+
+if (process.env.NODE_ENV !== 'production') {
+ Skeleton.displayName = 'Skeleton';
+}
+
+export default Skeleton;
diff --git a/packages/meta/src/skeleton/Title.tsx b/packages/meta/src/skeleton/Title.tsx
new file mode 100644
index 0000000..d1aa854
--- /dev/null
+++ b/packages/meta/src/skeleton/Title.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable jsx-a11y/heading-has-content */
+import classNames from 'classnames';
+import * as React from 'react';
+
+export interface SkeletonTitleProps {
+ prefixCls?: string;
+ className?: string;
+ style?: React.CSSProperties;
+ width?: number | string;
+}
+
+const Title: React.FC
+
+`;
+
+exports[`renders components/skeleton/demo/active.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/skeleton/demo/basic.tsx extend context correctly 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/skeleton/demo/children.tsx extend context correctly 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/children.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/skeleton/demo/complex.tsx extend context correctly 1`] = `
+
+
+ + Ant Design, a design language +
++ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/complex.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/skeleton/demo/componentToken.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+-
+
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/componentToken.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/skeleton/demo/element.tsx extend context correctly 1`] = `
+Array [
+
+
+
+-
+
+
+
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ , +
, +
+
+
,
+ , +
, +
+
+
,
+ , +
, +
+
,
+ ,
+ ,
+]
+`;
+
+exports[`renders components/skeleton/demo/element.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/skeleton/demo/list.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/skeleton/demo/list.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/skeleton/__tests__/__snapshots__/demo.test.tsx.snap b/packages/meta/src/skeleton/__tests__/__snapshots__/demo.test.tsx.snap
new file mode 100644
index 0000000..ddd9e9d
--- /dev/null
+++ b/packages/meta/src/skeleton/__tests__/__snapshots__/demo.test.tsx.snap
@@ -0,0 +1,794 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/skeleton/demo/active.tsx correctly 1`] = `
+
+
+
+
+ -
+
-
+ +++ +++ ++
-
+
+
+
+ -
+ +++ +++ ++
-
+
+
+
+ -
+ +++ +++ ++
-
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/basic.tsx correctly 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/children.tsx correctly 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/complex.tsx correctly 1`] = `
+
+
+ + Ant Design, a design language +
++ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/componentToken.tsx correctly 1`] = `
+
+
+
+
+
+
+-
+
+
+
+
+
+
+`;
+
+exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
+Array [
+
+
+
+-
+
+
+
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ , +
, +
+
+
,
+ , +
, +
+
+
,
+ , +
, +
+
,
+ ,
+ ,
+]
+`;
+
+exports[`renders components/skeleton/demo/list.tsx correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
diff --git a/packages/meta/src/skeleton/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/skeleton/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..722439a
--- /dev/null
+++ b/packages/meta/src/skeleton/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,636 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton avatar element active 1`] = `
+
+
+
+
+ -
+
-
+ +++ +++ ++
-
+
+
+
+ -
+ +++ +++ ++
-
+
+
+
+ -
+ +++ +++ ++
-
+
+
+
+
+
+
+`;
+
+exports[`Skeleton avatar element shape 1`] = `
+
+
+
+`;
+
+exports[`Skeleton avatar element shape 2`] = `
+
+
+
+`;
+
+exports[`Skeleton avatar element size 1`] = `
+
+
+
+`;
+
+exports[`Skeleton avatar element size 2`] = `
+
+
+
+`;
+
+exports[`Skeleton avatar element size 3`] = `
+
+
+
+`;
+
+exports[`Skeleton avatar element size 4`] = `
+
+
+
+`;
+
+exports[`Skeleton avatar shape 1`] = `
+
+
+`;
+
+exports[`Skeleton avatar shape 2`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 1`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 2`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 3`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 4`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton button element active 1`] = `
+
+
+
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton button element block 1`] = `
+
+
+
+`;
+
+exports[`Skeleton button element shape 1`] = `
+
+
+
+`;
+
+exports[`Skeleton button element shape 2`] = `
+
+
+
+`;
+
+exports[`Skeleton button element shape 3`] = `
+
+
+
+`;
+
+exports[`Skeleton button element size 1`] = `
+
+
+
+`;
+
+exports[`Skeleton button element size 2`] = `
+
+
+
+`;
+
+exports[`Skeleton button element size 3`] = `
+
+
+
+`;
+
+exports[`Skeleton custom node element should render normal 1`] = `
+
+
+`;
+
+exports[`Skeleton custom node element should render normal 2`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Skeleton image element should render normal 1`] = `
+
+
+ Custom Content Node
+
+
+
+
+`;
+
+exports[`Skeleton input element active 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`Skeleton input element size 1`] = `
+
+
+
+`;
+
+exports[`Skeleton input element size 2`] = `
+
+
+
+`;
+
+exports[`Skeleton input element size 3`] = `
+
+
+
+`;
+
+exports[`Skeleton paragraph rows 1`] = `
+
+
+`;
+
+exports[`Skeleton paragraph width 1`] = `
+
+
+
+-
+
+
+
+
+
+
+
+`;
+
+exports[`Skeleton paragraph width 2`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton rtl render component should be rendered correctly in RTL direction 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton should display without children and falsy loading props 1`] = `null`;
+
+exports[`Skeleton should round title and paragraph 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton should square avatar 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton should support style 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Skeleton should without avatar and paragraph 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton title width 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/meta/src/skeleton/__tests__/demo-extend.test.ts b/packages/meta/src/skeleton/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..ba64651
--- /dev/null
+++ b/packages/meta/src/skeleton/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('skeleton');
diff --git a/packages/meta/src/skeleton/__tests__/demo.test.tsx b/packages/meta/src/skeleton/__tests__/demo.test.tsx
new file mode 100644
index 0000000..e7c77fc
--- /dev/null
+++ b/packages/meta/src/skeleton/__tests__/demo.test.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('skeleton');
+
+rootPropsTest('skeleton', (Skeleton, props) =>
+
+
+-
+
+
+
+
Ant Design, a design language
++ We supply a series of design principles, practical patterns and high quality design + resources (Sketch and Axure), to help people create their product prototypes beautifully + and efficiently. +
++
+
+
+
+
+
- (
+
+ )
+ }
+ >
+ 基本
+复杂的组合
+动画效果
+按钮/头像/输入框/图像/自定义节点
+包含子组件
+列表
+自定义组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### Skeleton
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |
+| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#skeletonavatarprops) | false |
+| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
+| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true |
+| round | 为 true 时，段落和标题显示圆角 | boolean | false |
+| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#skeletontitleprops) | true |
+
+### SkeletonAvatarProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
+| shape | 指定头像的形状 | `circle` \| `square` | - |
+| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
+
+### SkeletonTitleProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ----- | -------------------- | ---------------- | ------ |
+| width | 设置标题占位图的宽度 | number \| string | - |
+
+### SkeletonParagraphProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rows | 设置段落占位图的行数 | number | - |
+| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
+
+### SkeletonButtonProps
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false | |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
+| shape | 指定按钮的形状 | `circle` \| `round` \| `square` \| `default` | - | |
+| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | |
+
+### SkeletonInputProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ------ | ---------------- | ------------------------------- | ------ |
+| active | 是否展示动画效果 | boolean | false |
+| size | 设置输入框的大小 | `large` \| `small` \| `default` | - |
diff --git a/packages/meta/src/skeleton/style/index.ts b/packages/meta/src/skeleton/style/index.ts
new file mode 100644
index 0000000..5ca35e9
--- /dev/null
+++ b/packages/meta/src/skeleton/style/index.ts
@@ -0,0 +1,417 @@
+// @ts-nocheck
+import type { CSSObject } from '@ant-design/cssinjs';
+import { Keyframes, unit } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+import type { CSSUtil } from '../../theme/util/genComponentStyleHook';
+
+export type ComponentToken = {
+ /** @deprecated use gradientFromColor instead. */
+ color: string;
+ /** @deprecated use gradientToColor instead. */
+ colorGradientEnd: string;
+ /**
+ * @desc 渐变色起点颜色
+ * @descEN Start color of gradient
+ */
+ gradientFromColor: string;
+ /**
+ * @desc 渐变色终点颜色
+ * @descEN End color of gradient
+ */
+ gradientToColor: string;
+ /**
+ * @desc 标题骨架屏高度
+ * @descEN Height of title skeleton
+ */
+ titleHeight: number;
+ /**
+ * @desc 骨架屏圆角
+ * @descEN Border radius of skeleton
+ */
+ blockRadius: number;
+ /**
+ * @desc 段落骨架屏上间距
+ * @descEN Margin top of paragraph skeleton
+ */
+ paragraphMarginTop: number;
+ /**
+ * @desc 段落骨架屏单行高度
+ * @descEN Line height of paragraph skeleton
+ */
+ paragraphLiHeight: number;
+};
+
+const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
+ '0%': {
+ backgroundPosition: '100% 50%',
+ },
+ '100%': {
+ backgroundPosition: '0 50%',
+ },
+});
+
+interface SkeletonToken extends FullToken<'Skeleton'> {
+ skeletonAvatarCls: string;
+ skeletonTitleCls: string;
+ skeletonParagraphCls: string;
+ skeletonButtonCls: string;
+ skeletonInputCls: string;
+ skeletonImageCls: string;
+ imageSizeBase: number | string;
+ skeletonLoadingBackground: string;
+ skeletonLoadingMotionDuration: string;
+ borderRadius: number;
+}
+
+const genSkeletonElementCommonSize = (size: number | string): CSSObject => ({
+ height: size,
+ lineHeight: unit(size),
+});
+
+const genSkeletonElementAvatarSize = (size: number | string): CSSObject => ({
+ width: size,
+ ...genSkeletonElementCommonSize(size),
+});
+
+const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
+ background: token.skeletonLoadingBackground,
+ backgroundSize: '400% 100%',
+ animationName: skeletonClsLoading,
+ animationDuration: token.skeletonLoadingMotionDuration,
+ animationTimingFunction: 'ease',
+ animationIterationCount: 'infinite',
+});
+const genSkeletonElementInputSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
+ width: calc(size).mul(5).equal(),
+ minWidth: calc(size).mul(5).equal(),
+ ...genSkeletonElementCommonSize(size),
+});
+
+const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
+ const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
+ token;
+ return {
+ [`${skeletonAvatarCls}`]: {
+ display: 'inline-block',
+ verticalAlign: 'top',
+ background: gradientFromColor,
+ ...genSkeletonElementAvatarSize(controlHeight),
+ },
+ [`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
+ borderRadius: '50%',
+ },
+ [`${skeletonAvatarCls}${skeletonAvatarCls}-lg`]: {
+ ...genSkeletonElementAvatarSize(controlHeightLG),
+ },
+ [`${skeletonAvatarCls}${skeletonAvatarCls}-sm`]: {
+ ...genSkeletonElementAvatarSize(controlHeightSM),
+ },
+ };
+};
+
+const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
+ const {
+ controlHeight,
+ borderRadiusSM,
+ skeletonInputCls,
+ controlHeightLG,
+ controlHeightSM,
+ gradientFromColor,
+ calc,
+ } = token;
+ return {
+ [`${skeletonInputCls}`]: {
+ display: 'inline-block',
+ verticalAlign: 'top',
+ background: gradientFromColor,
+ borderRadius: borderRadiusSM,
+ ...genSkeletonElementInputSize(controlHeight, calc),
+ },
+
+ [`${skeletonInputCls}-lg`]: {
+ ...genSkeletonElementInputSize(controlHeightLG, calc),
+ },
+
+ [`${skeletonInputCls}-sm`]: {
+ ...genSkeletonElementInputSize(controlHeightSM, calc),
+ },
+ };
+};
+
+const genSkeletonElementImageSize = (size: number | string): CSSObject => ({
+ width: size,
+ ...genSkeletonElementCommonSize(size),
+});
+
+const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
+ const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM, calc } = token;
+ return {
+ [`${skeletonImageCls}`]: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ verticalAlign: 'top',
+ background: gradientFromColor,
+ borderRadius: borderRadiusSM,
+ ...genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal()),
+ [`${skeletonImageCls}-path`]: {
+ fill: '#bfbfbf',
+ },
+ [`${skeletonImageCls}-svg`]: {
+ ...genSkeletonElementImageSize(imageSizeBase),
+ maxWidth: calc(imageSizeBase).mul(4).equal(),
+ maxHeight: calc(imageSizeBase).mul(4).equal(),
+ },
+ [`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: {
+ borderRadius: '50%',
+ },
+ },
+ [`${skeletonImageCls}${skeletonImageCls}-circle`]: {
+ borderRadius: '50%',
+ },
+ };
+};
+const genSkeletonElementButtonShape = (
+ token: SkeletonToken,
+ size: number,
+ buttonCls: string,
+): CSSObject => {
+ const { skeletonButtonCls } = token;
+ return {
+ [`${buttonCls}${skeletonButtonCls}-circle`]: {
+ width: size,
+ minWidth: size,
+ borderRadius: '50%',
+ },
+ [`${buttonCls}${skeletonButtonCls}-round`]: {
+ borderRadius: size,
+ },
+ };
+};
+
+const genSkeletonElementButtonSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
+ width: calc(size).mul(2).equal(),
+ minWidth: calc(size).mul(2).equal(),
+ ...genSkeletonElementCommonSize(size),
+});
+
+const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
+ const {
+ borderRadiusSM,
+ skeletonButtonCls,
+ controlHeight,
+ controlHeightLG,
+ controlHeightSM,
+ gradientFromColor,
+ calc,
+ } = token;
+ return {
+ [`${skeletonButtonCls}`]: {
+ display: 'inline-block',
+ verticalAlign: 'top',
+ background: gradientFromColor,
+ borderRadius: borderRadiusSM,
+ width: calc(controlHeight).mul(2).equal(),
+ minWidth: calc(controlHeight).mul(2).equal(),
+ ...genSkeletonElementButtonSize(controlHeight, calc),
+ },
+ ...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
+
+ [`${skeletonButtonCls}-lg`]: {
+ ...genSkeletonElementButtonSize(controlHeightLG, calc),
+ },
+ ...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`),
+
+ [`${skeletonButtonCls}-sm`]: {
+ ...genSkeletonElementButtonSize(controlHeightSM, calc),
+ },
+ ...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`),
+ };
+};
+
+// =============================== Base ===============================
+const genBaseStyle: GenerateStyle
+
+
,
+
+
+
,
+
+
+
,
+]
+`;
+
+exports[`renders components/slider/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/slider/demo/draggableTrack.tsx extend context correctly 1`] = `
+
+`;
+
+exports[`renders components/slider/demo/draggableTrack.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/slider/demo/event.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+]
+`;
+
+exports[`renders components/slider/demo/event.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/slider/demo/icon-slider.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/slider/demo/icon-slider.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/slider/demo/input-number.tsx extend context correctly 1`] = `
+
+
+`;
+
+exports[`renders components/slider/demo/input-number.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/slider/demo/mark.tsx extend context correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + included=true +
, + , + , ++ included=false +
, + , ++ marks & step +
, + , ++ step=null +
, + , +] +`; + +exports[`renders components/slider/demo/mark.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/slider/demo/multiple.tsx extend context correctly 1`] = ` + +`; + +exports[`renders components/slider/demo/multiple.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/slider/demo/reverse.tsx extend context correctly 1`] = ` +Array [ + , + , + Reversed: , + , +] +`; + +exports[`renders components/slider/demo/reverse.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/slider/demo/show-tooltip.tsx extend context correctly 1`] = ` + +`; + +exports[`renders components/slider/demo/show-tooltip.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/slider/demo/tip-formatter.tsx extend context correctly 1`] = ` +Array [ + , + , +] +`; + +exports[`renders components/slider/demo/tip-formatter.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/slider/demo/vertical.tsx extend context correctly 1`] = ` +Array [ +
+
+
,
+
+
+
,
+
+
+
,
+]
+`;
+
+exports[`renders components/slider/demo/vertical.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/slider/__tests__/__snapshots__/demo.test.ts.snap b/packages/meta/src/slider/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 0000000..31fac93
--- /dev/null
+++ b/packages/meta/src/slider/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,1473 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/slider/demo/basic.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+ Disabled: ,
+ ,
+]
+`;
+
+exports[`renders components/slider/demo/component-token.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
,
+
+
+
,
+
+
+
,
+]
+`;
+
+exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/slider/demo/event.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+]
+`;
+
+exports[`renders components/slider/demo/icon-slider.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
+
+
+`;
+
+exports[`renders components/slider/demo/mark.tsx correctly 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + included=true +
, + , + , ++ included=false +
, + , ++ marks & step +
, + , ++ step=null +
, + , +] +`; + +exports[`renders components/slider/demo/multiple.tsx correctly 1`] = ` + +`; + +exports[`renders components/slider/demo/reverse.tsx correctly 1`] = ` +Array [ + , + , + Reversed: , + , +] +`; + +exports[`renders components/slider/demo/tip-formatter.tsx correctly 1`] = ` +Array [ + , + , +] +`; + +exports[`renders components/slider/demo/vertical.tsx correctly 1`] = ` +Array [ +
+
+
,
+
+
+
,
+
+
+
,
+]
+`;
diff --git a/packages/meta/src/slider/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/slider/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..abbe2a6
--- /dev/null
+++ b/packages/meta/src/slider/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider rtl render component should be rendered correctly in RTL direction 1`] = `
+
+`;
+
+exports[`Slider should render in RTL direction 1`] = `
+
+
+
+`;
+
+exports[`Slider should show tooltip when hovering slider handler 1`] = `
+
+`;
+
+exports[`Slider should show tooltip when hovering slider handler 2`] = `
+
+`;
diff --git a/packages/meta/src/slider/__tests__/demo-extend.test.ts b/packages/meta/src/slider/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..204e647
--- /dev/null
+++ b/packages/meta/src/slider/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('slider');
diff --git a/packages/meta/src/slider/__tests__/demo.test.ts b/packages/meta/src/slider/__tests__/demo.test.ts
new file mode 100644
index 0000000..b5a32cc
--- /dev/null
+++ b/packages/meta/src/slider/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('slider', { skip: ['show-tooltip.tsx'] });
diff --git a/packages/meta/src/slider/__tests__/image.test.ts b/packages/meta/src/slider/__tests__/image.test.ts
new file mode 100644
index 0000000..192491a
--- /dev/null
+++ b/packages/meta/src/slider/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('Slider image', () => {
+ imageDemoTest('slider');
+});
diff --git a/packages/meta/src/slider/__tests__/index.test.tsx b/packages/meta/src/slider/__tests__/index.test.tsx
new file mode 100644
index 0000000..4a601de
--- /dev/null
+++ b/packages/meta/src/slider/__tests__/index.test.tsx
@@ -0,0 +1,227 @@
+import React from 'react';
+import Slider from '..';
+import focusTest from '../../../tests/shared/focusTest';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
+import ConfigProvider from '../../config-provider';
+import type { TooltipProps, TooltipRef } from '../../tooltip';
+import SliderTooltip from '../SliderTooltip';
+
+function tooltipProps(): TooltipProps {
+ return (global as any).tooltipProps;
+}
+
+jest.mock('../../tooltip', () => {
+ const ReactReal: typeof React = jest.requireActual('react');
+ const Tooltip = jest.requireActual('../../tooltip');
+ const TooltipComponent = Tooltip.default;
+ return ReactReal.forwardRef
+
+
+
+
+
+
+
+ );
+};
+
+const App: React.FC = () => included=true
+included=false
+marks & step
+step=null
+
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/packages/meta/src/slider/index.tsx b/packages/meta/src/slider/index.tsx
new file mode 100644
index 0000000..dc3db31
--- /dev/null
+++ b/packages/meta/src/slider/index.tsx
@@ -0,0 +1,284 @@
+import React from 'react';
+import classNames from 'classnames';
+import type { SliderProps as RcSliderProps } from 'rc-slider';
+import RcSlider from 'rc-slider';
+import type { SliderRef } from 'rc-slider/lib/Slider';
+
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import DisabledContext from '../config-provider/DisabledContext';
+import type { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
+import SliderTooltip from './SliderTooltip';
+import useStyle from './style';
+
+export type SliderMarks = RcSliderProps['marks'];
+
+interface HandleGeneratorInfo {
+ value?: number;
+ dragging?: boolean;
+ index: number;
+}
+
+export type HandleGeneratorFn = (config: {
+ tooltipPrefixCls?: string;
+ prefixCls?: string;
+ info: HandleGeneratorInfo;
+}) => React.ReactElement;
+
+export type Formatter = ((value?: number) => React.ReactNode) | null;
+
+export interface SliderTooltipProps extends AbstractTooltipProps {
+ prefixCls?: string;
+ open?: boolean;
+ placement?: TooltipPlacement;
+ getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+ formatter?: Formatter;
+ autoAdjustOverflow?: boolean;
+}
+
+export interface SliderBaseProps {
+ prefixCls?: string;
+ reverse?: boolean;
+ min?: number;
+ max?: number;
+ step?: null | number;
+ marks?: SliderMarks;
+ dots?: boolean;
+ included?: boolean;
+ disabled?: boolean;
+ keyboard?: boolean;
+ vertical?: boolean;
+ className?: string;
+ rootClassName?: string;
+ id?: string;
+ style?: React.CSSProperties;
+ tooltip?: SliderTooltipProps;
+ autoFocus?: boolean;
+
+ styles?: RcSliderProps['styles'];
+ classNames?: RcSliderProps['classNames'];
+ onFocus?: React.FocusEventHandler基本
+带输入框的滑块
+带 icon 的滑块
+自定义提示
+事件
+带标签的滑块
+垂直
+控制 ToolTip 的显示
+反向
+范围可拖拽
+多点组合
+组件 Token
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false | |
+| classNames | 语义化结构 className | Record (
diff --git a/packages/meta/src/tooltip/demo/colorful.tsx b/packages/meta/src/tooltip/demo/colorful.tsx
index d7b2676..2d124d8 100644
--- a/packages/meta/src/tooltip/demo/colorful.tsx
+++ b/packages/meta/src/tooltip/demo/colorful.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button, Divider, Space, Tooltip } from 'antd';
+import { Button, Divider, Space, Tooltip } from '@zhst/meta';
const colors = [
'pink',
diff --git a/packages/meta/src/tooltip/demo/debug.tsx b/packages/meta/src/tooltip/demo/debug.tsx
index e57e286..e8f1e22 100644
--- a/packages/meta/src/tooltip/demo/debug.tsx
+++ b/packages/meta/src/tooltip/demo/debug.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip } from '@zhst/meta';
const App: React.FC = () => (
(
diff --git a/packages/meta/src/tooltip/demo/disabled-children.tsx b/packages/meta/src/tooltip/demo/disabled-children.tsx
index 2d63d5c..fcdfc32 100644
--- a/packages/meta/src/tooltip/demo/disabled-children.tsx
+++ b/packages/meta/src/tooltip/demo/disabled-children.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button, Checkbox, Input, Select, Space, Tooltip, InputNumber } from 'antd';
+import { Button, Checkbox, Input, Select, Space, Tooltip, InputNumber } from '@zhst/meta';
const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
= (props) => {
+ const {
+ prefixCls: customizePrefixCls,
+ current = 0,
+ total = 6,
+ className,
+ style,
+ type,
+ ...restProps
+ } = props;
+
+ const { getPrefixCls } = React.useContext(ConfigContext);
+ const prefixCls = getPrefixCls('tour', customizePrefixCls);
+
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
+ return wrapCSSVar(
+
+ ,
+ );
+};
+
+export default withPureRenderTheme(PurePanel);
diff --git a/packages/meta/src/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/meta/src/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 0000000..1de764f
--- /dev/null
+++ b/packages/meta/src/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,1107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/tour/demo/basic.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+ (null);
+ return (
+ <>
+
+ coverBtnRef.current!,
+ },
+ ]}
+ />
+
+ );
+ };
+ const { getByText, baseElement } = render((null);
+ return (
+ <>
+
+ (null);
+ return (
+ <>
+
+ (null);
+ const [btnName, steBtnName] = React.useState('defaultBtn');
+ return (
+ <>
+ {btnName}
+
+
+ coverBtnRef.current!,
+ nextButtonProps: {
+ onClick: () => steBtnName('nextButton'),
+ },
+ },
+ {
+ title: '',
+ target: () => coverBtnRef.current!,
+ prevButtonProps: {
+ onClick: () => steBtnName('prevButton'),
+ },
+ nextButtonProps: {
+ onClick: () => steBtnName('finishButton'),
+ },
+ },
+ ]}
+ />
+
+ );
+ };
+ const { baseElement } = render((null);
+ return (
+ <>
+
+
+ coverBtnRef.current!,
+ },
+ ]}
+ />
+
+ );
+ };
+ const { getByText, baseElement } = render((null);
+ return (
+ <>
+
+
+ coverBtnRef.current!,
+ },
+ {
+ title: 'primary title',
+ description: 'primary description.',
+ target: () => coverBtnRef.current!,
+ type: 'primary',
+ },
+ ]}
+ />
+
+ );
+ };
+ const { getByText, container, baseElement } = render((null);
+ const placementBtnRef = useRef(null);
+
+ const [show, setShow] = React.useState();
+
+ useEffect(() => {
+ if (show === false) {
+ setShow(true);
+ }
+ }, [show]);
+
+ return (
+ <>
+ coverBtnRef.current!,
+ cover: (
+ 
+ ),
+ },
+ {
+ title: 'Adjust Placement',
+ description: 'Here is the content of Tour which show on the right.',
+ placement: 'right',
+ target: () => placementBtnRef.current!,
+ },
+ ]}
+ />
+ )}
+
+ );
+ };
+ const { getByText, container, baseElement } = render(test
, total }]} />);
+ expect(
+ container.querySelector
+
,
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tour/demo/indicator.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upload File
+
+
+ Put your files here.
+
+
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/indicator.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tour/demo/mask.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+ Upload File
+
+
+ Put your files here.
+
+
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/mask.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tour/demo/non-modal.tsx extend context correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upload File
+
+
+ Put your files here.
+
+
+
+
,
+
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/non-modal.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tour/demo/placement.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upload File
+
+
+ Put your files here.
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/placement.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tour/demo/render-panel.tsx extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+ Center
+
+
+ Displayed in the center of screen.
+
+
+
+
+`;
+
+exports[`renders components/tour/demo/render-panel.tsx extend context correctly 2`] = `[]`;
diff --git a/packages/meta/src/tour/__tests__/__snapshots__/demo.test.tsx.snap b/packages/meta/src/tour/__tests__/__snapshots__/demo.test.tsx.snap
new file mode 100644
index 0000000..75fff3a
--- /dev/null
+++ b/packages/meta/src/tour/__tests__/__snapshots__/demo.test.tsx.snap
@@ -0,0 +1,654 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders components/tour/demo/basic.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Hello World?!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Hello World?!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Hello World?!
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/indicator.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/mask.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/non-modal.tsx correctly 1`] = `
+Array [
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`renders components/tour/demo/placement.tsx correctly 1`] = `
+
+`;
+
+exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/meta/src/tour/__tests__/__snapshots__/index.test.tsx.snap b/packages/meta/src/tour/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..aa8c4d3
--- /dev/null
+++ b/packages/meta/src/tour/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,803 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tour Primary 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Hello World?!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Hello World?!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+ Hello World?!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ primary title
+
+
+ primary description.
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Tour basic 1`] = `
+
+
+
+
+`;
+
+exports[`Tour button props onClick 1`] = `
+
+
+
+
+
+
+
+
+ finishButton
+
+
+
+
+`;
+
+exports[`Tour controlled current 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Primary title
+
+
+ Primary description.
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Tour custom step pre btn & next btn className & style 1`] = `
+
+
+`;
+
+exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
+
+exports[`Tour single 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ Show in Center
+
+
+ Here is the content of Tour.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ cover title
+
+
+ cover description.
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Tour step support Primary 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ primary title
+
+
+ primary description.
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Tour steps is empty 1`] = `
+
+
+
+
+
+`;
+
+exports[`Tour steps props indicatorsRender 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/meta/src/tour/__tests__/demo-extend.test.ts b/packages/meta/src/tour/__tests__/demo-extend.test.ts
new file mode 100644
index 0000000..f8acbed
--- /dev/null
+++ b/packages/meta/src/tour/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('tour');
diff --git a/packages/meta/src/tour/__tests__/demo.test.tsx b/packages/meta/src/tour/__tests__/demo.test.tsx
new file mode 100644
index 0000000..31d55a5
--- /dev/null
+++ b/packages/meta/src/tour/__tests__/demo.test.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('tour', {
+ testRootProps: false,
+});
+
+rootPropsTest(
+ 'tour',
+ (Tour, props) => (
+
+
+
+
+
+
+ {show && (
+
+ ),
+ },
+ {
+ title: 'Adjust Placement',
+ description: 'Here is the content of Tour which show on the right.',
+ placement: 'right',
+ target: () => placementBtnRef.current!,
+ },
+ ]}
+ />
+ )}
+
+ );
+ };
+ const { getByText, container, baseElement } = render(
+
+
+
+
+ createBtnRef.current!,
+ mask: true,
+ },
+ {
+ title: '更新',
+ closeIcon: !closeIcon,
+ description: (
+
+ );
+ };
+
+ const { baseElement, rerender } = render(
+
+
+
+
+
+
+
+
+ 更新一条数据
+
+
+ ),
+ target: () => updateBtnRef.current!,
+ },
+ {
+ title: '删除',
+ closeIcon: Close,
+ description: (
+
+ 危险操作:删除一条数据
+
+
+ ),
+ target: () => deleteBtnRef.current!,
+ },
+ ]}
+ />
+
+ ),
+ target: () => ref1.current,
+ },
+ {
+ title: 'Save',
+ description: 'Save your changes.',
+ target: () => ref2.current,
+ },
+ {
+ title: 'Other Actions',
+ description: 'Click to see other actions.',
+ target: () => ref3.current,
+ },
+ ];
+
+ return (
+ <>
+
+
+
+ ),
+ target: () => ref1.current,
+ },
+ {
+ title: 'Save',
+ description: 'Save your changes.',
+ target: () => ref2.current,
+ mask: {
+ style: {
+ boxShadow: 'inset 0 0 15px #fff',
+ },
+ color: 'rgba(40, 0, 255, .4)',
+ },
+ },
+ {
+ title: 'Other Actions',
+ description: 'Click to see other actions.',
+ target: () => ref3.current,
+ mask: false,
+ },
+ ];
+
+ return (
+ <>
+
+
+
+ ),
+ target: () => ref1.current,
+ },
+ {
+ title: 'Save',
+ description: 'Save your changes.',
+ target: () => ref2.current,
+ },
+ {
+ title: 'Other Actions',
+ description: 'Click to see other actions.',
+ target: () => ref3.current,
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+);
diff --git a/packages/meta/src/tour/index.tsx b/packages/meta/src/tour/index.tsx
new file mode 100644
index 0000000..2305e5d
--- /dev/null
+++ b/packages/meta/src/tour/index.tsx
@@ -0,0 +1,94 @@
+import React, { useContext, useMemo } from 'react';
+import RCTour from '@rc-component/tour';
+import classNames from 'classnames';
+
+import { useZIndex } from '../_util/hooks/useZIndex';
+import getPlacements from '../_util/placements';
+import zIndexContext from '../_util/zindexContext';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import { useToken } from '../theme/internal';
+import type { TourProps, TourStepProps } from './interface';
+import TourPanel from './panelRender';
+import PurePanel from './PurePanel';
+import useStyle from './style';
+
+const Tour: React.FC基本
+非模态
+位置
+自定义遮罩样式
+自定义指示器
+\_InternalPanelDoNotUseOrYouWillBeFired
+
+## API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+### Tour
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
+| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 |
+| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
+| onClose | 关闭引导时的回调函数 | `Function` | - | |
+| onFinish | 引导完成时的回调 | `Function` | - | |
+| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
+| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
+| open | 打开引导 | `boolean` | - | |
+| onChange | 步骤改变时的回调，current 为当前的步骤 | `(current: number) => void` | - | |
+| current | 当前处于哪一步 | `number` | - | |
+| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
+| indicatorsRender | 自定义指示器 | `(current: number, total: number) => ReactNode` | - | 5.2.0 |
+| zIndex | Tour 的层级 | number | 1001 | 5.3.0 |
+| getPopupContainer | 设置 Tour 浮层的渲染节点，默认是 body | `(node: HTMLElement) => HTMLElement` | body | 5.12.0 |
+
+### TourStep 引导步骤卡片
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| target | 获取引导卡片指向的元素，为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - | |
+| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
+| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 |
+| cover | 展示的图片或者视频 | `ReactNode` | - | |
+| title | 标题 | `ReactNode` | - | |
+| description | 主要描述部分 | `ReactNode` | - | |
+| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | | |
+| onClose | 关闭引导时的回调函数 | `Function` | - | |
+| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
+| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
+| nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
+| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | |
+| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
diff --git a/packages/meta/src/tour/interface.ts b/packages/meta/src/tour/interface.ts
new file mode 100644
index 0000000..fd17d55
--- /dev/null
+++ b/packages/meta/src/tour/interface.ts
@@ -0,0 +1,38 @@
+import type {
+ TourProps as RCTourProps,
+ TourStepProps as RCTourStepProps,
+} from '@rc-component/tour';
+import type { ReactNode } from 'react';
+
+export interface TourProps extends Omit
+
+ ) : null;
+
+ const descriptionNode = isValidNode(description) ? (
+ {title}
+ {description}
+ ) : null;
+
+ const coverNode = isValidNode(cover) ? {cover}
: null;
+
+ let mergeIndicatorNode: ReactNode;
+
+ if (indicatorsRender) {
+ mergeIndicatorNode = indicatorsRender(current, total);
+ } else {
+ mergeIndicatorNode = [...Array.from({ length: total }).keys()].map
+
+ );
+};
+
+export default TourPanel;
diff --git a/packages/meta/src/tour/style/index.ts b/packages/meta/src/tour/style/index.ts
new file mode 100644
index 0000000..0b1a029
--- /dev/null
+++ b/packages/meta/src/tour/style/index.ts
@@ -0,0 +1,298 @@
+// @ts-nocheck
+import { TinyColor } from '@ctrl/tinycolor';
+
+import { resetComponent } from '../../style';
+import type { ArrowOffsetToken } from '../../style/placementArrow';
+import getArrowStyle, {
+ getArrowOffsetToken,
+ MAX_VERTICAL_CONTENT_RADIUS,
+} from '../../style/placementArrow';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+import type { ArrowToken } from '../../style/roundedArrow';
+import { getArrowToken } from '../../style/roundedArrow';
+import { unit } from '@ant-design/cssinjs';
+
+export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
+ /**
+ * @desc 弹层 z-index
+ * @descEN Tour popup z-index
+ */
+ zIndexPopup: number;
+ /**
+ * @desc 关闭按钮尺寸
+ * @descEN Close button size
+ */
+ closeBtnSize: number;
+ /**
+ * @desc Primary 模式上一步按钮背景色
+ * @descEN Background color of previous button in primary type
+ */
+ primaryPrevBtnBg: string;
+ /**
+ * @desc Primary 模式下一步按钮悬浮背景色
+ * @descEN Hover background color of next button in primary type
+ */
+ primaryNextBtnHoverBg: string;
+ /** @internal */
+ closeBtnHoverBg: string;
+}
+
+interface TourToken extends FullToken<'Tour'> {
+ tourZIndexPopup: number;
+ indicatorWidth: number;
+ indicatorHeight: number;
+ tourBorderRadius: number;
+}
+
+// =============================== Base ===============================
+const genBaseStyle: GenerateStyle
+ {closable && mergedDisplayCloseIcon}
+ {coverNode}
+ {headerNode}
+ {descriptionNode}
+
+
+ {total > 1 &&
+ {mergeIndicatorNode}
}
+
+ {current !== 0 ? (
+
+ ) : null}
+
+
+