merge

components/collapse/demo/accordion.md

@@ -0,0 +1,32 @@
+# 手风琴
+
+- 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

@@ -0,0 +1,36 @@
+# 折叠面板
+
+- 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/demo/mix.md

@@ -0,0 +1,40 @@
+# 面板嵌套
+
+- order: 2
+
+手风琴嵌套折叠面板
+
+---
+
+````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 onChange={callback} accordion={true}>
+    <Panel header={`This is panel header 1`} key="1">
+      <Collapse defaultActiveKey="1">
+        <Panel header={`This is panel nest panel`} key="1">
+          <p>{text}</p>
+        </Panel>
+      </Collapse>
+    </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-mix'));
+````

components/collapse/index.jsx

@@ -0,0 +1,19 @@
+'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 | 无     |

components/iconfont/index.md

@@ -13,11 +13,11 @@
 
 我们为每个图标赋予了语义化的命名。我们的命名规范如：
 
-- 1. 使用 `-` 来连接单词；
+- 使用 `-` 来连接单词；
 
-- 2. 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
+- 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
 
-- 3. 命名顺序：`[icon名]-[描线与否]-[方向]`。
+- 命名顺序：`[icon名]-[描线与否]-[方向]`。
 
 每个图标的类名需要在图标名称前加上 `anticon-` 前缀，如 `.anticon-question-circle`。
 

components/message/demo/duration.md

@@ -0,0 +1,19 @@
+# 基本
+
+- order: 4
+
+全局提示 - 操作成功提示,并自定义时长`10s`，默认时长`1.5s`。
+
+---
+
+````jsx
+
+var message = antd.message;
+var success = function() {
+  message.success('这是一条成功的提示,并将于10秒后消失', 10);
+};
+
+React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button>
+, document.getElementById('components-message-demo-duration'));
+````
+

components/message/demo/error.md

@@ -0,0 +1,18 @@
+# 基本
+
+- order: 1
+
+全局提示 - 操作失败反馈。
+
+---
+
+````jsx
+
+var message = antd.message;
+var error = function() {
+  message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
+};
+
+React.render(<button className="ant-btn ant-btn-primary" onClick={error}>显示失败提示</button>
+, document.getElementById('components-message-demo-error'));
+````

components/message/demo/info.md

@@ -0,0 +1,18 @@
+# 基本
+
+- order: 2
+
+全局提示 - 提醒反馈。
+
+---
+
+````jsx
+
+var message = antd.message;
+var info = function() {
+  message.info('这是一条普通的提醒');
+};
+
+React.render(<button className="ant-btn ant-btn-primary" onClick={info}>显示普通提醒</button>
+, document.getElementById('components-message-demo-info'));
+````

components/message/demo/success.md

@@ -0,0 +1,18 @@
+# 基本
+
+- order: 0
+
+全局提示 - 操作成功提示。
+
+---
+
+````jsx
+var message = antd.message;
+var success = function() {
+  message.success('这是一条成功的提示');
+};
+
+React.render(<button className="ant-btn ant-btn-primary" onClick={success}>显示成功提示</button>
+, document.getElementById('components-message-demo-success'));
+````
+

components/message/index.jsx

@@ -0,0 +1,58 @@
+'use strict';
+
+//import React from 'react';
+import Notification from 'rc-notification';
+
+var defaultDuration = 1.5;
+
+var getMessageInstance = function(){
+  return Notification.newInstance({
+    prefixCls: 'ant-message',
+    transitionName: 'move-up',
+    style: {}  // 覆盖原来的样式
+  });
+};
+
+export default {
+  info: function(m, t) {
+    var message = getMessageInstance();
+    t = t || defaultDuration;
+    message.notice({
+      key: 'simpleMessage',
+      duration: t,
+      style: {},
+      content: <div className='ant-message-custom-content'>
+                 <i className='anticon anticon-info-circle ant-message-info'></i>
+                 <span>{m}</span>
+               </div>
+    });
+  },
+  success: function(m, t) {
+    var message = getMessageInstance();
+    t = t || defaultDuration;
+    message.notice({
+      key: 'simpleMessage1',
+      transitionName: 'move-up',
+      duration: t,
+      style: {},
+      content: <div className='ant-message-custom-content'>
+                 <i className='anticon anticon-check-circle ant-message-success'></i>
+                 <span>{m}</span>
+               </div>
+    });
+  },
+  error: function(m, t) {
+    var message = getMessageInstance();
+    t = t || defaultDuration;
+    message.notice({
+      key: 'simpleMessage2',
+      transitionName: 'move-up',
+      duration: t,
+      style: {},
+      content: <div className='ant-message-custom-content'>
+                 <i className='anticon anticon-exclamation-circle ant-message-error'></i>
+                 <span>{m}</span>
+               </div>
+    });
+  }
+};

components/message/index.md

@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 全局提示
+- order: 4
 
 ---
 
@@ -11,3 +12,16 @@
 
 - 可提供成功、警告和错误等反馈信息。
 - 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
+
+## API
+
+- `message.success(content, duration)`
+- `message.error(content, duration)`
+- `message.info(content, duration)`
+
+组件提供了三个静态方法，参数如下：
+
+| 参数       | 说明           | 类型                       | 默认值       |
+|------------|----------------|----------------------------|--------------|
+| content    | 提示内容       | React.Element or String    | 无           |
+| duration   | 自动关闭的延时 | number                     | 1.5          |

index.js

@@ -16,7 +16,9 @@ var antd = {
   Steps: require('./components/steps'),
   InputNumber: require('./components/input-number'),
   Table: require('./components/table'),
-  Switch: require('./components/switch')
+  Switch: require('./components/switch'),
+  Collapse: require('./components/Collapse'),
+  message: require('./components/message')
 };
 
 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",
@@ -27,7 +28,8 @@
     "rc-table": "~3.0.1",
     "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",
-    "rc-tooltip": "~2.4.0"
+    "rc-tooltip": "~2.4.0",
+    "rc-notification": "~1.0.1"
   },
   "devDependencies": {
     "css-animation": "~1.0.3",
@@ -49,7 +51,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

@@ -0,0 +1,74 @@
+@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: .2s;
+    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

@@ -17,3 +17,5 @@
 @import "breadcrumb";
 @import "inputNumber";
 @import "typography";
+@import "collapse";
+@import "message";

style/components/inputNumber.less

@@ -90,11 +90,10 @@
     cursor: pointer;
     &-inner {
       top: 2px;
-      left: 4px;
-      transform: rotate(270deg);
-      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
       &:before {
-        content: "\e611";
+        content: "\e600";
+        .ie-rotate(2);
+        transform: rotate(180deg);
       }
     }
   }
@@ -103,10 +102,8 @@
     cursor: pointer;
     &-inner {
       bottom: 2px;
-      transform: rotate(90deg);
-      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
       &:before {
-        content: "\e611";
+        content: "\e600";
       }
     }
   }

style/components/message.less

@@ -0,0 +1,47 @@
+@prefixMessageClass: ant-message;
+
+.@{prefixMessageClass} {
+  font-size: 12px;
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
+  top: 16px;
+
+  &-notice {
+    width: auto;
+    vertical-align: middle;
+    position: absolute;
+    left: 50%;
+  }
+
+  &-notice-content {
+    position: relative;
+    right: 50%;
+    padding: 8px 16px;
+    border-radius: @border-radius-base;
+    border: 1px solid #e9e9e9;
+    box-shadow: 0 0 4px rgba(0,0,0,0.16);
+    background: #fff;
+    display: block;
+  }
+
+  &-custom-content {
+  }
+
+  &-success {
+    color: @success-color;
+  }
+
+  &-error {
+    color: @error-color;
+  }
+
+  &-info {
+    color: @primary-color;
+  }
+
+  .anticon {
+    margin-right: 8px;
+    font-size: 14px;
+  }
+}

style/core/iconfont.less

@@ -55,12 +55,11 @@
 .@{iconfont-css-prefix}-retweet:before                {content:"\e659";}
 
 .@{iconfont-css-prefix}-right:before                  {content:"\e611";}
-.@{iconfont-css-prefix}-down                          {.ie-rotate(1);}
-.@{iconfont-css-prefix}-down:before                   {content:"\e611";.rotate(90deg);}
+.@{iconfont-css-prefix}-down:before                   {content:"\e600";}
 .@{iconfont-css-prefix}-left                          {.ie-rotate(2);}
 .@{iconfont-css-prefix}-left:before                   {content:"\e611";.rotate(180deg);}
-.@{iconfont-css-prefix}-up                            {.ie-rotate(3);}
-.@{iconfont-css-prefix}-up:before                     {content:"\e611";.rotate(270deg);}
+.@{iconfont-css-prefix}-up                            {.ie-rotate(2);}
+.@{iconfont-css-prefix}-up:before                     {content:"\e600";.rotate(180deg);}
 
 // 提示性图标
 .@{iconfont-css-prefix}-question:before               {content:"\e655";}
@@ -125,6 +124,7 @@
 .@{iconfont-css-prefix}-link:before                   {content:"\e640";}
 .@{iconfont-css-prefix}-logout:before                 {content:"\e642";}
 .@{iconfont-css-prefix}-mail:before                   {content:"\e643";}
+.@{iconfont-css-prefix}-menu-fold                     {.ie-rotate(2);}
 .@{iconfont-css-prefix}-menu-fold:before              {content:"\e645";.rotate(180deg);}
 .@{iconfont-css-prefix}-menu-unfold:before            {content:"\e645";}
 .@{iconfont-css-prefix}-mobile:before                 {content:"\e649";}
@@ -172,7 +172,8 @@
   .@{iconfont-css-prefix}-circle-o-left,
   .@{iconfont-css-prefix}-double-left,
   .@{iconfont-css-prefix}-verticle-left,
-  .@{iconfont-css-prefix}-backward {
+  .@{iconfont-css-prefix}-backward,
+  .@{iconfont-css-prefix}-menu-fold {
     filter: none;
   }
 }

style/core/motion.less

@@ -1,5 +1,5 @@
 .motion-common() {
-  animation-duration: .22s;
+  animation-duration: .35s;
   animation-fill-mode: both;
   display: block !important;
 }

style/core/motion/fade.less

@@ -1,7 +1,7 @@
 .fade-enter {
   opacity: 0;
   .motion-common();
-  animation-timing-function: @ease-in;
+  animation-timing-function: @ease-out;
   animation-play-state: paused;
 }
 

style/core/motion/zoom.less

@@ -2,11 +2,11 @@
   .make-motion(@className, @keyframeName);
   .@{className}-enter {
     opacity: 0;
-    transform: scale(0, 0);
-    animation-timing-function: @ease-out-back;
+    animation-timing-function: @ease-out-circ;
   }
   .@{className}-leave {
-    animation-timing-function: @ease-in-back;
+    animation-timing-function: @ease-in-circ;
+    transform: scale(0, 0);
   }
 }
 

style/themes/default/custom.less

@@ -20,7 +20,7 @@
 
 // ICONFONT
 @iconfont-css-prefix    : anticon;
-@icon-url               : "//at.alicdn.com/t/font_1436443521_8072257";
+@icon-url               : "//at.alicdn.com/t/font_1436496908_974446";
 
 // LINK
 @link-color             : @primary-color;