提交 2cffe4f8 编写于 作者: 陈帅

optimization: Fix problems found in review

上级 9ad01141
const isNumeric = (value: any): boolean => {
return !isNaN(parseFloat(value)) && isFinite(value);
};
export default isNumeric;
......@@ -2,7 +2,7 @@
order: 1
title:
zh-CN: 左侧滑出
en-US: Left Silder
en-US: Left Slider
---
## zh-CN
......
......@@ -14,20 +14,9 @@ title:
Open a new drawer on top of an existing drawer to handle multi branch tasks
```jsx
import { Drawer, List, Form, Button, Input, Tag } from 'antd';
import { Drawer, Button } from 'antd';
const vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant'];
const TagList = ({ value, show }) => {
return (
<div>
{value.map(item => <Tag key={item}>{item}</Tag>)}
<Tag onClick={() => show()}>+</Tag>
</div>
);
};
class DrawerForm extends React.Component {
class App extends React.Component {
state = { visible: false, childrenDrawer: false };
showDrawer = () => {
......@@ -55,33 +44,22 @@ class DrawerForm extends React.Component {
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
New Cookbook
Open drawer
</Button>
<Drawer
title="Cookbook"
title="Multi-level drawer"
width={520}
closable={false}
onClose={this.onClose}
visible={this.state.visible}
push={this.state.childrenDrawer}
>
<Form hideRequiredMark>
<Form.Item label="Name">
{getFieldDecorator('name', {
rules: [{ required: true, message: 'please enter cookbook name' }],
})(<Input placeholder="please enter cookbook name" />)}
</Form.Item>
<Form.Item label="Food">
{getFieldDecorator('Food', {
rules: [{ required: true, message: 'please enter food' }],
initialValue: ['potato', 'eggplant'],
})(<TagList show={this.showChildrenDrawer} />)}
</Form.Item>
</Form>
<Button type="primary" onClick={this.showChildrenDrawer}>
Two-level drawer
</Button>
<Drawer
title="Food"
width={320}
......@@ -89,12 +67,7 @@ class DrawerForm extends React.Component {
onClose={this.onChildrenDrawerClose}
visible={this.state.childrenDrawer}
>
<List
size="small"
header={<div>Vegetables</div>}
dataSource={vegetables}
renderItem={item => <List.Item>{item}</List.Item>}
/>
This is two-level drawer
</Drawer>
<div
style={{
......@@ -126,7 +99,6 @@ class DrawerForm extends React.Component {
);
}
}
const App = Form.create()(DrawerForm);
ReactDOM.render(<App />, mountNode);
```
......
......@@ -26,7 +26,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| style | Style of floating layer, typically used for adjusting its position. | object | - |
| title | The title for Drawer. | string\|ReactNode | - |
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
| width | Width of the Drawer dialog. | string\|number | 520 |
| width | Width of the Drawer dialog. | string\|number | 256 |
| wrapClassName | The class name of the container of the Drawer dialog. | string | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
......
......@@ -2,6 +2,7 @@ import * as React from 'react';
import RcDrawer from 'rc-drawer';
import PropTypes from 'prop-types';
import createReactContext, { Context } from 'create-react-context';
import isNumeric from '../_util/isNumeric';
const DrawerContext: Context<Drawer | null> = createReactContext(null);
......@@ -151,7 +152,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
}
renderProvider = (value: Drawer) => {
let { width, zIndex, style, placement, ...rest } = this.props;
if (typeof width === 'number') {
if (isNumeric(width)) {
width = `${width}px`;
}
const RcDrawerStyle = this.state.push
......
......@@ -72,7 +72,6 @@
background-color: @component-background;
border: 0;
background-clip: padding-box;
box-shadow: @shadow-2;
z-index: 1;
}
......@@ -147,12 +146,9 @@
&-open {
overflow: hidden;
&-content {
box-shadow: @shadow-2;
}
}
}
@media (max-width: @screen-md) {
.@{dawer-prefix-cls} {
width: auto !important;
margin: 10px;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册