@momo-kits/calendar 0.0.49-beta.16 → 0.0.49-beta.17

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.
package/package.json CHANGED
@@ -1,19 +1,18 @@
1
1
  {
2
- "name": "@momo-kits/calendar",
3
- "version": "0.0.49-beta.16",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {
7
- "@momo-kits/date-picker": "latest",
8
- "moment": "^2.24.0",
9
- "@momo-platform/versions": "4.0.2"
10
- },
11
- "peerDependencies": {
12
- "react": "16.9.0",
13
- "react-native": ">=0.55",
14
- "prop-types": "^15.7.2",
15
- "@momo-kits/core": ">=0.0.5-beta"
16
- },
17
- "devDependencies": {},
18
- "license": "MoMo"
19
- }
2
+ "name": "@momo-kits/calendar",
3
+ "version": "0.0.49-beta.17",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {
7
+ "@momo-kits/date-picker": "latest",
8
+ "moment": "^2.24.0"
9
+ },
10
+ "peerDependencies": {
11
+ "react": "16.9.0",
12
+ "react-native": ">=0.55",
13
+ "prop-types": "^15.7.2",
14
+ "@momo-kits/core": ">=0.0.5-beta"
15
+ },
16
+ "devDependencies": {},
17
+ "license": "MoMo"
18
+ }
package/src/Day/index.js CHANGED
@@ -1,210 +1,230 @@
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
+ <Text
182
+ style={[style.dayText, style.dayTextDisabled]}>
183
+ {text}
184
+ </Text>
185
+ {this.lunarDate && this.showLunar && text ? (
186
+ <Text
187
+ style={[
188
+ style.lunarDayText,
189
+ style.dayTextDisabled,
190
+ ]}>
191
+ {this.lunarDate.lunarDay === 1
192
+ ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
193
+ : this.lunarDate.lunarDay}
194
+ </Text>
195
+ ) : (
196
+ <View />
197
+ )}
198
+ </View>
199
+ )}
200
+ </View>
201
+
202
+ {/* {isDoubleDateMode && this.isStart && !isHideLabel && (
203
+ <View style={style.txtGo}>
204
+ <Text style={{ fontSize: 8, color: 'white' }}>
205
+ {labelFrom || SwitchLanguage.departing}
206
+ </Text>
207
+ </View>
208
+ )}
209
+ {isDoubleDateMode && this.isEnd && !isHideLabel && (
210
+ <View style={style.txtBack}>
211
+ <Text style={{ fontSize: 8, color: 'white' }}>
212
+ {labelTo || SwitchLanguage.returning}
213
+ </Text>
214
+ </View>
215
+ )} */}
216
+ {this.isValid && this.isInScope && !!price && (
217
+ <Text
218
+ style={[
219
+ style.price,
220
+ isBestPrice && { color: Colors.pink_05_b },
221
+ ]}>
222
+ {price}
223
+ </Text>
167
224
  )}
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
225
  </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
- }
226
+ );
227
+ }
208
228
  }
209
229
 
210
230
  export default Day;
package/src/Day/style.js CHANGED
@@ -3,7 +3,7 @@ import { Colors } from '@momo-kits/core';
3
3
 
4
4
  const dayWidth = (Dimensions.get('window').width - 38) / 7;
5
5
  const SCREEN_WIDTH = Dimensions.get('window').width;
6
- const SCREEN_DPI_WIDTH = (SCREEN_WIDTH * Dimensions.get('window').scale);
6
+ const SCREEN_DPI_WIDTH = SCREEN_WIDTH * Dimensions.get('window').scale;
7
7
  const IPHONE_4_5_WIDTH = 640;
8
8
  const dayTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 13 : 15;
9
9
  const lunarTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
@@ -11,7 +11,8 @@ const priceTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
11
11
  const lineHeightDayText = 1.3 * dayTextSize;
12
12
  const lineHeightLunarText = 1.3 * lunarTextSize;
13
13
  const lineHeightPriceText = 1.3 * priceTextSize;
14
- const containerDayHeight = lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
14
+ const containerDayHeight =
15
+ lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
15
16
  const heightDefault = lineHeightDayText + lineHeightLunarText;
16
17
  export default {
17
18
  dayContainer: {
@@ -27,35 +28,36 @@ export default {
27
28
  justifyContent: 'center',
28
29
  alignItems: 'center',
29
30
  borderRadius: 4,
30
- height: heightDefault + 5
31
+ height: heightDefault + 5,
31
32
  },
32
33
  dayText: {
33
34
  fontSize: dayTextSize,
34
35
  textAlign: 'center',
35
36
  fontWeight: 'bold',
36
- color: '#222222'
37
+ color: '#222222',
38
+ marginTop: -4,
37
39
  },
38
40
  lunarDayText: {
39
41
  width: dayWidth,
40
42
  textAlign: 'right',
41
43
  fontSize: SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10,
42
44
  paddingRight: 5,
43
- color: '#222222'
45
+ color: '#222222',
44
46
  },
45
47
  todayText: {
46
- color: 'blue'
48
+ color: 'blue',
47
49
  },
48
50
  weekendDay: {
49
- color: '#e82956'
51
+ color: '#e82956',
50
52
  },
51
53
  dayTextDisabled: {
52
- opacity: 0.2
54
+ opacity: 0.2,
53
55
  },
54
56
  focused: {
55
- backgroundColor: Colors.pink_05_b
57
+ backgroundColor: Colors.pink_05_b,
56
58
  },
57
59
  focusedText: {
58
- color: 'white'
60
+ color: 'white',
59
61
  },
60
62
  dayStartContainer: {
61
63
  borderTopLeftRadius: 4,
@@ -80,7 +82,7 @@ export default {
80
82
  height: 20,
81
83
  borderRadius: 10,
82
84
  justifyContent: 'center',
83
- alignItems: 'center'
85
+ alignItems: 'center',
84
86
  },
85
87
  returnLabel: {
86
88
  position: 'absolute',
@@ -91,7 +93,7 @@ export default {
91
93
  justifyContent: 'center',
92
94
  alignItems: 'center',
93
95
  top: 0,
94
- right: 0
96
+ right: 0,
95
97
  },
96
98
  containerDayHeight,
97
99
  txtBack: {
@@ -105,7 +107,7 @@ export default {
105
107
  width: 15,
106
108
  height: 15,
107
109
  justifyContent: 'center',
108
- alignItems: 'center'
110
+ alignItems: 'center',
109
111
  },
110
112
  txtGo: {
111
113
  position: 'absolute',
@@ -118,12 +120,12 @@ export default {
118
120
  width: 15,
119
121
  height: 15,
120
122
  justifyContent: 'center',
121
- alignItems: 'center'
123
+ alignItems: 'center',
122
124
  },
123
125
  price: {
124
126
  fontSize: priceTextSize,
125
127
  lineHeight: lineHeightPriceText,
126
- color: '#8d919d'
128
+ color: '#8d919d',
127
129
  },
128
- lineHeightPriceText
130
+ lineHeightPriceText,
129
131
  };