bump 1.0.0

react-component · May 18, 2018 · fc4c802 · fc4c802
1 parent e513334
commit fc4c802
Show file tree

Hide file tree

Showing 12 changed files with 288 additions and 199 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,3 +1,16 @@
 History
 
 ---
+
+## 1.0.0
+
+### API
+
+1. remove `openClassName` `width`;
+2. update `iconChild` -> `handleChild` `onIconClick` -> `onHandleClick`;
+3. add `handleStyle` `showMask`;
+
+### Func
+
+1. add `top` `bottom` placement.
+2. `handleChild` type remove Array;
diff --git a/README.md b/README.md
@@ -4,7 +4,6 @@
 [![NPM version][npm-image]][npm-url]
 [![build status][travis-image]][travis-url]
 [![Test coverage][coveralls-image]][coveralls-url]
-[![gemnasium deps][gemnasium-image]][gemnasium-url]
 [![node version][node-image]][node-url]
 [![npm download][download-image]][download-url]
 
@@ -14,8 +13,6 @@
 [travis-url]: https://travis-ci.org/react-component/drawer-menu
 [coveralls-image]: https://img.shields.io/coveralls/react-component/drawer-menu.svg?style=flat-square
 [coveralls-url]: https://coveralls.io/r/react-component/drawer-menu?branch=master
-[gemnasium-image]: http://img.shields.io/gemnasium/react-component/drawer-menu.svg?style=flat-square
-[gemnasium-url]: https://gemnasium.com/react-component/drawer-menu
 [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
 [node-url]: http://nodejs.org/download/
 [download-image]: https://img.shields.io/npm/dm/rc-drawer-menu.svg?style=flat-square
@@ -53,22 +50,23 @@ ReactDom.render(
 
 | props      | type           | default | description    |
 |------------|----------------|---------|----------------|
-| className       | string | `drawer` | - |
-| openClassName | string | `drawer-open` | open className |
+| className       | string | null | - |
+| prefixCls     |  string  | 'drawer' | prefix class |
 | wrapperClassName | string | null | wrapper class name |
-| iconChild   | boolean / ReactElement / Array | true | true or false or ReactElement or Array(ReactElement, ReactElement) => [ close, open ] |
 | open        | boolean  | false |  open or close menu  |
 | defaultOpen | boolean  | false | default open menu |
-| width       |  string   |  `60vw` | children width |
-| placement  | string   |  `left` | `left` or `right` |
+| handleChild   | boolean / ReactElement | true | true or false or ReactElement |
+| handleStyle   | object | null | handle style |
+| placement  | string   |  `left` | `left` `top` `right` `bottom` |
 | level     | string or array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
 | levelTransition | string | `transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level css transition |
-| parent    | string | `body` | parent element. if is `null` use React.creactElement  | 
+| getContainer    | string | `body` | Return the mount node for Drawer. if is `null` use React.creactElement  |
+| showMask    |  boolean  | true | mask is show |
 | onChange  | func | null | change callback(open) |
 | onMaskClick | func | null | mask close click function |
-| onIconClick | func | nul  | icon click function |
+| onHandleClick | func | nul  | handle icon click function |
 
-> 0.5 onSwitch split into `onMaskClick` `onIconClick`;
+> 1.0 remove `openClassName` `width`, update `iconChild` -> `handleChild` `onIconClick` -> `onHandleClick`, add `handleStyle` `showMask`.
 
 ## Development
 

diff --git a/assets/index.less b/assets/index.less
@@ -9,10 +9,10 @@
   pointer-events: none;
   > * {
     transition: transform .3s @ease-in-out-circ, 
-                opacity .3s @ease-in-out-circ, 
-                box-shaow .3s @ease-in-out-circ;
+    opacity .3s @ease-in-out-circ, 
+    box-shaow .3s @ease-in-out-circ;
   }
-  &-bg {
+  &-mask {
     background: #000;
     opacity: 0;
     width: 100%;
@@ -21,17 +21,15 @@
     top: 0;
   }
   &-content-wrapper {
-   position: absolute; 
-   height: 100%;
+    position: absolute;
   }
   &-content {
     background: #fff;
-    height: 100%;
-    overflow: auto; 
+    overflow: auto;
     z-index: 1;
     position: relative;
   }
-  &-button {
+  &-handle {
     position: absolute;
     top: 72px;
     width: 41px;
@@ -52,7 +50,8 @@
       background: #333;
       position: relative;
       transition: background .3s @ease-in-out-circ;
-      &:before, &:after {
+      &:before,
+      &:after {
         content: '';
         display: block;
         position: absolute;
@@ -64,61 +63,119 @@
       &:before {
         top: -5px;
       }
-      &:after{
+      &:after {
         top: 5px;
       }
     }
   }
-  &-left{
-    & .@{drawer} {
-      &-button {
+  &-left,
+  &-right {
+    .@{drawer}-content-wrapper,
+    .@{drawer}-content {
+      height: 100%;
+    }
+  }
+  &-left {
+    .@{drawer} {
+      &-handle {
         right: -40px;
-        box-shadow: 2px 2px 8px rgba(0,0,0,.15);
+        box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
         border-radius: 0 4px 4px 0;
       }
     }
-    &.@{drawer}-open{
-      & .@{drawer}{
+    &.@{drawer}-open {
+      .@{drawer} {
         &-wrapper {
-          box-shadow: 2px 2px 8px rgba(0,0,0,.15);
+          box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
         }
       }
     }
   }
   &-right {
-    & .@{drawer} {
-      &-button {
+    .@{drawer} {
+      &-content-wrapper {
+        right: 0;
+      }
+      &-handle {
         left: -40px;
-        box-shadow: -2px 2px 8px rgba(0,0,0,.15);
+        box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
         border-radius: 4px 0 0 4px;
       }
     }
-    &.@{drawer}-open{
-      & .@{drawer}{
-        &-wrapper{
-          box-shadow: -2px 2px 8px rgba(0,0,0,.15);
+    &.@{drawer}-open {
+      & .@{drawer} {
+        &-wrapper {
+          box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
+        }
+      }
+    }
+  }
+  &-top,
+  &-bottom {
+    .@{drawer}-content-wrapper,
+    .@{drawer}-content {
+      width: 100%;
+    }
+    .@{drawer} {
+      &-handle {
+        left: 50%;
+        margin-left: -20px;
+      }
+    }
+  }
+  &-top {
+    .@{drawer} {
+      &-handle {
+        top: auto;
+        bottom: -40px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+        border-radius: 0 0 4px 4px;
+      }
+    }
+    &.@{drawer}-open {
+      .@{drawer} {
+        &-wrapper {
+          box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+        }
+      }
+    }
+  }
+  &-bottom {
+    .@{drawer} {
+      &-content-wrapper {
+        bottom: 0;
+      }
+      &-handle {
+        top: -40px;
+        box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
+        border-radius: 4px 4px 0 0;
+      }
+    }
+    &.@{drawer}-open {
+      .@{drawer} {
+        &-wrapper {
+          box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
         }
       }
     }
   }
   &.@{drawer}-open {
     pointer-events: auto;
     .@{drawer} {
-      &-bg {
+      &-mask {
         opacity: .3;
       }
-      &-button {
+      &-handle {
         &-icon {
           background: transparent;
-          &:before{
+          &:before {
             transform: translateY(5px) rotate(45deg);
           }
-          &:after{
+          &:after {
             transform: translateY(-5px) rotate(-45deg);
           }
         }
       }
     }
   }
-}
-
+}
diff --git a/examples/change-remove.js b/examples/change-remove.js
@@ -27,7 +27,6 @@ class Demo extends React.Component {
     return (
       <div >
         {this.state.show && <Drawer
-          width="240px"
           wrapperClassName="drawer-wrapper"
         >
           <Menu

diff --git a/examples/change.js b/examples/change.js
@@ -40,7 +40,6 @@ class Demo extends React.Component {
     return (
       <div >
         <Drawer
-          width="240px"
           onChange={this.onChange}
           open={this.state.open}
           onMaskClick={this.onTouchEnd}

diff --git a/examples/level.js b/examples/level.js
@@ -15,7 +15,7 @@ const MenuItemGroup = Menu.ItemGroup;
 
 ReactDom.render((
   <div >
-    <Drawer level={['body > h1', '#__react-content']} width="240px">
+    <Drawer level={['body > h1', '#__react-content']}>
       <Menu
         style={{ width: 240 }}
         defaultSelectedKeys={['1']}

diff --git a/examples/parent.js b/examples/parent.js
@@ -17,7 +17,7 @@ const MenuItemGroup = Menu.ItemGroup;
 
 ReactDom.render((
   <div className="parent-demo">
-    <Drawer parent={null} width="240px">
+    <Drawer parent={null}>
       <Menu
         style={{ width: 240 }}
         defaultSelectedKeys={['1']}