@momo-kits/calendar 0.0.51-beta.4 → 0.0.51-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/Day/index.js +197 -191
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.51-beta.4",
3
+ "version": "0.0.51-beta.8",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
package/src/Day/index.js CHANGED
@@ -1,210 +1,216 @@
1
- import React, {Component} from 'react';
1
+ import React, { Component } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- import {View, TouchableHighlight, Text} from 'react-native';
5
- import {Colors, SwitchLanguage} from '@momo-kits/core';
4
+ import { View, TouchableHighlight, Text } from 'react-native';
5
+ import { Colors, SwitchLanguage } from '@momo-kits/core';
6
6
  import style from './style';
7
7
 
8
8
  class Day extends Component {
9
- constructor(props) {
10
- super(props);
11
- this.statusCheck();
12
- }
9
+ constructor(props) {
10
+ super(props);
11
+ this.statusCheck();
12
+ }
13
13
 
14
- chooseDay = () => {
15
- const {onChoose, date} = this.props;
16
- onChoose && onChoose(date);
17
- };
14
+ chooseDay = () => {
15
+ const { onChoose, date } = this.props;
16
+ onChoose && onChoose(date);
17
+ };
18
18
 
19
- findHoliday = (date, holidays) => {
20
- if (date && holidays && holidays.length > 0) {
21
- const day = date.date();
22
- const month = date.month() + 1;
23
- return holidays.find(item => item.day === day && item.month === month);
24
- }
25
- return null;
26
- };
19
+ findHoliday = (date, holidays) => {
20
+ if (date && holidays && holidays.length > 0) {
21
+ const day = date.date();
22
+ const month = date.month() + 1;
23
+ return holidays.find(
24
+ (item) => item.day === day && item.month === month,
25
+ );
26
+ }
27
+ return null;
28
+ };
27
29
 
28
- checkHoliday = (date, holidays) => {
29
- const holiday = this.findHoliday(date, holidays);
30
- return {
31
- solarHoliday: !!(holiday && !holiday.lunar),
32
- lunarHoliday: !!(holiday && holiday.lunar),
30
+ checkHoliday = (date, holidays) => {
31
+ const holiday = this.findHoliday(date, holidays);
32
+ return {
33
+ solarHoliday: !!(holiday && !holiday.lunar),
34
+ lunarHoliday: !!(holiday && holiday.lunar),
35
+ };
33
36
  };
34
- };
35
37
 
36
- statusCheck = props => {
37
- const {
38
- startDate,
39
- endDate,
40
- date = null,
41
- minDate,
42
- maxDate,
43
- empty,
44
- index,
45
- isShowLunar,
46
- tabSelected,
47
- isDoubleDateMode,
48
- lunarDate,
49
- isSolarHoliday,
50
- isLunarHoliday,
51
- price,
52
- } = props || this.props;
53
- this.isValid =
54
- date &&
55
- (date >= minDate || date.isSame(minDate, 'day')) &&
56
- (date <= maxDate || date.isSame(maxDate, 'day'));
57
- this.isMid =
58
- (isDoubleDateMode && date > startDate && date < endDate) ||
59
- (!date && empty >= startDate && empty <= endDate);
60
- this.isStart = date && date.isSame(startDate, 'd');
61
- this.isStartPart = this.isStart && endDate;
62
- this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
63
- this.isFocus = this.isMid || this.isStart || this.isEnd;
64
- this.isWeekEnd = index === 6 || index === 5;
65
- this.showLunar = isShowLunar;
66
- this.lunarDate = lunarDate;
67
- this.isDoubleDateMode = isDoubleDateMode;
68
- this.isLunarHoliday = isLunarHoliday;
69
- this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
70
- this.isSolarHoliday = isSolarHoliday;
71
- this.isInScope = isDoubleDateMode
72
- ? tabSelected === 0 ||
73
- (tabSelected === 1 &&
74
- startDate &&
75
- date &&
76
- date.isSameOrAfter(startDate, 'day'))
77
- : true;
78
- return this.isFocus || this.diffPrice;
79
- };
38
+ statusCheck = (props) => {
39
+ const {
40
+ startDate,
41
+ endDate,
42
+ date = null,
43
+ minDate,
44
+ maxDate,
45
+ empty,
46
+ index,
47
+ isShowLunar,
48
+ tabSelected,
49
+ isDoubleDateMode,
50
+ lunarDate,
51
+ isSolarHoliday,
52
+ isLunarHoliday,
53
+ price,
54
+ } = props || this.props;
55
+ this.isValid =
56
+ date &&
57
+ (date >= minDate || date.isSame(minDate, 'day')) &&
58
+ (date <= maxDate || date.isSame(maxDate, 'day'));
59
+ this.isMid =
60
+ (isDoubleDateMode && date > startDate && date < endDate) ||
61
+ (!date && empty >= startDate && empty <= endDate);
62
+ this.isStart = date && date.isSame(startDate, 'd');
63
+ this.isStartPart = this.isStart && endDate;
64
+ this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
65
+ this.isFocus = this.isMid || this.isStart || this.isEnd;
66
+ this.isWeekEnd = index === 6 || index === 5;
67
+ this.showLunar = isShowLunar;
68
+ this.lunarDate = lunarDate;
69
+ this.isDoubleDateMode = isDoubleDateMode;
70
+ this.isLunarHoliday = isLunarHoliday;
71
+ this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
72
+ this.isSolarHoliday = isSolarHoliday;
73
+ this.isInScope = isDoubleDateMode
74
+ ? tabSelected === 0 ||
75
+ (tabSelected === 1 &&
76
+ startDate &&
77
+ date &&
78
+ date.isSameOrAfter(startDate, 'day'))
79
+ : true;
80
+ return this.isFocus || this.diffPrice;
81
+ };
80
82
 
81
- shouldComponentUpdate(nextProps) {
82
- const {
83
- isDoubleDateMode,
84
- isShowLunar,
85
- tabSelected,
86
- isSolarHoliday,
87
- isLunarHoliday,
88
- price,
89
- isBestPrice,
90
- startDate,
91
- endDate,
92
- } = this.props;
93
- const prevStatus = this.isFocus;
94
- const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
95
- const lunarChange = isShowLunar !== nextProps.isShowLunar;
96
- const nextStatus = this.statusCheck(nextProps);
97
- const tabChange = tabSelected !== nextProps.tabSelected;
98
- const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
99
- const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
100
- const diffPrice =
101
- price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
102
- const startDateChange =
103
- startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
104
- const endDateChange =
105
- endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
106
- return !!(
107
- prevStatus !== nextStatus ||
108
- selectionModeChange ||
109
- lunarChange ||
110
- tabChange ||
111
- solarHoliday ||
112
- lunarHoliday ||
113
- diffPrice ||
114
- startDateChange ||
115
- endDateChange
116
- );
117
- }
83
+ shouldComponentUpdate(nextProps) {
84
+ const {
85
+ isDoubleDateMode,
86
+ isShowLunar,
87
+ tabSelected,
88
+ isSolarHoliday,
89
+ isLunarHoliday,
90
+ price,
91
+ isBestPrice,
92
+ startDate,
93
+ endDate,
94
+ } = this.props;
95
+ const prevStatus = this.isFocus;
96
+ const selectionModeChange =
97
+ isDoubleDateMode !== nextProps.isDoubleDateMode;
98
+ const lunarChange = isShowLunar !== nextProps.isShowLunar;
99
+ const nextStatus = this.statusCheck(nextProps);
100
+ const tabChange = tabSelected !== nextProps.tabSelected;
101
+ const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
102
+ const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
103
+ const diffPrice =
104
+ price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
105
+ const startDateChange =
106
+ startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
107
+ const endDateChange =
108
+ endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
109
+ return !!(
110
+ prevStatus !== nextStatus ||
111
+ selectionModeChange ||
112
+ lunarChange ||
113
+ tabChange ||
114
+ solarHoliday ||
115
+ lunarHoliday ||
116
+ diffPrice ||
117
+ startDateChange ||
118
+ endDateChange
119
+ );
120
+ }
118
121
 
119
- render() {
120
- const {
121
- date,
122
- empty,
123
- isDoubleDateMode,
124
- price,
125
- isBestPrice,
126
- isShowPrice,
127
- labelFrom,
128
- labelTo,
129
- isHideLabel,
130
- } = this.props;
131
- const text = date ? date.date() : '';
132
- return (
133
- <View style={style.dayContainer}>
134
- <View
135
- style={[
136
- this.isMid && !empty && style.mid,
137
- this.isStartPart && style.dayStartContainer,
138
- this.isEnd && style.dayEndContainer,
139
- ]}>
140
- {this.isValid && this.isInScope ? (
141
- <TouchableHighlight
142
- style={[style.day, (this.isStart || this.isEnd) && style.focused]}
143
- underlayColor="rgba(255, 255, 255, 0.35)"
144
- onPress={this.chooseDay}>
145
- <>
146
- <Text
147
- style={[
148
- style.dayText,
149
- this.isWeekEnd && style.weekendDay,
150
- this.isSolarHoliday && style.weekendDay,
151
- (this.isStart || this.isEnd) && style.focusedText,
152
- ]}>
153
- {text}
154
- </Text>
155
- {this.lunarDate && this.showLunar && (
156
- <Text
122
+ render() {
123
+ const {
124
+ date,
125
+ empty,
126
+ isDoubleDateMode,
127
+ price,
128
+ isBestPrice,
129
+ isShowPrice,
130
+ labelFrom,
131
+ labelTo,
132
+ isHideLabel,
133
+ } = this.props;
134
+ const text = date ? date.date() : '';
135
+ return (
136
+ <View style={style.dayContainer}>
137
+ <View
157
138
  style={[
158
- style.lunarDayText,
159
- (this.isLunarHoliday || this.isLunarDayStart) &&
160
- style.weekendDay,
161
- (this.isStart || this.isEnd) && style.focusedText,
139
+ this.isMid && !empty && style.mid,
140
+ this.isStartPart && style.dayStartContainer,
141
+ this.isEnd && style.dayEndContainer,
162
142
  ]}>
163
- {this.lunarDate.lunarDay === 1
164
- ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
165
- : this.lunarDate.lunarDay}
166
- </Text>
143
+ {this.isValid && this.isInScope ? (
144
+ <TouchableHighlight
145
+ style={[
146
+ style.day,
147
+ (this.isStart || this.isEnd) && style.focused,
148
+ ]}
149
+ underlayColor="rgba(255, 255, 255, 0.35)"
150
+ onPress={this.chooseDay}>
151
+ <>
152
+ {this.lunarDate && this.showLunar && (
153
+ <Text
154
+ style={[
155
+ style.lunarDayText,
156
+ (this.isLunarHoliday ||
157
+ this.isLunarDayStart) &&
158
+ style.weekendDay,
159
+ (this.isStart || this.isEnd) &&
160
+ style.focusedText,
161
+ ]}>
162
+ {this.lunarDate.lunarDay === 1
163
+ ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
164
+ : this.lunarDate.lunarDay}
165
+ </Text>
166
+ )}
167
+ <Text
168
+ style={[
169
+ style.dayText,
170
+ this.isWeekEnd && style.weekendDay,
171
+ this.isSolarHoliday && style.weekendDay,
172
+ (this.isStart || this.isEnd) &&
173
+ style.focusedText,
174
+ ]}>
175
+ {text}
176
+ </Text>
177
+ </>
178
+ </TouchableHighlight>
179
+ ) : (
180
+ <View style={[style.day]}>
181
+ {this.lunarDate && this.showLunar && text ? (
182
+ <Text
183
+ style={[
184
+ style.lunarDayText,
185
+ style.dayTextDisabled,
186
+ ]}>
187
+ {this.lunarDate.lunarDay === 1
188
+ ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
189
+ : this.lunarDate.lunarDay}
190
+ </Text>
191
+ ) : (
192
+ <View />
193
+ )}
194
+ <Text
195
+ style={[style.dayText, style.dayTextDisabled]}>
196
+ {text}
197
+ </Text>
198
+ </View>
199
+ )}
200
+ </View>
201
+
202
+ {this.isValid && this.isInScope && !!price && (
203
+ <Text
204
+ style={[
205
+ style.price,
206
+ isBestPrice && { color: Colors.pink_05_b },
207
+ ]}>
208
+ {price}
209
+ </Text>
167
210
  )}
168
- </>
169
- </TouchableHighlight>
170
- ) : (
171
- <View style={[style.day]}>
172
- <Text style={[style.dayText, style.dayTextDisabled]}>{text}</Text>
173
- {this.lunarDate && this.showLunar && text ? (
174
- <Text style={[style.lunarDayText, style.dayTextDisabled]}>
175
- {this.lunarDate.lunarDay === 1
176
- ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
177
- : this.lunarDate.lunarDay}
178
- </Text>
179
- ) : (
180
- <View />
181
- )}
182
211
  </View>
183
- )}
184
- </View>
185
-
186
- {isDoubleDateMode && this.isStart && !isHideLabel && (
187
- <View style={style.txtGo}>
188
- <Text style={{fontSize: 8, color: 'white'}}>
189
- {labelFrom || SwitchLanguage.departing}
190
- </Text>
191
- </View>
192
- )}
193
- {isDoubleDateMode && this.isEnd && !isHideLabel && (
194
- <View style={style.txtBack}>
195
- <Text style={{fontSize: 8, color: 'white'}}>
196
- {labelTo || SwitchLanguage.returning}
197
- </Text>
198
- </View>
199
- )}
200
- {this.isValid && this.isInScope && !!price && (
201
- <Text style={[style.price, isBestPrice && {color: Colors.pink_05_b}]}>
202
- {price}
203
- </Text>
204
- )}
205
- </View>
206
- );
207
- }
212
+ );
213
+ }
208
214
  }
209
215
 
210
216
  export default Day;