fix(form): fix ProFormDateRangePicker readonly no warp error

close #7913
ant-design · Jan 1, 2024 · b2276c3 · b2276c3
1 parent 6d764ad
commit b2276c3
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 199 deletions.
diff --git a/packages/field/src/components/RangePicker/index.tsx b/packages/field/src/components/RangePicker/index.tsx
@@ -65,7 +65,14 @@ const FieldRangePicker: ProFieldFC<
 
   if (mode === 'read') {
     const dom = (
-      <div ref={ref}>
+      <div
+        ref={ref}
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+        }}
+      >
         <div>{parsedStartText || '-'}</div>
         <div>{parsedEndText || '-'}</div>
       </div>

diff --git a/tests/descriptions/__snapshots__/demo.test.ts.snap b/tests/descriptions/__snapshots__/demo.test.ts.snap
@@ -698,7 +698,9 @@ exports[`descriptions demos > 📸 renders ./packages/descriptions/src/demos/bas
                     class="ant-descriptions-item-content"
                     style="min-width: 0;"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2016-11-21 15:22:44
                       </div>
@@ -3359,7 +3361,9 @@ exports[`descriptions demos > 📸 renders ./packages/descriptions/src/demos/for
                     class="ant-descriptions-item-content"
                     style="min-width: 0;"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2016.11.21 15:22:44
                       </div>

diff --git a/tests/field/__snapshots__/demo.test.ts.snap b/tests/field/__snapshots__/demo.test.ts.snap
@@ -1183,7 +1183,9 @@ exports[`field demos > 📸 renders ./packages/field/src/demos/base.tsx correctl
                   <span
                     class="ant-descriptions-item-content"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2019-11-15
                       </div>
@@ -1209,7 +1211,9 @@ exports[`field demos > 📸 renders ./packages/field/src/demos/base.tsx correctl
                   <span
                     class="ant-descriptions-item-content"
                   >
-                    <div>
+                    <div
+                      style="display: flex; flex-wrap: wrap; align-items: center;"
+                    >
                       <div>
                         2019-11-15 12:50:26
                       </div>

diff --git a/tests/field/__snapshots__/field.test.tsx.snap b/tests/field/__snapshots__/field.test.tsx.snap
@@ -3206,7 +3206,9 @@ exports[`Field > 🐴 read and plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15
                     </div>
@@ -3484,7 +3486,9 @@ exports[`Field > 🐴 read and plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
@@ -3510,7 +3514,9 @@ exports[`Field > 🐴 read and plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
@@ -3785,7 +3791,9 @@ exports[`Field > 🐴 read ant no plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15
                     </div>
@@ -4032,7 +4040,9 @@ exports[`Field > 🐴 read ant no plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>
@@ -4058,7 +4068,9 @@ exports[`Field > 🐴 read ant no plain 1`] = `
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div>
+                  <div
+                    style="display: flex; flex-wrap: wrap; align-items: center;"
+                  >
                     <div>
                       2019-11-15 12:50:26
                     </div>

diff --git a/tests/field/datePick.test.tsx b/tests/field/datePick.test.tsx
@@ -173,8 +173,8 @@ describe('DateField', () => {
       />,
     );
 
-    expect(html.baseElement.innerHTML).toBe(
-      '<div><div><div>2016-11-22 15:22:44</div><div>2016-11-23 15:22:44</div></div></div>',
+    expect(html.baseElement.textContent).toBe(
+      '2016-11-22 15:22:442016-11-23 15:22:44',
     );
   });
 

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -6562,7 +6562,9 @@ exports[`form demos > 📸 renders ./packages/form/src/components/FieldSet/demos
                         <div
                           class="ant-form-item-control-input-content"
                         >
-                          <div>
+                          <div
+                            style="display: flex; flex-wrap: wrap; align-items: center;"
+                          >
                             <div>
                               2016-11-22
                             </div>
@@ -6605,7 +6607,9 @@ exports[`form demos > 📸 renders ./packages/form/src/components/FieldSet/demos
                         <div
                           class="ant-form-item-control-input-content"
                         >
-                          <div>
+                          <div
+                            style="display: flex; flex-wrap: wrap; align-items: center;"
+                          >
                             <div>
                               2016-11-22 15:22:44
                             </div>
@@ -16315,6 +16319,7 @@ exports[`form demos > 📸 renders ./packages/form/src/components/LoginForm/demo
             autoplay=""
             crossorigin="anonymous"
             loop=""
+            playsinline=""
             src="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
             style="width: 100%; height: 100%; object-fit: cover;"
           />
@@ -47950,9 +47955,6 @@ exports[`form demos > 📸 renders ./packages/form/src/demos/layout-footer.tsx c
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
-      <div
-        class="ant-pro-layout-bg-list"
-      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"