-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
周星星同学
committed
Aug 28, 2023
1 parent
5412bb7
commit 0ca0865
Showing
9 changed files
with
440 additions
and
0 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -100,6 +100,7 @@ export const menus = [ | |
'useScroll', | ||
'useSize', | ||
'useFocusWithin', | ||
'useModal', | ||
], | ||
}, | ||
{ | ||
|
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
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,67 @@ | ||
import React from 'react'; | ||
import { render, fireEvent } from '@testing-library/react'; | ||
import { useModal, ModalProvider } from '../index'; // 请根据实际路径导入组件 | ||
|
||
// 模拟一个用于测试的组件 | ||
const TestComponent = () => { | ||
const modal = useModal(TestModalComponent); | ||
|
||
return ( | ||
<div> | ||
<button onClick={() => modal.show()}>Show Modal</button> | ||
</div> | ||
); | ||
}; | ||
|
||
const TestModalComponent = ({ visible, hide, destroy }) => { | ||
return ( | ||
<div data-testid="modal" style={{ display: visible ? 'block' : 'none' }}> | ||
<button data-testid="hide-button" onClick={hide}> | ||
Hide Modal | ||
</button> | ||
<button data-testid="destroy-button" onClick={destroy}> | ||
Destroy Modal | ||
</button> | ||
</div> | ||
); | ||
}; | ||
|
||
describe('useModal and ModalProvider', () => { | ||
it('should show and hide modal', () => { | ||
const { getByText, getByTestId } = render( | ||
<ModalProvider> | ||
<TestComponent /> | ||
</ModalProvider>, | ||
); | ||
|
||
const showModalButton = getByText('Show Modal'); | ||
fireEvent.click(showModalButton); | ||
|
||
const modal = getByTestId('modal'); | ||
expect(modal).toBeVisible(); | ||
|
||
const hideButton = getByTestId('hide-button'); | ||
fireEvent.click(hideButton); | ||
|
||
expect(modal).not.toBeVisible(); | ||
}); | ||
|
||
it('should destroy modal', () => { | ||
const { getByText, getByTestId, queryByTestId } = render( | ||
<ModalProvider> | ||
<TestComponent /> | ||
</ModalProvider>, | ||
); | ||
|
||
const showModalButton = getByText('Show Modal'); | ||
fireEvent.click(showModalButton); | ||
|
||
const modal = getByTestId('modal'); | ||
expect(modal).toBeVisible(); | ||
|
||
const destroyButton = getByTestId('destroy-button'); | ||
fireEvent.click(destroyButton); | ||
|
||
expect(queryByTestId('modal')).toBeNull(); | ||
}); | ||
}); |
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,40 @@ | ||
import React, { useEffect } from 'react'; | ||
import type { ModalProps } from 'ahooks'; | ||
import { Modal, message } from 'antd'; | ||
|
||
interface IData { | ||
title?: string; | ||
desc?: string; | ||
} | ||
|
||
interface IProps { | ||
onOk: () => void; | ||
onCancel?: () => void; | ||
} | ||
|
||
export default ({ visible, hide, destroy, data = {}, props }: ModalProps<IData, IProps>) => { | ||
const { title = '新建', desc = 'Hello World!' } = data; | ||
const { onOk, onCancel } = props; | ||
|
||
useEffect(() => { | ||
message.info('useEffect:' + title); | ||
}, [title]); | ||
|
||
return ( | ||
<Modal | ||
title={title} | ||
onOk={() => { | ||
onOk?.(); | ||
hide(); | ||
}} | ||
open={visible} | ||
onCancel={() => { | ||
onCancel?.(); | ||
hide(); | ||
}} | ||
// afterClose={() => destroy()} | ||
> | ||
{desc} | ||
</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,11 @@ | ||
import { ModalProvider } from 'ahooks'; | ||
import React from 'react'; | ||
import Demo1 from './demo1'; | ||
|
||
export default () => { | ||
return ( | ||
<ModalProvider> | ||
<Demo1 /> | ||
</ModalProvider> | ||
); | ||
}; |
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,36 @@ | ||
import React from 'react'; | ||
import { useModal } from 'ahooks'; | ||
import { Button, Space, message } from 'antd'; | ||
import MyModal from './MyModal'; | ||
|
||
export default () => { | ||
const { show, hide, destroy } = useModal(MyModal, { | ||
onOk: () => { | ||
message.success('ok'); | ||
}, | ||
onCancel: () => { | ||
message.error('cancel'); | ||
}, | ||
}); | ||
|
||
return ( | ||
<> | ||
{/* <MyModal /> */} {/* 无需再手动注册组件 */} | ||
<Space> | ||
<Button | ||
onClick={() => { | ||
show(); | ||
}} | ||
> | ||
新建 | ||
</Button> | ||
<Button | ||
onClick={() => show({ title: '编辑', desc: '你可以实时传入data,以供组件内部使用' })} | ||
> | ||
编辑 | ||
</Button> | ||
<Button onClick={() => destroy()}>销毁</Button> | ||
</Space> | ||
</> | ||
); | ||
}; |
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,63 @@ | ||
--- | ||
nav: | ||
path: /hooks | ||
--- | ||
|
||
# useModal | ||
|
||
Easily use modal/drawer and other modal components in React: | ||
|
||
- No need to manage internal state. | ||
- Not tied to UI components. | ||
- Internally uses Context to maintain context and does not lose global configuration. | ||
|
||
## Code Example | ||
|
||
### Basic Usage | ||
|
||
<code src="./demo/demo.tsx" /> | ||
|
||
You need to wrap it with `ModalProvider` before using `useModal`. | ||
|
||
```ts | ||
import { ModalProvider } from "ahooks"; | ||
|
||
ReactDOM.createRoot(document.getElementById("root")!).render( | ||
<React.StrictMode> | ||
<ModalProvider> | ||
<App /> | ||
</ModalProvider> | ||
</React.StrictMode> | ||
); | ||
``` | ||
|
||
## API | ||
|
||
```ts | ||
import { useModal } from 'ahooks'; | ||
import type { ModalProps , ModalResult } from 'ahooks'; | ||
|
||
const Result:ModalResult = useModal<T,K>((Props:ModalProps<T,K>)=>{},props) | ||
``` | ||
|
||
## Parameters | ||
|
||
### Props | ||
|
||
| Property | Description | Type | Default | | ||
| -------- | -------------------------------------- | -------------------------------------- | ----------- | | ||
| visible | Whether to show | `boolean` | `false` | | ||
| hide | Hide | `() => void` | - | | ||
| destroy | Destroy | `() => void` | - | | ||
| data | Data passed in when Modal is opened | `T \| Record<string,any> \| undefined` | - | | ||
| props | Props passed in when registering Modal | `K` | `undefined` | | ||
|
||
> The difference between data and props is that data is passed in each time Modal is opened, and props is passed in when Modal is registered, and props will not change. | ||
### Result | ||
|
||
| Property | Description | Type | Default | | ||
| -------- | ----------- | ------------------------------------------ | ------- | | ||
| show | Show | `(data?: T \| Record<string,any>) => void` | - | | ||
| hide | Hide | `() => void` | - | | ||
| destroy | Destroy | `() => void` | - | |
Oops, something went wrong.