refactor to 2.x

react-component · Jan 20, 2015 · 8568aed · 8568aed
1 parent b508b11
commit 8568aed
Show file tree

Hide file tree

Showing 21 changed files with 563 additions and 1,352 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
 # rc-menu
-
-react menu component
 ---
 
+react menu component. port from https://github.com/kissyteam/menu
+
+
 [![NPM version][npm-image]][npm-url]
 [![build status][travis-image]][travis-url]
 [![Test coverage][coveralls-image]][coveralls-url]
@@ -27,29 +28,152 @@ react menu component
 [download-url]: https://npmjs.org/package/rc-menu
 
 
-## examples
-- [full](./examples/index.md)
-- [pure css menu](./examples/pure-css.html)
+## Screenshot
 
 ![alt](https://tfsimg.alipay.com/images/T19vReXg0oXXXXXXXX.png)
 
 
 ## Usage
-- see examples
-- It uses the [bootstrap](http://getbootstrap.com/)'s css and [Font Awesome](http://fortawesome.github.io/Font-Awesome/) for demo
 
+```js
+var Menu = require('rc-menu');
+var SubMenu = Menu.SubMenu;
+var MenuItem = Menu.Item;
+React.render(<Menu><MenuItem>1</MenuItem><SubMenu title="2"><MenuItem>2-1</MenuItem></SubMenu></Menu>, container);
+```
 
 ## install
 
 [![rc-menu](https://nodei.co/npm/rc-menu.png)](https://npmjs.org/package/rc-menu)
 
+## API
+
+### menu props
+
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 100px;">name</th>
+        <th style="width: 50px;">type</th>
+        <th style="width: 50px;">default</th>
+        <th>description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+          <td>className</td>
+          <td>String</td>
+          <td></td>
+          <td>additional css class of root dom node</td>
+        </tr>
+        <tr>
+            <td>activeKey</td>
+            <td>Object</td>
+            <th>first active item's key</th>
+            <td>same with active tabPanel's key</td>
+        </tr>
+        <tr>
+            <td>onSelect</td>
+            <td>Function(key:String)</td>
+            <th></th>
+            <td>function called with selected menu item's key as param</td>
+        </tr>
+    </tbody>
+</table>
+
+### menu item props
+
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 100px;">name</th>
+        <th style="width: 50px;">type</th>
+        <th style="width: 50px;">default</th>
+        <th>description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+          <td>className</td>
+          <td>String</td>
+          <td></td>
+          <td>additional css class of root dom node</td>
+        </tr>
+        <tr>
+            <td>disabled</td>
+            <td>Boolean</td>
+            <th>false</th>
+            <td>no effect for click or keydown for this item</td>
+        </tr>
+        <tr>
+            <td>key</td>
+            <td>Object</td>
+            <th></th>
+            <td>corresponding to activeKey</td>
+        </tr>
+    </tbody>
+</table>
+
+
+### sub menu props
+
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 100px;">name</th>
+        <th style="width: 50px;">type</th>
+        <th style="width: 50px;">default</th>
+        <th>description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+          <td>className</td>
+          <td>String</td>
+          <td></td>
+          <td>additional css class of root dom node</td>
+        </tr>
+        <tr>
+          <td>title</td>
+          <td>String/ReactElement</td>
+          <td></td>
+          <td>sub menu's content</td>
+        </tr>
+        <tr>
+            <td>key</td>
+            <td>Object</td>
+            <th></th>
+            <td>corresponding to activeKey</td>
+        </tr>
+        <tr>
+            <td>disabled</td>
+            <td>Boolean</td>
+            <th>false</th>
+            <td>no effect for click or keydown for this item</td>
+        </tr>
+        <tr>
+            <td>openOnHover</td>
+            <td>Boolean</td>
+            <th>true</th>
+            <td>whether show second sub menu on hover</td>
+        </tr>
+    </tbody>
+</table>
+
 ## Development
 
 ```
 npm install
 npm start
 ```
 
+## Example
+
+http://localhost:8001/examples/index.md
+
+online example: http://spmjs.io/docs/rc-menu/examples/
+
+
 ## Test Case
 
 http://localhost:8000/tests/runner.html?coverage

diff --git a/assets/index.less b/assets/index.less
@@ -0,0 +1,51 @@
+.rc-menu{
+  outline:none;
+  margin-bottom: 0;
+  padding-left: 0; // Override default ul/ol
+  list-style: none;
+  z-index: 99999;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 3px;
+
+  .rc-menu-item-active,.rc-menu-submenu-active {
+    background-color: #8EC8F9 !important;
+  }
+
+  > li {
+    position: relative;
+    display: block;
+    padding: 15px 20px;
+    white-space: nowrap;
+
+    // Disabled state sets text to gray and nukes hover/tab effects
+    &.rc-menu-item-disabled,&.rc-menu-submenu-disabled  {
+      color: #777;
+    }
+  }
+  .rc-menu-item-divider {
+    padding: 0;
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+  }
+}
+
+.rc-menu-submenu {
+  position: relative;
+
+  >.rc-menu {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 100%;
+    min-width: 160px;
+    background-color: #fff;
+  }
+}
+
+.rc-menu-submenu-open {
+  > .rc-menu{
+    display: block;
+  }
+}
diff --git a/examples/index.less b/examples/index.less
@@ -1,63 +1 @@
-/**
- *
- */
-@import "font-awesome/css/font-awesome.css";
-
-.rc-menu{
-  margin-bottom: 0;
-  padding-left: 0; // Override default ul/ol
-  list-style: none;
-  z-index: 99999;
-  border: 1px solid rgba(0, 0, 0, .15);
-  border-radius: 3px;
-  > li {
-    position: relative;
-    display: block;
-    > a {
-      position: relative;
-      display: block;
-      padding: 15px 20px;
-      white-space: nowrap;
-      &:hover,
-      &:focus{
-        text-decoration: none;
-      }
-    }
-    // Disabled state sets text to gray and nukes hover/tab effects
-    &.disabled > a {
-      color: #777;
-    }
-  }
-  .divider {
-    height: 1px;
-    margin: 9px 0;
-    overflow: hidden;
-    background-color: #e5e5e5;
-  }
-}
-
-.rc-submenu {
-  position: relative;
-
-  >.rc-menu {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 100%;
-    min-width: 160px;
-    background-color: #fff;
-  }
-
-  &.pull-left{
-    float: none !important;
-    >.rc-menu {
-      left: -100%;
-    }
-  }
-}
-
-.open{
-  > .rc-menu{
-    display: block;
-  }
-}
+@import "font-awesome/css/font-awesome.css";