docs: Fix Form provider demo (ant-design#44391)

* docs: fix provider demo * test: update snapshot
ammar-knowledge · Aug 24, 2023 · 0dd651c · 0dd651c
1 parent eaa8635
commit 0dd651c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -6833,6 +6833,25 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
  </div>
  </div>
  </div>
+ <div
+ class="ant-form-item ant-form-item-hidden"
+ >
+ <div
+ class="ant-row ant-form-item-row"
+ >
+ <div
+ class="ant-col ant-col-16 ant-form-item-control"
+ >
+ <div
+ class="ant-form-item-control-input"
+ >
+ <div
+ class="ant-form-item-control-input-content"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
  <div
  class="ant-form-item"
  >
@@ -6928,7 +6947,11 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
 </form>
 `;
 
-exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `
+[
+ "Warning: [antd: Form.Item] \`name\` is only used for validate React element. If you are using Form.Item as layout display, please remove \`name\` instead.",
+]
+`;
 
 exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
 <div>

diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4025,6 +4025,25 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
  </div>
  </div>
  </div>
+ <div
+ class="ant-form-item ant-form-item-hidden"
+ >
+ <div
+ class="ant-row ant-form-item-row"
+ >
+ <div
+ class="ant-col ant-col-16 ant-form-item-control"
+ >
+ <div
+ class="ant-form-item-control-input"
+ >
+ <div
+ class="ant-form-item-control-input-content"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
  <div
  class="ant-form-item"
  >

diff --git a/components/form/demo/form-context.tsx b/components/form/demo/form-context.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Form, Input, InputNumber, Modal, Typography } from 'antd';
+import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd';
 import type { FormInstance } from 'antd/es/form';
 
 const layout = {
@@ -93,6 +93,10 @@ const App: React.FC = () => {
  <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
  <Input />
  </Form.Item>
+
+ {/* Create a hidden field to make Form instance record this */}
+ <Form.Item name="users" hidden />
+
  <Form.Item
  label="User List"
  shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
@@ -103,8 +107,10 @@ const App: React.FC = () => {
  <ul>
  {users.map((user) => (
  <li key={user.name} className="user">
- <Avatar icon={<UserOutlined />} />
- {user.name} - {user.age}
+ <Space>
+ <Avatar icon={<UserOutlined />} />
+ {`${user.name} - ${user.age}`}
+ </Space>
  </li>
  ))}
  </ul>