Merge branch 'master' of github.com:ant-design/ant-design

components/button/demo/button-group.md

@@ -32,12 +32,12 @@
 <h4>带图标按钮组合 </h4>
 <div class="ant-btn-group">
   <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-angle-double-left"></span>
+  <span class="anticon anticon-double-left"></span>
   <span>后 退</span>
   </button>
   <button class="ant-btn ant-btn-primary">
   <span>前 进</span>
-  <span class="anticon anticon-angle-double-right"></span>
+  <span class="anticon anticon-double-right"></span>
   </button>
 </div>
 <div class="ant-btn-group">
@@ -56,7 +56,7 @@
   <button class="ant-btn ant-btn-ghost">4</button>
   <button class="ant-btn ant-btn-ghost">
   <span>前 进</span>
-  <span class="anticon anticon-angle-double-right"></span>
+  <span class="anticon anticon-double-right"></span>
   </button>
 </div>
 <h4>尺寸</h4>

components/confirm/demo/basic.md

+# 基本
+
+- order: 0
+
+使用很简单。
+
+---
+
+````jsx
+var confirm = antd.confirm;
+
+var Test = React.createClass({
+  getInitialState(){
+    return {
+      visible:false
+    };
+  },
+  showConfirm(){
+    confirm({
+    title:"第一个 confirm",
+    content:"confirm 内容",
+    onOk:this.handleOk,
+    onCancel:this.handleCancel
+    })
+  },
+  handleOk(close){
+    close();
+  },
+  handleCancel(close){
+    close();
+  },
+  render(){
+    return <div>
+    <button className="ant-btn ant-btn-primary" onClick={this.showConfirm}>显示确认框</button>
+    </div>;
+  }
+});
+
+React.render(<Test/> , document.getElementById('components-confirm-demo-basic'));
+````

components/confirm/index.jsx

+var React = require('react');
+var Dialog = require('rc-dialog');
+var div;
+
+module.exports = function (props) {
+  var d;
+  props = props || {};
+  props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
+  props.animation = 'zoom';
+  props.maskAnimation = 'fade';
+  var width = props.width || 375;
+
+  function close() {
+    d.setState({
+      visible: false
+    });
+  }
+
+  function onCancel() {
+    if (props.onCancel) {
+      props.onCancel(close);
+    } else {
+      close();
+    }
+  }
+
+  function onOk() {
+    if (props.onOk) {
+      props.onOk(close);
+    } else {
+      close();
+    }
+  }
+
+  var body = <div className="ant-confirm-body">
+    <i className={"anticon " + props.iconClassName}></i>
+    <span className="ant-confirm-title">{props.title}</span>
+    <div className="ant-confirm-content">{props.content}</div>
+  </div>
+  var footer = <div className="ant-confirm-btns">
+    <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
+    <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
+  </div>;
+
+  if (!div) {
+    div = document.createElement('div');
+    document.body.appendChild(div);
+  }
+
+  React.render(<Dialog className="ant-confirm" renderToBody={false} visible={true} closable={false} title="" animation="zoom" maskAnimation="fade" width={width}>
+    <div style={{zoom:1,overflow:'hidden'}}>{body} {footer}</div>
+
+  </Dialog>, div, function () {
+    d = this;
+  });
+};

components/confirm/index.md

@@ -7,27 +7,18 @@
 
 ## 何时使用
 
-当你再次和我说起 青春时的故事
-我正在下着雨的无锡 乞讨着生活的权利
-前一天早晨 我睁开眼已是江南
-他们说柔软的地方 总会发生柔软的事
-那年的舞台上 说谎的人一直歌唱
-大不列颠的广场上 有没有鸽子飞翔
-青春和瞎子一起 变成了哑巴
-今天扯平了我们的当年 分食了理想
+当需要用户确认时使用
 
 
-## 为什么使用
+## api
 
-你可知道你的名字解释了我的一生
-碎了满天的往事如烟 与世无争
-当你装满行李 回到故乡
-我的余生 却再也没有北方
+为一个方法，参数为 object，具体属性如下
 
-有一天我又梦见 那个装满乐器的教室
-你还站在门口 一脸羞涩的表情
-你说这么多年你还没找到 让你心动的男人
-我说去他妈的爱情 都是过眼云烟的东西
-
-我的余生 都用来寻找北方
+| 参数       | 说明           | 类型             | 默认值       |
+|------------|----------------|------------------|--------------|
+| title      | 标题           | React.Element|String    | 无           |
+| onOk       | 点击确定回调，参数为关闭函数       | function         | 无           |
+| onCancel | 取消回调，参数为关闭函数       | function         | 无           |
+| width      | 宽度           | String or Number | 375           |
+| iconClassName | 图标央样式名 | String | anticon-exclamation-circle |
 

components/iconfont/index.md

@@ -79,36 +79,36 @@
 		<span class="anticon-class">caret-circleo-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circle-right"></i>
-		<span class="anticon-class">angle-circle-right</span>
+		<i class="anticon anticon-circle-right"></i>
+		<span class="anticon-class">circle-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circle-left"></i>
-		<span class="anticon-class">angle-circle-left</span>
+		<i class="anticon anticon-circle-left"></i>
+		<span class="anticon-class">circle-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circleo-right"></i>
-		<span class="anticon-class">angle-circleo-right</span>
+		<i class="anticon anticon-circleo-right"></i>
+		<span class="anticon-class">circleo-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-circleo-left"></i>
-		<span class="anticon-class">angle-circleo-left</span>
+		<i class="anticon anticon-circleo-left"></i>
+		<span class="anticon-class">circleo-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-double-right"></i>
-		<span class="anticon-class">angle-double-right</span>
+		<i class="anticon anticon-double-right"></i>
+		<span class="anticon-class">double-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-double-left"></i>
-		<span class="anticon-class">angle-double-left</span>
+		<i class="anticon anticon-double-left"></i>
+		<span class="anticon-class">double-left</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-verticle-right"></i>
-		<span class="anticon-class">angle-verticle-right</span>
+		<i class="anticon anticon-verticle-right"></i>
+		<span class="anticon-class">verticle-right</span>
 	</li>
 	<li>
-		<i class="anticon anticon-angle-verticle-left"></i>
-		<span class="anticon-class">angle-verticle-left</span>
+		<i class="anticon anticon-verticle-left"></i>
+		<span class="anticon-class">verticle-left</span>
 	</li>
 	<li>
 		<i class="anticon anticon-forward"></i>

components/modal/demo/basic.md

@@ -7,16 +7,44 @@
 ---
 
 ````jsx
-var modal = antd.modal;
+var Modal = antd.Modal;
 
-function showModal() {
-  modal({
-    title: '第一个 Modal',
-    content: <p>对话框的内容</p>
-  });
-}
+var Test = React.createClass({
+  getInitialState(){
+    return {
+      visible:false
+    };
+  },
+  showModal(){
+    this.setState({
+      visible:true
+    });
+  },
+  handleOk(){
+    alert('ok');
+    var self = this;
+    setTimeout(function(){
+      self.setState({
+        visible:false
+      });
+    },200);
+  },
+  handleCancel(){
+    var self = this;
+    alert('cancel');
+    setTimeout(function(){
+        self.setState({
+          visible:false
+        });
+      },200);
+  },
+  render(){
+    return <div>
+    <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+    <Modal title="第一个 Modal" visible={this.state.visible} onOk={this.handleOk} onBeforeClose={this.handleCancel}><p>对话框的内容</p></Modal>
+    </div>;
+  }
+});
 
-React.render(
-  <button className="ant-btn ant-btn-primary" onClick={showModal}>显示对话框</button>
-, document.getElementById('components-modal-demo-basic'));
+React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
 ````

components/modal/demo/next.md

-# 确定取消
-
-- order: 1
-
-可以通过 `onOk` 和 `onCancel` 触发下一步的操作。
-
----
-
-````jsx
-var modal = antd.modal;
-
-function showModal() {
-  var ref;
-
-  function saveRef(c){
-    ref = c;
-  }
-
-  modal({
-    title: '点击确定取消',
-    content: <p>name: <input ref={saveRef}/></p>,
-    onCancel: function() {
-      alert('cancel');
-    },
-    onOk: function(close) {
-      alert('name: ' + React.findDOMNode(ref).value);
-      close();
-    }
-  });
-}
-
-React.render(
-  <button className="ant-btn ant-btn-default" onClick={showModal}>显示对话框</button>
-, document.getElementById('components-modal-demo-next'));
-````

components/modal/index.jsx

@@ -2,56 +2,33 @@
 
 var React = require('react');
 var Dialog = require('rc-dialog');
-
-function noop() {
-}
-
-var div;
-
-module.exports = function (props) {
-  var d;
-  props = props || {};
-
-  props.animation = 'zoom';
-  props.maskAnimation = 'fade';
-  props.width = props.width || 500;
-
-  props.onClose = props.onCancel || noop;
-
-  function close() {
-    d.setState({
-      visible: false
-    });
+function noop(){}
+
+var Modal = React.createClass({
+  handleCancel() {
+    this.refs.d.requestClose();
+  },
+
+  getDefaultProps(){
+    return {
+      onOk:noop,
+      onCancel:noop,
+      onBeforeClose:noop
+    };
+  },
+
+  handleOk() {
+    this.props.onOk();
+  },
+
+  render() {
+    var props = this.props;
+    var footer = [
+      <button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
+      <button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
+    ];
+    return <Dialog animation="zoom" maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>
   }
+});
 
-  function onCancel() {
-    if (props.onCancel) {
-      props.onCancel();
-    }
-    close();
-  }
-
-  function onOk() {
-    if (props.onOk) {
-      props.onOk(close);
-    } else {
-      close();
-    }
-  }
-
-  var footer = [
-    <button type="button" className="ant-btn-default ant-btn" onClick={onCancel}>取 消</button>,
-    <button type="button" className="ant-btn-primary ant-btn" onClick={onOk}>确 定</button>
-  ];
-  if (!div) {
-    div = document.createElement('div');
-    document.body.appendChild(div);
-  }
-  props.visible = true;
-  props.children = props.content;
-  props.footer = props.footer || footer;
-  props.renderToBody = false;
-  React.render(<Dialog {...props}/>, div, function () {
-    d = this;
-  });
-};
+module.exports = Modal;
\ No newline at end of file

components/modal/index.md

@@ -13,13 +13,13 @@
 
 ## API
 
-是个方法，参数只有一个 object ，具体成员如下
+属性列表
 
 | 参数       | 说明           | 类型             | 默认值       |
 |------------|----------------|------------------|--------------|
 | title      | 标题           | React.Element    | 无           |
-| content    | 面板内容       | React.Element    | 无           |
-| onOk       | 确定回调       | function         | 无           |
-| onCancel   | 取消回调       | function         | 无           |
-| width      | 宽度           | String or Number | 无           |
+| onOk       | 点击确定回调       | function         | 无           |
+| onBeforeClose | 点击遮罩层或右上角叉或取消按钮关闭前回调  | function  | 无           |
+| width      | 宽度           | String or Number | 500           |
+| visible    | 是否显示           | Boolean | false           |
 | footer     | 底部内容       | React.Element    | 确定取消按钮 |

components/tooltip/index.jsx

@@ -13,7 +13,7 @@ module.exports = React.createClass({
     return (
       <Tooltip placement={this.props.placement}
         prefixCls="ant-tooltip"
-        trigger="click"
+        trigger={this.props.trigger}
         overlay={this.props.title}>
         {this.props.children}
       </Tooltip>

index.js

@@ -4,11 +4,12 @@ var antd = {
   Datepicker: require('./components/datepicker'),
   Tooltip: require('./components/tooltip'),
   Tab: require('./components/tab'),
-  modal: require('./components/modal'),
+  Modal: require('./components/modal'),
   Menu: require('rc-menu'),
   Dropdown: require('./components/dropdown'),
   Progress: require('./components/progress'),
-  Select: require('./components/select')
+  Select: require('./components/select'),
+  confirm:require('./components/confirm')
 };
 
 module.exports = window.antd = antd;

package.json

@@ -15,7 +15,7 @@
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
     "rc-calendar": "~3.8.0",
-    "rc-dialog": "~4.2.0",
+    "rc-dialog": "~4.3.0",
     "rc-dropdown": "~1.0.0",
     "rc-menu": "~3.3.0",
     "rc-progress": "~1.0.0",

style/components/confirm.less

-@prefixConfirmCls: rc-dialog-confirm;
-
-.@{prefixConfirmCls}-body {
-  .ant-icon {
-    font-size: 24px;
-    display: inline-block;
-    margin-right: 5px;
-    position: relative;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    line-height: inherit;
-    vertical-align: baseline;
-    text-align: center;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: 0px;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: sans-serif;
-
-    .ant-icon-warn-circle:before {
-      content: "\e613";
-      display: block;
-      font-family: "iconfont" !important;
+@prefixConfirmCls: ant-confirm;
+
+.@{prefixConfirmCls} {
+
+  .rc-dialog-header {
+    display: none;
+  }
+
+  .rc-dialog-body {
+    padding: 30px 40px;
+  }
+
+  .@{prefixConfirmCls}-body {
+    .@{prefixConfirmCls}-content {
+      margin-left: 33px;
+      font-size: 12px;
+      color: #999;
     }
 
-    .ant-icon-warn-circle {
-      color: #fac450;
+    .anticon {
+      font-size: 24px;
+      display: inline-block;
+      margin-right: 5px;
     }
-  }
 
-  .@{prefixConfirmCls}-description {
-    margin-left: 33px;
-    font-size: 12px;
-    color: #999;
+    .anticon-exclamation-circle {
+      color: #fac450;
+    }
   }
-}
 
-.@{prefixConfirmCls}-btns {
-  margin-top: 30px;
-  float: right;
+  .@{prefixConfirmCls}-btns {
+    margin-top: 30px;
+    float: right;
 
-  [btn] + [btn] {
-    margin-left: 10px;
-    margin-bottom: 0;
+    button + button {
+      margin-left: 10px;
+      margin-bottom: 0;
+    }
   }
+
 }

style/core/iconfont.less

@@ -49,18 +49,18 @@
 .@{iconfont-css-prefix}-caret-circleo-right:before  {content:"\e60e";}
 .@{iconfont-css-prefix}-caret-circleo-left          {.ie-rotate(2);}
 .@{iconfont-css-prefix}-caret-circleo-left:before   {content:"\e60e";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-circle-right:before   {content:"\e602";}
-.@{iconfont-css-prefix}-angle-circle-left           {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-circle-left:before    {content:"\e602";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-circleo-right:before  {content:"\e603";}
-.@{iconfont-css-prefix}-angle-circleo-left          {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-circleo-left:before   {content:"\e603";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-double-right:before   {content:"\e604";}
-.@{iconfont-css-prefix}-angle-double-left           {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-double-left:before    {content:"\e604";.rotate(180deg);}
-.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";}
-.@{iconfont-css-prefix}-angle-verticle-left         {.ie-rotate(2);}
-.@{iconfont-css-prefix}-angle-verticle-left:before  {content:"\e605";.rotate(180deg);}
+.@{iconfont-css-prefix}-circle-right:before   {content:"\e602";}
+.@{iconfont-css-prefix}-circle-left           {.ie-rotate(2);}
+.@{iconfont-css-prefix}-circle-left:before    {content:"\e602";.rotate(180deg);}
+.@{iconfont-css-prefix}-circleo-right:before  {content:"\e603";}
+.@{iconfont-css-prefix}-circleo-left          {.ie-rotate(2);}
+.@{iconfont-css-prefix}-circleo-left:before   {content:"\e603";.rotate(180deg);}
+.@{iconfont-css-prefix}-double-right:before   {content:"\e604";}
+.@{iconfont-css-prefix}-double-left           {.ie-rotate(2);}
+.@{iconfont-css-prefix}-double-left:before    {content:"\e604";.rotate(180deg);}
+.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";}
+.@{iconfont-css-prefix}-verticle-left         {.ie-rotate(2);}
+.@{iconfont-css-prefix}-verticle-left:before  {content:"\e605";.rotate(180deg);}
 .@{iconfont-css-prefix}-forward:before              {content:"\e630";}
 .@{iconfont-css-prefix}-backward                    {.ie-rotate(2);}
 .@{iconfont-css-prefix}-backward:before             {content:"\e630";.rotate(180deg);}

style/mixins/index.less

@@ -11,6 +11,7 @@
 
 // for common elements
 @import "button.less";
+@import "input.less";
 
 // Layout
 @import "grid.less";

style/mixins/input.less

@@ -20,3 +20,59 @@
     box-shadow: 0 0 3px #23c0fa;
   }
 }
+
+.input() {
+  position: relative;
+  display: block;
+  padding: @input-padding-vertical-base @input-padding-horizontal;
+  width: 100%;
+  font-size: @input-font-size;
+  line-height: @line-height-base;
+  color: @input-color;
+  background-color: @input-bg;
+  background-image: none;
+  border: 1px solid @input-border-color;
+  border-radius: @input-border-radius;
+  // Reset placeholder
+  .placeholder();
+  .transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
+
+  &:not([disabled]):hover {
+    border-color: @input-hover-border-color;
+  }
+
+  &:focus {
+    @color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
+    border-color: @input-focus-border-color;
+    outline: 0;
+    box-shadow: 0 0 3px @color-rgba;
+  }
+
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: @input-disabled-bg;
+    opacity: 1; 
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    height: auto;
+  }
+
+  // Size
+  &-lg {
+    padding: @input-padding-lg;
+    font-size: @input-font-size-lg;
+  }
+
+  &-sm {
+    padding: @input-padding-vertical-sm @input-padding-horizontal;
+    font-size: @input-font-size-sm;
+  }
+}
\ No newline at end of file

style/mixins/vendor-prefixes.less

@@ -98,7 +98,7 @@
 }
 
 // Placeholder text
-.placeholder(@color: @input-color-placeholder) {
+.placeholder(@color: @input-placeholder-color) {
   // Firefox
   &::-moz-placeholder {
     color: @color;

style/themes/default/custom.less

@@ -110,4 +110,35 @@
 // Container sizes
 @container-sm           : (720px + @grid-gutter-width);
 @container-md           : (940px + @grid-gutter-width);
-@container-lg           : (1140px + @grid-gutter-width);
\ No newline at end of file
+@container-lg           : (1140px + @grid-gutter-width);
+
+// Form
+// --------------------------------
+// Legend
+@legend-color                : #222;
+@legend-border-color         : #e5e5e5;
+
+// Input
+@input-height-base: 28px;
+@input-height-lg: 32px;
+@input-height-sm: 22px;
+
+@input-padding-horizontal    : 7px;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-sm   : 1px;
+@input-padding-lg            : 4px 7px 5px;
+
+@input-placeholder-color     : #ccc;
+@input-color                 : #666;
+@input-border-color          : #d9d9d9;
+@input-bg                    : #fff;
+
+@input-border-radius         : @border-radius-base;
+
+@input-font-size-lg          : 14px;
+@input-font-size             : @font-size-base;
+@input-font-size-sm          : @font-size-base;
+
+@input-hover-border-color    : #23c0fa;
+@input-focus-border-color    : #2db7f5;
+@input-disabled-bg           : #f3f5f7;
\ No newline at end of file