feat: add component collapse

components/collapse/demo/accordion.md

+# 手风琴
+
+- order: 1
+
+手风琴，每次只打开一个tab。默认打开第一个
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+var text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+  <Collapse accordion={true}>
+    <Panel header={`This is panel header 1`} key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 2`} key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 3`} key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, document.getElementById('components-collapse-demo-accordion'));
+````

components/collapse/demo/basic.md

+# 折叠面板
+
+- order: 0
+
+默认打开第二个面板。
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+function callback(key) {
+  console.log(key);
+}
+
+var text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+  <Collapse defaultActiveKey={["2"]} onChange={callback}>
+    <Panel header={`This is panel header 1`} key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 2`} key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 3`} key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, document.getElementById('components-collapse-demo-basic'));
+````

components/collapse/index.jsx

+'use strict';
+
+var Collapse = require('rc-collapse');
+var React = require('react');
+var prefixCls = 'ant-collapse';
+
+class AntCollapse extends React.Component {
+  render() {
+    return <Collapse {...this.props} />;
+  }
+}
+
+AntCollapse.defaultProps = {
+  prefixCls: prefixCls
+};
+
+AntCollapse.Panel = Collapse.Panel;
+
+module.exports = AntCollapse;

components/collapse/index.md

@@ -11,3 +11,21 @@
 
 - 对复杂区域进行分组和隐藏，保持页面的整洁。
 - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
+
+## API
+
+### Collapse
+
+| 参数             | 说明                                         | 类型     | 默认值                          |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| activeKey        | 当前激活 tab 面板的 key| Array or String   | 默认无，accordion模式下默认第一个元素|
+| defaultActiveKey | 初始化选中面板的 key | String   | 无 |
+| onChange         | 切换面板的回调                               | Function | 无                              |
+
+
+### Collapse.Panel
+
+| 参数 | 说明             | 类型                    | 默认值 |
+|------|------------------|-------------------------|--------|
+| key  | 对应 activeKey   | String                  | 无     |
+| header | 面板头内容 | React.Element or String | 无     |

index.js

@@ -15,7 +15,8 @@ var antd = {
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),
   InputNumber: require('./components/input-number'),
-  Switch: require('./components/switch')
+  Switch: require('./components/switch'),
+  Collapse: require('./components/Collapse')
 };
 
 module.exports = antd;

package.json

@@ -17,6 +17,7 @@
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~3.0.0",
     "rc-calendar": "~3.10.0",
+    "rc-collapse": "~1.2.0",
     "rc-dialog": "~4.4.0",
     "rc-dropdown": "~1.1.1",
     "rc-input-number": "~2.0.1",
@@ -48,7 +49,6 @@
     "webpack": "^1.10.1",
     "webpack-dev-middleware": "^1.2.0"
   },
-
   "scripts": {
     "babel": "babel components --out-dir lib",
     "build": "npm run clean && webpack && nico build",

style/components/collapse.less

+@prefixCls: ant-collapse;
+@borderStyle: 1px solid #d9d9d9;
+
+#arrow {
+  .common(){
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+  }
+  .right(@w, @h, @color) {
+    border-top: @w solid transparent;
+    border-bottom: @w solid transparent;
+    border-left: @h solid @color;
+  }
+
+  .bottom(@w, @h, @color) {
+    border-left: @w solid transparent;
+    border-right: @w solid transparent;
+    border-top: @h solid @color;
+  }
+}
+
+.@{prefixCls} {
+  background-color: #f3f5f7;
+  border-radius: 3px;
+  border-top: @borderStyle;
+  border-left: @borderStyle;
+  border-right: @borderStyle;
+
+  &-content {
+    height: 0;
+    opacity: 0;
+    transition-property: all;
+    transition-duration: .3s;
+    transition-timing-function: ease-in;
+    overflow: hidden;
+    color: #999;
+    padding: 0 16px;
+    background-color: #fbfbfb;
+    > p, div {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+
+  &-content-active {
+    opacity: 1;
+    height: auto;
+    border-bottom: @borderStyle;
+  }
+
+  &-header {
+    height: 38px;
+    line-height: 38px;
+    text-indent: 16px;
+    color: #666;
+    border-bottom: @borderStyle;
+    &:before {
+      display: inline-block;
+      content: '\20';
+      #arrow > .common();
+      #arrow > .right(3px, 4px, #666);
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+  }
+
+  &-item-active {
+    .@{prefixCls}-header::before {
+      #arrow > .bottom(3px, 4px, #666);
+    }
+  }
+}

style/components/index.less

@@ -16,3 +16,4 @@
 @import "breadcrumb";
 @import "inputNumber";
 @import "typography";
+@import "collapse";