From 5c9dcb194ebec55e73448e609adcb931c520c2d4 Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Fri, 31 May 2019 19:24:44 +0800
Subject: [PATCH] docs(Balloon): add nested demo

---
 docs/balloon/demo/nested.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/docs/balloon/demo/nested.md b/docs/balloon/demo/nested.md
index 2681d88f45..66c5853baf 100644
--- a/docs/balloon/demo/nested.md
+++ b/docs/balloon/demo/nested.md
@@ -2,37 +2,40 @@
 
 - order: 6
 
-浮层中如果又有浮层,比如在Balloon中有DatePicker的浮层,需要用safeNode解决datePicker选择时,balloon浮层关闭的问题.
+浮层中如果又有浮层，比如在`Balloon`中有`DatePicker/Select`的浮层, `DatePicker`选择时，`Balloon`浮层也会关闭。可以用 `followTrigger`解决。
 
 :::lang=en-us
 # Nested
 
 - order: 6
 
-When popup is nested in another popup, say DatePicker is nested in Balloon, use safeNode to avoid the unexpected Balloon's closing.
+When popup is nested in another popup, say DatePicker is nested in Balloon, use `followTrigger` to avoid the unexpected Balloon's closing.
 
 :::
 
 ---
 
 ````jsx
-import { Button, Balloon, DatePicker } from '@alifd/next';
+import { Button, Balloon, DatePicker, Select } from '@alifd/next';
 import moment from 'moment';
 
-const primary = <Button className="btrigger">primary</Button>;
-const innerButton = <Button className="btrigger">innerButton</Button>;
+const showSelect = <Button className="btrigger">Show Select</Button>;
+const showDatePicker = <Button className="btrigger">Show DatePicker</Button>;
+const innerButton = <Button className="btrigger">Show Inner Balloon</Button>;
 const dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);
 
 const App = () => (
     <div className="container nested">
-        <Balloon type="primary" autoFocus trigger={primary} closable={false} triggerType="click">
-            <DatePicker defaultValue={dateValue} popupContainer={
-                (trigger) => trigger.parentNode
-            } />
+        <Balloon type="primary" autoFocus trigger={showSelect} closable={false} triggerType="click">
+            <Select dataSource={['apple', 'banana', 'orange']} followTrigger />
+        </Balloon>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <Balloon type="primary" autoFocus trigger={showDatePicker} closable={false} triggerType="click">
+            <DatePicker defaultValue={dateValue} followTrigger />
         </Balloon>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <Balloon type="primary" autoFocus trigger={innerButton} closable={false} triggerType="click">
-            <Balloon trigger={<Button type="primary">please click</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType="click">
+            <Balloon trigger={<Button type="primary">please click</Button>} followTrigger triggerType="click">
                 nesting balloon content
             </Balloon>
         </Balloon>
@@ -46,7 +49,6 @@ ReactDOM.render(<App />, mountNode);
 ```css
 
 .container.nested {
-    margin-left: 100px;
     margin-bottom: 50px;
 }