Merge pull request #78 from shoota/fix/apply_antd-deprecated-props

fix: rename antd visibility props to 'open' from 'visible'

Author: supnate

README.md

@@ -361,7 +361,9 @@ For every modal implementation we always need to these binding manually. So, to
 import NiceModal, {
   muiDialog,
   antdModal,
+  antdModalV5,
   antdDrawer,
+  antdDrawerV5,
   bootstrapDialog
 } from '@ebay/nice-modal-react';
 
@@ -373,9 +375,15 @@ const modal = useModal();
 // For ant.design
 <Modal {...antdModal(modal)}>
 
+// For ant.design v4.23.0 or later
+<Modal {...antdModalV5(modal)}>
+
 // For antd drawer
 <Drawer {...antdDrawer(modal)}>
 
+// For antd drawer v4.23.0 or later
+<Drawer {...antdDrawerV5(modal)}>
+
 // For bootstrap dialog
 <Dialog {...bootstrapDialog(modal)}>
 

src/index.test.js

@@ -7,7 +7,9 @@ import NiceModal, {
   register,
   create,
   antdDrawer,
+  antdDrawerV5,
   antdModal,
+  antdModalV5,
   muiDialog,
   bootstrapDialog,
   reducer,
@@ -360,9 +362,20 @@ const AntdModal = ({ visible, onOk, onCancel, afterClose, children }) => {
     </TestModal>
   );
 };
+const AntdModalV5 = ({ open, onOk, onCancel, afterClose, children }) => {
+  return (
+    <TestModal visible={open} onClose={onOk} onCancel={onCancel} onExited={afterClose}>
+      {children}
+    </TestModal>
+  );
+};
 test('test antd modal helper', async () => {
-  await testHelper(AntdModal, antdModal, 'AntdModal');
-  await testHelper(AntdModal, antdModal, 'AntdModal', true);
+  await testHelper(AntdModalV5, antdModalV5, 'AntdModalV5');
+  await testHelper(AntdModalV5, antdModalV5, 'AntdModalV5', true);
+});
+test('test antd modal v5 helper', async () => {
+  await testHelper(AntdModalV5, antdModalV5, 'AntdModalV5');
+  await testHelper(AntdModalV5, antdModalV5, 'AntdModalV5', true);
 });
 
 test('test antd modal onCancel', async () => {
@@ -392,6 +405,16 @@ test('test antd drawer helper', async () => {
   };
   await testHelper(AntdDrawer, antdDrawer, 'AntdDrawerTest');
 });
+test('test antd drawer v5 helper', async () => {
+  const AntdDrawerV5 = ({ open, onClose, afterOpenChange, children }) => {
+    return (
+      <TestModal visible={open} onClose={onClose} onExited={() => afterOpenChange(false)}>
+        {children}
+      </TestModal>
+    );
+  };
+  await testHelper(AntdDrawerV5, antdDrawerV5, 'AntdDrawerV5Test');
+});
 
 test('test mui dialog helper', async () => {
   const MuiDialog = ({ open, onClose, onExited, children }) => {

src/index.tsx

@@ -502,6 +502,17 @@ export const antdModal = (
     },
   };
 };
+export const antdModalV5 = (
+  modal: NiceModalHandler,
+): { open: boolean; onCancel: () => void; onOk: () => void; afterClose: () => void } => {
+  const {onOk, onCancel, afterClose} = antdModal(modal)
+  return {
+    open: modal.visible,
+    onOk,
+    onCancel,
+    afterClose,
+  };
+};
 export const antdDrawer = (
   modal: NiceModalHandler,
 ): { visible: boolean; onClose: () => void; afterVisibleChange: (visible: boolean) => void } => {
@@ -516,6 +527,16 @@ export const antdDrawer = (
     },
   };
 };
+export const antdDrawerV5 = (
+  modal: NiceModalHandler,
+): { open: boolean; onClose: () => void; afterOpenChange: (visible: boolean) => void } => {
+  const {onClose, afterVisibleChange: afterOpenChange} = antdDrawer(modal)
+  return {
+    open: modal.visible,
+    onClose,
+    afterOpenChange,
+  };
+};
 export const muiDialog = (modal: NiceModalHandler): { open: boolean; onClose: () => void; onExited: () => void } => {
   return {
     open: modal.visible,