New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat : new components app #39046
Merged
Merged
feat : new components app #39046
Changes from all commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
b856ebc
feat : new components app
heiyu4585 19e1e80
feat: update app
heiyu4585 86cf298
feat: update app
heiyu4585 f6e2918
feat: update app
heiyu4585 99e8b1a
feat: update app
heiyu4585 8ab0713
feat: update app
heiyu4585 13ac673
feat: update app
heiyu4585 6f7a1ca
feat: update app
heiyu4585 747ddf3
feat: update style
heiyu4585 4e72037
feat: update style
heiyu4585 9fa7df7
feat: update style
heiyu4585 0834147
feat: add style
MadCcc 09b7f05
chore: code clean
MadCcc 77bbba0
feat: add prefixCls
MadCcc f2cc8d1
chore: update snapshot
MadCcc 4ced767
chore: update snapshot
MadCcc 09e5f57
chore: update snapshot
MadCcc 6996894
test: image test
MadCcc bf5a16e
Update components/app/index.zh-CN.md
MadCcc 02f7891
feat : update for reviewer
heiyu4585 fc3dc74
feat: update
heiyu4585 a2e6e53
feat: update
heiyu4585 d05884f
feat: update snap
heiyu4585 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
components/app/__tests__/__snapshots__/demo-extend.test.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`renders ./components/app/demo/message.tsx extend context correctly 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<button | ||
class="ant-btn ant-btn-primary" | ||
type="button" | ||
> | ||
<span> | ||
Open message | ||
</span> | ||
</button> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<button | ||
class="ant-btn ant-btn-primary" | ||
type="button" | ||
> | ||
<span> | ||
Open modal | ||
</span> | ||
</button> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/app/demo/notification.tsx extend context correctly 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<button | ||
class="ant-btn ant-btn-primary" | ||
type="button" | ||
> | ||
<span> | ||
Open notification | ||
</span> | ||
</button> | ||
</div> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`renders ./components/app/demo/message.tsx correctly 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<button | ||
class="ant-btn ant-btn-primary" | ||
type="button" | ||
> | ||
<span> | ||
Open message | ||
</span> | ||
</button> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/app/demo/modal.tsx correctly 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<button | ||
class="ant-btn ant-btn-primary" | ||
type="button" | ||
> | ||
<span> | ||
Open modal | ||
</span> | ||
</button> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/app/demo/notification.tsx correctly 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<button | ||
class="ant-btn ant-btn-primary" | ||
type="button" | ||
> | ||
<span> | ||
Open notification | ||
</span> | ||
</button> | ||
</div> | ||
`; |
17 changes: 17 additions & 0 deletions
17
components/app/__tests__/__snapshots__/index.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`App rtl render component should be rendered correctly in RTL direction 1`] = ` | ||
<div | ||
class="ant-app" | ||
/> | ||
`; | ||
|
||
exports[`App single 1`] = ` | ||
<div | ||
class="ant-app" | ||
> | ||
<div> | ||
Hello World | ||
</div> | ||
</div> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { extendTest } from '../../../tests/shared/demoTest'; | ||
|
||
extendTest('app'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import demoTest from '../../../tests/shared/demoTest'; | ||
|
||
demoTest('app'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { imageDemoTest } from '../../../tests/shared/imageTest'; | ||
|
||
describe('app', () => { | ||
imageDemoTest('app'); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React from 'react'; | ||
import App from '..'; | ||
import mountTest from '../../../tests/shared/mountTest'; | ||
import rtlTest from '../../../tests/shared/rtlTest'; | ||
import { render } from '../../../tests/utils'; | ||
|
||
describe('App', () => { | ||
mountTest(App); | ||
rtlTest(App); | ||
|
||
it('single', () => { | ||
// Sub page | ||
const MyPage = () => { | ||
const { message } = App.useApp(); | ||
React.useEffect(() => { | ||
message.success('Good!'); | ||
}, [message]); | ||
|
||
return <div>Hello World</div>; | ||
}; | ||
|
||
// Entry component | ||
const MyApp = () => ( | ||
<App> | ||
<MyPage /> | ||
</App> | ||
); | ||
|
||
const { getByText, container } = render(<MyApp />); | ||
expect(getByText('Hello World')).toBeTruthy(); | ||
expect(container.firstChild).toMatchSnapshot(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React from 'react'; | ||
import type { MessageInstance } from '../message/interface'; | ||
import type { NotificationInstance } from '../notification/interface'; | ||
import type { ModalStaticFunctions } from '../modal/confirm'; | ||
|
||
type ModalType = Omit<ModalStaticFunctions, 'warn'>; | ||
export interface useAppProps { | ||
message: MessageInstance; | ||
notification: NotificationInstance; | ||
modal: ModalType; | ||
} | ||
|
||
const AppContext = React.createContext<useAppProps>({ | ||
message: {} as MessageInstance, | ||
notification: {} as NotificationInstance, | ||
modal: {} as ModalType, | ||
}); | ||
|
||
export default AppContext; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
## zh-CN | ||
|
||
获取 `message` 静态方法. | ||
|
||
## en-US | ||
|
||
Static method for `message`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react'; | ||
import { App, Button } from 'antd'; | ||
|
||
// Sub page | ||
const MyPage = () => { | ||
const { message } = App.useApp(); | ||
|
||
const showMessage = () => { | ||
message.success('Success!'); | ||
}; | ||
|
||
return ( | ||
<Button type="primary" onClick={showMessage}> | ||
Open message | ||
</Button> | ||
); | ||
}; | ||
|
||
// Entry component | ||
export default () => ( | ||
<App> | ||
<MyPage /> | ||
</App> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
## zh-CN | ||
|
||
获取 `modal` 静态方法. | ||
|
||
## en-US | ||
|
||
Static method for `modal`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<Button type="primary" onClick={showModal}> | ||
Open modal | ||
</Button> | ||
); | ||
}; | ||
|
||
// Entry component | ||
export default () => ( | ||
<App> | ||
<MyPage /> | ||
</App> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,7 @@ | ||||||
## zh-CN | ||||||
|
||||||
获取 `notification` 静态方法. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
## en-US | ||||||
|
||||||
Static method for `notification`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<Button type="primary" onClick={showNotification}> | ||
Open notification | ||
</Button> | ||
); | ||
}; | ||
|
||
// Entry component | ||
export default () => ( | ||
<App> | ||
Wxh16144 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<MyPage /> | ||
</App> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
--- | ||
category: Components | ||
group: Other | ||
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 | ||
|
||
<!-- prettier-ignore --> | ||
<code src="./demo/message.tsx">message</code> | ||
<code src="./demo/notification.tsx">notification</code> | ||
<code src="./demo/modal.tsx">modal</code> | ||
|
||
## How to use | ||
|
||
```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 <div>Hello word</div>; | ||
}; | ||
|
||
const MyApp = () => ( | ||
<App> | ||
<MyPage /> | ||
</App> | ||
); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
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 useMessage from '../message/useMessage'; | ||
import useNotification from '../notification/useNotification'; | ||
import useModal from '../modal/useModal'; | ||
import AppContext from './context'; | ||
import type { useAppProps } from './context'; | ||
|
||
export type AppProps = { | ||
className?: string; | ||
prefixCls?: string; | ||
children?: ReactNode; | ||
}; | ||
|
||
const useApp: () => useAppProps = () => React.useContext(AppContext); | ||
|
||
const App: React.ForwardRefRenderFunction<HTMLDivElement, AppProps> & { | ||
useApp: () => useAppProps; | ||
} = (props) => { | ||
const { prefixCls: customizePrefixCls, children, className } = props; | ||
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext); | ||
const prefixCls = getPrefixCls('app', customizePrefixCls); | ||
const [wrapSSR, hashId] = useStyle(prefixCls); | ||
const customClassName = classNames(hashId, prefixCls, className); | ||
|
||
const [messageApi, messageContextHolder] = useMessage(); | ||
const [notificationApi, notificationContextHolder] = useNotification(); | ||
const [ModalApi, ModalContextHolder] = useModal(); | ||
|
||
const memoizedContextValue = React.useMemo( | ||
() => ({ | ||
message: messageApi, | ||
notification: notificationApi, | ||
modal: ModalApi, | ||
}), | ||
[messageApi, notificationApi, ModalApi], | ||
); | ||
|
||
return wrapSSR( | ||
<AppContext.Provider value={memoizedContextValue}> | ||
<div className={customClassName}> | ||
zombieJ marked this conversation as resolved.
Show resolved
Hide resolved
|
||
{ModalContextHolder} | ||
{messageContextHolder} | ||
{notificationContextHolder} | ||
{children} | ||
</div> | ||
</AppContext.Provider>, | ||
); | ||
}; | ||
|
||
if (process.env.NODE_ENV !== 'production') { | ||
App.displayName = 'App'; | ||
} | ||
|
||
App.useApp = useApp; | ||
export default App; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
找个地方写一下这种方式和 useMessage 的差异是啥?前提是啥,好处是啥?