docs(x-request): use splitter for demo (#457)

* docs(x-request): use splitter for demo * test(x-request): update demo test snap
ant-design · Jan 10, 2025 · 952eff4 · 952eff4
1 parent dadb26d
commit 952eff4
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 55 deletions.
diff --git a/components/x-request/__tests__/__snapshots__/demo.test.ts.snap b/components/x-request/__tests__/__snapshots__/demo.test.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`renders components/x-request/demo/basic.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-horizontal ant-space-align-start"
-  style="column-gap:16px;row-gap:16px"
+  class="ant-splitter ant-splitter-horizontal"
 >
   <div
-    class="ant-space-item"
+    class="ant-splitter-panel"
+    style="flex-basis:auto;flex-grow:1"
   >
     <button
       class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
@@ -18,7 +18,19 @@ exports[`renders components/x-request/demo/basic.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    class="ant-space-item"
+    aria-valuemax="0"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="ant-splitter-bar"
+    role="separator"
+  >
+    <div
+      class="ant-splitter-bar-dragger"
+    />
+  </div>
+  <div
+    class="ant-splitter-panel"
+    style="margin-left:16px;flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-thought-chain ant-thought-chain-middle"
@@ -138,11 +150,11 @@ exports[`renders components/x-request/demo/basic.tsx correctly 1`] = `
 
 exports[`renders components/x-request/demo/custom-transformer.tsx correctly 1`] = `
 <div
-  class="ant-space ant-space-horizontal ant-space-align-start"
-  style="column-gap:16px;row-gap:16px"
+  class="ant-splitter ant-splitter-horizontal"
 >
   <div
-    class="ant-space-item"
+    class="ant-splitter-panel"
+    style="flex-basis:auto;flex-grow:1"
   >
     <button
       class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
@@ -154,7 +166,19 @@ exports[`renders components/x-request/demo/custom-transformer.tsx correctly 1`]
     </button>
   </div>
   <div
-    class="ant-space-item"
+    aria-valuemax="0"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="ant-splitter-bar"
+    role="separator"
+  >
+    <div
+      class="ant-splitter-bar-dragger"
+    />
+  </div>
+  <div
+    class="ant-splitter-panel"
+    style="margin-left:16px;flex-basis:auto;flex-grow:1"
   >
     <div
       class="ant-thought-chain ant-thought-chain-middle"

diff --git a/components/x-request/demo/basic.tsx b/components/x-request/demo/basic.tsx
@@ -1,6 +1,6 @@
 import { LoadingOutlined, TagsOutlined } from '@ant-design/icons';
 import { ThoughtChain, XRequest } from '@ant-design/x';
-import { Button, Descriptions, Space } from 'antd';
+import { Button, Descriptions, Splitter } from 'antd';
 import React from 'react';
 
 import type { ThoughtChainItem } from '@ant-design/x';
@@ -51,31 +51,35 @@ const App = () => {
   }
 
   return (
-    <Space align="start" size={16}>
-      <Button type="primary" disabled={status === 'pending'} onClick={request}>
-        Request - {BASE_URL}
-        {PATH}
-      </Button>
-      <ThoughtChain
-        items={[
-          {
-            title: 'Request Log',
-            status: status,
-            icon: status === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
-            description:
-              status === 'error' &&
-              exampleRequest.baseURL === BASE_URL + PATH &&
-              'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
-            content: (
-              <Descriptions column={1}>
-                <Descriptions.Item label="Status">{status || '-'}</Descriptions.Item>
-                <Descriptions.Item label="Update Times">{lines.length}</Descriptions.Item>
-              </Descriptions>
-            ),
-          },
-        ]}
-      />
-    </Space>
+    <Splitter>
+      <Splitter.Panel>
+        <Button type="primary" disabled={status === 'pending'} onClick={request}>
+          Request - {BASE_URL}
+          {PATH}
+        </Button>
+      </Splitter.Panel>
+      <Splitter.Panel style={{ marginLeft: 16 }}>
+        <ThoughtChain
+          items={[
+            {
+              title: 'Request Log',
+              status: status,
+              icon: status === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
+              description:
+                status === 'error' &&
+                exampleRequest.baseURL === BASE_URL + PATH &&
+                'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
+              content: (
+                <Descriptions column={1}>
+                  <Descriptions.Item label="Status">{status || '-'}</Descriptions.Item>
+                  <Descriptions.Item label="Update Times">{lines.length}</Descriptions.Item>
+                </Descriptions>
+              ),
+            },
+          ]}
+        />
+      </Splitter.Panel>
+    </Splitter>
   );
 };
 

diff --git a/components/x-request/demo/custom-transformer.tsx b/components/x-request/demo/custom-transformer.tsx
@@ -1,5 +1,5 @@
 import { ThoughtChain, XRequest } from '@ant-design/x';
-import { Button, Space } from 'antd';
+import { Button, Splitter } from 'antd';
 import React from 'react';
 
 import { TagsOutlined } from '@ant-design/icons';
@@ -81,26 +81,30 @@ const App = () => {
   }
 
   return (
-    <Space align="start" size={16}>
-      <Button type="primary" disabled={status === 'pending'} onClick={request}>
-        Request - {BASE_URL}
-        {PATH}
-      </Button>
-      <ThoughtChain
-        items={[
-          {
-            title: 'Mock Custom Protocol - Log',
-            status: status,
-            icon: <TagsOutlined />,
-            content: (
-              <pre style={{ overflow: 'scroll' }}>
-                <code>{lines.join(ND_JSON_SEPARATOR)}</code>
-              </pre>
-            ),
-          },
-        ]}
-      />
-    </Space>
+    <Splitter>
+      <Splitter.Panel>
+        <Button type="primary" disabled={status === 'pending'} onClick={request}>
+          Request - {BASE_URL}
+          {PATH}
+        </Button>
+      </Splitter.Panel>
+      <Splitter.Panel style={{ marginLeft: 16 }}>
+        <ThoughtChain
+          items={[
+            {
+              title: 'Mock Custom Protocol - Log',
+              status: status,
+              icon: <TagsOutlined />,
+              content: (
+                <pre style={{ overflow: 'scroll' }}>
+                  <code>{lines.join(ND_JSON_SEPARATOR)}</code>
+                </pre>
+              ),
+            },
+          ]}
+        />
+      </Splitter.Panel>
+    </Splitter>
   );
 };