Skip to content

Commit

Permalink
feat: Darwer 组件增加 height 参数
Browse files Browse the repository at this point in the history
  • Loading branch information
@lijinke666
lijinke666 committed Oct 21, 2018
1 parent d60fcca commit edbea70
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 19 deletions.
14 changes: 11 additions & 3 deletions components/drawer/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`<Drawer/> should render a <Drawer/> components 1`] = `
>
<div
class="cuke-drawer cuke-drawer-open cuke-drawer-right"
style="width:300px;z-index:999"
style="width:300px;height:100%;z-index:999"
>
<section
class="cuke-drawer-header"
Expand Down Expand Up @@ -67,7 +67,7 @@ exports[`<Drawer/> should render a <Drawer/> components 1`] = `
>
<div
class="cuke-drawer cuke-drawer-open cuke-drawer-right"
style="width:500px;z-index:999"
style="width:500px;height:100%;z-index:999"
>
<section
class="cuke-drawer-header"
Expand Down Expand Up @@ -122,7 +122,7 @@ exports[`<Drawer/> should render a <Drawer/> components 1`] = `
>
<div
class="cuke-drawer cuke-drawer-open cuke-drawer-right"
style="width:500px;z-index:9999"
style="width:500px;height:100%;z-index:9999"
>
<section
class="cuke-drawer-header"
Expand Down Expand Up @@ -174,6 +174,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
<div>
<Drawer
closable={true}
height={300}
maskClosable={true}
onClose={[Function]}
placement="left"
Expand All @@ -198,6 +199,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
className="cuke-drawer cuke-drawer-open cuke-drawer-left no-title"
style={
Object {
"height": "100%",
"width": 300,
"zIndex": 999,
}
Expand Down Expand Up @@ -289,6 +291,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
</Drawer>
<Drawer
closable={true}
height={300}
maskClosable={true}
onClose={[Function]}
placement="top"
Expand All @@ -313,6 +316,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
className="cuke-drawer cuke-drawer-open cuke-drawer-top no-title"
style={
Object {
"height": 300,
"width": 300,
"zIndex": 999,
}
Expand Down Expand Up @@ -404,6 +408,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
</Drawer>
<Drawer
closable={true}
height={300}
maskClosable={true}
onClose={[Function]}
placement="right"
Expand All @@ -428,6 +433,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
className="cuke-drawer cuke-drawer-open cuke-drawer-right no-title"
style={
Object {
"height": "100%",
"width": 300,
"zIndex": 999,
}
Expand Down Expand Up @@ -519,6 +525,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
</Drawer>
<Drawer
closable={true}
height={300}
maskClosable={true}
onClose={[Function]}
placement="bottom"
Expand All @@ -543,6 +550,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
className="cuke-drawer cuke-drawer-open cuke-drawer-bottom no-title"
style={
Object {
"height": 300,
"width": 300,
"zIndex": 999,
}
Expand Down
5 changes: 5 additions & 0 deletions components/drawer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default class Drawer extends PureComponent {
closable: true,
showMask: true,
width: 300,
height: 300,
zIndex: 999,
placement: placements[0]
};
Expand All @@ -40,6 +41,7 @@ export default class Drawer extends PureComponent {
showMask: PropTypes.bool,
zIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
placement: PropTypes.oneOf(placements),
target: PropTypes.func,
onClose: PropTypes.func
Expand Down Expand Up @@ -79,6 +81,7 @@ export default class Drawer extends PureComponent {
maskClosable,
showMask,
width,
height,
zIndex,
placement,
style,
Expand Down Expand Up @@ -124,6 +127,8 @@ export default class Drawer extends PureComponent {
style={{
...style,
width,
height:
placement === "bottom" || placement === "top" ? height : "100%",
zIndex
}}
{...attr}
Expand Down
4 changes: 2 additions & 2 deletions components/styles/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,8 @@

//Drawer 抽屉
@cuke-drawer-z-index: 999;
@cuke-drawer-width: 260px;
@cuke-drawer-height: 260px;
@cuke-drawer-width: 300px;
@cuke-drawer-height: 300px;
@cuke-drawer-animate-type: .3s cubic-bezier(.9, 0, .3, .7);

//Radio 单选框
Expand Down
14 changes: 7 additions & 7 deletions stories/feedback.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ storiesOf("操作反馈", module)
import React, { Component } from 'react';
import Drawer from '../../components/drawer';
import Button from '../../components/button';
import Radio from '../../components/radio';
import Col from '../../components/col';
import Row from '../../components/row';
Expand Down Expand Up @@ -249,14 +250,13 @@ storiesOf("操作反馈", module)
</Row>
<h2>四个方向</h2>
//TODO: 后期 完成了 Select 组件 替换
<p>
<select onChange={this.onPlacementChange} style={{width:200}}>
<option value="right">右</option>
<option value="left">左</option>
<option value="top">上</option>
<option value="bottom">下</option>
</select>
<Radio.Group value={this.state.placement} onChange={this.onPlacementChange}>
<Radio value="right">右</Radio>
<Radio value="left">左</Radio>
<Radio value="top">上</Radio>
<Radio value="bottom">下</Radio>
</Radio.Group>
</p>
<Row>
<Col span={6}>
Expand Down
27 changes: 20 additions & 7 deletions stories/pages/drawer.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import Drawer from "../../components/drawer";
import Button from "../../components/button";
import Radio from "../../components/radio";
import Col from "../../components/col";
import Row from "../../components/row";

Expand Down Expand Up @@ -59,15 +60,18 @@ export default class DrawerPage extends Component {
</Button>
</Col>
</Row>
<h2>自定义高度 (方向为 top | bottom 有效)</h2>
<Button type="primary" onClick={() => this.onShow("visible15")}>
可长可短
</Button>
<h2>四个方向</h2>
//TODO: 后期 完成了 Select 组件 替换
<p>
<select onChange={this.onPlacementChange} style={{ width: 200 }}>
<option value="right">右</option>
<option value="left">左</option>
<option value="top">上</option>
<option value="bottom">下</option>
</select>
<Radio.Group value={this.state.placement} onChange={this.onPlacementChange}>
<Radio value="right">右</Radio>
<Radio value="left">左</Radio>
<Radio value="top">上</Radio>
<Radio value="bottom">下</Radio>
</Radio.Group>
</p>
<Row>
<Col span={6}>
Expand Down Expand Up @@ -129,6 +133,15 @@ export default class DrawerPage extends Component {
<span>宽度500px</span>
<span>z-index:888</span>
</Drawer>
<Drawer
title="自定义高度"
placement="bottom"
height={400}
visible={this.state.visible15}
onClose={() => this.onClose("visible15")}
>
<span>高度400px</span>
</Drawer>
</div>
);
}
Expand Down

0 comments on commit edbea70

Please sign in to comment.