docs(drawer): change drawer docs (#509)

LuckyFBB · web-flow · commit 25a5151fec3f · 2024-10-21T20:14:29.000+08:00
diff --git a/src/drawer/__tests/__snapshots__/index.test.tsx.snap b/src/drawer/__tests/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test SlidePane  snapshot match 1`] = `
+exports[`test Drawer  snapshot match 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
diff --git a/src/drawer/__tests/index.test.tsx b/src/drawer/__tests/index.test.tsx
@@ -3,74 +3,74 @@ import { fireEvent, render } from '@testing-library/react';
 import { alert } from 'ant-design-testing';
 import '@testing-library/jest-dom/extend-expect';
 
-import SlidePane from '../index';
+import Drawer from '../index';
 
-describe('test SlidePane ', () => {
+describe('test Drawer ', () => {
     test('snapshot match', () => {
-        const wrapper = render(<SlidePane open>Hello World</SlidePane>);
+        const wrapper = render(<Drawer open>Hello World</Drawer>);
         expect(wrapper).toMatchSnapshot();
     });
     test('should be not open', () => {
-        const { container } = render(<SlidePane open={false}>Hello World</SlidePane>);
+        const { container } = render(<Drawer open={false}>Hello World</Drawer>);
         expect(container).not.toHaveClass();
     });
     test('should render loading correct ', () => {
-        const { unmount } = render(<SlidePane open>Hello World</SlidePane>);
+        const { unmount } = render(<Drawer open>Hello World</Drawer>);
         const dom = document.querySelector('.ant-spin-spinning');
         expect(dom).toBe(null);
         unmount();
         render(
-            <SlidePane open loading>
+            <Drawer open loading>
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
         const domLoading = document.querySelector('.ant-spin-spinning');
         expect(domLoading).not.toBe(null);
     });
     test('should render mask correct ', () => {
-        const { unmount } = render(<SlidePane open>Hello World</SlidePane>);
+        const { unmount } = render(<Drawer open>Hello World</Drawer>);
         const dom = document.querySelector('.dtc-drawer-mask');
         expect(dom).toBe(null);
         unmount();
         render(
-            <SlidePane open mask>
+            <Drawer open mask>
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
         const domMask = document.querySelector('.dtc-drawer-mask');
         expect(domMask).not.toBe(null);
     });
     test('should render width correct', () => {
         render(
-            <SlidePane open width={640}>
+            <Drawer open width={640}>
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
         expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
             width: '640px',
         });
     });
     test('should render size width correct', () => {
         render(
-            <SlidePane open size="large">
+            <Drawer open size="large">
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
         expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
             width: '1256px',
         });
     });
     test('should render className/style correct', () => {
         const { unmount } = render(
-            <SlidePane
+            <Drawer
                 open
                 rootClassName="root-className"
                 bodyClassName="body-className"
                 rootStyle={{ color: 'red' }}
                 bodyStyle={{ backgroundColor: 'forestgreen' }}
             >
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
         expect(document.querySelector('.dtc-drawer')).toHaveClass('root-className');
         expect(document.querySelector('.dtc-drawer-body')).toHaveClass('body-className');
@@ -82,7 +82,7 @@ describe('test SlidePane ', () => {
     });
     test('should render tab correct', () => {
         const { getByText, unmount } = render(
-            <SlidePane
+            <Drawer
                 open
                 width={640}
                 tabs={[
@@ -100,15 +100,15 @@ describe('test SlidePane ', () => {
                             break;
                     }
                 }}
-            </SlidePane>
+            </Drawer>
         );
         expect(document.querySelector('.dtc-drawer-tabs')).not.toBe(null);
         expect(getByText('tab1')).toBeTruthy();
         expect(getByText('基本信息')).toBeTruthy();
         unmount();
 
         const { getByText: getByText1 } = render(
-            <SlidePane
+            <Drawer
                 open
                 width={640}
                 tabs={[
@@ -127,34 +127,34 @@ describe('test SlidePane ', () => {
                             break;
                     }
                 }}
-            </SlidePane>
+            </Drawer>
         );
         expect(getByText1('变更记录')).toBeTruthy();
         expect(getByText1('tab2').parentNode).toHaveClass('ant-tabs-tab-active');
     });
     test('Should support string banner', async () => {
         const { getByText } = render(
-            <SlidePane open banner="banner">
+            <Drawer open banner="banner">
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
 
         expect(getByText('banner')).toBeInTheDocument();
     });
     test('Should support ReactNode', async () => {
         const { getByTestId } = render(
-            <SlidePane open banner={<div data-testid="banner">xxxx</div>}>
+            <Drawer open banner={<div data-testid="banner">xxxx</div>}>
                 test
-            </SlidePane>
+            </Drawer>
         );
 
         expect(getByTestId('banner')).toBeInTheDocument();
     });
     it('Should support AlertProps', async () => {
         const { getByText } = render(
-            <SlidePane open banner={{ message: 'banner', type: 'error' }}>
+            <Drawer open banner={{ message: 'banner', type: 'error' }}>
                 test
-            </SlidePane>
+            </Drawer>
         );
 
         expect(getByText('banner')).toBeInTheDocument();
@@ -163,9 +163,9 @@ describe('test SlidePane ', () => {
     test('should callback to be called', () => {
         const fn = jest.fn();
         const { getByRole } = render(
-            <SlidePane open onClose={fn}>
+            <Drawer open onClose={fn}>
                 Hello World
-            </SlidePane>
+            </Drawer>
         );
         const oImg = getByRole('img');
         fireEvent.click(oImg);
diff --git a/src/drawer/demos/basic.tsx b/src/drawer/demos/basic.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Slider } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
@@ -28,15 +28,15 @@ export default () => {
             >
                 click me
             </Button>
-            <SlidePane
+            <Drawer
                 open={visible}
                 loading={loading}
                 width={`${width}%`}
                 onClose={() => setVisible(false)}
                 title="title"
             >
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/basicBanner.tsx b/src/drawer/demos/basicBanner.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
@@ -10,14 +10,14 @@ export default () => {
             <Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
                 click me
             </Button>
-            <SlidePane
+            <Drawer
                 open={visible}
-                banner="这是 SlidePane 的 banner"
+                banner="这是 Drawer 的 banner"
                 onClose={() => setVisible(false)}
                 title="title"
             >
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/basicBannerProps.tsx b/src/drawer/demos/basicBannerProps.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
@@ -10,18 +10,18 @@ export default () => {
             <Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
                 click me
             </Button>
-            <SlidePane
+            <Drawer
                 open={visible}
                 banner={{
-                    message: 'SlidePane 可以支持 banner 属性',
+                    message: 'Drawer 可以支持 banner 属性',
                     type: 'error',
                     showIcon: true,
                 }}
                 onClose={() => setVisible(false)}
                 title="title"
             >
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/basicSize.tsx b/src/drawer/demos/basicSize.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { Button, Space } from 'antd';
-import { SlidePane } from 'dt-react-component';
-import { SlidePaneProps } from 'dt-react-component/drawer';
+import { Drawer } from 'dt-react-component';
+import { DrawerProps } from 'dt-react-component/drawer';
 
 export default () => {
     const [visible, setVisible] = useState(false);
-    const [size, setSize] = useState<SlidePaneProps<[]>['size']>('default');
+    const [size, setSize] = useState<DrawerProps<[]>['size']>('default');
 
     return (
         <>
@@ -38,9 +38,9 @@ export default () => {
                     大尺寸
                 </Button>
             </Space>
-            <SlidePane open={visible} size={size} onClose={() => setVisible(false)} title="title">
+            <Drawer open={visible} size={size} onClose={() => setVisible(false)} title="title">
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/basic_mask.tsx b/src/drawer/demos/basic_mask.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Slider } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
@@ -18,7 +18,7 @@ export default () => {
             <Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
                 click me
             </Button>
-            <SlidePane
+            <Drawer
                 open={visible}
                 rootStyle={{
                     minHeight: '600px',
@@ -30,7 +30,7 @@ export default () => {
                 mask
             >
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/basic_top.tsx b/src/drawer/demos/basic_top.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Alert, Button } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
@@ -16,14 +16,14 @@ export default () => {
             >
                 click me
             </Button>
-            <SlidePane
+            <Drawer
                 open={visible}
                 onClose={() => setVisible(false)}
                 title="title"
                 rootStyle={{ top: 64 }}
             >
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/customTitle.tsx b/src/drawer/demos/customTitle.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { Button } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
 
     return (
         <>
             <Button onClick={() => setVisible(true)}>打开</Button>
-            <SlidePane
+            <Drawer
                 open={visible}
                 rootStyle={{
                     minHeight: '600px',
@@ -26,7 +26,7 @@ export default () => {
                 }
             >
                 <div>hello world</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/footer.tsx b/src/drawer/demos/footer.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { Button, Space } from 'antd';
-import { SlidePane } from 'dt-react-component';
+import { Drawer } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
 
     return (
         <>
             <Button onClick={() => setVisible(true)}>打开</Button>
-            <SlidePane
+            <Drawer
                 open={visible}
                 onClose={() => setVisible(false)}
                 title="Title"
@@ -20,7 +20,7 @@ export default () => {
                 }
             >
                 <div style={{ height: '110vh' }}>超长可滚动</div>
-            </SlidePane>
+            </Drawer>
         </>
     );
 };
diff --git a/src/drawer/demos/tabs.tsx b/src/drawer/demos/tabs.tsx
diff --git a/src/drawer/demos/tabsControl.tsx b/src/drawer/demos/tabsControl.tsx
diff --git a/src/drawer/index.md b/src/drawer/index.md

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`// Jest Snapshot v1, https://goo.gl/fbAQLP`
`2`	`2`
`3`		-exports[`test SlidePane snapshot match 1`] = `
	`3`	+exports[`test Drawer snapshot match 1`] = `
`4`	`4`	`{`
`5`	`5`	`"asFragment": [Function],`
`6`	`6`	`"baseElement": <body>`