From eddff353fc3e79ad7e2c24d4a2ae0b88a7a501f1 Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Thu, 22 Mar 2018 16:19:02 +0800
Subject: [PATCH] add popconfirm demo

---
 components/popconfirm/demo/basic.md           |  33 +++++
 components/popconfirm/demo/basic.vue          |  29 ----
 ...dynamic-trigger.vue => dynamic-trigger.md} |  58 ++++----
 components/popconfirm/demo/index.vue          |  72 +++++++---
 components/popconfirm/demo/local.md           |  18 +++
 components/popconfirm/demo/local.vue          |  20 ---
 components/popconfirm/demo/placement.md       | 134 ++++++++++++++++++
 components/popconfirm/demo/placement.vue      | 129 -----------------
 components/popconfirm/index.en-US.md          |  21 +++
 components/popconfirm/index.zh-CN.md          |  29 ++--
 components/rate/index.jsx                     |   1 -
 components/vc-rate/src/Rate.jsx               |   4 +-
 examples/routes.js                            |   2 +-
 13 files changed, 300 insertions(+), 250 deletions(-)
 create mode 100644 components/popconfirm/demo/basic.md
 delete mode 100644 components/popconfirm/demo/basic.vue
 rename components/popconfirm/demo/{dynamic-trigger.vue => dynamic-trigger.md} (52%)
 create mode 100644 components/popconfirm/demo/local.md
 delete mode 100644 components/popconfirm/demo/local.vue
 create mode 100644 components/popconfirm/demo/placement.md
 delete mode 100644 components/popconfirm/demo/placement.vue
 create mode 100644 components/popconfirm/index.en-US.md

diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
new file mode 100644
index 000000000..c96dab9c3
--- /dev/null
+++ b/components/popconfirm/demo/basic.md
@@ -0,0 +1,33 @@
+<cn>
+#### 基本
+最简单的用法。
+</cn>
+
+<us>
+#### Basic
+The basic example.
+</us>
+
+```html
+<template>
+  <a-popconfirm title="Are you sure delete this task?" @confirm="confirm" @cancel="cancel" okText="Yes" cancelText="No">
+    <a href="#">Delete</a>
+  </a-popconfirm>
+</template>
+<script>
+import { message } from 'antd'
+
+export default {
+  methods: {
+    confirm (e) {
+      console.log(e)
+      message.success('Click on Yes')
+    },
+    cancel (e) {
+      console.log(e)
+      message.error('Click on No')
+    },
+  },
+}
+</script>
+```
diff --git a/components/popconfirm/demo/basic.vue b/components/popconfirm/demo/basic.vue
deleted file mode 100644
index abe2f96a8..000000000
--- a/components/popconfirm/demo/basic.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-<div>
-<md>
-## 基本
-最简单的用法。
-</md>
-  <Popconfirm title="Are you sure delete this task?" @confirm="confirm" @cancel="cancel" okText="Yes" cancelText="No">
-    <a href="#">Delete</a>
-  </Popconfirm>
-</div>
-</template>
-
-<script>
-import { Popconfirm, Button } from 'antd'
-export default {
-  methods: {
-    confirm (e) {
-      console.log(e)
-    },
-    cancel (e) {
-      console.log(e)
-    },
-  },
-  components: {
-    Popconfirm,
-
-  },
-}
-</script>
diff --git a/components/popconfirm/demo/dynamic-trigger.vue b/components/popconfirm/demo/dynamic-trigger.md
similarity index 52%
rename from components/popconfirm/demo/dynamic-trigger.vue
rename to components/popconfirm/demo/dynamic-trigger.md
index 162a08e5d..bf44b216e 100644
--- a/components/popconfirm/demo/dynamic-trigger.vue
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -1,28 +1,35 @@
-<template>
-<div>
-<md>
-## 条件触发
+<cn>
+#### 条件触发
 可以判断是否需要弹出。
-</md>
-  <Popconfirm
-    title="Are you sure delete this task?"
-    :visible="visible"
-    @visibleChange="handleVisibleChange"
-    @confirm="confirm"
-    @cancel="cancel"
-    okText="Yes"
-    cancelText="No"
-  >
-    <a href="#">Delete a task</a>
-  </Popconfirm>
-  <br />
-  <br />
-  Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
-</div>
-</template>
+</cn>
 
+<us>
+#### Conditional trigger
+Make it pop up under some conditions.
+</us>
+
+```html
+<template>
+  <div>
+    <a-popconfirm
+      title="Are you sure delete this task?"
+      :visible="visible"
+      @visibleChange="handleVisibleChange"
+      @confirm="confirm"
+      @cancel="cancel"
+      okText="Yes"
+      cancelText="No"
+    >
+      <a href="#">Delete a task</a>
+    </a-popconfirm>
+    <br />
+    <br />
+    Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
+  </div>
+</template>
 <script>
-import { Popconfirm, Checkbox } from 'antd'
+import { message } from 'antd'
+
 export default {
   data () {
     return {
@@ -36,9 +43,11 @@ export default {
     },
     confirm () {
       this.visible = false
+      message.success('Next step.')
     },
     cancel () {
       this.visible = false
+      message.error('Click on cancel.')
     },
     handleVisibleChange (visible) {
       if (!visible) {
@@ -54,9 +63,6 @@ export default {
       }
     },
   },
-  components: {
-    Popconfirm,
-    Checkbox,
-  },
 }
 </script>
+```
diff --git a/components/popconfirm/demo/index.vue b/components/popconfirm/demo/index.vue
index a23816d62..ce41e9a3a 100644
--- a/components/popconfirm/demo/index.vue
+++ b/components/popconfirm/demo/index.vue
@@ -1,30 +1,60 @@
-<template>
-  <div>
-    <h1>Basic</h1>
-    <Basic />
-    <h1>Dynamic Trigger</h1>
-    <Trigger />
-    <h1>Local</h1>
-    <Local />
-    <h1>Placement</h1>
-    <Placement />
-  </div>
-</template>
 <script>
-import Basic from './basic'
-import Trigger from './dynamic-trigger'
-import Local from './local'
-import Placement from './placement'
+import Basic from './basic.md'
+import Local from './local.md'
+import Placement from './placement.md'
+import DynamicTrigger from './dynamic-trigger.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Popconfirm
+
+  点击元素，弹出气泡式的确认框。
+
+  ## 何时使用
+
+  目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
+
+和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。。
+            ## 代码演示`,
+  us: `# Popconfirm
+
+  A simple and compact confirmation dialog of an action.
+
+  # When To Use
+
+  A simple and compact dialog used for asking for user confirmation.
+
+  The difference with the 'confirm' modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
+  ## Examples
+  `,
+}
 export default {
   category: 'Components',
   subtitle: '气泡确认框',
   type: 'Feedback',
   title: 'Popconfirm',
-  components: {
-    Basic,
-    Trigger,
-    Local,
-    Placement,
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <br/>
+        <Basic />
+        <br/>
+        <Local />
+        <br/>
+        <Placement />
+        <br/>
+        <DynamicTrigger />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>
diff --git a/components/popconfirm/demo/local.md b/components/popconfirm/demo/local.md
new file mode 100644
index 000000000..6579678af
--- /dev/null
+++ b/components/popconfirm/demo/local.md
@@ -0,0 +1,18 @@
+<cn>
+#### 国际化
+使用 `okText` 和 `cancelText` 自定义按钮文字。
+</cn>
+
+<us>
+#### Locale text
+Set `okText` and `cancelText` props to customise the button's labels.
+</us>
+
+```html
+<template>
+  <a-popconfirm title="Are you sure？" okText="Yes" cancelText="No">
+    <a href="#">Delete</a>
+  </a-popconfirm>
+</template>
+```
+
diff --git a/components/popconfirm/demo/local.vue b/components/popconfirm/demo/local.vue
deleted file mode 100644
index a160786dd..000000000
--- a/components/popconfirm/demo/local.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-<div>
-<md>
-## 国际化
-使用 `okText` 和 `cancelText` 自定义按钮文字。
-</md>
-  <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
-    <a href="#">Delete</a>
-  </Popconfirm>
-</div>
-</template>
-
-<script>
-import { Popconfirm } from 'antd'
-export default {
-  components: {
-    Popconfirm,
-  },
-}
-</script>
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
new file mode 100644
index 000000000..ed9880250
--- /dev/null
+++ b/components/popconfirm/demo/placement.md
@@ -0,0 +1,134 @@
+<cn>
+#### 位置
+位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
+</cn>
+
+<us>
+#### Placement
+There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
+</us>
+
+```html
+<template>
+  <div id="components-a-popconfirm-demo-placement">
+    <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
+      <a-popconfirm placement="topLeft" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>TL</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>Top</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>TR</a-button>
+      </a-popconfirm>
+    </div>
+    <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
+      <a-popconfirm placement="leftTop" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>LT</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>Left</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>LB</a-button>
+      </a-popconfirm>
+    </div>
+    <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
+      <a-popconfirm placement="rightTop" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>RT</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>Right</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>RB</a-button>
+      </a-popconfirm>
+    </div>
+    <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
+      <a-popconfirm placement="bottomLeft" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>BL</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+            <p>Are you sure delete this task?</p>
+            <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>Bottom</a-button>
+      </a-popconfirm>
+      <a-popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
+        <template slot="title">
+          <p>Are you sure delete this task?</p>
+          <p>Are you sure delete this task?</p>
+        </template>
+        <a-button>BR</a-button>
+      </a-popconfirm>
+    </div>
+  </div>
+</template>
+<script>
+import { message } from 'antd'
+
+export default {
+  data () {
+    return {
+      buttonWidth: 70,
+    }
+  },
+  methods: {
+    confirm () {
+      message.info('Click on Yes.')
+    },
+  },
+}
+</script>
+<style scoped>
+#components-a-popconfirm-demo-placement .ant-btn {
+  width: 70px;
+  text-align: center;
+  padding: 0;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+</style>
+```
+
diff --git a/components/popconfirm/demo/placement.vue b/components/popconfirm/demo/placement.vue
deleted file mode 100644
index c1e1a97a5..000000000
--- a/components/popconfirm/demo/placement.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<div id="components-popconfirm-demo-placement">
-<md>
-## 位置
-位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
-</md>
-  <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
-    <Popconfirm placement="topLeft" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>TL</a-button>
-    </Popconfirm>
-    <Popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>Top</a-button>
-    </Popconfirm>
-    <Popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>TR</a-button>
-    </Popconfirm>
-  </div>
-  <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
-    <Popconfirm placement="leftTop" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>LT</a-button>
-    </Popconfirm>
-    <Popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>Left</a-button>
-    </Popconfirm>
-    <Popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>LB</a-button>
-    </Popconfirm>
-  </div>
-  <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
-    <Popconfirm placement="rightTop" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>RT</a-button>
-    </Popconfirm>
-    <Popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>Right</a-button>
-    </Popconfirm>
-    <Popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>RB</a-button>
-    </Popconfirm>
-  </div>
-  <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
-    <Popconfirm placement="bottomLeft" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>BL</a-button>
-    </Popconfirm>
-    <Popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-          <p>Are you sure delete this task?</p>
-          <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>Bottom</a-button>
-    </Popconfirm>
-    <Popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
-      <template slot="title">
-        <p>Are you sure delete this task?</p>
-        <p>Are you sure delete this task?</p>
-      </template>
-      <a-button>BR</a-button>
-    </Popconfirm>
-  </div>
-</div>
-</template>
-
-<script>
-import { Popconfirm, Button } from 'antd'
-export default {
-  data () {
-    return {
-      buttonWidth: 70,
-    }
-  },
-  methods: {
-    confirm () {
-      console.log('Click on Yes')
-    },
-  },
-  components: {
-    Popconfirm,
-
-  },
-}
-</script>
-<style>
-#components-popconfirm-demo-placement .ant-btn {
-  width: 70px;
-  text-align: center;
-  padding: 0;
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-</style>
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
new file mode 100644
index 000000000..38de143fc
--- /dev/null
+++ b/components/popconfirm/index.en-US.md
@@ -0,0 +1,21 @@
+## API
+
+| Param | Description | Type | Default value |
+| ----- | ----------- | ---- | ------------- |
+| cancelText | text of the Cancel button | string | `Cancel` |
+| okText | text of the Confirm button | string | `Confirm` |
+| okType | Button `type` of the Confirm button | string | `primary` |
+| title | title of the confirmation box | string\|slot | - |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| cancel | callback of cancel | function(e) | - |
+| confirm | callback of confirmation | function(e) | - |
+| visibleChange | Callback executed when visibility of the tooltip card is changed | function(visible) | - |
+
+Consult [Tooltip's documentation](#/us/components/tooltip/#API) to find more APIs.
+
+## Note
+
+Please ensure that the child node of `Popconfirm` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index c45a7a7f4..823cba49e 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -1,33 +1,20 @@
----
-category: Components
-subtitle: 气泡确认框
-type: Feedback
-title: Popconfirm
----
-
-点击元素，弹出气泡式的确认框。
-
-## 何时使用
-
-目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
-
-和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
-
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| cancelText | 取消按钮文字 | string\|function\|slot | 取消 |
-| okText | 确认按钮文字 | string\|function\|slot | 确定 |
+| cancelText | 取消按钮文字 | string | 取消 |
+| okText | 确认按钮文字 | string | 确定 |
 | okType | 确认按钮类型 | string | primary |
-| title | 确认框的描述 | string\|function\|slot | 无 |
+| title | 确认框的描述 | string\|slot | 无 |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
-| cancel | 点击取消时触发 | (e) |
-| confirm | 点击确认时触发 | (e) |
+| --- | --- | --- |
+| cancel | 点击取消的回调 | function(e) |
+| confirm | 点击确认的回调 | function(e) |
+| visibleChange | 显示隐藏的回调 | function(visible) |
 
-更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
+更多属性请参考 [Tooltip](#/cn/components/tooltip/#API)。
 
 ## 注意
 
diff --git a/components/rate/index.jsx b/components/rate/index.jsx
index 24f28aa5b..b1b4071af 100644
--- a/components/rate/index.jsx
+++ b/components/rate/index.jsx
@@ -12,7 +12,6 @@ export const RateProps = {
   allowHalf: PropTypes.bool,
   allowClear: PropTypes.bool,
   disabled: PropTypes.bool,
-  hoverChange: PropTypes.func,
   character: PropTypes.any,
 }
 
diff --git a/components/vc-rate/src/Rate.jsx b/components/vc-rate/src/Rate.jsx
index 2efcdeb50..d749b937e 100644
--- a/components/vc-rate/src/Rate.jsx
+++ b/components/vc-rate/src/Rate.jsx
@@ -73,14 +73,14 @@ export default {
           cleanedValue: null,
         })
       }
-      this.$emit('hover-change', hoverValue)
+      this.$emit('hoverChange', hoverValue)
     },
     onMouseLeave () {
       this.setState({
         hoverValue: undefined,
         cleanedValue: null,
       })
-      this.$emit('hover-change', undefined)
+      this.$emit('hoverChange', undefined)
     },
     onClick (event, index) {
       const value = this.getStarValue(index, event.pageX)
diff --git a/examples/routes.js b/examples/routes.js
index 15c200379..73e054488 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/rate/demo/${d}`),
+    component: import(`../components/popconfirm/demo/${d}`),
   }
 }
 export default [