Browse Source

demo: improve drawer demo and test case code

pull/11472/merge
afc163 6 years ago
parent
commit
76afe5037d
  1. 2
      components/drawer/__tests__/MultiDrawer.test.js
  2. 6
      components/drawer/demo/basic-left.md
  3. 7
      components/drawer/demo/basic-right.md
  4. 15
      components/drawer/demo/from-drawer.md
  5. 9
      components/drawer/demo/multi-level-drawer.md
  6. 44
      components/drawer/demo/user-profile.md
  7. 6
      components/drawer/index.en-US.md
  8. 6
      components/drawer/index.zh-CN.md

2
components/drawer/__tests__/MultiDrawer.test.js

@ -40,7 +40,7 @@ class MultiDrawer extends React.Component {
</Button>
<Drawer
title="Multi-level drawer"
wrapClassName="test_drawer"
className="test_drawer"
width={520}
closable={false}
onClose={this.onClose}

6
components/drawer/demo/basic-left.md

@ -55,9 +55,3 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
<style>
#_hj_feedback_container{
display:none
}
</style>

7
components/drawer/demo/basic-right.md

@ -55,10 +55,3 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
<style>
#_hj_feedback_container{
display:none
}
</style>

15
components/drawer/demo/from-drawer.md

@ -28,11 +28,9 @@ class DrawerForm extends React.Component {
};
onClose = () => {
this.setState(
{
visible: false,
}
);
this.setState({
visible: false,
});
};
render() {
@ -174,13 +172,8 @@ class DrawerForm extends React.Component {
);
}
}
const App = Form.create()(DrawerForm);
ReactDOM.render(<App />, mountNode);
```
<style>
#_hj_feedback_container{
display:none
}
</style>

9
components/drawer/demo/multi-level-drawer.md

@ -52,13 +52,12 @@ class App extends React.Component {
<Drawer
title="Multi-level drawer"
width={520}
wrapClassName="test_drawer"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<Button type="primary" onClick={this.showChildrenDrawer}>
Two-level drawer
Two-level drawer
</Button>
<Drawer
title="Two-level Drawer"
@ -102,9 +101,3 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
<style>
#_hj_feedback_container{
display:none
}
</style>

44
components/drawer/demo/user-profile.md

@ -24,29 +24,27 @@ const pStyle = {
marginBottom: 16,
};
const DescriptionItem = ({ title, content }) => {
return (
<div
const DescriptionItem = ({ title, content }) => (
<div
style={{
fontSize: 14,
lineHeight: '22px',
marginBottom: 7,
color: 'rgba(0,0,0,0.65)',
}}
>
<p
style={{
fontSize: 14,
lineHeight: '22px',
marginBottom: 7,
color: 'rgba(0,0,0,0.65)',
marginRight: 8,
display: 'inline-block',
color: 'rgba(0,0,0,0.85)',
}}
>
<p
style={{
marginRight: 8,
display: 'inline-block',
color: 'rgba(0,0,0,0.85)',
}}
>
{title}:
</p>
{content}
</div>
);
};
{title}:
</p>
{content}
</div>
);
class App extends React.Component {
state = { visible: false };
@ -185,9 +183,3 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
<style>
#_hj_feedback_container{
display:none
}
</style>

6
components/drawer/index.en-US.md

@ -31,3 +31,9 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
<style>
#_hj_feedback_container {
display: none;
}
</style>

6
components/drawer/index.zh-CN.md

@ -32,3 +32,9 @@ title: Drawer
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
<style>
#_hj_feedback_container {
display: none;
}
</style>

Loading…
Cancel
Save