From 9040bfd77c78728e10296732c628593b7dd2277c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 30 Jun 2021 10:02:50 +0800
Subject: [PATCH] perf(Calendar): simplify placeholder dom (#8955)
---
src/calendar/CalendarDay.tsx | 5 ++
.../test/__snapshots__/demo.spec.ts.snap | 60 +++++--------------
.../test/__snapshots__/index.spec.ts.snap | 48 ++++-----------
3 files changed, 32 insertions(+), 81 deletions(-)
diff --git a/src/calendar/CalendarDay.tsx b/src/calendar/CalendarDay.tsx
index c533a9a2a..cb06cb211 100644
--- a/src/calendar/CalendarDay.tsx
+++ b/src/calendar/CalendarDay.tsx
@@ -136,6 +136,11 @@ export default defineComponent({
return () => {
const { type, className } = props.item;
+
+ if (type === 'placeholder') {
+ return <div class={bem('day')} style={style.value} />;
+ }
+
return (
<div
role="gridcell"
diff --git a/src/calendar/test/__snapshots__/demo.spec.ts.snap b/src/calendar/test/__snapshots__/demo.spec.ts.snap
index 9cc23b495..8ecbdd3ef 100644
--- a/src/calendar/test/__snapshots__/demo.spec.ts.snap
+++ b/src/calendar/test/__snapshots__/demo.spec.ts.snap
@@ -190,34 +190,24 @@ exports[`should render demo and match snapshot 1`] = `
<div role="grid"
class="van-calendar__days"
>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
</div>
@@ -229,34 +219,24 @@ exports[`should render demo and match snapshot 1`] = `
<div role="grid"
class="van-calendar__days"
>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
</div>
@@ -268,34 +248,24 @@ exports[`should render demo and match snapshot 1`] = `
<div role="grid"
class="van-calendar__days"
>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
</div>
diff --git a/src/calendar/test/__snapshots__/index.spec.ts.snap b/src/calendar/test/__snapshots__/index.spec.ts.snap
index 5adb2195c..b8cd34846 100644
--- a/src/calendar/test/__snapshots__/index.spec.ts.snap
+++ b/src/calendar/test/__snapshots__/index.spec.ts.snap
@@ -37,40 +37,28 @@ exports[`color prop when type is range 1`] = `
<div role="grid"
class="van-calendar__days"
>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
</div>
@@ -606,40 +594,28 @@ exports[`popup wrapper 2`] = `
<div role="grid"
class="van-calendar__days"
>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
- <div role="gridcell"
+ <div class="van-calendar__day"
style="width: 100%;"
- class="van-calendar__day van-calendar__day--placeholder"
- tabindex="-1"
>
</div>
</div>