Add visible to popconfirm

components/popconfirm/demo/dynamic-trigger.md

@@ -0,0 +1,58 @@
+# 条件触发
+
+- order: 3
+
+可以判断是否需要弹出。
+
+---
+
+````jsx
+import { Popconfirm, Switch, message } from 'antd';
+
+let App = React.createClass({
+  getInitialState() {
+    return {
+      visible: false,
+      condition: true,   // 是否满足条件，不满足则弹出确认框
+    };
+  },
+  changeCondition(value) {
+    this.setState({ condition: value });
+  },
+  confirm() {
+    this.setState({ visible: false });
+    message.success('进行下一步操作. next step.');
+  },
+  cancel() {
+    this.setState({ visible: false });
+    message.error('点击了取消');
+  },
+  handleVisibleChange(visible) {
+    if (!visible) {
+      this.setState({ visible });
+      return;
+    }
+    // 打开前进行判断
+    console.log(this.state.condition);
+    if (this.state.condition) {
+      this.confirm();  // 直接执行下一步
+    } else {
+      this.setState({ visible });  // 进行确认
+    }
+  },
+  render() {
+    return <div>
+      <Popconfirm title="确定要删除这个任务吗？"
+        visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
+        onConfirm={this.confirm} onCancel={this.cancel}>
+        <a href="#">删除某任务</a>
+      </Popconfirm>
+      <br />
+      <br />
+      点击是否直接执行：<Switch defaultChecked onChange={this.changeCondition} />
+    </div>;
+  }
+});
+
+ReactDOM.render(<App />, document.getElementById('components-popconfirm-demo-dynamic-trigger'));
+````

components/popconfirm/demo/placement.md

@@ -38,7 +38,7 @@ ReactDOM.render(<div>
       <Button>左下</Button>
     </Popconfirm>
   </div>
-  <div style={{width: 60, marginLeft: 270}}>
+  <div style={{width: 60, marginLeft: 252}}>
     <Popconfirm placement="rightTop" title={text} onConfirm={confirm}>
       <Button>右上</Button>
     </Popconfirm>

components/popconfirm/index.jsx

@@ -35,25 +35,32 @@ export default React.createClass({
       onConfirm: noop,
       onCancel: noop,
       okText: '确定',
-      cancelText: '取消'
+      cancelText: '取消',
+      visible: false,
+      onVisibleChange() {},
     };
   },
+  componentWillReceiveProps(nextProps) {
+    if ('visible' in nextProps) {
+      this.setState({ visible: nextProps.visible });
+    }
+  },
   confirm() {
+    this.setVisible(false);
     this.props.onConfirm.call(this);
-    this.setState({
-      visible: false
-    });
   },
   cancel() {
+    this.setVisible(false);
     this.props.onCancel.call(this);
-    this.setState({
-      visible: false
-    });
   },
-  onVisibleChange(v) {
-    this.setState({
-      visible: v
-    });
+  onVisibleChange(visible) {
+    this.setVisible(visible);
+    this.props.onVisibleChange(visible);
+  },
+  setVisible(visible) {
+    if (!('visible' in this.props)) {
+      this.setState({ visible });
+    }
   },
   render() {
     const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
@@ -63,7 +70,6 @@ export default React.createClass({
           <Icon type="exclamation-circle" />
           {title}
         </p>
-
         <div className={prefixCls + '-buttons'}>
           <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
           <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>