fix(calendar): render marks in months other than the current month

b2nil · Mar 5, 2021 · 5772de5 · 5772de5
1 parent 276517e
commit 5772de5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/src/components/calendar/__tests__/__snapshots__/calendar.spec.ts.snap b/src/components/calendar/__tests__/__snapshots__/calendar.spec.ts.snap
@@ -291,7 +291,7 @@ exports[`AtCalendar should render default calendar -- h5 1`] = `
               <view class="container-text">27</view>
             </view>
             <view class="flex__item-extra extra">
-              <!---->
+              <view class="extra-marks"><text class="mark">2020-11-27</text></view>
             </view>
           </view>
           <view class="flex__item flex__item--now">
@@ -323,7 +323,7 @@ exports[`AtCalendar should render default calendar -- h5 1`] = `
               <view class="container-text">1</view>
             </view>
             <view class="flex__item-extra extra">
-              <!---->
+              <view class="extra-marks"><text class="mark">2020-12-01</text></view>
             </view>
           </view>
           <view class="flex__item flex__item--next flex__item--blur">
@@ -383,7 +383,7 @@ exports[`AtCalendar should render default calendar -- h5 1`] = `
               <view class="container-text">1</view>
             </view>
             <view class="flex__item-extra extra">
-              <!---->
+              <view class="extra-marks"><text class="mark">2020-12-01</text></view>
             </view>
           </view>
           <view class="flex__item flex__item--now">
@@ -610,7 +610,7 @@ exports[`AtCalendar should render default calendar -- h5 1`] = `
               <!---->
             </view>
           </view>
-          <view class="flex__item flex__item--now flex__item--today">
+          <view class="flex__item flex__item--now">
             <view class="flex__item-container">
               <view class="container-text">30</view>
             </view>

diff --git a/src/components/calendar/__tests__/calendar.spec.ts b/src/components/calendar/__tests__/calendar.spec.ts
@@ -2,9 +2,15 @@ import { mountFactory } from '@/tests/helper'
 import AtCalendar from '../index'
 import Taro from '@tarojs/taro'
 
+const today = new Date()
+const dString = today.toISOString().substring(0, 7)
+
 describe('AtCalendar', () => {
   it('should render default calendar -- h5', () => {
-    const wrapper = mountFactory(AtCalendar, undefined, { currentDate: '2020-12-27' })
+    const wrapper = mountFactory(AtCalendar, undefined, {
+      currentDate: '2020-12-27',
+      marks: [{ value: "2020-11-27" }, { value: "2020-12-01" }]
+    })
     expect(wrapper.html()).toMatchSnapshot()
     expect(wrapper.find('.main > .main__body > .body__slider--pre').exists()).toBeTruthy()
     expect(wrapper.find('.main > .main__body > .body__slider--now').exists()).toBeTruthy()
@@ -81,12 +87,13 @@ describe('AtCalendar', () => {
   })
 
   it('should render marks', async () => {
-    const wrapper = mountFactory(AtCalendar)
-    expect(wrapper.findAll('.mark').length).toBe(0)
-
-    await wrapper.setProps({ marks: [{ value: '2020-12-27' }, { value: '2020-12-28' }] })
+    today.setDate(today.getDate() - 28)
+    const prevM = new Date(today).toISOString().substring(0, 10)
+    const wrapper = mountFactory(AtCalendar, undefined, { marks: [{ value: prevM }] })
+    expect(wrapper.findAll('.mark').length).toBe(1)
+    await wrapper.setProps({ marks: [{ value: `${dString}-21` }, { value: prevM }, { value: `${dString}-23` }] })
     wrapper.vm.$nextTick()
-    expect(wrapper.findAll('.mark').length).toBe(2)
+    expect(wrapper.findAll('.mark').length).toBe(3)
   })
 
   it('should render minDate and maxDate', () => {
@@ -124,7 +131,7 @@ describe('AtCalendar', () => {
 
   it('should render valid dates', () => {
     const wrapper = mountFactory(AtCalendar, undefined, {
-      validDates: [{ value: '2020-12-27' }, { value: '2020-12-28' }]
+      validDates: [{ value: `${dString}-21` }, { value: `${dString}-25` }]
     })
 
     expect(

diff --git a/src/components/calendar/common/helper.ts b/src/components/calendar/common/helper.ts
@@ -12,6 +12,12 @@ function getFullItem(
   selectedDate: Calendar.SelectedDate,
   isShowStatus?: boolean
 ) {
+  if (options.marks.find(x => x.value === item.value)) {
+    (item.marks as Array<Calendar.Mark>) = [{
+      value: item.value as string
+    }]
+  }
+
   if (!isShowStatus) return item
 
   const bindedPlugins = plugins.map(fn =>

diff --git a/src/components/calendar/ui/date-list/index.ts b/src/components/calendar/ui/date-list/index.ts
@@ -89,7 +89,7 @@ const AtCalendarList = defineComponent({
                         h(Text, {
                           key: key,
                           class: 'mark'
-                        }, { default: () => String(mark) })
+                        }, { default: () => mark.value })
                       ))
                     })
                   )