-
setVisible(true)}>
+
setOpen(true)}>
click me
-
containerRef.current!} />
+ containerRef.current!} />
);
};
@@ -90,4 +91,18 @@ describe('Modal', () => {
(container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin,
).toBeTruthy();
});
+
+ it('deprecated warning', () => {
+ resetWarned();
+ const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+ render(
);
+ expect(errSpy).toHaveBeenCalledWith(
+ 'Warning: [antd: Modal] `visible` will be removed in next major version, please use `open` instead.',
+ );
+
+ expect(document.querySelector('.ant-modal')).toBeTruthy();
+
+ errSpy.mockRestore();
+ });
});
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
index bfa807ff94..a8e05c9574 100644
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@@ -29,7 +29,7 @@ export type ModalStaticFunctions = Record
, M
export default function confirm(config: ModalFuncProps) {
const container = document.createDocumentFragment();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
- let currentConfig = { ...config, close, visible: true } as any;
+ let currentConfig = { ...config, close, open: true } as any;
function destroy(...args: any[]) {
const triggerCancel = args.some(param => param && param.triggerCancel);
@@ -79,7 +79,7 @@ export default function confirm(config: ModalFuncProps) {
function close(...args: any[]) {
currentConfig = {
...currentConfig,
- visible: false,
+ open: false,
afterClose: () => {
if (typeof config.afterClose === 'function') {
config.afterClose();
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index 52dc80605d..e5dded5ac6 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -18,26 +18,26 @@ import { Button, Modal } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
- const [visible, setVisible] = useState(false);
+ const [open, setOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [modalText, setModalText] = useState('Content of the modal');
const showModal = () => {
- setVisible(true);
+ setOpen(true);
};
const handleOk = () => {
setModalText('The modal will be closed after two seconds');
setConfirmLoading(true);
setTimeout(() => {
- setVisible(false);
+ setOpen(false);
setConfirmLoading(false);
}, 2000);
};
const handleCancel = () => {
console.log('Clicked cancel button');
- setVisible(false);
+ setOpen(false);
};
return (
@@ -47,7 +47,7 @@ const App: React.FC = () => {
{
- const [isModalVisible, setIsModalVisible] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = () => {
- setIsModalVisible(true);
+ setIsModalOpen(true);
};
const handleOk = () => {
- setIsModalVisible(false);
+ setIsModalOpen(false);
};
const handleCancel = () => {
- setIsModalVisible(false);
+ setIsModalOpen(false);
};
return (
@@ -37,7 +37,7 @@ const App: React.FC = () => {
-
+
Some contents...
Some contents...
Some contents...
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index de6ec2d2af..da61638ae2 100644
--- a/components/modal/demo/button-props.md
+++ b/components/modal/demo/button-props.md
@@ -18,20 +18,20 @@ import { Button, Modal } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
- const [visible, setVisible] = useState(false);
+ const [open, setOpen] = useState(false);
const showModal = () => {
- setVisible(true);
+ setOpen(true);
};
const handleOk = (e: React.MouseEvent) => {
console.log(e);
- setVisible(false);
+ setOpen(false);
};
const handleCancel = (e: React.MouseEvent) => {
console.log(e);
- setVisible(false);
+ setOpen(false);
};
return (
@@ -41,7 +41,7 @@ const App: React.FC = () => {
(
);
export default () => {
- const [visible, setVisible] = useState(false);
+ const [open, setOpen] = useState(false);
const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
const [selectedKeys, setSelectedKeys] = useState([]);
const [disabled, setDisabled] = useState(false);
@@ -329,17 +329,17 @@ export default () => {
};
const showModal = () => {
- setVisible(true);
+ setOpen(true);
};
const handleOk = e => {
console.log(e);
- setVisible(false);
+ setOpen(false);
};
const handleCancel = e => {
console.log(e);
- setVisible(false);
+ setOpen(false);
};
const columns = [
@@ -385,7 +385,7 @@ export default () => {
-
+
{
const [loading, setLoading] = useState(false);
- const [visible, setVisible] = useState(false);
+ const [open, setOpen] = useState(false);
const showModal = () => {
- setVisible(true);
+ setOpen(true);
};
const handleOk = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
- setVisible(false);
+ setOpen(false);
}, 3000);
};
const handleCancel = () => {
- setVisible(false);
+ setOpen(false);
};
return (
@@ -47,7 +47,7 @@ const App: React.FC = () => {
Open Modal with customized footer
{
- const [visible, setVisible] = useState(false);
+ const [open, setOpen] = useState(false);
const showModal = () => {
- setVisible(true);
+ setOpen(true);
};
const hideModal = () => {
- setVisible(false);
+ setOpen(false);
};
return (
@@ -36,7 +36,7 @@ const LocalizedModal = () => {
{
- const [visible, setVisible] = useState(false);
+ const [open, setOpen] = useState(false);
const [disabled, setDisabled] = useState(false);
const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
const draggleRef = useRef(null);
const showModal = () => {
- setVisible(true);
+ setOpen(true);
};
const handleOk = (e: React.MouseEvent) => {
console.log(e);
- setVisible(false);
+ setOpen(false);
};
const handleCancel = (e: React.MouseEvent) => {
console.log(e);
- setVisible(false);
+ setOpen(false);
};
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
@@ -80,7 +80,7 @@ const App: React.FC = () => {
Draggable Modal