mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +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
|
order: 1
|
||||||
title:
|
title:
|
||||||
zh-CN: 左侧滑出
|
zh-CN: 左侧滑出
|
||||||
en-US: Left Silder
|
en-US: Left Slider
|
||||||
---
|
---
|
||||||
|
|
||||||
## zh-CN
|
## zh-CN
|
||||||
|
@ -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);
|
||||||
```
|
```
|
||||||
|
@ -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'
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user