Skip to content

Commit

Permalink
fix(Calendar): should not render all months on mounted (youzan#7564)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenjiahan @Fire-Dragons
chenjiahan authored and Fire-Dragons committed Jan 18, 2021
1 parent ab68bc1 commit 263f9b1
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 96 deletions.
62 changes: 20 additions & 42 deletions src/calendar/components/Month.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export default createComponent({
currentDate: [Date, Array],
allowSameDay: Boolean,
showSubtitle: Boolean,
realRowHeight: Number,
showMonthTitle: Boolean,
firstDayOfWeek: Number,
},
Expand Down Expand Up @@ -66,15 +65,13 @@ export default createComponent({
return this.visible || !this.lazyRender;
},

monthStyle() {
if (!this.shouldRender) {
const padding =
Math.ceil((this.totalDay + this.offset) / 7) * this.realRowHeight;

return {
paddingBottom: `${padding}px`,
};
placeholders() {
const rows = [];
const count = Math.ceil((this.totalDay + this.offset) / 7);
for (let day = 1; day <= count; day++) {
rows.push({ type: 'placeholder' });
}
return rows;
},

days() {
Expand Down Expand Up @@ -104,23 +101,6 @@ export default createComponent({
},
},

watch: {
shouldRender(value) {
if (value) {
this.$nextTick(() => {
if (this.$refs.day[0] && !this.realRowHeight) {
const { height } = this.$refs.day[0].getBoundingClientRect();
this.$emit('update-height', height);
}
});
}
},

realRowHeight() {
this.height = null;
},
},

methods: {
getHeight() {
if (!this.height) {
Expand Down Expand Up @@ -238,6 +218,11 @@ export default createComponent({
height: this.rowHeightWithUnit,
};

if (type === 'placeholder') {
style.width = '100%';
return style;
}

if (index === 0) {
style.marginLeft = `${(100 * this.offset) / 7}%`;
}
Expand Down Expand Up @@ -266,22 +251,19 @@ export default createComponent({
},

genMark() {
if (this.showMark) {
if (this.showMark && this.shouldRender) {
return <div class={bem('month-mark')}>{this.date.getMonth() + 1}</div>;
}
},

genDays() {
if (this.shouldRender) {
return (
<div ref="days" role="grid" class={bem('days')}>
{this.genMark()}
{this.days.map(this.genDay)}
</div>
);
}

return <div ref="days" />;
const days = this.shouldRender ? this.days : this.placeholders;
return (
<div ref="days" role="grid" class={bem('days')}>
{this.genMark()}
{days.map(this.genDay)}
</div>
);
},

genDay(item, index) {
Expand All @@ -304,8 +286,6 @@ export default createComponent({
if (type === 'selected') {
return (
<div
ref="day"
refInFor
role="gridcell"
style={style}
class={[bem('day'), item.className]}
Expand All @@ -330,8 +310,6 @@ export default createComponent({

return (
<div
ref="day"
refInFor
role="gridcell"
style={style}
class={[bem('day', type), item.className]}
Expand All @@ -348,7 +326,7 @@ export default createComponent({

render() {
return (
<div class={bem('month')} ref="month" style={this.monthStyle}>
<div class={bem('month')} ref="month">
{this.genTitle()}
{this.genDays()}
</div>
Expand Down
7 changes: 0 additions & 7 deletions src/calendar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ export default createComponent({
return {
subtitle: '',
currentDate: this.getInitialDate(),
realRowHeight: 0,
};
},

Expand Down Expand Up @@ -404,10 +403,6 @@ export default createComponent({
this.$emit('confirm', copyDates(this.currentDate));
},

onUpdateHeight(height) {
this.realRowHeight = height;
},

genMonth(date, index) {
const showMonthTitle = index !== 0 || !this.showSubtitle;
return (
Expand All @@ -426,11 +421,9 @@ export default createComponent({
currentDate={this.currentDate}
showSubtitle={this.showSubtitle}
allowSameDay={this.allowSameDay}
realRowHeight={this.realRowHeight}
showMonthTitle={showMonthTitle}
firstDayOfWeek={this.dayOffset}
onClick={this.onClickDay}
onUpdate-height={this.onUpdateHeight}
/>
);
},
Expand Down
30 changes: 15 additions & 15 deletions src/calendar/test/__snapshots__/demo.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
Expand Down Expand Up @@ -102,14 +102,14 @@ exports[`renders demo correctly 1`] = `
<div role="gridcell" tabindex="-1" class="van-calendar__day">31</div>
</div>
</div>
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div class="van-calendar__month-title">2012年2月</div>
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">2</div>
<div class="van-calendar__month-mark" style="">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
Expand Down Expand Up @@ -137,14 +137,14 @@ exports[`renders demo correctly 1`] = `
<div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
</div>
</div>
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div class="van-calendar__month-title">2012年3月</div>
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">3</div>
<div class="van-calendar__month-mark" style="">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
Expand Down
64 changes: 32 additions & 32 deletions src/calendar/test/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ exports[`color prop when type is range 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
Expand Down Expand Up @@ -61,14 +61,14 @@ exports[`color prop when type is single 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
Expand Down Expand Up @@ -114,14 +114,14 @@ exports[`formatter prop 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
Expand Down Expand Up @@ -173,14 +173,14 @@ exports[`popup wrapper 2`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
Expand Down Expand Up @@ -228,9 +228,9 @@ exports[`row-height prop 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px; margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
Expand Down Expand Up @@ -281,14 +281,14 @@ exports[`title & footer slot 1`] = `
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__month-mark" style="">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
Expand Down

0 comments on commit 263f9b1

Please sign in to comment.