docs: 🎬 import Modal demo (#25655)

components/modal/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,297 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/modal/demo/async.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open Modal with async logic
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/basic.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open Modal
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/button-props.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open Modal with customized button props
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Confirm
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        With promise
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-dashed"
+      type="button"
+    >
+      <span>
+        Delete
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-dashed"
+      type="button"
+    >
+      <span>
+        With extra props
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/confirm-router.md correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    Confirm
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/dark.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open Modal
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/footer.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open Modal with customized footer
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Confirm
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Warning
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Info
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Error
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/info.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Info
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Success
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Error
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Warning
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Modal
+    </span>
+  </button>
+  <br />
+  <button
+    class="ant-btn"
+    type="button"
+  >
+    <span>
+      Confirm
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    Open modal to close in 5s
+  </span>
+</button>
+`;
+
+exports[`renders ./components/modal/demo/position.md correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Display a modal dialog at 20px to Top
+    </span>
+  </button>,
+  <br />,
+  <br />,
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Vertically centered modal dialog
+    </span>
+  </button>,
+]
+`;

components/modal/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('modal');

components/modal/demo/async.md

@@ -52,7 +52,7 @@ class App extends React.Component {
   render() {
     const { visible, confirmLoading, ModalText } = this.state;
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showModal}>
           Open Modal with async logic
         </Button>
@@ -65,7 +65,7 @@ class App extends React.Component {
         >
           <p>{ModalText}</p>
         </Modal>
-      </div>
+      </>
     );
   }
 }

components/modal/demo/basic.md

@@ -41,7 +41,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showModal}>
           Open Modal
         </Button>
@@ -55,7 +55,7 @@ class App extends React.Component {
           <p>Some contents...</p>
           <p>Some contents...</p>
         </Modal>
-      </div>
+      </>
     );
   }
 }

components/modal/demo/button-props.md

@@ -41,7 +41,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showModal}>
           Open Modal with customized button props
         </Button>
@@ -57,7 +57,7 @@ class App extends React.Component {
           <p>Some contents...</p>
           <p>Some contents...</p>
         </Modal>
-      </div>
+      </>
     );
   }
 }

components/modal/demo/confirm-router.md

@@ -40,10 +40,5 @@ function showConfirm() {
   }
 }
 
-ReactDOM.render(
-  <div>
-    <Button onClick={showConfirm}>Confirm</Button>
-  </div>,
-  mountNode,
-);
+ReactDOM.render(<Button onClick={showConfirm}>Confirm</Button>, mountNode);
 ```

components/modal/demo/dark.md

@@ -15,7 +15,25 @@ debug: true
 Basic modal.
 
 ```jsx
-import { Modal, DatePicker, Slider, Tree, Badge, Collapse, Timeline, Tabs, Anchor, Table, Card, Button, Calendar, Transfer, Switch, Typography, Dropdown } from 'antd';
+import {
+  Modal,
+  DatePicker,
+  Slider,
+  Tree,
+  Badge,
+  Collapse,
+  Timeline,
+  Tabs,
+  Anchor,
+  Table,
+  Card,
+  Button,
+  Calendar,
+  Transfer,
+  Switch,
+  Typography,
+  Dropdown,
+} from 'antd';
 import moment from 'moment';
 import difference from 'lodash/difference';
 import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons';
@@ -287,15 +305,15 @@ class App extends React.Component {
     showSearch: false,
   };
 
-  handleDisable = (disabled) => {
+  handleDisable = disabled => {
     this.setState({
       disabled,
-    })
-  }
+    });
+  };
 
   handleTableTransferChange = nextTargetKeys => {
     this.setState({ targetKeys: nextTargetKeys });
-  }
+  };
 
   triggerDisable = disabled => {
     this.setState({ disabled });
@@ -305,7 +323,7 @@ class App extends React.Component {
     this.setState({ showSearch });
   };
 
-  handleTransferChange = (nextTargetKeys) => {
+  handleTransferChange = nextTargetKeys => {
     this.setState({ targetKeys: nextTargetKeys });
   };
 
@@ -374,7 +392,7 @@ class App extends React.Component {
       },
     ];
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showModal}>
           Open Modal
         </Button>
@@ -391,11 +409,9 @@ class App extends React.Component {
             onChange={this.handleDisable}
             style={{ marginBottom: 16 }}
           />
-           <Card title="Card Title">
+          <Card title="Card Title">
             <Card.Grid>Content</Card.Grid>
-            <Card.Grid hoverable={false}>
-              Content
-            </Card.Grid>
+            <Card.Grid hoverable={false}>Content</Card.Grid>
             <Card.Grid>Content</Card.Grid>
             <Card.Grid>Content</Card.Grid>
             <Card.Grid>Content</Card.Grid>
@@ -470,7 +486,11 @@ class App extends React.Component {
           <Anchor>
             <Link href="#components-anchor-demo-basic" title="Basic demo" />
             <Link href="#components-anchor-demo-static" title="Static demo" />
-            <Link href="#components-anchor-demo-basic" title="Basic demo with Target" target="_blank" />
+            <Link
+              href="#components-anchor-demo-basic"
+              title="Basic demo with Target"
+              target="_blank"
+            />
             <Link href="#API" title="API">
               <Link href="#Anchor-Props" title="Anchor Props" />
               <Link href="#Link-Props" title="Link Props" />
@@ -496,11 +516,7 @@ class App extends React.Component {
             <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
           </Timeline>
           <Calendar />
-          <Tree
-            showLine
-            switcherIcon={<DownOutlined />}
-            defaultExpandedKeys={['0-0-0']}
-          >
+          <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
             <TreeNode title="parent 1" key="0-0">
               <TreeNode title="parent 1-0" key="0-0-0">
                 <TreeNode title="leaf" key="0-0-0-0" />
@@ -517,7 +533,7 @@ class App extends React.Component {
             </TreeNode>
           </Tree>
           <Table columns={columns} dataSource={data} footer={() => 'Footer'} />
-           <Table
+          <Table
             columns={columnsTable}
             dataSource={dataTable}
             pagination={false}
@@ -554,16 +570,14 @@ class App extends React.Component {
             }}
           />
           <br />
-          <Table
-            columns={columnsNest}
-            expandable={{ expandedRowRender }}
-            dataSource={dataNest}
-          />
+          <Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
           <Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
           <Card
             hoverable
             style={{ width: 240 }}
-            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
+            cover={
+              <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
+            }
           >
             <Meta title="Europe Street beat" description="www.instagram.com" />
           </Card>
@@ -573,7 +587,7 @@ class App extends React.Component {
             <a href="#" className="head-example" />
           </Badge>
         </Modal>
-      </div>
+      </>
     );
   }
 }

components/modal/demo/footer.md

@@ -46,7 +46,7 @@ class App extends React.Component {
   render() {
     const { visible, loading } = this.state;
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showModal}>
           Open Modal with customized footer
         </Button>
@@ -70,7 +70,7 @@ class App extends React.Component {
           <p>Some contents...</p>
           <p>Some contents...</p>
         </Modal>
-      </div>
+      </>
     );
   }
 }

components/modal/demo/hooks.md

@@ -22,11 +22,11 @@ const UnreachableContext = React.createContext();
 const config = {
   title: 'Use Hook!',
   content: (
-    <div>
+    <>
       <ReachableContext.Consumer>{name => `Reachable: ${name}!`}</ReachableContext.Consumer>
       <br />
       <UnreachableContext.Consumer>{name => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
-    </div>
+    </>
   ),
 };
 

components/modal/demo/locale.md

@@ -34,7 +34,7 @@ class LocalizedModal extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showModal}>
           Modal
         </Button>
@@ -50,7 +50,7 @@ class LocalizedModal extends React.Component {
           <p>Bla bla ...</p>
           <p>Bla bla ...</p>
         </Modal>
-      </div>
+      </>
     );
   }
 }

components/modal/demo/position.md

@@ -32,7 +32,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={() => this.setModal1Visible(true)}>
           Display a modal dialog at 20px to Top
         </Button>
@@ -63,7 +63,7 @@ class App extends React.Component {
           <p>some contents...</p>
           <p>some contents...</p>
         </Modal>
-      </div>
+      </>
     );
   }
 }