Skip to content

Commit fc4c802

Browse files
jljsj33jljsj33
committed
bump 1.0.0
1 parent e513334 commit fc4c802

File tree

12 files changed

+288
-199
lines changed

12 files changed

+288
-199
lines changed

‎HISTORY.md

+13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
History
22

33
---
4+
5+
## 1.0.0
6+
7+
### API
8+
9+
1. remove `openClassName` `width`;
10+
2. update `iconChild` -> `handleChild` `onIconClick` -> `onHandleClick`;
11+
3. add `handleStyle` `showMask`;
12+
13+
### Func
14+
15+
1. add `top` `bottom` placement.
16+
2. `handleChild` type remove Array;

‎README.md

+9-11
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
[![NPM version][npm-image]][npm-url]
55
[![build status][travis-image]][travis-url]
66
[![Test coverage][coveralls-image]][coveralls-url]
7-
[![gemnasium deps][gemnasium-image]][gemnasium-url]
87
[![node version][node-image]][node-url]
98
[![npm download][download-image]][download-url]
109

@@ -14,8 +13,6 @@
1413
[travis-url]: https://travis-ci.org/react-component/drawer-menu
1514
[coveralls-image]: https://img.shields.io/coveralls/react-component/drawer-menu.svg?style=flat-square
1615
[coveralls-url]: https://coveralls.io/r/react-component/drawer-menu?branch=master
17-
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/drawer-menu.svg?style=flat-square
18-
[gemnasium-url]: https://gemnasium.com/react-component/drawer-menu
1916
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
2017
[node-url]: http://nodejs.org/download/
2118
[download-image]: https://img.shields.io/npm/dm/rc-drawer-menu.svg?style=flat-square
@@ -53,22 +50,23 @@ ReactDom.render(
5350

5451
| props | type | default | description |
5552
|------------|----------------|---------|----------------|
56-
| className | string | `drawer` | - |
57-
| openClassName | string | `drawer-open` | open className |
53+
| className | string | null | - |
54+
| prefixCls | string | 'drawer' | prefix class |
5855
| wrapperClassName | string | null | wrapper class name |
59-
| iconChild | boolean / ReactElement / Array | true | true or false or ReactElement or Array(ReactElement, ReactElement) => [ close, open ] |
6056
| open | boolean | false | open or close menu |
6157
| defaultOpen | boolean | false | default open menu |
62-
| width | string | `60vw` | children width |
63-
| placement | string | `left` | `left` or `right` |
58+
| handleChild | boolean / ReactElement | true | true or false or ReactElement |
59+
| handleStyle | object | null | handle style |
60+
| placement | string | `left` | `left` `top` `right` `bottom` |
6461
| level | string or array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
6562
| levelTransition | string | `transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level css transition |
66-
| parent | string | `body` | parent element. if is `null` use React.creactElement |
63+
| getContainer | string | `body` | Return the mount node for Drawer. if is `null` use React.creactElement |
64+
| showMask | boolean | true | mask is show |
6765
| onChange | func | null | change callback(open) |
6866
| onMaskClick | func | null | mask close click function |
69-
| onIconClick | func | nul | icon click function |
67+
| onHandleClick | func | nul | handle icon click function |
7068

71-
> 0.5 onSwitch split into `onMaskClick` `onIconClick`;
69+
> 1.0 remove `openClassName` `width`, update `iconChild` -> `handleChild` `onIconClick` -> `onHandleClick`, add `handleStyle` `showMask`.
7270
7371
## Development
7472

‎assets/index.less

+87-30
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
pointer-events: none;
1010
> * {
1111
transition: transform .3s @ease-in-out-circ,
12-
opacity .3s @ease-in-out-circ,
13-
box-shaow .3s @ease-in-out-circ;
12+
opacity .3s @ease-in-out-circ,
13+
box-shaow .3s @ease-in-out-circ;
1414
}
15-
&-bg {
15+
&-mask {
1616
background: #000;
1717
opacity: 0;
1818
width: 100%;
@@ -21,17 +21,15 @@
2121
top: 0;
2222
}
2323
&-content-wrapper {
24-
position: absolute;
25-
height: 100%;
24+
position: absolute;
2625
}
2726
&-content {
2827
background: #fff;
29-
height: 100%;
30-
overflow: auto;
28+
overflow: auto;
3129
z-index: 1;
3230
position: relative;
3331
}
34-
&-button {
32+
&-handle {
3533
position: absolute;
3634
top: 72px;
3735
width: 41px;
@@ -52,7 +50,8 @@
5250
background: #333;
5351
position: relative;
5452
transition: background .3s @ease-in-out-circ;
55-
&:before, &:after {
53+
&:before,
54+
&:after {
5655
content: '';
5756
display: block;
5857
position: absolute;
@@ -64,61 +63,119 @@
6463
&:before {
6564
top: -5px;
6665
}
67-
&:after{
66+
&:after {
6867
top: 5px;
6968
}
7069
}
7170
}
72-
&-left{
73-
& .@{drawer} {
74-
&-button {
71+
&-left,
72+
&-right {
73+
.@{drawer}-content-wrapper,
74+
.@{drawer}-content {
75+
height: 100%;
76+
}
77+
}
78+
&-left {
79+
.@{drawer} {
80+
&-handle {
7581
right: -40px;
76-
box-shadow: 2px 2px 8px rgba(0,0,0,.15);
82+
box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
7783
border-radius: 0 4px 4px 0;
7884
}
7985
}
80-
&.@{drawer}-open{
81-
& .@{drawer}{
86+
&.@{drawer}-open {
87+
.@{drawer} {
8288
&-wrapper {
83-
box-shadow: 2px 2px 8px rgba(0,0,0,.15);
89+
box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
8490
}
8591
}
8692
}
8793
}
8894
&-right {
89-
& .@{drawer} {
90-
&-button {
95+
.@{drawer} {
96+
&-content-wrapper {
97+
right: 0;
98+
}
99+
&-handle {
91100
left: -40px;
92-
box-shadow: -2px 2px 8px rgba(0,0,0,.15);
101+
box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
93102
border-radius: 4px 0 0 4px;
94103
}
95104
}
96-
&.@{drawer}-open{
97-
& .@{drawer}{
98-
&-wrapper{
99-
box-shadow: -2px 2px 8px rgba(0,0,0,.15);
105+
&.@{drawer}-open {
106+
& .@{drawer} {
107+
&-wrapper {
108+
box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
109+
}
110+
}
111+
}
112+
}
113+
&-top,
114+
&-bottom {
115+
.@{drawer}-content-wrapper,
116+
.@{drawer}-content {
117+
width: 100%;
118+
}
119+
.@{drawer} {
120+
&-handle {
121+
left: 50%;
122+
margin-left: -20px;
123+
}
124+
}
125+
}
126+
&-top {
127+
.@{drawer} {
128+
&-handle {
129+
top: auto;
130+
bottom: -40px;
131+
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
132+
border-radius: 0 0 4px 4px;
133+
}
134+
}
135+
&.@{drawer}-open {
136+
.@{drawer} {
137+
&-wrapper {
138+
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
139+
}
140+
}
141+
}
142+
}
143+
&-bottom {
144+
.@{drawer} {
145+
&-content-wrapper {
146+
bottom: 0;
147+
}
148+
&-handle {
149+
top: -40px;
150+
box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
151+
border-radius: 4px 4px 0 0;
152+
}
153+
}
154+
&.@{drawer}-open {
155+
.@{drawer} {
156+
&-wrapper {
157+
box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
100158
}
101159
}
102160
}
103161
}
104162
&.@{drawer}-open {
105163
pointer-events: auto;
106164
.@{drawer} {
107-
&-bg {
165+
&-mask {
108166
opacity: .3;
109167
}
110-
&-button {
168+
&-handle {
111169
&-icon {
112170
background: transparent;
113-
&:before{
171+
&:before {
114172
transform: translateY(5px) rotate(45deg);
115173
}
116-
&:after{
174+
&:after {
117175
transform: translateY(-5px) rotate(-45deg);
118176
}
119177
}
120178
}
121179
}
122180
}
123-
}
124-
181+
}

‎examples/change-remove.js

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ class Demo extends React.Component {
2727
return (
2828
<div >
2929
{this.state.show && <Drawer
30-
width="240px"
3130
wrapperClassName="drawer-wrapper"
3231
>
3332
<Menu

‎examples/change.js

-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ class Demo extends React.Component {
4040
return (
4141
<div >
4242
<Drawer
43-
width="240px"
4443
onChange={this.onChange}
4544
open={this.state.open}
4645
onMaskClick={this.onTouchEnd}

‎examples/level.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const MenuItemGroup = Menu.ItemGroup;
1515

1616
ReactDom.render((
1717
<div >
18-
<Drawer level={['body > h1', '#__react-content']} width="240px">
18+
<Drawer level={['body > h1', '#__react-content']}>
1919
<Menu
2020
style={{ width: 240 }}
2121
defaultSelectedKeys={['1']}

‎examples/parent.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const MenuItemGroup = Menu.ItemGroup;
1717

1818
ReactDom.render((
1919
<div className="parent-demo">
20-
<Drawer parent={null} width="240px">
20+
<Drawer parent={null}>
2121
<Menu
2222
style={{ width: 240 }}
2323
defaultSelectedKeys={['1']}

0 commit comments

Comments
 (0)