feat: update app demo

components/app/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,46 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/app/demo/message.tsx extend context correctly 1`] = `
+exports[`renders ./components/app/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-app"
 >
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
   >
-    <span>
-      Open message
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = `
-<div
-  class="ant-app"
->
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Open modal
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/app/demo/notification.tsx extend context correctly 1`] = `
-<div
-  class="ant-app"
->
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Open notification
-    </span>
-  </button>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open message
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open modal
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open notification
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;

components/app/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,46 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/app/demo/message.tsx correctly 1`] = `
+exports[`renders ./components/app/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-app"
 >
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
   >
-    <span>
-      Open message
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/app/demo/modal.tsx correctly 1`] = `
-<div
-  class="ant-app"
->
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Open modal
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/app/demo/notification.tsx correctly 1`] = `
-<div
-  class="ant-app"
->
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Open notification
-    </span>
-  </button>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open message
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open modal
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Open notification
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;

components/app/demo/basic.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+获取 `message`，`notification`，`modal` 静态方法。
+
+## en-US
+
+Static method for `message`,`notification`,`modal`.

components/app/demo/basic.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { App, Button, Space } from 'antd';
+
+// Sub page
+const MyPage = () => {
+  const { message, modal, notification } = App.useApp();
+
+  const showMessage = () => {
+    message.success('Success!');
+  };
+
+  const showModal = () => {
+    modal.warning({
+      title: 'This is a warning message',
+      content: 'some messages...some messages...',
+    });
+  };
+
+  const showNotification = () => {
+    notification.info({
+      message: `Notification topLeft`,
+      description: 'Hello, Ant Design!!',
+      placement: 'topLeft',
+    });
+  };
+
+  return (
+    <Space>
+      <Button type="primary" onClick={showMessage}>
+        Open message
+      </Button>
+      <Button type="primary" onClick={showModal}>
+        Open modal
+      </Button>
+      <Button type="primary" onClick={showNotification}>
+        Open notification
+      </Button>
+    </Space>
+  );
+};
+
+// Entry component
+export default () => (
+  <App>
+    <MyPage />
+  </App>
+);