From be0de2023c18d319bc712ddea475f3d0b4c997ce Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 31 Dec 2021 10:43:17 +0800
Subject: [PATCH] fix(Picker): should not render mask and frame when options is
 empty (#10135)

* docs(Search): update action slot demo

* fix(Picker): should not render mask and frame when options is empty
---
 .../area/test/__snapshots__/demo.spec.ts.snap | 32 ---------------
 .../test/__snapshots__/index.spec.js.snap     | 16 --------
 packages/vant/src/picker/Picker.tsx           | 31 +++++++++-----
 .../test/__snapshots__/index.spec.tsx.snap    | 40 -------------------
 packages/vant/src/picker/test/index.spec.tsx  | 14 +++++++
 5 files changed, 35 insertions(+), 98 deletions(-)

diff --git a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
index fb2b85d81..3198a1cac 100644
--- a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
@@ -165,14 +165,6 @@ exports[`should render demo and match snapshot 1`] = `
           </li>
         </ul>
       </div>
-      <div class="van-picker__mask"
-           style="background-size: 100% 110px;"
-      >
-      </div>
-      <div class="van-hairline-unset--top-bottom van-picker__frame"
-           style="height: 44px;"
-      >
-      </div>
     </div>
   </div>
 </div>
@@ -331,14 +323,6 @@ exports[`should render demo and match snapshot 1`] = `
           </li>
         </ul>
       </div>
-      <div class="van-picker__mask"
-           style="background-size: 100% 110px;"
-      >
-      </div>
-      <div class="van-hairline-unset--top-bottom van-picker__frame"
-           style="height: 44px;"
-      >
-      </div>
     </div>
   </div>
 </div>
@@ -410,14 +394,6 @@ exports[`should render demo and match snapshot 1`] = `
           </li>
         </ul>
       </div>
-      <div class="van-picker__mask"
-           style="background-size: 100% 110px;"
-      >
-      </div>
-      <div class="van-hairline-unset--top-bottom van-picker__frame"
-           style="height: 44px;"
-      >
-      </div>
     </div>
   </div>
 </div>
@@ -495,14 +471,6 @@ exports[`should render demo and match snapshot 1`] = `
         >
         </ul>
       </div>
-      <div class="van-picker__mask"
-           style="background-size: 100% 110px;"
-      >
-      </div>
-      <div class="van-hairline-unset--top-bottom van-picker__frame"
-           style="height: 44px;"
-      >
-      </div>
     </div>
   </div>
 </div>
diff --git a/packages/vant/src/area/test/__snapshots__/index.spec.js.snap b/packages/vant/src/area/test/__snapshots__/index.spec.js.snap
index ba7b435e5..67059984e 100644
--- a/packages/vant/src/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/area/test/__snapshots__/index.spec.js.snap
@@ -36,14 +36,6 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
   Bottom
 </div>
@@ -130,14 +122,6 @@ exports[`should render two columns when columns-num prop is two 1`] = `
         </li>
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx
index f0c5b0496..6c9fdd3e3 100644
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@@ -352,14 +352,29 @@ export default defineComponent({
         />
       ));
 
+    const renderMask = (wrapHeight: number) => {
+      const hasOptions = formattedColumns.value.some(
+        (item) => item[valuesKey] && item[valuesKey].length !== 0
+      );
+
+      if (hasOptions) {
+        const frameStyle = { height: `${itemHeight.value}px` };
+        const maskStyle = {
+          backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,
+        };
+        return [
+          <div class={bem('mask')} style={maskStyle} />,
+          <div
+            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
+            style={frameStyle}
+          />,
+        ];
+      }
+    };
+
     const renderColumns = () => {
       const wrapHeight = itemHeight.value * +props.visibleItemCount;
-      const frameStyle = { height: `${itemHeight.value}px` };
       const columnsStyle = { height: `${wrapHeight}px` };
-      const maskStyle = {
-        backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,
-      };
-
       return (
         <div
           class={bem('columns')}
@@ -367,11 +382,7 @@ export default defineComponent({
           onTouchmove={preventDefault}
         >
           {renderColumnItems()}
-          <div class={bem('mask')} style={maskStyle} />
-          <div
-            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
-            style={frameStyle}
-          />
+          {renderMask(wrapHeight)}
         </div>
       );
     };
diff --git a/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
index 01a80faf5..41902d3e0 100644
--- a/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
@@ -168,14 +168,6 @@ exports[`columns-top、columns-bottom prop 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
   Custom Columns Bottom
 </div>
@@ -403,14 +395,6 @@ exports[`should render confirm/cancel slot correctly 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
 </div>
 `;
@@ -439,14 +423,6 @@ exports[`should render title slot correctly 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
 </div>
 `;
@@ -465,14 +441,6 @@ exports[`should render toolbar slot correctly 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
 </div>
 `;
@@ -488,14 +456,6 @@ exports[`toolbar-position prop 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
   </div>
   <div class="van-picker__toolbar">
     <button type="button"
diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx
index b05018513..ae2a47dad 100644
--- a/packages/vant/src/picker/test/index.spec.tsx
+++ b/packages/vant/src/picker/test/index.spec.tsx
@@ -345,3 +345,17 @@ test('readonly prop', () => {
 
   expect(wrapper.emitted('change')).toBeFalsy();
 });
+
+test('should not render mask and frame when options is empty', async () => {
+  const wrapper = mount(Picker, {
+    props: {
+      columns: [{ values: [] }],
+    },
+  });
+  expect(wrapper.find('.van-picker__mask').exists()).toBeFalsy();
+  expect(wrapper.find('.van-picker__frame').exists()).toBeFalsy();
+
+  await wrapper.setProps({ columns: [{ values: ['foo'] }] });
+  expect(wrapper.find('.van-picker__mask').exists()).toBeTruthy();
+  expect(wrapper.find('.van-picker__frame').exists()).toBeTruthy();
+});