Skip to content
This repository was archived by the owner on Oct 27, 2021. It is now read-only.

Commit 45e34f6

Browse files
psarenpsaren
committed
fix: Calendar envet
1 parent d177b12 commit 45e34f6

File tree

6 files changed

+139
-52
lines changed

6 files changed

+139
-52
lines changed

‎babel.config.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
33
module.exports = {
44
presets: [
5-
"@vue/babel-preset-jsx",
6-
['taro', {
7-
framework: 'vue',
8-
ts: true
9-
}]
10-
]
5+
'@vue/babel-preset-jsx',
6+
[
7+
'taro',
8+
{
9+
framework: 'vue',
10+
ts: true,
11+
},
12+
],
13+
],
1114
}

‎src/components/calendar/body/index.vue

+68-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<view>
33
<view
4-
:class="getRootCls"
4+
:class="getRootCls()"
55
>
66
<AtCalendarDayList />
77
<swiper
@@ -16,14 +16,14 @@
1616
:on-touch-start="handleSwipeTouchStart"
1717
>
1818
<swiper-item
19-
v-for="(item, key) in state.tGroup"
19+
v-for="(item, key) in state.listGroup"
2020
:key="item.value"
2121
:item-id="key.toString()"
2222
>
2323
<AtCalendarDateList
2424
:list="item.list"
25-
:on-click="onDayClick"
26-
:on-long-click="onLongClick"
25+
:on-click="atDayClick"
26+
:on-long-click="atLongClick"
2727
/>
2828
</swiper-item>
2929
</swiper>
@@ -91,6 +91,14 @@ const AtCalendarBody = Vue.extend({
9191
type: Boolean,
9292
default: false,
9393
},
94+
atDayClick: {
95+
type: Function,
96+
default: () => () => {},
97+
},
98+
atLongClick: {
99+
type: Function,
100+
default: () => () => {},
101+
},
94102
},
95103
data() {
96104
const { validDates, marks, format, minDate, maxDate, selectedDates } = this
@@ -118,6 +126,60 @@ const AtCalendarBody = Vue.extend({
118126
},
119127
}
120128
},
129+
computed: {
130+
nextProps() {
131+
const {
132+
validDates,
133+
marks,
134+
format,
135+
minDate,
136+
maxDate,
137+
generateDate,
138+
selectedDate,
139+
selectedDates
140+
} = this
141+
return {
142+
validDates,
143+
marks,
144+
format,
145+
minDate,
146+
maxDate,
147+
generateDate,
148+
selectedDate,
149+
selectedDates
150+
}
151+
}
152+
},
153+
watch: {
154+
nextProps(val) {
155+
const {
156+
validDates,
157+
marks,
158+
format,
159+
minDate,
160+
maxDate,
161+
generateDate,
162+
selectedDate,
163+
selectedDates
164+
} = val
165+
console.log('generateDate', dayjs(generateDate))
166+
this.generateFunc = generateCalendarGroup({
167+
validDates,
168+
format,
169+
minDate,
170+
maxDate,
171+
marks,
172+
selectedDates
173+
})
174+
const listGroup = this.getGroups(generateDate, selectedDate)
175+
176+
this.setState({
177+
offsetSize: 0,
178+
listGroup
179+
})
180+
console.log(this.state.listGroup)
181+
}
182+
},
121183
created() {
122184
console.log('created')
123185
const { generateDate, selectedDate } = this
@@ -215,7 +277,7 @@ const AtCalendarBody = Vue.extend({
215277
if (absOffsetSize > breakpoint) {
216278
const res = isRight ? this.maxWidth : -this.maxWidth
217279
return this.animateMoveSlide(res, () => {
218-
this.onSwipeMonth(isRight ? -1 : 1)
280+
this.atSwipeMonth(isRight ? -1 : 1)
219281
})
220282
}
221283
this.animateMoveSlide(0)
@@ -230,7 +292,7 @@ const AtCalendarBody = Vue.extend({
230292
},
231293
handleAnimateFinish() {
232294
if (this.changeCount > 0) {
233-
this.onSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount)
295+
this.atSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount)
234296
this.changeCount = 0
235297
}
236298
},

‎src/components/calendar/controller/index.jsx

+19-6
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,30 @@ const AtCalendarController = Vue.extend({
1313
type: [String, Number, Date],
1414
default: '',
1515
},
16-
onSelectDate: {
16+
atSelectDate: {
1717
type: Function,
1818
default: () => () => {},
1919
},
20-
onPreMonth: {
20+
atPreMonth: {
2121
type: Function,
2222
default: () => () => {},
2323
},
24-
onNextMonth: {
24+
atNextMonth: {
2525
type: Function,
2626
default: () => () => {},
2727
},
28+
monthFormat: {
29+
type: String,
30+
default: 'YYYY年MM月',
31+
},
32+
generateDate: {
33+
type: [Number, String],
34+
default: Date.now(),
35+
},
36+
hideArrow: {
37+
type: Boolean,
38+
default: false,
39+
},
2840
},
2941
data() {
3042
return {
@@ -35,6 +47,7 @@ const AtCalendarController = Vue.extend({
3547
const { generateDate, minDate, maxDate, monthFormat, hideArrow } = this
3648

3749
const dayjsDate = dayjs(generateDate)
50+
console.log('dayjsDate', dayjsDate)
3851
const dayjsMinDate = !!minDate && dayjs(minDate)
3952
const dayjsMaxDate = !!maxDate && dayjs(maxDate)
4053

@@ -52,15 +65,15 @@ const AtCalendarController = Vue.extend({
5265
class={classnames('controller__arrow controller__arrow--left', {
5366
'controller__arrow--disabled': isMinMonth,
5467
})}
55-
onClick={this.onPreMonth.bind(this, isMinMonth)}
68+
onTap={this.atPreMonth.bind(this, isMinMonth)}
5669
/>
5770
)}
5871
<picker
5972
mode="date"
6073
fields="month"
6174
end={maxDateValue}
6275
start={minDateValue}
63-
onChange={this.onSelectDate}
76+
onChange={this.atSelectDate}
6477
value={dayjsDate.format('YYYY-MM')}>
6578
<text class="controller__info">{dayjsDate.format(monthFormat)}</text>
6679
</picker>
@@ -69,7 +82,7 @@ const AtCalendarController = Vue.extend({
6982
class={classnames('controller__arrow controller__arrow--right', {
7083
'controller__arrow--disabled': isMaxMonth,
7184
})}
72-
onClick={this.onNextMonth.bind(this, isMaxMonth)}
85+
onTap={this.atNextMonth.bind(this, isMaxMonth)}
7386
/>
7487
)}
7588
</view>

‎src/components/calendar/index.jsx

+40-32
Original file line numberDiff line numberDiff line change
@@ -50,27 +50,27 @@ const AtCalendar = Vue.extend({
5050
type: String,
5151
default: 'YYYY年MM月',
5252
},
53-
onMonthChange: {
53+
atMonthChange: {
5454
type: Function,
5555
default: () => () => {},
5656
},
57-
onClickPreMonth: {
57+
atClickPreMonth: {
5858
type: Function,
5959
default: () => () => {},
6060
},
61-
onClickNextMonth: {
61+
atClickNextMonth: {
6262
type: Function,
6363
default: () => () => {},
6464
},
65-
onDayClick: {
65+
atDayClick: {
6666
type: Function,
6767
default: () => () => {},
6868
},
69-
onSelectDate: {
69+
atSelectDate: {
7070
type: Function,
7171
default: () => () => {},
7272
},
73-
onDayLongClick: {
73+
atDayLongClick: {
7474
type: Function,
7575
default: () => () => {},
7676
},
@@ -88,11 +88,17 @@ const AtCalendar = Vue.extend({
8888
state: {},
8989
}
9090
},
91-
watch: {
92-
currentDate(val) {
93-
if (!val) return
91+
computed: {
92+
nextProps() {
9493
const { currentDate, isMultiSelect } = this
95-
if (isMultiSelect) {
94+
return { currentDate, isMultiSelect }
95+
},
96+
},
97+
watch: {
98+
nextProps(val, oldVal) {
99+
const { currentDate, isMultiSelect } = val
100+
if (!currentDate || currentDate === oldVal.currentDate) return
101+
if (isMultiSelect && oldVal.isMultiSelect) {
96102
const { start, end } = currentDate
97103
const { start: preStart, end: preEnd } = this.currentDate
98104

@@ -201,9 +207,9 @@ const AtCalendar = Vue.extend({
201207
triggerChangeDate(value) {
202208
const { format } = this
203209

204-
if (typeof this.onMonthChange !== 'function') return
210+
if (typeof this.atMonthChange !== 'function') return
205211

206-
this.onMonthChange(value.format(format))
212+
this.atMonthChange(value.format(format))
207213
},
208214
setMonth(vectorCount) {
209215
const { format } = this
@@ -213,20 +219,21 @@ const AtCalendar = Vue.extend({
213219
this.setState({
214220
generateDate: _generateDate.valueOf(),
215221
})
216-
217-
if (vectorCount && typeof this.onMonthChange === 'function') {
218-
this.onMonthChange(_generateDate.format(format))
222+
console.log(this.state)
223+
if (vectorCount && typeof this.atMonthChange === 'function') {
224+
this.atMonthChange(_generateDate.format(format))
219225
}
220226
},
221227
handleClickPreMonth(isMinMonth) {
228+
console.log('isMinMonth >> ', isMinMonth)
222229
if (isMinMonth === true) {
223230
return
224231
}
225232

226233
this.setMonth(-1)
227234

228-
if (typeof this.onClickPreMonth === 'function') {
229-
this.onClickPreMonth()
235+
if (typeof this.atClickPreMonth === 'function') {
236+
this.atClickPreMonth()
230237
}
231238
},
232239
handleClickNextMonth(isMaxMonth) {
@@ -236,8 +243,8 @@ const AtCalendar = Vue.extend({
236243

237244
this.setMonth(1)
238245

239-
if (typeof this.onClickNextMonth === 'function') {
240-
this.onClickNextMonth()
246+
if (typeof this.atClickNextMonth === 'function') {
247+
this.atClickNextMonth()
241248
}
242249
},
243250
handleSelectDate(e) {
@@ -268,18 +275,18 @@ const AtCalendar = Vue.extend({
268275
} else {
269276
stateValue = this.getSingleSelectdState(dayjsDate)
270277
}
271-
278+
console.log('stateValue', stateValue)
272279
this.setState(stateValue, () => {
273280
this.handleSelectedDate()
274281
})
275282

276-
if (typeof this.onDayClick === 'function') {
277-
this.onDayClick({ value: item.value })
283+
if (typeof this.atDayClick === 'function') {
284+
this.atDayClick({ value: item.value })
278285
}
279286
},
280287
handleSelectedDate() {
281288
const selectDate = this.state.selectedDate
282-
if (typeof this.onSelectDate === 'function') {
289+
if (typeof this.atSelectDate === 'function') {
283290
const info = {
284291
start: dayjs(selectDate.start).format(this.format),
285292
}
@@ -288,19 +295,20 @@ const AtCalendar = Vue.extend({
288295
info.end = dayjs(selectDate.end).format(this.format)
289296
}
290297

291-
this.onSelectDate({
298+
this.atSelectDate({
292299
value: info,
293300
})
294301
}
295302
},
296303
handleDayLongClick(item) {
297-
if (typeof this.onDayLongClick === 'function') {
298-
this.onDayLongClick({ value: item.value })
304+
if (typeof this.atDayLongClick === 'function') {
305+
this.atDayLongClick({ value: item.value })
299306
}
300307
},
301308
},
302309
render() {
303310
const { generateDate, selectedDate } = this.state
311+
console.log('selectedDate >>', selectedDate)
304312
const {
305313
validDates,
306314
marks,
@@ -323,9 +331,9 @@ const AtCalendar = Vue.extend({
323331
hideArrow={hideArrow}
324332
monthFormat={monthFormat}
325333
generateDate={generateDate}
326-
onPreMonth={this.handleClickPreMonth}
327-
onNextMonth={this.handleClickNextMonth}
328-
onSelectDate={this.handleSelectDate}
334+
atPreMonth={this.handleClickPreMonth}
335+
atNextMonth={this.handleClickNextMonth}
336+
atSelectDate={this.handleSelectDate}
329337
/>
330338
<AtCalendarBody
331339
validDates={validDates}
@@ -338,9 +346,9 @@ const AtCalendar = Vue.extend({
338346
selectedDate={selectedDate}
339347
selectedDates={selectedDates}
340348
generateDate={generateDate}
341-
onDayClick={this.handleDayClick}
342-
onSwipeMonth={this.setMonth}
343-
onLongClick={this.handleDayLongClick}
349+
atDayClick={this.handleDayClick}
350+
atSwipeMonth={this.setMonth}
351+
atLongClick={this.handleDayLongClick}
344352
/>
345353
</view>
346354
)

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

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const AtCalendarList = Vue.extend({
3333
},
3434
methods: {
3535
handleClick(item) {
36+
console.log('handleClick :>> ', this.onClick);
3637
if (typeof this.onClick === 'function') {
3738
this.onClick(item)
3839
}

0 commit comments

Comments
 (0)