optimization: Fix problems found in review

This commit is contained in:
陈帅 2018-07-10 21:17:19 +08:00
parent 9ad0114102
commit 2cffe4f858
6 changed files with 20 additions and 46 deletions

View File

@ -0,0 +1,5 @@
const isNumeric = (value: any): boolean => {
return !isNaN(parseFloat(value)) && isFinite(value);
};
export default isNumeric;

View File

@ -2,7 +2,7 @@
order: 1 order: 1
title: title:
zh-CN: 左侧滑出 zh-CN: 左侧滑出
en-US: Left Silder en-US: Left Slider
--- ---
## zh-CN ## zh-CN

View File

@ -14,20 +14,9 @@ title:
Open a new drawer on top of an existing drawer to handle multi branch tasks Open a new drawer on top of an existing drawer to handle multi branch tasks
```jsx ```jsx
import { Drawer, List, Form, Button, Input, Tag } from 'antd'; import { Drawer, Button } from 'antd';
const vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant']; class App extends React.Component {
const TagList = ({ value, show }) => {
return (
<div>
{value.map(item => <Tag key={item}>{item}</Tag>)}
<Tag onClick={() => show()}>+</Tag>
</div>
);
};
class DrawerForm extends React.Component {
state = { visible: false, childrenDrawer: false }; state = { visible: false, childrenDrawer: false };
showDrawer = () => { showDrawer = () => {
@ -55,33 +44,22 @@ class DrawerForm extends React.Component {
}; };
render() { render() {
const { getFieldDecorator } = this.props.form;
return ( return (
<div> <div>
<Button type="primary" onClick={this.showDrawer}> <Button type="primary" onClick={this.showDrawer}>
New Cookbook Open drawer
</Button> </Button>
<Drawer <Drawer
title="Cookbook" title="Multi-level drawer"
width={520} width={520}
closable={false} closable={false}
onClose={this.onClose} onClose={this.onClose}
visible={this.state.visible} visible={this.state.visible}
push={this.state.childrenDrawer} push={this.state.childrenDrawer}
> >
<Form hideRequiredMark> <Button type="primary" onClick={this.showChildrenDrawer}>
<Form.Item label="Name"> Two-level drawer
{getFieldDecorator('name', { </Button>
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>
<Drawer <Drawer
title="Food" title="Food"
width={320} width={320}
@ -89,12 +67,7 @@ class DrawerForm extends React.Component {
onClose={this.onChildrenDrawerClose} onClose={this.onChildrenDrawerClose}
visible={this.state.childrenDrawer} visible={this.state.childrenDrawer}
> >
<List This is two-level drawer
size="small"
header={<div>Vegetables</div>}
dataSource={vegetables}
renderItem={item => <List.Item>{item}</List.Item>}
/>
</Drawer> </Drawer>
<div <div
style={{ style={{
@ -126,7 +99,6 @@ class DrawerForm extends React.Component {
); );
} }
} }
const App = Form.create()(DrawerForm);
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
``` ```

View File

@ -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 | - | | style | Style of floating layer, typically used for adjusting its position. | object | - |
| title | The title for Drawer. | string\|ReactNode | - | | title | The title for Drawer. | string\|ReactNode | - |
| visible | Whether the Drawer dialog is visible or not. | boolean | false | | 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 | - | | wrapClassName | The class name of the container of the Drawer dialog. | string | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 | | zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'left' \| 'right' | 'right' | placement | The placement of the Drawer. | 'left' \| 'right' | 'right'

View File

@ -2,6 +2,7 @@ import * as React from 'react';
import RcDrawer from 'rc-drawer'; import RcDrawer from 'rc-drawer';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import createReactContext, { Context } from 'create-react-context'; import createReactContext, { Context } from 'create-react-context';
import isNumeric from '../_util/isNumeric';
const DrawerContext: Context<Drawer | null> = createReactContext(null); const DrawerContext: Context<Drawer | null> = createReactContext(null);
@ -151,7 +152,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
} }
renderProvider = (value: Drawer) => { renderProvider = (value: Drawer) => {
let { width, zIndex, style, placement, ...rest } = this.props; let { width, zIndex, style, placement, ...rest } = this.props;
if (typeof width === 'number') { if (isNumeric(width)) {
width = `${width}px`; width = `${width}px`;
} }
const RcDrawerStyle = this.state.push const RcDrawerStyle = this.state.push

View File

@ -72,7 +72,6 @@
background-color: @component-background; background-color: @component-background;
border: 0; border: 0;
background-clip: padding-box; background-clip: padding-box;
box-shadow: @shadow-2;
z-index: 1; z-index: 1;
} }
@ -147,12 +146,9 @@
&-open { &-open {
overflow: hidden; overflow: hidden;
&-content {
box-shadow: @shadow-2;
}
} }
} }
@media (max-width: @screen-md) {
.@{dawer-prefix-cls} {
width: auto !important;
margin: 10px;
}
}