mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
optimization: Fix problems found in review
This commit is contained in:
parent
9ad0114102
commit
2cffe4f858
5
components/_util/isNumeric.ts
Normal file
5
components/_util/isNumeric.ts
Normal file
@ -0,0 +1,5 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user