fix: Calendar envet

babel.config.js

@@ -2,10 +2,13 @@
 // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
 module.exports = {
   presets: [
-    "@vue/babel-preset-jsx",
-    ['taro', {
-      framework: 'vue',
-      ts: true
-    }]
-  ]
+    '@vue/babel-preset-jsx',
+    [
+      'taro',
+      {
+        framework: 'vue',
+        ts: true,
+      },
+    ],
+  ],
 }

src/components/calendar/body/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view>
     <view
-      :class="getRootCls"
+      :class="getRootCls()"
     >
       <AtCalendarDayList />
       <swiper
@@ -16,14 +16,14 @@
         :on-touch-start="handleSwipeTouchStart"
       >
         <swiper-item
-          v-for="(item, key) in state.tGroup"
+          v-for="(item, key) in state.listGroup"
           :key="item.value"
           :item-id="key.toString()"
         >
           <AtCalendarDateList
             :list="item.list"
-            :on-click="onDayClick"
-            :on-long-click="onLongClick"
+            :on-click="atDayClick"
+            :on-long-click="atLongClick"
           />
         </swiper-item>
       </swiper>
@@ -91,6 +91,14 @@ const AtCalendarBody = Vue.extend({
       type: Boolean,
       default: false,
     },
+    atDayClick: {
+      type: Function,
+      default: () => () => {},
+    },
+    atLongClick: {
+      type: Function,
+      default: () => () => {},
+    },
   },
   data() {
     const { validDates, marks, format, minDate, maxDate, selectedDates } = this
@@ -118,6 +126,60 @@ const AtCalendarBody = Vue.extend({
       },
     }
   },
+  computed: {
+    nextProps() {
+      const {
+      validDates,
+      marks,
+      format,
+      minDate,
+      maxDate,
+      generateDate,
+      selectedDate,
+      selectedDates
+      } = this
+      return {
+        validDates,
+        marks,
+        format,
+        minDate,
+        maxDate,
+        generateDate,
+        selectedDate,
+        selectedDates
+      }
+    }
+  },
+  watch: {
+    nextProps(val) {
+      const {
+        validDates,
+        marks,
+        format,
+        minDate,
+        maxDate,
+        generateDate,
+        selectedDate,
+        selectedDates
+      } = val
+      console.log('generateDate', dayjs(generateDate))
+      this.generateFunc = generateCalendarGroup({
+        validDates,
+        format,
+        minDate,
+        maxDate,
+        marks,
+        selectedDates
+      })
+      const listGroup = this.getGroups(generateDate, selectedDate)
+
+      this.setState({
+        offsetSize: 0,
+        listGroup
+      })
+      console.log(this.state.listGroup)
+    }
+  },
   created() {
     console.log('created')
     const { generateDate, selectedDate } = this
@@ -215,7 +277,7 @@ const AtCalendarBody = Vue.extend({
       if (absOffsetSize > breakpoint) {
         const res = isRight ? this.maxWidth : -this.maxWidth
         return this.animateMoveSlide(res, () => {
-          this.onSwipeMonth(isRight ? -1 : 1)
+          this.atSwipeMonth(isRight ? -1 : 1)
         })
       }
       this.animateMoveSlide(0)
@@ -230,7 +292,7 @@ const AtCalendarBody = Vue.extend({
     },
     handleAnimateFinish() {
       if (this.changeCount > 0) {
-        this.onSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount)
+        this.atSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount)
         this.changeCount = 0
       }
     },

src/components/calendar/controller/index.jsx

@@ -13,18 +13,30 @@ const AtCalendarController = Vue.extend({
       type: [String, Number, Date],
       default: '',
     },
-    onSelectDate: {
+    atSelectDate: {
       type: Function,
       default: () => () => {},
     },
-    onPreMonth: {
+    atPreMonth: {
       type: Function,
       default: () => () => {},
     },
-    onNextMonth: {
+    atNextMonth: {
       type: Function,
       default: () => () => {},
     },
+    monthFormat: {
+      type: String,
+      default: 'YYYY年MM月',
+    },
+    generateDate: {
+      type: [Number, String],
+      default: Date.now(),
+    },
+    hideArrow: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -35,6 +47,7 @@ const AtCalendarController = Vue.extend({
     const { generateDate, minDate, maxDate, monthFormat, hideArrow } = this
 
     const dayjsDate = dayjs(generateDate)
+    console.log('dayjsDate', dayjsDate)
     const dayjsMinDate = !!minDate && dayjs(minDate)
     const dayjsMaxDate = !!maxDate && dayjs(maxDate)
 
@@ -52,15 +65,15 @@ const AtCalendarController = Vue.extend({
             class={classnames('controller__arrow controller__arrow--left', {
               'controller__arrow--disabled': isMinMonth,
             })}
-            onClick={this.onPreMonth.bind(this, isMinMonth)}
+            onTap={this.atPreMonth.bind(this, isMinMonth)}
           />
         )}
         <picker
           mode="date"
           fields="month"
           end={maxDateValue}
           start={minDateValue}
-          onChange={this.onSelectDate}
+          onChange={this.atSelectDate}
           value={dayjsDate.format('YYYY-MM')}>
           <text class="controller__info">{dayjsDate.format(monthFormat)}</text>
         </picker>
@@ -69,7 +82,7 @@ const AtCalendarController = Vue.extend({
             class={classnames('controller__arrow controller__arrow--right', {
               'controller__arrow--disabled': isMaxMonth,
             })}
-            onClick={this.onNextMonth.bind(this, isMaxMonth)}
+            onTap={this.atNextMonth.bind(this, isMaxMonth)}
           />
         )}
       </view>

src/components/calendar/index.jsx

@@ -50,27 +50,27 @@ const AtCalendar = Vue.extend({
       type: String,
       default: 'YYYY年MM月',
     },
-    onMonthChange: {
+    atMonthChange: {
       type: Function,
       default: () => () => {},
     },
-    onClickPreMonth: {
+    atClickPreMonth: {
       type: Function,
       default: () => () => {},
     },
-    onClickNextMonth: {
+    atClickNextMonth: {
       type: Function,
       default: () => () => {},
     },
-    onDayClick: {
+    atDayClick: {
       type: Function,
       default: () => () => {},
     },
-    onSelectDate: {
+    atSelectDate: {
       type: Function,
       default: () => () => {},
     },
-    onDayLongClick: {
+    atDayLongClick: {
       type: Function,
       default: () => () => {},
     },
@@ -88,11 +88,17 @@ const AtCalendar = Vue.extend({
       state: {},
     }
   },
-  watch: {
-    currentDate(val) {
-      if (!val) return
+  computed: {
+    nextProps() {
       const { currentDate, isMultiSelect } = this
-      if (isMultiSelect) {
+      return { currentDate, isMultiSelect }
+    },
+  },
+  watch: {
+    nextProps(val, oldVal) {
+      const { currentDate, isMultiSelect } = val
+      if (!currentDate || currentDate === oldVal.currentDate) return
+      if (isMultiSelect && oldVal.isMultiSelect) {
         const { start, end } = currentDate
         const { start: preStart, end: preEnd } = this.currentDate
 
@@ -201,9 +207,9 @@ const AtCalendar = Vue.extend({
     triggerChangeDate(value) {
       const { format } = this
 
-      if (typeof this.onMonthChange !== 'function') return
+      if (typeof this.atMonthChange !== 'function') return
 
-      this.onMonthChange(value.format(format))
+      this.atMonthChange(value.format(format))
     },
     setMonth(vectorCount) {
       const { format } = this
@@ -213,20 +219,21 @@ const AtCalendar = Vue.extend({
       this.setState({
         generateDate: _generateDate.valueOf(),
       })
-
-      if (vectorCount && typeof this.onMonthChange === 'function') {
-        this.onMonthChange(_generateDate.format(format))
+      console.log(this.state)
+      if (vectorCount && typeof this.atMonthChange === 'function') {
+        this.atMonthChange(_generateDate.format(format))
       }
     },
     handleClickPreMonth(isMinMonth) {
+      console.log('isMinMonth >> ', isMinMonth)
       if (isMinMonth === true) {
         return
       }
 
       this.setMonth(-1)
 
-      if (typeof this.onClickPreMonth === 'function') {
-        this.onClickPreMonth()
+      if (typeof this.atClickPreMonth === 'function') {
+        this.atClickPreMonth()
       }
     },
     handleClickNextMonth(isMaxMonth) {
@@ -236,8 +243,8 @@ const AtCalendar = Vue.extend({
 
       this.setMonth(1)
 
-      if (typeof this.onClickNextMonth === 'function') {
-        this.onClickNextMonth()
+      if (typeof this.atClickNextMonth === 'function') {
+        this.atClickNextMonth()
       }
     },
     handleSelectDate(e) {
@@ -268,18 +275,18 @@ const AtCalendar = Vue.extend({
       } else {
         stateValue = this.getSingleSelectdState(dayjsDate)
       }
-
+      console.log('stateValue', stateValue)
       this.setState(stateValue, () => {
         this.handleSelectedDate()
       })
 
-      if (typeof this.onDayClick === 'function') {
-        this.onDayClick({ value: item.value })
+      if (typeof this.atDayClick === 'function') {
+        this.atDayClick({ value: item.value })
       }
     },
     handleSelectedDate() {
       const selectDate = this.state.selectedDate
-      if (typeof this.onSelectDate === 'function') {
+      if (typeof this.atSelectDate === 'function') {
         const info = {
           start: dayjs(selectDate.start).format(this.format),
         }
@@ -288,19 +295,20 @@ const AtCalendar = Vue.extend({
           info.end = dayjs(selectDate.end).format(this.format)
         }
 
-        this.onSelectDate({
+        this.atSelectDate({
           value: info,
         })
       }
     },
     handleDayLongClick(item) {
-      if (typeof this.onDayLongClick === 'function') {
-        this.onDayLongClick({ value: item.value })
+      if (typeof this.atDayLongClick === 'function') {
+        this.atDayLongClick({ value: item.value })
       }
     },
   },
   render() {
     const { generateDate, selectedDate } = this.state
+    console.log('selectedDate >>', selectedDate)
     const {
       validDates,
       marks,
@@ -323,9 +331,9 @@ const AtCalendar = Vue.extend({
           hideArrow={hideArrow}
           monthFormat={monthFormat}
           generateDate={generateDate}
-          onPreMonth={this.handleClickPreMonth}
-          onNextMonth={this.handleClickNextMonth}
-          onSelectDate={this.handleSelectDate}
+          atPreMonth={this.handleClickPreMonth}
+          atNextMonth={this.handleClickNextMonth}
+          atSelectDate={this.handleSelectDate}
         />
         <AtCalendarBody
           validDates={validDates}
@@ -338,9 +346,9 @@ const AtCalendar = Vue.extend({
           selectedDate={selectedDate}
           selectedDates={selectedDates}
           generateDate={generateDate}
-          onDayClick={this.handleDayClick}
-          onSwipeMonth={this.setMonth}
-          onLongClick={this.handleDayLongClick}
+          atDayClick={this.handleDayClick}
+          atSwipeMonth={this.setMonth}
+          atLongClick={this.handleDayLongClick}
         />
       </view>
     )

src/components/calendar/ui/date-list/index.tsx

@@ -33,6 +33,7 @@ const AtCalendarList = Vue.extend({
   },
   methods: {
     handleClick(item) {
+      console.log('handleClick :>> ', this.onClick);
       if (typeof this.onClick === 'function') {
         this.onClick(item)
       }