Add popconfirm component

components/popconfirm/demo/basic.md

@@ -0,0 +1,22 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Popconfirm = antd.Popconfirm;
+
+function confirm() {
+  console.log('点击了确定');
+}
+
+React.render(
+  <Popconfirm title="确定要删除这个任务吗？" onConfirm={confirm}>
+    <button className="ant-btn ant-btn-primary">删 除</button>
+  </Popconfirm>
+, document.getElementById('components-popconfirm-demo-basic'));
+````
+

components/popconfirm/demo/placement.md

@@ -0,0 +1,37 @@
+# 位置
+
+- order: 1
+
+位置有四个方向。
+
+---
+
+````jsx
+var Popconfirm = antd.Popconfirm;
+var text = '确认文案';
+
+function confirm() {
+  console.log('点击了确定');
+}
+
+React.render(<div>
+  <Popconfirm placement="left" title={text} onConfirm={confirm}>
+    <button className="ant-btn">左</button>
+  </Popconfirm>
+  <Popconfirm placement="right" title={text} onConfirm={confirm}>
+    <button className="ant-btn">右</button>
+  </Popconfirm>
+  <Popconfirm placement="top" title={text} onConfirm={confirm}>
+    <button className="ant-btn">上</button>
+  </Popconfirm>
+  <Popconfirm placement="bottom" title={text} onConfirm={confirm}>
+    <button className="ant-btn">下</button>
+  </Popconfirm>
+</div>, document.getElementById('components-popconfirm-demo-placement'));
+````
+
+<style>
+.code-box-demo .ant-popover-wrap > .ant-btn {
+  margin-right: 1em;
+}
+</style>

components/popconfirm/index.jsx

@@ -0,0 +1,67 @@
+'use strict';
+
+import React from 'react';
+import Tooltip from 'rc-tooltip';
+const prefixCls = 'ant-popover';
+
+export default React.createClass({
+  getInitialState() {
+    return {
+      visible: false
+    };
+  },
+  getDefaultProps() {
+    return {
+      transitionName: '',
+      placement: 'top',
+      trigger: 'click',
+      onConfirm: function() {},
+      onCancel: function() {}
+    };
+  },
+  confirm: function() {
+    this.props.onConfirm.call(this);
+    this.setState({
+      visible: false
+    });
+  },
+  cancel: function() {
+    this.props.onCancel.call(this);
+    this.setState({
+      visible: false
+    });
+  },
+  render() {
+    const overlay = <div>
+      <div className={prefixCls + '-content'}>
+        <p className={prefixCls + '-message'}>
+          <i className="anticon anticon-exclamation-circle"></i>
+          {this.props.title}
+        </p>
+        <div className={prefixCls + '-buttons'}>
+          <button onClick={this.confirm} className="ant-btn ant-btn-primary ant-btn-sm">确 定</button>
+          <button onClick={this.cancel} className="ant-btn ant-btn-sm">取 消</button>
+        </div>
+      </div>
+    </div>;
+
+    const transitionName = ({
+      top: 'zoom-down',
+      bottom: 'zoom-up',
+      left: 'zoom-right',
+      right: 'zoom-left'
+    })[this.props.placement];
+
+    return (
+      <Tooltip placement={this.props.placement}
+        prefixCls={prefixCls}
+        renderPopupToBody={false}
+        transitionName={transitionName}
+        visible={this.state.visible}
+        trigger={this.props.trigger}
+        overlay={overlay}>
+        {this.props.children}
+      </Tooltip>
+    );
+  }
+});

components/popconfirm/index.md

@@ -5,22 +5,20 @@
 
 ---
 
-游学远方 习礼知书广人网
+点击元素，弹出气泡式的确认框。
 
-原是女身暗掩装
+## 何时使用
 
-校有规训令确 不允许巾帼求学
+目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
 
-淑贤女子属深闺居暗房
+和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
 
-人在远方 处身书斋感迷茫
 
-尤幸与山伯结党
+## API
 
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开
+| 参数      | 说明                                     | 类型          | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| placement | 气泡框位置，可选 `top/left/right/bottom` | string        | top    |
+| title     | 确认框的描述                             | string        | 无     |
+| onConfirm | 点击确认的回调                           | function      | 无     |
+| onCancel  | 卡片内容                                 | function      | 无     |

components/popover/demo/placement.md

@@ -35,4 +35,3 @@ React.render(<div>
   margin-right: 1em;
 }
 </style>
-

components/popover/index.jsx

@@ -13,7 +13,7 @@ export default React.createClass({
     };
   },
   render() {
-    var overlay = <div>
+    const overlay = <div>
       <div className={prefixCls + '-title'}>
         {this.props.title}
       </div>

index.js

@@ -10,6 +10,7 @@ var antd = {
   Progress: require('./components/progress'),
   Popover: require('./components/popover'),
   Select: require('./components/select'),
+  Popconfirm: require('./components/popconfirm'),
   confirm: require('./components/modal/confirm')
 };
 

static/style.css

@@ -57,7 +57,7 @@ body {
 }
 
 body {
-  font-family: "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
   line-height: 1.5;
   color: #888;
   font-size: 14px;

style/components/popover.less

@@ -123,23 +123,22 @@
     padding: 8px;
   }
 
-  &-descrition {
-    [icon] {
+  &-message {
+    padding: 8px 8px 12px 8px;
+    font-size: 14px;
+    .anticon {
       font-size: 16px;
-      margin-right: 2px;
+      margin-right: 6px;
       line-height: 18px;
-    }
-    [icon='warn-circle'] {
-      color: #F9C35A;
+      color: #FC8C6E;
     }
   }
 
   &-buttons {
     text-align: right;
-    margin-top: 12px;
-
+    margin-bottom: 8px;
     button {
-      margin-left: 2px;
+      margin-left: 5px;
     }
   }
 

style/themes/default/custom.less

@@ -7,7 +7,7 @@
 // ------ Base & Require ------
 @body-background        : #fff;
 
-@font-family            : "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
+@font-family            : Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
 @code-family            : "PT Mono", Menlo, "Courier New", monospace;
 @text-color             : #666;
 @font-size-base         : 12px;