From 4ced87bdd9815ce35a4c7515cc5d21dd6ea15a1f Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Mon, 21 Oct 2024 09:38:26 +0800
Subject: [PATCH] docs(drawer): change drawer docs
---
.../__tests/__snapshots__/index.test.tsx.snap | 2 +-
src/drawer/__tests/index.test.tsx | 56 +++++++++----------
src/drawer/demos/basic.tsx | 6 +-
src/drawer/demos/basicBanner.tsx | 8 +--
src/drawer/demos/basicBannerProps.tsx | 8 +--
src/drawer/demos/basicSize.tsx | 10 ++--
src/drawer/demos/basic_mask.tsx | 6 +-
src/drawer/demos/basic_top.tsx | 6 +-
src/drawer/demos/customTitle.tsx | 6 +-
src/drawer/demos/footer.tsx | 6 +-
src/drawer/demos/tabs.tsx | 6 +-
src/drawer/demos/tabsControl.tsx | 6 +-
src/drawer/index.md | 6 +-
13 files changed, 66 insertions(+), 66 deletions(-)
diff --git a/src/drawer/__tests/__snapshots__/index.test.tsx.snap b/src/drawer/__tests/__snapshots__/index.test.tsx.snap
index f79465bd6..cd5442472 100644
--- 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":
diff --git a/src/drawer/__tests/index.test.tsx b/src/drawer/__tests/index.test.tsx
index 154285153..cef233e1b 100644
--- a/src/drawer/__tests/index.test.tsx
+++ b/src/drawer/__tests/index.test.tsx
@@ -3,48 +3,48 @@ 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(Hello World);
+ const wrapper = render(Hello World);
expect(wrapper).toMatchSnapshot();
});
test('should be not open', () => {
- const { container } = render(Hello World);
+ const { container } = render(Hello World);
expect(container).not.toHaveClass();
});
test('should render loading correct ', () => {
- const { unmount } = render(Hello World);
+ const { unmount } = render(Hello World);
const dom = document.querySelector('.ant-spin-spinning');
expect(dom).toBe(null);
unmount();
render(
-
+
Hello World
-
+
);
const domLoading = document.querySelector('.ant-spin-spinning');
expect(domLoading).not.toBe(null);
});
test('should render mask correct ', () => {
- const { unmount } = render(Hello World);
+ const { unmount } = render(Hello World);
const dom = document.querySelector('.dtc-drawer-mask');
expect(dom).toBe(null);
unmount();
render(
-
+
Hello World
-
+
);
const domMask = document.querySelector('.dtc-drawer-mask');
expect(domMask).not.toBe(null);
});
test('should render width correct', () => {
render(
-
+
Hello World
-
+
);
expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
width: '640px',
@@ -52,9 +52,9 @@ describe('test SlidePane ', () => {
});
test('should render size width correct', () => {
render(
-
+
Hello World
-
+
);
expect(document.querySelector('.dtc-drawer-content-wrapper')).toHaveStyle({
width: '1256px',
@@ -62,7 +62,7 @@ describe('test SlidePane ', () => {
});
test('should render className/style correct', () => {
const { unmount } = render(
- {
bodyStyle={{ backgroundColor: 'forestgreen' }}
>
Hello World
-
+
);
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(
- {
break;
}
}}
-
+
);
expect(document.querySelector('.dtc-drawer-tabs')).not.toBe(null);
expect(getByText('tab1')).toBeTruthy();
@@ -108,7 +108,7 @@ describe('test SlidePane ', () => {
unmount();
const { getByText: getByText1 } = render(
- {
break;
}
}}
-
+
);
expect(getByText1('变更记录')).toBeTruthy();
expect(getByText1('tab2').parentNode).toHaveClass('ant-tabs-tab-active');
});
test('Should support string banner', async () => {
const { getByText } = render(
-
+
Hello World
-
+
);
expect(getByText('banner')).toBeInTheDocument();
});
test('Should support ReactNode', async () => {
const { getByTestId } = render(
- xxxx}>
+ xxxx}>
test
-
+
);
expect(getByTestId('banner')).toBeInTheDocument();
});
it('Should support AlertProps', async () => {
const { getByText } = render(
-
+
test
-
+
);
expect(getByText('banner')).toBeInTheDocument();
@@ -163,9 +163,9 @@ describe('test SlidePane ', () => {
test('should callback to be called', () => {
const fn = jest.fn();
const { getByRole } = render(
-
+
Hello World
-
+
);
const oImg = getByRole('img');
fireEvent.click(oImg);
diff --git a/src/drawer/demos/basic.tsx b/src/drawer/demos/basic.tsx
index 46fda29f5..bdbb5008c 100644
--- 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,7 +28,7 @@ export default () => {
>
click me
- {
title="title"
>
hello world
-
+
);
};
diff --git a/src/drawer/demos/basicBanner.tsx b/src/drawer/demos/basicBanner.tsx
index 0738bb42e..7baf2e71b 100644
--- 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 () => {
- setVisible(false)}
title="title"
>
hello world
-
+
);
};
diff --git a/src/drawer/demos/basicBannerProps.tsx b/src/drawer/demos/basicBannerProps.tsx
index 5669b6b05..013dc183d 100644
--- 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,10 +10,10 @@ export default () => {
- {
title="title"
>
hello world
-
+
);
};
diff --git a/src/drawer/demos/basicSize.tsx b/src/drawer/demos/basicSize.tsx
index e1a04fbce..16e4f6e29 100644
--- 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['size']>('default');
+ const [size, setSize] = useState['size']>('default');
return (
<>
@@ -38,9 +38,9 @@ export default () => {
大尺寸
- setVisible(false)} title="title">
+ setVisible(false)} title="title">
hello world
-
+
);
};
diff --git a/src/drawer/demos/basic_mask.tsx b/src/drawer/demos/basic_mask.tsx
index ca9e86c83..99e79ff3b 100644
--- 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 () => {
- {
mask
>
hello world
-
+
);
};
diff --git a/src/drawer/demos/basic_top.tsx b/src/drawer/demos/basic_top.tsx
index 9c8a8621f..931170703 100644
--- 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
- setVisible(false)}
title="title"
rootStyle={{ top: 64 }}
>
hello world
-
+
);
};
diff --git a/src/drawer/demos/customTitle.tsx b/src/drawer/demos/customTitle.tsx
index 6a8730c06..db8cc2067 100644
--- a/src/drawer/demos/customTitle.tsx
+++ b/src/drawer/demos/customTitle.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);
@@ -8,7 +8,7 @@ export default () => {
return (
<>
- {
}
>
hello world
-
+
);
};
diff --git a/src/drawer/demos/footer.tsx b/src/drawer/demos/footer.tsx
index 46a1db66e..944dc49c9 100644
--- a/src/drawer/demos/footer.tsx
+++ b/src/drawer/demos/footer.tsx
@@ -1,6 +1,6 @@
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);
@@ -8,7 +8,7 @@ export default () => {
return (
<>
- setVisible(false)}
title="Title"
@@ -20,7 +20,7 @@ export default () => {
}
>
超长可滚动
-
+
);
};
diff --git a/src/drawer/demos/tabs.tsx b/src/drawer/demos/tabs.tsx
index ceae0d040..a50adb7d2 100644
--- a/src/drawer/demos/tabs.tsx
+++ b/src/drawer/demos/tabs.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);
@@ -8,7 +8,7 @@ export default () => {
return (
<>
- setVisible(false)}
title={'Title'}
@@ -37,7 +37,7 @@ export default () => {
break;
}
}}
-
+
);
};
diff --git a/src/drawer/demos/tabsControl.tsx b/src/drawer/demos/tabsControl.tsx
index a20c3dd36..b6ea46130 100644
--- a/src/drawer/demos/tabsControl.tsx
+++ b/src/drawer/demos/tabsControl.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);
@@ -9,7 +9,7 @@ export default () => {
return (
<>
- setVisible(false)}
title={'Title'}
@@ -38,7 +38,7 @@ export default () => {
break;
}
}}
-
+
);
};
diff --git a/src/drawer/index.md b/src/drawer/index.md
index f3a13e93a..1126c9ace 100644
--- a/src/drawer/index.md
+++ b/src/drawer/index.md
@@ -1,16 +1,16 @@
---
-title: SlidePane 右侧面板
+title: Drawer 抽屉
group: 组件
toc: content
demo:
cols: 2
---
-# SlidePane 右侧面板
+# Drawer 抽屉
## 何时使用
-从页面右侧弹出面板，展示相应内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
+从页面右侧弹出抽屉，展示相应内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
常用于： 查看详情， 预览较多内容的场景下。
## 示例