docs(message): use message hooks api (#35691)

* docs(message): use message hooks api

* docs(message): 保留一个静态方法调用

* docs: move docs demo order

components/message/demo/custom-style.md

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 5
 title:
   zh-CN: 自定义样式
   en-US: Customized style
@@ -17,17 +17,27 @@ The `style` and `className` are available to customize Message.
 import { Button, message } from 'antd';
 import React from 'react';
 
-const success = () => {
-  message.success({
-    content: 'This is a prompt message with custom className and style',
-    className: 'custom-class',
-    style: {
-      marginTop: '20vh',
-    },
-  });
-};
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
 
-const App: React.FC = () => <Button onClick={success}>Customized style</Button>;
+  const success = () => {
+    messageApi.open({
+      type: 'success',
+      content: 'This is a prompt message with custom className and style',
+      className: 'custom-class',
+      style: {
+        marginTop: '20vh',
+      },
+    });
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Button onClick={success}>Customized style</Button>
+    </>
+  );
+};
 
 export default App;
 ```

components/message/demo/duration.md

@@ -17,11 +17,24 @@ Customize message display duration from default `3s` to `10s`.
 import { Button, message } from 'antd';
 import React from 'react';
 
-const success = () => {
-  message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
-};
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
 
-const App: React.FC = () => <Button onClick={success}>Customized display duration</Button>;
+  const success = () => {
+    messageApi.open({
+      type: 'success',
+      content: 'This is a prompt message for success, and it will disappear in 10 seconds',
+      duration: 10,
+    });
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Button onClick={success}>Customized display duration</Button>
+    </>
+  );
+};
 
 export default App;
 ```

components/message/demo/hooks.md

@@ -1,5 +1,5 @@
 ---
-order: -1
+order: 0
 title:
   zh-CN: Hooks 调用（推荐）
   en-US: Hooks usage (recommended)

components/message/demo/info.md

@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 6
 title:
   zh-CN: 普通提示
   en-US: Normal prompt
@@ -14,8 +14,8 @@ title:
 Normal message for information.
 
 ```tsx
-import { Button, message } from 'antd';
 import React from 'react';
+import { Button, message } from 'antd';
 
 const info = () => {
   message.info('This is a normal message');

components/message/demo/loading.md

@@ -17,13 +17,25 @@ Display a global loading indicator, which is dismissed by itself asynchronously.
 import { Button, message } from 'antd';
 import React from 'react';
 
-const success = () => {
-  const hide = message.loading('Action in progress..', 0);
-  // Dismiss manually and asynchronously
-  setTimeout(hide, 2500);
-};
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
 
-const App: React.FC = () => <Button onClick={success}>Display a loading indicator</Button>;
+  const success = () => {
+    messageApi.open({
+      type: 'loading',
+      content: 'Action in progress..',
+      duration: 0,
+    });
+    // Dismiss manually and asynchronously
+    setTimeout(messageApi.destroy, 2500);
+  };
+  return (
+    <>
+      {contextHolder}
+      <Button onClick={success}>Display a loading indicator</Button>
+    </>
+  );
+};
 
 export default App;
 ```

components/message/demo/other.md

@@ -17,25 +17,41 @@ Messages of success, error and warning types.
 import { Button, message, Space } from 'antd';
 import React from 'react';
 
-const success = () => {
-  message.success('This is a success message');
-};
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
 
-const error = () => {
-  message.error('This is an error message');
-};
+  const success = () => {
+    messageApi.open({
+      type: 'success',
+      content: 'This is a success message',
+    });
+  };
 
-const warning = () => {
-  message.warning('This is a warning message');
-};
+  const error = () => {
+    messageApi.open({
+      type: 'error',
+      content: 'This is an error message',
+    });
+  };
 
-const App: React.FC = () => (
-  <Space>
-    <Button onClick={success}>Success</Button>
-    <Button onClick={error}>Error</Button>
-    <Button onClick={warning}>Warning</Button>
-  </Space>
-);
+  const warning = () => {
+    messageApi.open({
+      type: 'warning',
+      content: 'This is a warning message',
+    });
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Space>
+        <Button onClick={success}>Success</Button>
+        <Button onClick={error}>Error</Button>
+        <Button onClick={warning}>Warning</Button>
+      </Space>
+    </>
+  );
+};
 
 export default App;
 ```

components/message/demo/thenable.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 4
 title:
   zh-CN: Promise 接口
   en-US: Promise interface
@@ -17,14 +17,27 @@ title:
 import { Button, message } from 'antd';
 import React from 'react';
 
-const success = () => {
-  message
-    .loading('Action in progress..', 2.5)
-    .then(() => message.success('Loading finished', 2.5))
-    .then(() => message.info('Loading finished is finished', 2.5));
-};
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
 
-const App: React.FC = () => <Button onClick={success}>Display sequential messages</Button>;
+  const success = () => {
+    messageApi
+      .open({
+        type: 'loading',
+        content: 'Action in progress..',
+        duration: 2.5,
+      })
+      .then(() => message.success('Loading finished', 2.5))
+      .then(() => message.info('Loading finished', 2.5));
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Button onClick={success}>Display sequential messages</Button>
+    </>
+  );
+};
 
 export default App;
 ```

components/message/demo/update.md

@@ -17,20 +17,35 @@ Update message content with unique `key`.
 import { Button, message } from 'antd';
 import React from 'react';
 
-const key = 'updatable';
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
+  const key = 'updatable';
 
-const openMessage = () => {
-  message.loading({ content: 'Loading...', key });
-  setTimeout(() => {
-    message.success({ content: 'Loaded!', key, duration: 2 });
-  }, 1000);
+  const openMessage = () => {
+    messageApi.open({
+      key,
+      type: 'loading',
+      content: 'Loading...',
+    });
+    setTimeout(() => {
+      messageApi.open({
+        key,
+        type: 'success',
+        content: 'Loaded!',
+        duration: 2,
+      });
+    }, 1000);
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Button type="primary" onClick={openMessage}>
+        Open the message box
+      </Button>
+    </>
+  );
 };
 
-const App: React.FC = () => (
-  <Button type="primary" onClick={openMessage}>
-    Open the message box
-  </Button>
-);
-
 export default App;
 ```