From b856ebc3c47a955901a540d9947cbb1e3a1826a0 Mon Sep 17 00:00:00 2001 From: wangning Date: Sun, 27 Nov 2022 18:40:12 +0800 Subject: [PATCH 01/23] feat : new components app --- components/app/__tests__/demo-extend.test.ts | 3 + components/app/__tests__/demo.test.ts | 3 + components/app/__tests__/image.test.ts | 5 + components/app/__tests__/index.test.tsx | 302 +++++++++++++++++++ components/app/demo/basic.md | 7 + components/app/demo/basic.tsx | 15 + components/app/index.en-US.md | 47 +++ components/app/index.tsx | 42 +++ components/app/index.zh-CN.md | 49 +++ components/app/interface.ts | 38 +++ components/app/style/index.tsx | 228 ++++++++++++++ 11 files changed, 739 insertions(+) create mode 100644 components/app/__tests__/demo-extend.test.ts create mode 100644 components/app/__tests__/demo.test.ts create mode 100644 components/app/__tests__/image.test.ts create mode 100644 components/app/__tests__/index.test.tsx create mode 100644 components/app/demo/basic.md create mode 100644 components/app/demo/basic.tsx create mode 100644 components/app/index.en-US.md create mode 100644 components/app/index.tsx create mode 100644 components/app/index.zh-CN.md create mode 100644 components/app/interface.ts create mode 100644 components/app/style/index.tsx diff --git a/components/app/__tests__/demo-extend.test.ts b/components/app/__tests__/demo-extend.test.ts new file mode 100644 index 000000000000..6ef0a0d13da1 --- /dev/null +++ b/components/app/__tests__/demo-extend.test.ts @@ -0,0 +1,3 @@ +import { extendTest } from '../../../tests/shared/demoTest'; + +extendTest('app'); diff --git a/components/app/__tests__/demo.test.ts b/components/app/__tests__/demo.test.ts new file mode 100644 index 000000000000..fbcb9a76c9d6 --- /dev/null +++ b/components/app/__tests__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('app'); diff --git a/components/app/__tests__/image.test.ts b/components/app/__tests__/image.test.ts new file mode 100644 index 000000000000..e73f223ccffb --- /dev/null +++ b/components/app/__tests__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('app', () => { + imageDemoTest('tour'); +}); diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx new file mode 100644 index 000000000000..f55b0fad0528 --- /dev/null +++ b/components/app/__tests__/index.test.tsx @@ -0,0 +1,302 @@ +import React, { useRef, useEffect } from 'react'; +import Tour from '..'; +import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; +import { fireEvent, render, screen } from '../../../tests/utils'; +import panelRender from '../panelRender'; + +describe('Tour', () => { + mountTest(Tour); + rtlTest(Tour); + + it('single', () => { + const App: React.FC = () => { + const coverBtnRef = useRef(null); + return ( + <> + + coverBtnRef.current!, + }, + ]} + /> + + ); + }; + const { getByText, container } = render(); + expect(getByText('cover title')).toBeTruthy(); + expect(getByText('cover description.')).toBeTruthy(); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('steps is empty', () => { + const App: React.FC = () => { + const coverBtnRef = useRef(null); + return ( + <> + + + + + ); + }; + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('steps props stepRender', () => { + const onClickMock = jest.fn(); + const stepRenderMock = jest.fn(); + const App: React.FC = () => { + const coverBtnRef = useRef(null); + return ( + <> + + + + ); + }; + const { container } = render(); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + fireEvent.click(screen.getByRole('button', { name: 'Previous' })); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + fireEvent.click(screen.getByRole('button', { name: 'Finish' })); + expect(onClickMock).toHaveBeenCalledTimes(5); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('button props onClick', () => { + const App: React.FC = () => { + const coverBtnRef = useRef(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 { container } = render(); + expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn'); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + expect(container.querySelector('#btnName')).toHaveTextContent('nextButton'); + fireEvent.click(screen.getByRole('button', { name: 'Previous' })); + expect(container.querySelector('#btnName')).toHaveTextContent('prevButton'); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + fireEvent.click(screen.getByRole('button', { name: 'Finish' })); + expect(container.querySelector('#btnName')).toHaveTextContent('finishButton'); + }); + + it('Primary', () => { + const App: React.FC = () => { + const coverBtnRef = useRef(null); + return ( + <> + + + coverBtnRef.current!, + }, + ]} + /> + + ); + }; + const { getByText, container } = render(); + expect(getByText('primary description.')).toBeTruthy(); + expect(container.querySelector('.ant-tour')).toHaveClass('ant-tour-primary'); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('basic', () => { + const App: React.FC = () => { + const coverBtnRef = useRef(null); + const placementBtnRef = useRef(null); + + const [show, setShow] = React.useState(); + + useEffect(() => { + if (show === false) { + setShow(true); + } + }, [show]); + + return ( + <> +
+ + + +
+ + {show && ( + coverBtnRef.current!, + cover: ( + tour.png + ), + }, + { + title: 'Adjust Placement', + description: 'Here is the content of Tour which show on the right.', + placement: 'right', + target: () => placementBtnRef.current!, + }, + ]} + /> + )} + + ); + }; + const { getByText, container } = render(); + fireEvent.click(screen.getByRole('button', { name: 'Show' })); + expect(getByText('Show in Center')).toBeTruthy(); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + expect(getByText('Here is the content of Tour.')).toBeTruthy(); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + expect(getByText('Adjust Placement')).toBeTruthy(); + fireEvent.click(screen.getByRole('button', { name: 'Finish' })); + expect(container.querySelector('.ant-tour')).toBeFalsy(); + expect(container.firstChild).toMatchSnapshot(); + }); + it('panelRender should correct render when total is undefined', () => { + expect(() => { + panelRender({ total: undefined, title:
test
}, 0, 'default'); + }).not.toThrow(); + }); + + it('custom step pre btn & next btn className & style', () => { + const App: React.FC = () => ( + + ), + }, + ]} + /> + ); + + const { container } = render(); + // className + expect( + screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'), + ).toEqual(true); + // style + expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual( + 'rgb(69, 69, 255)', + ); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/components/app/demo/basic.md b/components/app/demo/basic.md new file mode 100644 index 000000000000..c2120a5571c8 --- /dev/null +++ b/components/app/demo/basic.md @@ -0,0 +1,7 @@ +## zh-CN + +最简单的用法。 + +## en-US + +The most basic usage. diff --git a/components/app/demo/basic.tsx b/components/app/demo/basic.tsx new file mode 100644 index 000000000000..98f4bd799cd9 --- /dev/null +++ b/components/app/demo/basic.tsx @@ -0,0 +1,15 @@ +import React, { useRef, useState } from 'react'; +import { App, Button } from 'antd'; + +export default () => { + const { message } = App.useApp(); + React.useEffect(() => { + message.success('Good!'); + }, []); + + return ( + +
Hello World
+ + ); +}; diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md new file mode 100644 index 000000000000..56be46380bef --- /dev/null +++ b/components/app/index.en-US.md @@ -0,0 +1,47 @@ +--- +category: Components +group: Data Display +title: App +cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg +demo: + cols: 2 +--- + +New App Component which provide global style & static function replacement. + +## When To Use + +Static function in React 18 concurrent mode will not well support. In v5, we recommend to use hooks for the static replacement. But it will make user manual work on define this. + +## Examples + + +Basic + +## API + +### Tour + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` | | +| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | +| onClose | Callback function on shutdown | `Function` | - | | +| mask | Whether to enable masking | `boolean` | `true` | | +| type | Type, affects the background color and text color | `default` `primary` | `default` | | + +### TourStep + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| target | Get the element the guide card points to. Empty makes it show in center of screen | `() => HTMLElement` `HTMLElement` | - | | +| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean` `{ pointAtCenter: boolean}` | `true` | | +| cover | Displayed pictures or videos | `ReactNode` | - | | +| title | title | `ReactNode` | - | | +| description | description | `ReactNode` | - | | +| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | +| onClose | Callback function on shutdown | `Function` | - | | +| mask | Whether to enable masking, the default follows the `mask` property of Tour | `boolean` | `true` | | +| type | Type, affects the background color and text color | `default` `primary` | `default` | | +| nextButtonProps | Properties of the Next button | `{ children: ReactNode; onClick: Function }` | - | | +| prevButtonProps | Properties of the previous button | `{ children: ReactNode; onClick: Function }` | - | | diff --git a/components/app/index.tsx b/components/app/index.tsx new file mode 100644 index 000000000000..5431cca1ba44 --- /dev/null +++ b/components/app/index.tsx @@ -0,0 +1,42 @@ +import React, { useContext } from 'react'; +import classNames from 'classnames'; +import type { ConfigConsumerProps } from '../config-provider'; +import { ConfigContext } from '../config-provider'; +import useStyle from './style'; +import type { TourProps } from './interface'; +import message from '../message'; +import notification from '../notification'; +import Modal from '../modal'; + +const AntdApp: React.ForwardRefRenderFunction & { + useApp: Function; +} = (props) => { + const { prefixCls: customizePrefixCls, type, rootClassName, children, ...restProps } = props; + const { getPrefixCls, direction } = useContext(ConfigContext); + const prefixCls = getPrefixCls('app', customizePrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); + const customClassName = classNames( + { + [`${prefixCls}-rtl`]: direction === 'rtl', + }, + { + [`${prefixCls}-primary`]: type === 'primary', + }, + hashId, + rootClassName, + ); + return wrapSSR(
{children}
); +}; + +const useApp = () => ({ + message, + notification, + Modal, +}); + +if (process.env.NODE_ENV !== 'production') { + AntdApp.displayName = 'AntdApp'; +} + +AntdApp.useApp = useApp; +export default AntdApp; diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md new file mode 100644 index 000000000000..0e1bc7affac1 --- /dev/null +++ b/components/app/index.zh-CN.md @@ -0,0 +1,49 @@ +--- +category: Components +subtitle: app包裹组件 +group: 数据展示 +title: App +cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg +demo: + cols: 2 +--- + +用于分步引导用户了解产品功能的气泡组件。自 `5.0.0` 版本开始提供该组件。 + +## 何时使用 + +常用于引导用户了解产品功能。 + +## 代码演示 + + +基本 + +## API + +### Tour + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | +| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | +| onClose | 关闭引导时的回调函数 | `Function` | - | | +| onFinish | 引导完成时的回调 | `Function` | - | | +| mask | 是否启用蒙层 | `boolean` | `true` | | +| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | | + +### TourStep 引导步骤卡片 + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| target | 获取引导卡片指向的元素，为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - | | +| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | +| cover | 展示的图片或者视频 | `ReactNode` | - | | +| title | 标题 | `ReactNode` | - | | +| description | 主要描述部分 | `ReactNode` | - | | +| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | | | +| onClose | 关闭引导时的回调函数 | `Function` | - | | +| mask | 是否启用蒙层，默认跟随 Tour 的 `mask` 属性 | `boolean` | `true` | | +| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | | +| nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | +| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | diff --git a/components/app/interface.ts b/components/app/interface.ts new file mode 100644 index 000000000000..fd682d759a65 --- /dev/null +++ b/components/app/interface.ts @@ -0,0 +1,38 @@ +import type { ReactNode } from 'react'; +import type { + TourProps as RCTourProps, + TourStepProps as RCTourStepProps, +} from '@rc-component/tour'; + +export type TourProps = Omit & { + steps?: TourStepProps[]; + className?: string; + prefixCls?: string; + current?: number; + stepRender?: (current: number, total: number) => ReactNode; + type?: 'default' | 'primary'; // default 类型，影响底色与文字颜色 +}; + +export interface TourStepProps extends RCTourStepProps { + cover?: ReactNode; // 展示的图片或者视频 + nextButtonProps?: { + children?: ReactNode; + onClick?: () => void; + className?: string; + style?: React.CSSProperties; + }; + prevButtonProps?: { + children?: ReactNode; + onClick?: () => void; + className?: string; + style?: React.CSSProperties; + }; + stepRender?: (current: number, total: number) => ReactNode; + type?: 'default' | 'primary'; // default 类型，影响底色与文字颜色 +} + +export interface TourLocale { + Next: string; + Previous: string; + Finish: string; +} diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx new file mode 100644 index 000000000000..34d77a03c529 --- /dev/null +++ b/components/app/style/index.tsx @@ -0,0 +1,228 @@ +import type { FullToken, GenerateStyle } from '../../theme'; +import { genComponentStyleHook, mergeToken } from '../../theme'; + +export interface ComponentToken {} + +interface AppToken extends FullToken<'Tour'> { + sliderWidth: number; + sliderHeight: number; +} + +// =============================== Base =============================== +const genBaseStyle: GenerateStyle = () => [ + { + 'html, body': { + width: '100%', + height: '100%', + }, + 'input::-ms-clear,input::-ms-reveal': { + display: 'none', + }, + '*, *::before, *::after': { + boxSizing: 'border-box', + }, + html: { + fontFamily: 'sans-serif', + lineHeight: 1.15, + WebkitTextSizeAdjust: '100%', + MsTextSizeAdjust: '100%', + MsOverflowStyle: 'scrollbar', + WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', + }, + '@-ms-viewport': { + width: 'device-width', + }, + body: { + margin: 0, + }, + "[tabindex='-1']:focus": { + outline: 'none', + }, + hr: { + boxSizing: 'content-box', + height: 0, + overflow: 'visible', + }, + 'h1, h2, h3, h4, h5, h6': { + marginTop: 0, + marginBottom: '0.5em', + fontWeight: '500', + }, + p: { + marginTop: '0', + marginBottom: '1em', + }, + 'abbr[title],abbr[data-original-title]': { + WebkitTextDecoration: 'underline dotted', + textDecoration: 'underline dotted', + borderBottom: '0', + cursor: 'help', + }, + address: { + marginBottom: '1em', + fontStyle: 'normal', + lineHeight: 'inherit', + }, + "input[type='text'],input[type='password'],input[type='number'],textarea": { + WebkitAppearance: 'none', + }, + 'ol, ul, dl': { + marginTop: 0, + marginBottom: '1em', + }, + 'ol ol, ul ul, ol ul, ul ol': { + marginBottom: 0, + }, + dt: { + fontWeight: 500, + }, + dd: { + marginBottom: '0.5em', + marginLeft: 0, + }, + blockquote: { + margin: '0 0 1em', + }, + dfn: { + fontStyle: 'italic', + }, + 'b, strong': { + fontWeight: 'bolder', + }, + small: { + fontSize: '80%', + }, + 'sub, sup': { + position: 'relative', + fontSize: '75%', + lineHeight: '0', + verticalAlign: 'baseline', + }, + sub: { + bottom: '-0.25em', + }, + sup: { + top: '-0.5em', + }, + 'pre, code, kbd, samp': { + fontSize: '1em', + fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", + }, + pre: { + marginTop: '0', + marginBottom: '1em', + overflow: 'auto', + }, + figure: { + margin: '0 0 1em', + }, + img: { + verticalAlign: 'middle', + borderStyle: 'none', + }, + "a, area, button, [role='button'], input:not([type='range']), label, select, summary, textarea": + { + touchAction: 'manipulation', + }, + table: { + borderCollapse: 'collapse', + }, + caption: { + paddingTop: '0.75em', + paddingBottom: '0.3em', + textAlign: 'left', + captionSide: 'bottom', + }, + 'input, button, select, optgroup, textarea': { + margin: '0', + color: 'inherit', + fontSize: 'inherit', + fontFamily: 'inherit', + lineHeight: 'inherit', + }, + 'button, input': { + overflow: 'visible', + }, + 'button, select': { + textTransform: 'none', + }, + "button, html [type='button'], [type='reset'], [type='submit']": { + WebkitAppearance: 'button', + }, + "button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner": + { + padding: '0', + borderStyle: 'none', + }, + "input[type='radio'], input[type='checkbox']": { + boxSizing: 'border-box', + padding: '0', + }, + "input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month']": { + WebkitAppearance: 'listbox', + }, + textarea: { + overflow: 'auto', + resize: 'vertical', + }, + fieldset: { + minWidth: 0, + margin: 0, + padding: 0, + border: 0, + }, + legend: { + display: 'block', + width: '100%', + maxWidth: '100%', + marginBottom: '0.5em', + padding: 0, + color: 'inherit', + fontSize: '1.5em', + lineHeight: 'inherit', + whiteSpace: 'normal', + }, + progress: { + verticalAlign: 'baseline', + }, + "[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button": { + height: 'auto', + }, + "[type='search']": { + outlineOffset: '-2px', + WebkitAppearance: 'none', + }, + "[type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration": { + WebkitAppearance: 'none', + }, + '::-webkit-file-upload-button': { + font: 'inherit', + WebkitAppearance: 'button', + }, + output: { + display: 'inline-block', + }, + summary: { + display: 'list-item', + }, + template: { + display: 'none', + }, + '[hidden]': { + display: 'none !important', + }, + mark: { + padding: '0.2em', + backgroundColor: '#feffe6', + }, + }, +]; + +// ============================== Export ============================== +export default genComponentStyleHook('antdApp', (token) => { + const AppToken = mergeToken(token, { + sliderWidth: 6, + sliderHeight: 6, + }); + return [genBaseStyle(AppToken)]; +}); From 19e1e80395b2256c3abb977032eec253d4f1ef72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Mon, 28 Nov 2022 19:38:04 +0800 Subject: [PATCH 02/23] feat: update app --- components/app/demo/basic.tsx | 15 ++++----- components/app/demo/modal.md | 7 ++++ components/app/demo/modal.tsx | 19 +++++++++++ components/app/index.en-US.md | 23 +------------ components/app/index.tsx | 60 ++++++++++++++++++++-------------- components/app/index.zh-CN.md | 25 ++------------ components/app/interface.ts | 38 --------------------- components/app/style/index.tsx | 15 +++------ components/index.tsx | 1 + 9 files changed, 76 insertions(+), 127 deletions(-) create mode 100644 components/app/demo/modal.md create mode 100644 components/app/demo/modal.tsx delete mode 100644 components/app/interface.ts diff --git a/components/app/demo/basic.tsx b/components/app/demo/basic.tsx index 98f4bd799cd9..3d8f3e84da6e 100644 --- a/components/app/demo/basic.tsx +++ b/components/app/demo/basic.tsx @@ -2,14 +2,11 @@ import React, { useRef, useState } from 'react'; import { App, Button } from 'antd'; export default () => { - const { message } = App.useApp(); - React.useEffect(() => { - message.success('Good!'); - }, []); + console.log('App.useApp()', App.useApp()); + // const { message } = App.useApp(); + // React.useEffect(() => { + // message.success('Good!'); + // }, []); - return ( - -
Hello World
- - ); + return
Hello World
; }; diff --git a/components/app/demo/modal.md b/components/app/demo/modal.md new file mode 100644 index 000000000000..cb5434871dd3 --- /dev/null +++ b/components/app/demo/modal.md @@ -0,0 +1,7 @@ +## zh-CN + +modal 弹窗 + +## en-US + +modal. diff --git a/components/app/demo/modal.tsx b/components/app/demo/modal.tsx new file mode 100644 index 000000000000..b9cd432eb1d6 --- /dev/null +++ b/components/app/demo/modal.tsx @@ -0,0 +1,19 @@ +import React, { useRef, useState } from 'react'; +import { App, Button } from 'antd'; + +export default () => { + const { Modal } = App.useApp(); + + const showModal = () => { + Modal.warning({ + title: 'This is a warning message', + content: 'some messages...some messages...', + }); + }; + + return ( + + ); +}; diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 56be46380bef..bf86b17159c4 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -17,31 +17,10 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec Basic +modal ## API -### Tour - | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` | | -| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | -| onClose | Callback function on shutdown | `Function` | - | | -| mask | Whether to enable masking | `boolean` | `true` | | -| type | Type, affects the background color and text color | `default` `primary` | `default` | | - -### TourStep - -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| target | Get the element the guide card points to. Empty makes it show in center of screen | `() => HTMLElement` `HTMLElement` | - | | -| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean` `{ pointAtCenter: boolean}` | `true` | | -| cover | Displayed pictures or videos | `ReactNode` | - | | -| title | title | `ReactNode` | - | | -| description | description | `ReactNode` | - | | -| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | -| onClose | Callback function on shutdown | `Function` | - | | -| mask | Whether to enable masking, the default follows the `mask` property of Tour | `boolean` | `true` | | -| type | Type, affects the background color and text color | `default` `primary` | `default` | | -| nextButtonProps | Properties of the Next button | `{ children: ReactNode; onClick: Function }` | - | | -| prevButtonProps | Properties of the previous button | `{ children: ReactNode; onClick: Function }` | - | | diff --git a/components/app/index.tsx b/components/app/index.tsx index 5431cca1ba44..1ea2c4036395 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -1,42 +1,54 @@ import React, { useContext } from 'react'; +import type { ReactNode } from 'react'; import classNames from 'classnames'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; import useStyle from './style'; -import type { TourProps } from './interface'; import message from '../message'; import notification from '../notification'; -import Modal from '../modal'; +import modal from '../modal'; -const AntdApp: React.ForwardRefRenderFunction & { +export type AppProps = { + className?: string; + prefixCls?: string; + children?: ReactNode; +}; + +let useApp = () => ({}); + +const App: React.ForwardRefRenderFunction & { useApp: Function; } = (props) => { - const { prefixCls: customizePrefixCls, type, rootClassName, children, ...restProps } = props; - const { getPrefixCls, direction } = useContext(ConfigContext); + const { prefixCls: customizePrefixCls, children, className } = props; + const { getPrefixCls } = useContext(ConfigContext); const prefixCls = getPrefixCls('app', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); - const customClassName = classNames( - { - [`${prefixCls}-rtl`]: direction === 'rtl', - }, - { - [`${prefixCls}-primary`]: type === 'primary', - }, - hashId, - rootClassName, + const customClassName = classNames(hashId, className); + + const [messageAPi, messageContextHolder] = message.useMessage(); + const [notificationApi, notificationContextHolder] = notification.useNotification(); + const [modalApi, ModalContextHolder] = modal.useModal(); + + useApp = () => ({ + message: messageAPi, + notification: notificationApi, + Modal: modalApi, + }); + + return wrapSSR( +
+ {ModalContextHolder} + {messageContextHolder} + {notificationContextHolder} + {children} +
, ); - return wrapSSR(
{children}
); }; -const useApp = () => ({ - message, - notification, - Modal, -}); - if (process.env.NODE_ENV !== 'production') { - AntdApp.displayName = 'AntdApp'; + App.displayName = 'App'; } -AntdApp.useApp = useApp; -export default AntdApp; +App.useApp = useApp; + +export default App; diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 0e1bc7affac1..c5076c72fe14 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -8,11 +8,11 @@ demo: cols: 2 --- -用于分步引导用户了解产品功能的气泡组件。自 `5.0.0` 版本开始提供该组件。 +新的应用程序组件，提供全局样式和静态功能替换。 ## 何时使用 -常用于引导用户了解产品功能。 +React 18 并发模式下的静态函数不能很好地支持。在 v5 中，我们建议使用钩子进行静态替换。但它会在用户手册中定义这个。 ## 代码演示 @@ -26,24 +26,3 @@ demo: | 属性 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | -| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | -| onClose | 关闭引导时的回调函数 | `Function` | - | | -| onFinish | 引导完成时的回调 | `Function` | - | | -| mask | 是否启用蒙层 | `boolean` | `true` | | -| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | | - -### TourStep 引导步骤卡片 - -| 属性 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| target | 获取引导卡片指向的元素，为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - | | -| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | -| cover | 展示的图片或者视频 | `ReactNode` | - | | -| title | 标题 | `ReactNode` | - | | -| description | 主要描述部分 | `ReactNode` | - | | -| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | | | -| onClose | 关闭引导时的回调函数 | `Function` | - | | -| mask | 是否启用蒙层，默认跟随 Tour 的 `mask` 属性 | `boolean` | `true` | | -| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | | -| nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | -| prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | diff --git a/components/app/interface.ts b/components/app/interface.ts deleted file mode 100644 index fd682d759a65..000000000000 --- a/components/app/interface.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { ReactNode } from 'react'; -import type { - TourProps as RCTourProps, - TourStepProps as RCTourStepProps, -} from '@rc-component/tour'; - -export type TourProps = Omit & { - steps?: TourStepProps[]; - className?: string; - prefixCls?: string; - current?: number; - stepRender?: (current: number, total: number) => ReactNode; - type?: 'default' | 'primary'; // default 类型，影响底色与文字颜色 -}; - -export interface TourStepProps extends RCTourStepProps { - cover?: ReactNode; // 展示的图片或者视频 - nextButtonProps?: { - children?: ReactNode; - onClick?: () => void; - className?: string; - style?: React.CSSProperties; - }; - prevButtonProps?: { - children?: ReactNode; - onClick?: () => void; - className?: string; - style?: React.CSSProperties; - }; - stepRender?: (current: number, total: number) => ReactNode; - type?: 'default' | 'primary'; // default 类型，影响底色与文字颜色 -} - -export interface TourLocale { - Next: string; - Previous: string; - Finish: string; -} diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx index 34d77a03c529..2093dee923df 100644 --- a/components/app/style/index.tsx +++ b/components/app/style/index.tsx @@ -3,10 +3,7 @@ import { genComponentStyleHook, mergeToken } from '../../theme'; export interface ComponentToken {} -interface AppToken extends FullToken<'Tour'> { - sliderWidth: number; - sliderHeight: number; -} +interface AppToken extends FullToken<'App'> {} // =============================== Base =============================== const genBaseStyle: GenerateStyle = () => [ @@ -219,10 +216,6 @@ const genBaseStyle: GenerateStyle = () => [ ]; // ============================== Export ============================== -export default genComponentStyleHook('antdApp', (token) => { - const AppToken = mergeToken(token, { - sliderWidth: 6, - sliderHeight: 6, - }); - return [genBaseStyle(AppToken)]; -}); +export default genComponentStyleHook('App', (token) => [ + genBaseStyle(mergeToken(token, {})), +]); diff --git a/components/index.tsx b/components/index.tsx index a9848329c2e1..806fdee89a83 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -135,6 +135,7 @@ export { default as Tooltip } from './tooltip'; export type { TooltipProps } from './tooltip'; export { default as Tour } from './tour'; export type { TourProps, TourStepProps } from './tour/interface'; +export { default as App } from './app'; export { default as Transfer } from './transfer'; export type { TransferProps } from './transfer'; export { default as Tree } from './tree'; From 86cf298c054e4934339cf8e51c5003a6a5c6c9b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Mon, 28 Nov 2022 20:26:42 +0800 Subject: [PATCH 03/23] feat: update app --- components/app/demo/basic.tsx | 14 +++++++------- components/app/demo/modal.tsx | 2 +- components/app/demo/notification.md | 7 +++++++ components/app/demo/notification.tsx | 20 ++++++++++++++++++++ components/app/demo/wrap.md | 7 +++++++ components/app/demo/wrap.tsx | 8 ++++++++ components/app/index.en-US.md | 4 +++- components/app/index.tsx | 22 ++++++++++------------ components/app/index.zh-CN.md | 7 ++++--- 9 files changed, 67 insertions(+), 24 deletions(-) create mode 100644 components/app/demo/notification.md create mode 100644 components/app/demo/notification.tsx create mode 100644 components/app/demo/wrap.md create mode 100644 components/app/demo/wrap.tsx diff --git a/components/app/demo/basic.tsx b/components/app/demo/basic.tsx index 3d8f3e84da6e..7a63a88a7085 100644 --- a/components/app/demo/basic.tsx +++ b/components/app/demo/basic.tsx @@ -1,12 +1,12 @@ -import React, { useRef, useState } from 'react'; -import { App, Button } from 'antd'; +import React from 'react'; +import { App } from 'antd'; export default () => { - console.log('App.useApp()', App.useApp()); - // const { message } = App.useApp(); - // React.useEffect(() => { - // message.success('Good!'); - // }, []); + const { message } = App.useApp(); + + React.useEffect(() => { + message.success('Good!'); + }, [message]); return
Hello World
; }; diff --git a/components/app/demo/modal.tsx b/components/app/demo/modal.tsx index b9cd432eb1d6..c52bfa6c4dbe 100644 --- a/components/app/demo/modal.tsx +++ b/components/app/demo/modal.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React from 'react'; import { App, Button } from 'antd'; export default () => { diff --git a/components/app/demo/notification.md b/components/app/demo/notification.md new file mode 100644 index 000000000000..159433a6f04d --- /dev/null +++ b/components/app/demo/notification.md @@ -0,0 +1,7 @@ +## zh-CN + +notification 弹窗 + +## en-US + +use notification. diff --git a/components/app/demo/notification.tsx b/components/app/demo/notification.tsx new file mode 100644 index 000000000000..51502a8a1229 --- /dev/null +++ b/components/app/demo/notification.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { App, Button } from 'antd'; + +export default () => { + const { notification } = App.useApp(); + + const showNotification = () => { + notification.info({ + message: `Notification topLeft`, + description: 'Hello, Ant Design!!', + placement: 'topLeft', + }); + }; + + return ( + + ); +}; diff --git a/components/app/demo/wrap.md b/components/app/demo/wrap.md new file mode 100644 index 000000000000..a07038d96c46 --- /dev/null +++ b/components/app/demo/wrap.md @@ -0,0 +1,7 @@ +## zh-CN + +作为包裹容器 + +## en-US + +use as a container for wrapping. diff --git a/components/app/demo/wrap.tsx b/components/app/demo/wrap.tsx new file mode 100644 index 000000000000..27949cc39129 --- /dev/null +++ b/components/app/demo/wrap.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { App } from 'antd'; + +export default () => ( + +
Hello World
+ +); diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index bf86b17159c4..0c3622e73c61 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -group: Data Display +group: container components title: App cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg demo: @@ -18,6 +18,8 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec Basic modal +notification +wrap ## API diff --git a/components/app/index.tsx b/components/app/index.tsx index 1ea2c4036395..592b5328cb40 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -6,7 +6,7 @@ import { ConfigContext } from '../config-provider'; import useStyle from './style'; import message from '../message'; import notification from '../notification'; -import modal from '../modal'; +import Modal from '../modal'; export type AppProps = { className?: string; @@ -14,8 +14,6 @@ export type AppProps = { children?: ReactNode; }; -let useApp = () => ({}); - const App: React.ForwardRefRenderFunction & { useApp: Function; } = (props) => { @@ -25,15 +23,9 @@ const App: React.ForwardRefRenderFunction & { const [wrapSSR, hashId] = useStyle(prefixCls); const customClassName = classNames(hashId, className); - const [messageAPi, messageContextHolder] = message.useMessage(); - const [notificationApi, notificationContextHolder] = notification.useNotification(); - const [modalApi, ModalContextHolder] = modal.useModal(); - - useApp = () => ({ - message: messageAPi, - notification: notificationApi, - Modal: modalApi, - }); + const [, messageContextHolder] = message.useMessage(); + const [, notificationContextHolder] = notification.useNotification(); + const [, ModalContextHolder] = Modal.useModal(); return wrapSSR(
@@ -49,6 +41,12 @@ if (process.env.NODE_ENV !== 'production') { App.displayName = 'App'; } +const useApp = () => ({ + message, + notification, + Modal, +}); + App.useApp = useApp; export default App; diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index c5076c72fe14..1e9de4d37932 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -1,6 +1,6 @@ --- category: Components -subtitle: app包裹组件 +subtitle: 包裹组件 group: 数据展示 title: App cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg @@ -18,11 +18,12 @@ React 18 并发模式下的静态函数不能很好地支持。在 v5 中，我 基本 +对话框 +通知提醒框 +容器 ## API -### Tour - | 属性 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | From f6e2918fc856aaf747cf8266bf96ef0523174d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Mon, 28 Nov 2022 20:36:01 +0800 Subject: [PATCH 04/23] feat: update app --- components/app/__tests__/image.test.ts | 2 +- components/app/__tests__/index.test.tsx | 297 ++---------------------- 2 files changed, 15 insertions(+), 284 deletions(-) diff --git a/components/app/__tests__/image.test.ts b/components/app/__tests__/image.test.ts index e73f223ccffb..8d3a08346d67 100644 --- a/components/app/__tests__/image.test.ts +++ b/components/app/__tests__/image.test.ts @@ -1,5 +1,5 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('app', () => { - imageDemoTest('tour'); + imageDemoTest('app'); }); diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx index f55b0fad0528..8424e4200805 100644 --- a/components/app/__tests__/index.test.tsx +++ b/components/app/__tests__/index.test.tsx @@ -1,302 +1,33 @@ import React, { useRef, useEffect } from 'react'; -import Tour from '..'; +import App from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render, screen } from '../../../tests/utils'; -import panelRender from '../panelRender'; -describe('Tour', () => { - mountTest(Tour); - rtlTest(Tour); +describe('App', () => { + mountTest(App); + rtlTest(App); it('single', () => { - const App: React.FC = () => { - const coverBtnRef = useRef(null); + const Dome: React.FC = () => { + const { message } = App.useApp(); + const showMessage = () => { + message.success('success!!'); + }; return ( <> - - coverBtnRef.current!, - }, - ]} - /> + +
Hello World
+ ); }; - const { getByText, container } = render(); + const { getByText, container } = render(); expect(getByText('cover title')).toBeTruthy(); expect(getByText('cover description.')).toBeTruthy(); expect(container.firstChild).toMatchSnapshot(); }); - - it('steps is empty', () => { - const App: React.FC = () => { - const coverBtnRef = useRef(null); - return ( - <> - - - - - ); - }; - const { container } = render(); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('steps props stepRender', () => { - const onClickMock = jest.fn(); - const stepRenderMock = jest.fn(); - const App: React.FC = () => { - const coverBtnRef = useRef(null); - return ( - <> - - - - ); - }; - const { container } = render(); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - fireEvent.click(screen.getByRole('button', { name: 'Previous' })); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - fireEvent.click(screen.getByRole('button', { name: 'Finish' })); - expect(onClickMock).toHaveBeenCalledTimes(5); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('button props onClick', () => { - const App: React.FC = () => { - const coverBtnRef = useRef(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 { container } = render(); - expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn'); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - expect(container.querySelector('#btnName')).toHaveTextContent('nextButton'); - fireEvent.click(screen.getByRole('button', { name: 'Previous' })); - expect(container.querySelector('#btnName')).toHaveTextContent('prevButton'); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - fireEvent.click(screen.getByRole('button', { name: 'Finish' })); - expect(container.querySelector('#btnName')).toHaveTextContent('finishButton'); - }); - - it('Primary', () => { - const App: React.FC = () => { - const coverBtnRef = useRef(null); - return ( - <> - - - coverBtnRef.current!, - }, - ]} - /> - - ); - }; - const { getByText, container } = render(); - expect(getByText('primary description.')).toBeTruthy(); - expect(container.querySelector('.ant-tour')).toHaveClass('ant-tour-primary'); - expect(container.firstChild).toMatchSnapshot(); - }); - - it('basic', () => { - const App: React.FC = () => { - const coverBtnRef = useRef(null); - const placementBtnRef = useRef(null); - - const [show, setShow] = React.useState(); - - useEffect(() => { - if (show === false) { - setShow(true); - } - }, [show]); - - return ( - <> -
- - - -
- - {show && ( - coverBtnRef.current!, - cover: ( - tour.png - ), - }, - { - title: 'Adjust Placement', - description: 'Here is the content of Tour which show on the right.', - placement: 'right', - target: () => placementBtnRef.current!, - }, - ]} - /> - )} - - ); - }; - const { getByText, container } = render(); - fireEvent.click(screen.getByRole('button', { name: 'Show' })); - expect(getByText('Show in Center')).toBeTruthy(); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - expect(getByText('Here is the content of Tour.')).toBeTruthy(); - fireEvent.click(screen.getByRole('button', { name: 'Next' })); - expect(getByText('Adjust Placement')).toBeTruthy(); - fireEvent.click(screen.getByRole('button', { name: 'Finish' })); - expect(container.querySelector('.ant-tour')).toBeFalsy(); - expect(container.firstChild).toMatchSnapshot(); - }); - it('panelRender should correct render when total is undefined', () => { - expect(() => { - panelRender({ total: undefined, title:
test
}, 0, 'default'); - }).not.toThrow(); - }); - - it('custom step pre btn & next btn className & style', () => { - const App: React.FC = () => ( - - ), - }, - ]} - /> - ); - - const { container } = render(); - // className - expect( - screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'), - ).toEqual(true); - // style - expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual( - 'rgb(69, 69, 255)', - ); - expect(container.firstChild).toMatchSnapshot(); - }); }); From 99e8b1acf91f419861efaa48b134c30c720a3ea2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Tue, 29 Nov 2022 20:09:17 +0800 Subject: [PATCH 05/23] feat: update app --- components/app/context.ts | 13 ++++++++++++ components/app/index.tsx | 42 ++++++++++++++++++++++----------------- 2 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 components/app/context.ts diff --git a/components/app/context.ts b/components/app/context.ts new file mode 100644 index 000000000000..c5328c6f5892 --- /dev/null +++ b/components/app/context.ts @@ -0,0 +1,13 @@ +import React from 'react'; +import type { MessageInstance } from '../message/interface'; +import type { NotificationInstance } from '../notification/interface'; +import type { ModalStaticFunctions } from '../modal/confirm'; + +export interface useAppProps { + message: MessageInstance; + notification: NotificationInstance; + Modal: Omit; +} +const AppContext = React.createContext(undefined); + +export default AppContext; diff --git a/components/app/index.tsx b/components/app/index.tsx index 592b5328cb40..0402732f5ca0 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -7,6 +7,8 @@ import useStyle from './style'; import message from '../message'; import notification from '../notification'; import Modal from '../modal'; +import AppContext from './context'; +import type { useAppProps } from './context'; export type AppProps = { className?: string; @@ -15,7 +17,7 @@ export type AppProps = { }; const App: React.ForwardRefRenderFunction & { - useApp: Function; + useApp: () => useAppProps | undefined; } = (props) => { const { prefixCls: customizePrefixCls, children, className } = props; const { getPrefixCls } = useContext(ConfigContext); @@ -23,17 +25,28 @@ const App: React.ForwardRefRenderFunction & { const [wrapSSR, hashId] = useStyle(prefixCls); const customClassName = classNames(hashId, className); - const [, messageContextHolder] = message.useMessage(); - const [, notificationContextHolder] = notification.useNotification(); - const [, ModalContextHolder] = Modal.useModal(); + const [messageApi, messageContextHolder] = message.useMessage(); + const [notificationApi, notificationContextHolder] = notification.useNotification(); + const [ModalApi, ModalContextHolder] = Modal.useModal(); + + const memoizedContextValue = React.useMemo( + () => ({ + message: messageApi, + notification: notificationApi, + Modal: ModalApi, + }), + [messageApi, notificationApi, ModalApi], + ); return wrapSSR( -
- {ModalContextHolder} - {messageContextHolder} - {notificationContextHolder} - {children} -
, + +
+ {ModalContextHolder} + {messageContextHolder} + {notificationContextHolder} + {children} +
+ , ); }; @@ -41,12 +54,5 @@ if (process.env.NODE_ENV !== 'production') { App.displayName = 'App'; } -const useApp = () => ({ - message, - notification, - Modal, -}); - -App.useApp = useApp; - +App.useApp = () => useContext(AppContext); export default App; From 8ab0713b2000d1dd7a66f7eba528e83a1fa3ea97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Tue, 29 Nov 2022 22:05:40 +0800 Subject: [PATCH 06/23] feat: update app --- components/app/context.ts | 10 ++++++++-- components/app/demo/{basic.md => MyApp.md} | 0 components/app/demo/{wrap.tsx => MyApp.tsx} | 3 ++- components/app/demo/{basic.tsx => MyPage.tsx} | 5 +++-- components/app/demo/modal.md | 7 ------- components/app/demo/modal.tsx | 19 ------------------ components/app/demo/notification.md | 7 ------- components/app/demo/notification.tsx | 20 ------------------- components/app/demo/wrap.md | 7 ------- components/app/index.en-US.md | 5 ----- components/app/index.tsx | 18 +++++++++-------- components/app/index.zh-CN.md | 5 +---- 12 files changed, 24 insertions(+), 82 deletions(-) rename components/app/demo/{basic.md => MyApp.md} (100%) rename components/app/demo/{wrap.tsx => MyApp.tsx} (68%) rename components/app/demo/{basic.tsx => MyPage.tsx} (81%) delete mode 100644 components/app/demo/modal.md delete mode 100644 components/app/demo/modal.tsx delete mode 100644 components/app/demo/notification.md delete mode 100644 components/app/demo/notification.tsx delete mode 100644 components/app/demo/wrap.md diff --git a/components/app/context.ts b/components/app/context.ts index c5328c6f5892..65a606ec4930 100644 --- a/components/app/context.ts +++ b/components/app/context.ts @@ -3,11 +3,17 @@ import type { MessageInstance } from '../message/interface'; import type { NotificationInstance } from '../notification/interface'; import type { ModalStaticFunctions } from '../modal/confirm'; +type ModalType = Omit; export interface useAppProps { message: MessageInstance; notification: NotificationInstance; - Modal: Omit; + Modal: ModalType; } -const AppContext = React.createContext(undefined); + +const AppContext = React.createContext({ + message: {} as MessageInstance, + notification: {} as NotificationInstance, + Modal: {} as ModalType, +}); export default AppContext; diff --git a/components/app/demo/basic.md b/components/app/demo/MyApp.md similarity index 100% rename from components/app/demo/basic.md rename to components/app/demo/MyApp.md diff --git a/components/app/demo/wrap.tsx b/components/app/demo/MyApp.tsx similarity index 68% rename from components/app/demo/wrap.tsx rename to components/app/demo/MyApp.tsx index 27949cc39129..ce05640c2c2d 100644 --- a/components/app/demo/wrap.tsx +++ b/components/app/demo/MyApp.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { App } from 'antd'; +import MyPage from './MyPage'; export default () => ( -
Hello World
+ ); diff --git a/components/app/demo/basic.tsx b/components/app/demo/MyPage.tsx similarity index 81% rename from components/app/demo/basic.tsx rename to components/app/demo/MyPage.tsx index 7a63a88a7085..d0b0c4286c6a 100644 --- a/components/app/demo/basic.tsx +++ b/components/app/demo/MyPage.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { App } from 'antd'; -export default () => { +const MyPage = () => { const { message } = App.useApp(); - React.useEffect(() => { message.success('Good!'); }, [message]); return
Hello World
; }; + +export default MyPage; diff --git a/components/app/demo/modal.md b/components/app/demo/modal.md deleted file mode 100644 index cb5434871dd3..000000000000 --- a/components/app/demo/modal.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -modal 弹窗 - -## en-US - -modal. diff --git a/components/app/demo/modal.tsx b/components/app/demo/modal.tsx deleted file mode 100644 index c52bfa6c4dbe..000000000000 --- a/components/app/demo/modal.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { App, Button } from 'antd'; - -export default () => { - const { Modal } = App.useApp(); - - const showModal = () => { - Modal.warning({ - title: 'This is a warning message', - content: 'some messages...some messages...', - }); - }; - - return ( - - ); -}; diff --git a/components/app/demo/notification.md b/components/app/demo/notification.md deleted file mode 100644 index 159433a6f04d..000000000000 --- a/components/app/demo/notification.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -notification 弹窗 - -## en-US - -use notification. diff --git a/components/app/demo/notification.tsx b/components/app/demo/notification.tsx deleted file mode 100644 index 51502a8a1229..000000000000 --- a/components/app/demo/notification.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { App, Button } from 'antd'; - -export default () => { - const { notification } = App.useApp(); - - const showNotification = () => { - notification.info({ - message: `Notification topLeft`, - description: 'Hello, Ant Design!!', - placement: 'topLeft', - }); - }; - - return ( - - ); -}; diff --git a/components/app/demo/wrap.md b/components/app/demo/wrap.md deleted file mode 100644 index a07038d96c46..000000000000 --- a/components/app/demo/wrap.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -作为包裹容器 - -## en-US - -use as a container for wrapping. diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 0c3622e73c61..82cdadd013e5 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -16,11 +16,6 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec ## Examples -Basic -modal -notification -wrap - ## API | Property | Description | Type | Default | Version | diff --git a/components/app/index.tsx b/components/app/index.tsx index 0402732f5ca0..343936539e1c 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -4,9 +4,9 @@ import classNames from 'classnames'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; import useStyle from './style'; -import message from '../message'; -import notification from '../notification'; -import Modal from '../modal'; +import useMessage from '../message/useMessage'; +import useNotification from '../notification/useNotification'; +import useModal from '../modal/useModal'; import AppContext from './context'; import type { useAppProps } from './context'; @@ -16,8 +16,10 @@ export type AppProps = { children?: ReactNode; }; +const useApp: () => useAppProps = () => React.useContext(AppContext); + const App: React.ForwardRefRenderFunction & { - useApp: () => useAppProps | undefined; + useApp: () => useAppProps; } = (props) => { const { prefixCls: customizePrefixCls, children, className } = props; const { getPrefixCls } = useContext(ConfigContext); @@ -25,9 +27,9 @@ const App: React.ForwardRefRenderFunction & { const [wrapSSR, hashId] = useStyle(prefixCls); const customClassName = classNames(hashId, className); - const [messageApi, messageContextHolder] = message.useMessage(); - const [notificationApi, notificationContextHolder] = notification.useNotification(); - const [ModalApi, ModalContextHolder] = Modal.useModal(); + const [messageApi, messageContextHolder] = useMessage(); + const [notificationApi, notificationContextHolder] = useNotification(); + const [ModalApi, ModalContextHolder] = useModal(); const memoizedContextValue = React.useMemo( () => ({ @@ -54,5 +56,5 @@ if (process.env.NODE_ENV !== 'production') { App.displayName = 'App'; } -App.useApp = () => useContext(AppContext); +App.useApp = useApp; export default App; diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 1e9de4d37932..1b4ae0f847d5 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -17,10 +17,7 @@ React 18 并发模式下的静态函数不能很好地支持。在 v5 中，我 ## 代码演示 -基本 -对话框 -通知提醒框 -容器 +基本 ## API From 13ac67390485e3cc8252b93d8aafd61e345b2d8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Tue, 29 Nov 2022 22:06:00 +0800 Subject: [PATCH 07/23] feat: update app --- components/app/index.en-US.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 82cdadd013e5..dc42067283b6 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -16,6 +16,8 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec ## Examples +基本 + ## API | Property | Description | Type | Default | Version | From 6f7a1ca2836872b02af063922833afa7c99abe2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Wed, 30 Nov 2022 08:52:11 +0800 Subject: [PATCH 08/23] feat: update app --- .../__snapshots__/demo-extend.test.ts.snap | 51 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 51 +++++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 17 +++++++ components/app/__tests__/index.test.tsx | 38 +++++++------- components/app/demo/Modal.md | 7 +++ components/app/demo/Modal.tsx | 27 ++++++++++ components/app/demo/MyApp.md | 7 --- components/app/demo/MyApp.tsx | 9 ---- components/app/demo/message.md | 7 +++ .../app/demo/{MyPage.tsx => message.tsx} | 8 ++- components/app/demo/notification.md | 7 +++ components/app/demo/notification.tsx | 28 ++++++++++ components/app/index.en-US.md | 6 ++- components/app/index.zh-CN.md | 6 ++- components/app/style/index.tsx | 32 ++++++------ 15 files changed, 245 insertions(+), 56 deletions(-) create mode 100644 components/app/__tests__/__snapshots__/demo-extend.test.ts.snap create mode 100644 components/app/__tests__/__snapshots__/demo.test.ts.snap create mode 100644 components/app/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 components/app/demo/Modal.md create mode 100644 components/app/demo/Modal.tsx delete mode 100644 components/app/demo/MyApp.md delete mode 100644 components/app/demo/MyApp.tsx create mode 100644 components/app/demo/message.md rename components/app/demo/{MyPage.tsx => message.tsx} (71%) create mode 100644 components/app/demo/notification.md create mode 100644 components/app/demo/notification.tsx diff --git a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000000..68c7e320117c --- /dev/null +++ b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/app/demo/Modal.tsx extend context correctly 1`] = ` +
+ +
+`; + +exports[`renders ./components/app/demo/message.tsx extend context correctly 1`] = ` +
+
+ Hello World +
+
+`; + +exports[`renders ./components/app/demo/myApp.tsx extend context correctly 1`] = ` +
+
+ Hello World +
+
+`; + +exports[`renders ./components/app/demo/notification.tsx extend context correctly 1`] = ` +
+ +
+`; diff --git a/components/app/__tests__/__snapshots__/demo.test.ts.snap b/components/app/__tests__/__snapshots__/demo.test.ts.snap new file mode 100644 index 000000000000..f6abd7718d19 --- /dev/null +++ b/components/app/__tests__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/app/demo/Modal.tsx correctly 1`] = ` +
+ +
+`; + +exports[`renders ./components/app/demo/message.tsx correctly 1`] = ` +
+
+ Hello World +
+
+`; + +exports[`renders ./components/app/demo/myApp.tsx correctly 1`] = ` +
+
+ Hello World +
+
+`; + +exports[`renders ./components/app/demo/notification.tsx correctly 1`] = ` +
+ +
+`; diff --git a/components/app/__tests__/__snapshots__/index.test.tsx.snap b/components/app/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000000..37356865152f --- /dev/null +++ b/components/app/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`App rtl render component should be rendered correctly in RTL direction 1`] = ` +
+`; + +exports[`App single 1`] = ` +
+
+ Hello World +
+
+`; diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx index 8424e4200805..3ea627cc9cc2 100644 --- a/components/app/__tests__/index.test.tsx +++ b/components/app/__tests__/index.test.tsx @@ -1,33 +1,33 @@ -import React, { useRef, useEffect } from 'react'; +import React from 'react'; import App from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { fireEvent, render, screen } from '../../../tests/utils'; +import { render } from '../../../tests/utils'; describe('App', () => { mountTest(App); rtlTest(App); it('single', () => { - const Dome: React.FC = () => { + // Sub page + const MyPage = () => { const { message } = App.useApp(); - const showMessage = () => { - message.success('success!!'); - }; - return ( - <> - - -
Hello World
- - - ); + React.useEffect(() => { + message.success('Good!'); + }, [message]); + + return
Hello World
; }; - const { getByText, container } = render(); - expect(getByText('cover title')).toBeTruthy(); - expect(getByText('cover description.')).toBeTruthy(); + + // Entry component + const MyApp = () => ( + + + + ); + + const { getByText, container } = render(); + expect(getByText('Hello World')).toBeTruthy(); expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/components/app/demo/Modal.md b/components/app/demo/Modal.md new file mode 100644 index 000000000000..f07f87c7c8da --- /dev/null +++ b/components/app/demo/Modal.md @@ -0,0 +1,7 @@ +## zh-CN + +获取 `modal` 静态方法. + +## en-US + +Static method for `modal`. diff --git a/components/app/demo/Modal.tsx b/components/app/demo/Modal.tsx new file mode 100644 index 000000000000..902bbc64dd78 --- /dev/null +++ b/components/app/demo/Modal.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { App, Button } from 'antd'; + +// Sub page +const MyPage = () => { + const { Modal } = App.useApp(); + + const showModal = () => { + Modal.warning({ + title: 'This is a warning message', + content: 'some messages...some messages...', + }); + }; + + return ( + + ); +}; + +// Entry component +export default () => ( + + + +); diff --git a/components/app/demo/MyApp.md b/components/app/demo/MyApp.md deleted file mode 100644 index c2120a5571c8..000000000000 --- a/components/app/demo/MyApp.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -最简单的用法。 - -## en-US - -The most basic usage. diff --git a/components/app/demo/MyApp.tsx b/components/app/demo/MyApp.tsx deleted file mode 100644 index ce05640c2c2d..000000000000 --- a/components/app/demo/MyApp.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { App } from 'antd'; -import MyPage from './MyPage'; - -export default () => ( - - - -); diff --git a/components/app/demo/message.md b/components/app/demo/message.md new file mode 100644 index 000000000000..762f3613849f --- /dev/null +++ b/components/app/demo/message.md @@ -0,0 +1,7 @@ +## zh-CN + +获取 `message` 静态方法. + +## en-US + +Static method for `obtaining message`. diff --git a/components/app/demo/MyPage.tsx b/components/app/demo/message.tsx similarity index 71% rename from components/app/demo/MyPage.tsx rename to components/app/demo/message.tsx index d0b0c4286c6a..fa6754e22c21 100644 --- a/components/app/demo/MyPage.tsx +++ b/components/app/demo/message.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { App } from 'antd'; +// Sub page const MyPage = () => { const { message } = App.useApp(); React.useEffect(() => { @@ -10,4 +11,9 @@ const MyPage = () => { return
Hello World
; }; -export default MyPage; +// Entry component +export default () => ( + + + +); diff --git a/components/app/demo/notification.md b/components/app/demo/notification.md new file mode 100644 index 000000000000..28fa841aaba4 --- /dev/null +++ b/components/app/demo/notification.md @@ -0,0 +1,7 @@ +## zh-CN + +获取 `notification` 静态方法. + +## en-US + +Static method for `notification`. diff --git a/components/app/demo/notification.tsx b/components/app/demo/notification.tsx new file mode 100644 index 000000000000..7ba7db164c73 --- /dev/null +++ b/components/app/demo/notification.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { App, Button } from 'antd'; + +// Sub page +const MyPage = () => { + const { notification } = App.useApp(); + + const showNotification = () => { + notification.info({ + message: `Notification topLeft`, + description: 'Hello, Ant Design!!', + placement: 'topLeft', + }); + }; + + return ( + + ); +}; + +// Entry component +export default () => ( + + + +); diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index dc42067283b6..8d4a2422c154 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -16,10 +16,12 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec ## Examples -基本 +message +modal +notification ## API | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` | | +| useApp | Static method for obtaining message, modal, and notification | ()=>{message,notification,Modal} | - | | diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 1b4ae0f847d5..79910f1b6cd0 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -17,10 +17,12 @@ React 18 并发模式下的静态函数不能很好地支持。在 v5 中，我 ## 代码演示 -基本 +message +modal +notification ## API | 属性 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | +| useApp | 用于获取 message,Modal,notification 的静态方法 | ()=>{message,notification,Modal} | - | | diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx index 2093dee923df..401717025467 100644 --- a/components/app/style/index.tsx +++ b/components/app/style/index.tsx @@ -41,13 +41,13 @@ const genBaseStyle: GenerateStyle = () => [ overflow: 'visible', }, 'h1, h2, h3, h4, h5, h6': { - marginTop: 0, - marginBottom: '0.5em', + marginBlockStart: 0, + marginBlockEnd: '0.5em', fontWeight: '500', }, p: { - marginTop: '0', - marginBottom: '1em', + marginBlockStart: '0', + marginBlockEnd: '1em', }, 'abbr[title],abbr[data-original-title]': { WebkitTextDecoration: 'underline dotted', @@ -56,7 +56,7 @@ const genBaseStyle: GenerateStyle = () => [ cursor: 'help', }, address: { - marginBottom: '1em', + marginBlockEnd: '1em', fontStyle: 'normal', lineHeight: 'inherit', }, @@ -64,18 +64,18 @@ const genBaseStyle: GenerateStyle = () => [ WebkitAppearance: 'none', }, 'ol, ul, dl': { - marginTop: 0, - marginBottom: '1em', + marginBlockStart: 0, + marginBlockEnd: '1em', }, 'ol ol, ul ul, ol ul, ul ol': { - marginBottom: 0, + marginBlockEnd: 0, }, dt: { fontWeight: 500, }, dd: { - marginBottom: '0.5em', - marginLeft: 0, + marginBlockEnd: '0.5em', + marginInlineStart: 0, }, blockquote: { margin: '0 0 1em', @@ -106,8 +106,8 @@ const genBaseStyle: GenerateStyle = () => [ fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", }, pre: { - marginTop: '0', - marginBottom: '1em', + marginBlockStart: '0', + marginBlockEnd: '1em', overflow: 'auto', }, figure: { @@ -125,9 +125,9 @@ const genBaseStyle: GenerateStyle = () => [ borderCollapse: 'collapse', }, caption: { - paddingTop: '0.75em', - paddingBottom: '0.3em', - textAlign: 'left', + paddingBlockStart: '0.75em', + paddingBlockEnd: '0.3em', + textAlign: 'start', captionSide: 'bottom', }, 'input, button, select, optgroup, textarea': { @@ -172,7 +172,7 @@ const genBaseStyle: GenerateStyle = () => [ display: 'block', width: '100%', maxWidth: '100%', - marginBottom: '0.5em', + marginBlockEnd: '0.5em', padding: 0, color: 'inherit', fontSize: '1.5em', From 747ddf3be8c236cfad3fe2dda7fc8078bafd4dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Wed, 30 Nov 2022 11:56:08 +0800 Subject: [PATCH 09/23] feat: update style --- components/app/index.en-US.md | 24 ++++++++++++++++++++---- components/app/index.zh-CN.md | 24 ++++++++++++++++++++---- components/app/style/index.tsx | 24 ++++++++++++------------ 3 files changed, 52 insertions(+), 20 deletions(-) diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 8d4a2422c154..20f218164c61 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -20,8 +20,24 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec modal notification -## API +## How to use -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| useApp | Static method for obtaining message, modal, and notification | ()=>{message,notification,Modal} | - | | +```javascript +import React from 'react'; +import { App } from 'antd'; +const MyPage = () => { + const { message, notification, Modal } = App.useApp(); + message.success('Good!'); + notification.info({ message: 'Good' }); + Modal.warning({ title: 'Good' }); + // .... + // other message,notification,Modal static function + return
Hello word
; +}; + +const MyApp = () => ( + + + +); +``` diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 79910f1b6cd0..dca01539e860 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -21,8 +21,24 @@ React 18 并发模式下的静态函数不能很好地支持。在 v5 中，我 modal notification -## API +## How to use -| 属性 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| useApp | 用于获取 message,Modal,notification 的静态方法 | ()=>{message,notification,Modal} | - | | +```javascript +import React from 'react'; +import { App } from 'antd'; +const MyPage = () => { + const { message, notification, Modal } = App.useApp(); + message.success('Good!'); + notification.info({ message: 'Good' }); + Modal.warning({ title: 'Good' }); + // .... + // other message,notification,Modal static function + return
Hello word
; +}; + +const MyApp = () => ( + + + +); +``` diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx index 401717025467..3eb2cb282a39 100644 --- a/components/app/style/index.tsx +++ b/components/app/style/index.tsx @@ -1,12 +1,12 @@ import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; -export interface ComponentToken {} - -interface AppToken extends FullToken<'App'> {} +interface AppToken extends FullToken<'App'> { + lineHeightBase: number; +} // =============================== Base =============================== -const genBaseStyle: GenerateStyle = () => [ +const genBaseStyle: GenerateStyle = (token) => [ { 'html, body': { width: '100%', @@ -20,7 +20,7 @@ const genBaseStyle: GenerateStyle = () => [ }, html: { fontFamily: 'sans-serif', - lineHeight: 1.15, + lineHeight: token.lineHeightBase, WebkitTextSizeAdjust: '100%', MsTextSizeAdjust: '100%', MsOverflowStyle: 'scrollbar', @@ -46,13 +46,13 @@ const genBaseStyle: GenerateStyle = () => [ fontWeight: '500', }, p: { - marginBlockStart: '0', + marginBlockStart: 0, marginBlockEnd: '1em', }, 'abbr[title],abbr[data-original-title]': { WebkitTextDecoration: 'underline dotted', textDecoration: 'underline dotted', - borderBottom: '0', + borderBottom: 0, cursor: 'help', }, address: { @@ -92,7 +92,7 @@ const genBaseStyle: GenerateStyle = () => [ 'sub, sup': { position: 'relative', fontSize: '75%', - lineHeight: '0', + lineHeight: 0, verticalAlign: 'baseline', }, sub: { @@ -106,7 +106,7 @@ const genBaseStyle: GenerateStyle = () => [ fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", }, pre: { - marginBlockStart: '0', + marginBlockStart: 0, marginBlockEnd: '1em', overflow: 'auto', }, @@ -131,7 +131,7 @@ const genBaseStyle: GenerateStyle = () => [ captionSide: 'bottom', }, 'input, button, select, optgroup, textarea': { - margin: '0', + margin: 0, color: 'inherit', fontSize: 'inherit', fontFamily: 'inherit', @@ -148,12 +148,12 @@ const genBaseStyle: GenerateStyle = () => [ }, "button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner": { - padding: '0', + padding: 0, borderStyle: 'none', }, "input[type='radio'], input[type='checkbox']": { boxSizing: 'border-box', - padding: '0', + padding: 0, }, "input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month']": { WebkitAppearance: 'listbox', From 4e720377e4cac303d27581bef31443e6e16a09c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Wed, 30 Nov 2022 13:19:16 +0800 Subject: [PATCH 10/23] feat: update style --- components/app/index.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index dca01539e860..fcb5105a74cb 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -8,11 +8,11 @@ demo: cols: 2 --- -新的应用程序组件，提供全局样式和静态功能替换。 +新的包裹组件，提供重置样式和提供消费上下文的默认环境。 ## 何时使用 -React 18 并发模式下的静态函数不能很好地支持。在 v5 中，我们建议使用钩子进行静态替换。但它会在用户手册中定义这个。 +在 v5 版本中，我们推荐通过`hooks`顶层注册的方式代替 `message`,`Modal`,`notification` 的静态方法,因为静态方法无法消费上下文,可以通过`App`组件包裹,获取`context`上下文. ## 代码演示 From 9fa7df702e432f7637aff53ec21c4a78a8cf3db3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Wed, 30 Nov 2022 13:24:06 +0800 Subject: [PATCH 11/23] feat: update style --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 4 ++-- .../app/__tests__/__snapshots__/demo.test.ts.snap | 4 ++-- components/app/context.ts | 4 ++-- components/app/demo/{Modal.md => modal.md} | 0 components/app/demo/{Modal.tsx => modal.tsx} | 6 +++--- components/app/index.en-US.md | 8 ++++---- components/app/index.tsx | 2 +- components/app/index.zh-CN.md | 10 +++++----- 8 files changed, 19 insertions(+), 19 deletions(-) rename components/app/demo/{Modal.md => modal.md} (100%) rename components/app/demo/{Modal.tsx => modal.tsx} (84%) diff --git a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap index 68c7e320117c..f3c6906553d3 100644 --- a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/app/demo/Modal.tsx extend context correctly 1`] = ` +exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = `
@@ -9,7 +9,7 @@ exports[`renders ./components/app/demo/Modal.tsx extend context correctly 1`] = type="button" > - Open Modal + Open modal
diff --git a/components/app/__tests__/__snapshots__/demo.test.ts.snap b/components/app/__tests__/__snapshots__/demo.test.ts.snap index f6abd7718d19..3c5dc9373039 100644 --- a/components/app/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/app/__tests__/__snapshots__/demo.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/app/demo/Modal.tsx correctly 1`] = ` +exports[`renders ./components/app/demo/modal.tsx correctly 1`] = `
@@ -9,7 +9,7 @@ exports[`renders ./components/app/demo/Modal.tsx correctly 1`] = ` type="button" > - Open Modal + Open modal
diff --git a/components/app/context.ts b/components/app/context.ts index 65a606ec4930..823ae1ed7a96 100644 --- a/components/app/context.ts +++ b/components/app/context.ts @@ -7,13 +7,13 @@ type ModalType = Omit; export interface useAppProps { message: MessageInstance; notification: NotificationInstance; - Modal: ModalType; + modal: ModalType; } const AppContext = React.createContext({ message: {} as MessageInstance, notification: {} as NotificationInstance, - Modal: {} as ModalType, + modal: {} as ModalType, }); export default AppContext; diff --git a/components/app/demo/Modal.md b/components/app/demo/modal.md similarity index 100% rename from components/app/demo/Modal.md rename to components/app/demo/modal.md diff --git a/components/app/demo/Modal.tsx b/components/app/demo/modal.tsx similarity index 84% rename from components/app/demo/Modal.tsx rename to components/app/demo/modal.tsx index 902bbc64dd78..3fe95c848d39 100644 --- a/components/app/demo/Modal.tsx +++ b/components/app/demo/modal.tsx @@ -3,10 +3,10 @@ import { App, Button } from 'antd'; // Sub page const MyPage = () => { - const { Modal } = App.useApp(); + const { modal } = App.useApp(); const showModal = () => { - Modal.warning({ + modal.warning({ title: 'This is a warning message', content: 'some messages...some messages...', }); @@ -14,7 +14,7 @@ const MyPage = () => { return ( ); }; diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 20f218164c61..37e9216c538e 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -17,7 +17,7 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec message -modal +modal notification ## How to use @@ -26,12 +26,12 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec import React from 'react'; import { App } from 'antd'; const MyPage = () => { - const { message, notification, Modal } = App.useApp(); + const { message, notification, modal } = App.useApp(); message.success('Good!'); notification.info({ message: 'Good' }); - Modal.warning({ title: 'Good' }); + modal.warning({ title: 'Good' }); // .... - // other message,notification,Modal static function + // other message,notification,modal static function return
Hello word
; }; diff --git a/components/app/index.tsx b/components/app/index.tsx index 343936539e1c..618a5224bcd9 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -35,7 +35,7 @@ const App: React.ForwardRefRenderFunction & { () => ({ message: messageApi, notification: notificationApi, - Modal: ModalApi, + modal: ModalApi, }), [messageApi, notificationApi, ModalApi], ); diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index fcb5105a74cb..b5a02209d733 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -12,13 +12,13 @@ demo: ## 何时使用 -在 v5 版本中，我们推荐通过`hooks`顶层注册的方式代替 `message`,`Modal`,`notification` 的静态方法,因为静态方法无法消费上下文,可以通过`App`组件包裹,获取`context`上下文. +在 v5 版本中，我们推荐通过`hooks`顶层注册的方式代替 `message`,`modal`,`notification` 的静态方法,因为静态方法无法消费上下文,可以通过`App`组件包裹,获取`context`上下文. ## 代码演示 message -modal +modal notification ## How to use @@ -27,12 +27,12 @@ demo: import React from 'react'; import { App } from 'antd'; const MyPage = () => { - const { message, notification, Modal } = App.useApp(); + const { message, notification, modal } = App.useApp(); message.success('Good!'); notification.info({ message: 'Good' }); - Modal.warning({ title: 'Good' }); + modal.warning({ title: 'Good' }); // .... - // other message,notification,Modal static function + // other message,notification,modal static function return
Hello word
; }; From 0834147bd5a2c51f0b737f30f1e38574bfa18097 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 30 Nov 2022 14:45:17 +0800 Subject: [PATCH 12/23] feat: add style --- components/app/style/index.tsx | 231 ++---------------- components/style/index.tsx | 6 +- .../theme/util/genComponentStyleHook.ts | 2 +- 3 files changed, 18 insertions(+), 221 deletions(-) diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx index 3eb2cb282a39..7a4f0dccffad 100644 --- a/components/app/style/index.tsx +++ b/components/app/style/index.tsx @@ -1,221 +1,22 @@ import type { FullToken, GenerateStyle } from '../../theme'; -import { genComponentStyleHook, mergeToken } from '../../theme'; +import { genComponentStyleHook } from '../../theme'; -interface AppToken extends FullToken<'App'> { - lineHeightBase: number; -} +export type ComponentToken = {}; + +interface AppToken extends FullToken<'App'> {} // =============================== Base =============================== -const genBaseStyle: GenerateStyle = (token) => [ - { - 'html, body': { - width: '100%', - height: '100%', - }, - 'input::-ms-clear,input::-ms-reveal': { - display: 'none', - }, - '*, *::before, *::after': { - boxSizing: 'border-box', - }, - html: { - fontFamily: 'sans-serif', - lineHeight: token.lineHeightBase, - WebkitTextSizeAdjust: '100%', - MsTextSizeAdjust: '100%', - MsOverflowStyle: 'scrollbar', - WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', - }, - '@-ms-viewport': { - width: 'device-width', - }, - body: { - margin: 0, - }, - "[tabindex='-1']:focus": { - outline: 'none', - }, - hr: { - boxSizing: 'content-box', - height: 0, - overflow: 'visible', - }, - 'h1, h2, h3, h4, h5, h6': { - marginBlockStart: 0, - marginBlockEnd: '0.5em', - fontWeight: '500', - }, - p: { - marginBlockStart: 0, - marginBlockEnd: '1em', - }, - 'abbr[title],abbr[data-original-title]': { - WebkitTextDecoration: 'underline dotted', - textDecoration: 'underline dotted', - borderBottom: 0, - cursor: 'help', - }, - address: { - marginBlockEnd: '1em', - fontStyle: 'normal', - lineHeight: 'inherit', - }, - "input[type='text'],input[type='password'],input[type='number'],textarea": { - WebkitAppearance: 'none', - }, - 'ol, ul, dl': { - marginBlockStart: 0, - marginBlockEnd: '1em', - }, - 'ol ol, ul ul, ol ul, ul ol': { - marginBlockEnd: 0, - }, - dt: { - fontWeight: 500, - }, - dd: { - marginBlockEnd: '0.5em', - marginInlineStart: 0, - }, - blockquote: { - margin: '0 0 1em', - }, - dfn: { - fontStyle: 'italic', - }, - 'b, strong': { - fontWeight: 'bolder', - }, - small: { - fontSize: '80%', - }, - 'sub, sup': { - position: 'relative', - fontSize: '75%', - lineHeight: 0, - verticalAlign: 'baseline', - }, - sub: { - bottom: '-0.25em', - }, - sup: { - top: '-0.5em', - }, - 'pre, code, kbd, samp': { - fontSize: '1em', - fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", - }, - pre: { - marginBlockStart: 0, - marginBlockEnd: '1em', - overflow: 'auto', - }, - figure: { - margin: '0 0 1em', - }, - img: { - verticalAlign: 'middle', - borderStyle: 'none', - }, - "a, area, button, [role='button'], input:not([type='range']), label, select, summary, textarea": - { - touchAction: 'manipulation', - }, - table: { - borderCollapse: 'collapse', - }, - caption: { - paddingBlockStart: '0.75em', - paddingBlockEnd: '0.3em', - textAlign: 'start', - captionSide: 'bottom', - }, - 'input, button, select, optgroup, textarea': { - margin: 0, - color: 'inherit', - fontSize: 'inherit', - fontFamily: 'inherit', - lineHeight: 'inherit', - }, - 'button, input': { - overflow: 'visible', - }, - 'button, select': { - textTransform: 'none', - }, - "button, html [type='button'], [type='reset'], [type='submit']": { - WebkitAppearance: 'button', - }, - "button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner": - { - padding: 0, - borderStyle: 'none', - }, - "input[type='radio'], input[type='checkbox']": { - boxSizing: 'border-box', - padding: 0, - }, - "input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month']": { - WebkitAppearance: 'listbox', - }, - textarea: { - overflow: 'auto', - resize: 'vertical', - }, - fieldset: { - minWidth: 0, - margin: 0, - padding: 0, - border: 0, - }, - legend: { - display: 'block', - width: '100%', - maxWidth: '100%', - marginBlockEnd: '0.5em', - padding: 0, - color: 'inherit', - fontSize: '1.5em', - lineHeight: 'inherit', - whiteSpace: 'normal', - }, - progress: { - verticalAlign: 'baseline', - }, - "[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button": { - height: 'auto', - }, - "[type='search']": { - outlineOffset: '-2px', - WebkitAppearance: 'none', - }, - "[type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration": { - WebkitAppearance: 'none', - }, - '::-webkit-file-upload-button': { - font: 'inherit', - WebkitAppearance: 'button', - }, - output: { - display: 'inline-block', - }, - summary: { - display: 'list-item', - }, - template: { - display: 'none', - }, - '[hidden]': { - display: 'none !important', - }, - mark: { - padding: '0.2em', - backgroundColor: '#feffe6', - }, - }, -]; +const genBaseStyle: GenerateStyle = (token) => { + const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token; + return { + [componentCls]: { + color: colorText, + fontSize, + lineHeight, + fontFamily, + }, + }; +}; // ============================== Export ============================== -export default genComponentStyleHook('App', (token) => [ - genBaseStyle(mergeToken(token, {})), -]); +export default genComponentStyleHook('App', (token) => [genBaseStyle(token)]); diff --git a/components/style/index.tsx b/components/style/index.tsx index 743ac86d504e..bcac9ee92a15 100644 --- a/components/style/index.tsx +++ b/components/style/index.tsx @@ -103,15 +103,11 @@ export const genLinkStyle = (token: DerivativeToken): CSSObject => ({ }, }); -export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: string): CSSObject => { - const { fontFamily, fontSize } = token; - +export const genCommonStyle = (componentPrefixCls: string): CSSObject => { const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`; return { [rootPrefixSelector]: { - fontFamily, - fontSize, boxSizing: 'border-box', '&::before, &::after': { diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index db2bd218bbd9..7b5d172fbc47 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -87,7 +87,7 @@ export default function genComponentStyleHook Date: Wed, 30 Nov 2022 15:24:37 +0800 Subject: [PATCH 13/23] chore: code clean --- components/app/style/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx index 7a4f0dccffad..700aa8098b80 100644 --- a/components/app/style/index.tsx +++ b/components/app/style/index.tsx @@ -1,5 +1,5 @@ -import type { FullToken, GenerateStyle } from '../../theme'; -import { genComponentStyleHook } from '../../theme'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook } from '../../theme/internal'; export type ComponentToken = {}; From 77bbba05399fe2dc666c6a5d56ff1e667bc325c0 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 30 Nov 2022 15:32:24 +0800 Subject: [PATCH 14/23] feat: add prefixCls --- components/app/index.en-US.md | 2 +- components/app/index.tsx | 2 +- components/app/index.zh-CN.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 37e9216c538e..dfe392aeef8f 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -group: container components +group: Other title: App cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg demo: diff --git a/components/app/index.tsx b/components/app/index.tsx index 618a5224bcd9..0e8add0cd98a 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -25,7 +25,7 @@ const App: React.ForwardRefRenderFunction & { const { getPrefixCls } = useContext(ConfigContext); const prefixCls = getPrefixCls('app', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); - const customClassName = classNames(hashId, className); + const customClassName = classNames(hashId, prefixCls, className); const [messageApi, messageContextHolder] = useMessage(); const [notificationApi, notificationContextHolder] = useNotification(); diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index b5a02209d733..322c42aac06c 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 包裹组件 -group: 数据展示 +group: 其他 title: App cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg demo: From f2cc8d1c7ec322a0ae106f9e17eb0744b935310c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 30 Nov 2022 17:02:42 +0800 Subject: [PATCH 15/23] chore: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 34 +++++++------------ .../__tests__/__snapshots__/demo.test.ts.snap | 34 +++++++------------ .../__snapshots__/index.test.tsx.snap | 4 +-- 3 files changed, 26 insertions(+), 46 deletions(-) diff --git a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap index f3c6906553d3..c3a9bbc8ee59 100644 --- a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,23 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = ` -
- -
-`; - exports[`renders ./components/app/demo/message.tsx extend context correctly 1`] = `
Hello World @@ -25,19 +10,24 @@ exports[`renders ./components/app/demo/message.tsx extend context correctly 1`]
`; -exports[`renders ./components/app/demo/myApp.tsx extend context correctly 1`] = ` +exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = `
-
- Hello World -
+
`; exports[`renders ./components/app/demo/notification.tsx extend context correctly 1`] = `
-
-`; - exports[`renders ./components/app/demo/message.tsx correctly 1`] = `
Hello World @@ -25,19 +10,24 @@ exports[`renders ./components/app/demo/message.tsx correctly 1`] = `
`; -exports[`renders ./components/app/demo/myApp.tsx correctly 1`] = ` +exports[`renders ./components/app/demo/modal.tsx correctly 1`] = `
-
- Hello World -
+
`; exports[`renders ./components/app/demo/notification.tsx correctly 1`] = `
+ ); }; // Entry component diff --git a/components/app/demo/notification.tsx b/components/app/demo/notification.tsx index 7ba7db164c73..fe8613a7f4b6 100644 --- a/components/app/demo/notification.tsx +++ b/components/app/demo/notification.tsx @@ -15,7 +15,7 @@ const MyPage = () => { return ( ); }; From fc3dc7400477772b4612ca4876d4a916c977739b Mon Sep 17 00:00:00 2001 From: wangning Date: Mon, 5 Dec 2022 20:55:04 +0800 Subject: [PATCH 21/23] feat: update --- components/app/index.en-US.md | 2 +- components/app/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index dfe392aeef8f..0c9fbc26946e 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -17,8 +17,8 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec message -modal notification +modal ## How to use diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 3820cf74e823..2ac40509bf9d 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -19,8 +19,8 @@ demo: message -modal notification +modal ## How to use From a2e6e53447358d2cddc95c9e3bec75ea07ed1ef5 Mon Sep 17 00:00:00 2001 From: wangning Date: Mon, 5 Dec 2022 21:28:41 +0800 Subject: [PATCH 22/23] feat: update --- components/theme/interface/components.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 5ac94683989e..02678f801ef2 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -47,6 +47,7 @@ import type { ComponentToken as TypographyComponentToken } from '../../typograph import type { ComponentToken as UploadComponentToken } from '../../upload/style'; import type { ComponentToken as TourComponentToken } from '../../tour/style'; import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; +import type { ComponentToken as AppComponentToken } from '../../app/style'; export interface ComponentTokenMap { Affix?: {}; @@ -110,4 +111,5 @@ export interface ComponentTokenMap { Progress?: ProgressComponentToken; Tour?: TourComponentToken; QRCode?: QRCodeComponentToken; + App?: AppComponentToken; } From d05884f7349a9b60df2facae6fe52c633c07cb05 Mon Sep 17 00:00:00 2001 From: wangning Date: Mon, 5 Dec 2022 21:57:27 +0800 Subject: [PATCH 23/23] feat: update snap --- .../__snapshots__/demo-extend.test.ts.snap | 13 +++++++++---- .../app/__tests__/__snapshots__/demo.test.ts.snap | 13 +++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap index c3a9bbc8ee59..a405386610f1 100644 --- a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -4,9 +4,14 @@ exports[`renders ./components/app/demo/message.tsx extend context correctly 1`]
-
- Hello World -
+
`; @@ -34,7 +39,7 @@ exports[`renders ./components/app/demo/notification.tsx extend context correctly type="button" > - Open Notification + Open notification
diff --git a/components/app/__tests__/__snapshots__/demo.test.ts.snap b/components/app/__tests__/__snapshots__/demo.test.ts.snap index a38fa7b83edd..c8a98f5162f7 100644 --- a/components/app/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/app/__tests__/__snapshots__/demo.test.ts.snap @@ -4,9 +4,14 @@ exports[`renders ./components/app/demo/message.tsx correctly 1`] = `
-
- Hello World -
+
`; @@ -34,7 +39,7 @@ exports[`renders ./components/app/demo/notification.tsx correctly 1`] = ` type="button" > - Open Notification + Open notification