@momo-kits/calendar 0.0.55-beta → 0.0.55-beta.2

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 (10) hide show
  1. package/package.json +17 -16
  2. package/publish.sh +2 -2
  3. package/src/Calendar.js +214 -90
  4. package/src/CalendarPro.js +158 -88
  5. package/src/Day/index.js +119 -96
  6. package/src/HeaderControl.js +50 -45
  7. package/src/MonthList.js +81 -53
  8. package/src/TabHeader.js +47 -34
  9. package/src/calendarPicker/Day.js +33 -32
  10. package/src/calendarPicker/WeekDaysLabels.js +6 -7
package/src/Day/index.js CHANGED
@@ -1,11 +1,7 @@
1
1
  import React, { Component } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- import {
5
- View,
6
- TouchableHighlight,
7
- Text
8
- } from 'react-native';
4
+ import { View, TouchableHighlight, Text } from 'react-native';
9
5
  import { Colors, SwitchLanguage } from '@momo-kits/core';
10
6
  import style from './style';
11
7
 
@@ -24,7 +20,9 @@ class Day extends Component {
24
20
  if (date && holidays && holidays.length > 0) {
25
21
  const day = date.date();
26
22
  const month = date.month() + 1;
27
- return holidays.find((item) => item.day === day && item.month === month);
23
+ return holidays.find(
24
+ (item) => item.day === day && item.month === month,
25
+ );
28
26
  }
29
27
  return null;
30
28
  };
@@ -33,7 +31,7 @@ class Day extends Component {
33
31
  const holiday = this.findHoliday(date, holidays);
34
32
  return {
35
33
  solarHoliday: !!(holiday && !holiday.lunar),
36
- lunarHoliday: !!(holiday && holiday.lunar)
34
+ lunarHoliday: !!(holiday && holiday.lunar),
37
35
  };
38
36
  };
39
37
 
@@ -52,11 +50,15 @@ class Day extends Component {
52
50
  lunarDate,
53
51
  isSolarHoliday,
54
52
  isLunarHoliday,
55
- price
53
+ price,
56
54
  } = props || this.props;
57
- this.isValid = date && (date >= minDate || date.isSame(minDate, 'day')) && (date <= maxDate || date.isSame(maxDate, 'day'));
58
- this.isMid = isDoubleDateMode && date > startDate && date < endDate
59
- || (!date && empty >= startDate && empty <= endDate);
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);
60
62
  this.isStart = date && date.isSame(startDate, 'd');
61
63
  this.isStartPart = this.isStart && endDate;
62
64
  this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
@@ -68,123 +70,144 @@ class Day extends Component {
68
70
  this.isLunarHoliday = isLunarHoliday;
69
71
  this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
70
72
  this.isSolarHoliday = isSolarHoliday;
71
- this.isInScope = isDoubleDateMode ? (tabSelected === 0 || (tabSelected === 1 && startDate && date && date.isSameOrAfter(startDate, 'day'))) : true;
73
+ this.isInScope = isDoubleDateMode
74
+ ? tabSelected === 0 ||
75
+ (tabSelected === 1 &&
76
+ startDate &&
77
+ date &&
78
+ date.isSameOrAfter(startDate, 'day'))
79
+ : true;
72
80
  return this.isFocus || this.diffPrice;
73
81
  };
74
82
 
75
83
  shouldComponentUpdate(nextProps) {
76
84
  const {
77
- isDoubleDateMode, isShowLunar, tabSelected, isSolarHoliday,
85
+ isDoubleDateMode,
86
+ isShowLunar,
87
+ tabSelected,
88
+ isSolarHoliday,
78
89
  isLunarHoliday,
79
90
  price,
80
91
  isBestPrice,
81
92
  startDate,
82
- endDate
93
+ endDate,
83
94
  } = this.props;
84
95
  const prevStatus = this.isFocus;
85
- const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
96
+ const selectionModeChange =
97
+ isDoubleDateMode !== nextProps.isDoubleDateMode;
86
98
  const lunarChange = isShowLunar !== nextProps.isShowLunar;
87
99
  const nextStatus = this.statusCheck(nextProps);
88
100
  const tabChange = tabSelected !== nextProps.tabSelected;
89
101
  const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
90
102
  const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
91
- const diffPrice = price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
92
- const startDateChange = startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
93
- const endDateChange = endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
94
- return !!(prevStatus !== nextStatus || selectionModeChange || lunarChange || tabChange || solarHoliday || lunarHoliday || diffPrice || startDateChange || endDateChange);
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
+ );
95
120
  }
96
121
 
97
122
  render() {
98
123
  const {
99
- date, empty, isDoubleDateMode, price, isBestPrice, isShowPrice, labelFrom, labelTo, isHideLabel
124
+ date,
125
+ empty,
126
+ isDoubleDateMode,
127
+ price,
128
+ isBestPrice,
129
+ isShowPrice,
130
+ labelFrom,
131
+ labelTo,
132
+ isHideLabel,
100
133
  } = this.props;
101
134
  const text = date ? date.date() : '';
102
135
  return (
103
136
  <View style={style.dayContainer}>
104
- <View style={[
105
- this.isMid && !empty && style.mid,
106
- this.isStartPart && style.dayStartContainer,
107
- this.isEnd && style.dayEndContainer
108
-
109
- ]}
110
- >
111
- {this.isValid && this.isInScope
112
- ? (
113
- <TouchableHighlight
114
- style={[
115
- style.day,
116
- (this.isStart || this.isEnd) && style.focused
117
- ]}
118
- underlayColor="rgba(255, 255, 255, 0.35)"
119
- onPress={this.chooseDay}
120
- >
121
- <>
122
- <Text style={[
137
+ <View
138
+ style={[
139
+ this.isMid && !empty && style.mid,
140
+ this.isStartPart && style.dayStartContainer,
141
+ this.isEnd && style.dayEndContainer,
142
+ ]}>
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={[
123
169
  style.dayText,
124
170
  this.isWeekEnd && style.weekendDay,
125
171
  this.isSolarHoliday && style.weekendDay,
126
- (this.isStart || this.isEnd) && style.focusedText,
127
- ]}
128
- >
129
- {text}
130
- </Text>
131
- {
132
- this.lunarDate && this.showLunar && (
133
- <Text style={[
134
- style.lunarDayText,
135
- (this.isLunarHoliday || this.isLunarDayStart) && style.weekendDay,
136
- (this.isStart || this.isEnd) && style.focusedText,
137
- ]}
138
- >
139
- {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
140
- </Text>
141
- )
142
- }
143
- </>
144
- </TouchableHighlight>
145
- )
146
- : (
147
- <View style={[style.day]}>
148
- <Text style={[
149
- style.dayText,
150
- style.dayTextDisabled,
151
- ]}
152
- >
172
+ (this.isStart || this.isEnd) &&
173
+ style.focusedText,
174
+ ]}>
153
175
  {text}
154
176
  </Text>
155
- {
156
- this.lunarDate && this.showLunar && text ? (
157
- <Text style={[
158
- style.lunarDayText,
159
- style.dayTextDisabled,
160
- ]}
161
- >
162
- {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
163
- </Text>
164
- ) : <View />
165
- }
166
- </View>
167
- )}
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
+ )}
168
200
  </View>
169
201
 
170
- {(isDoubleDateMode && this.isStart && !isHideLabel) && (
171
- <View style={style.txtGo}>
172
- <Text style={{ fontSize: 8, color: 'white' }}>
173
- {labelFrom || SwitchLanguage.departing}
174
- </Text>
175
- </View>
176
- )}
177
- {(isDoubleDateMode && this.isEnd && !isHideLabel) && (
178
- <View style={style.txtBack}>
179
- <Text style={{ fontSize: 8, color: 'white' }}>
180
- {labelTo || SwitchLanguage.returning}
181
- </Text>
182
- </View>
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>
183
210
  )}
184
- {this.isValid
185
- && this.isInScope
186
- && !!(price)
187
- && <Text style={[style.price, isBestPrice && { color: Colors.pink_05_b }]}>{price}</Text>}
188
211
  </View>
189
212
  );
190
213
  }
package/src/HeaderControl.js CHANGED
@@ -1,50 +1,54 @@
1
1
  import React, { useState, forwardRef, useImperativeHandle } from 'react';
2
- import {
3
- View, TouchableOpacity, StyleSheet
4
- } from 'react-native';
2
+ import { View, TouchableOpacity, StyleSheet } from 'react-native';
5
3
  import moment from 'moment';
6
- import {
7
- Text, Icon, Colors
8
- } from '@momo-kits/core';
4
+ import { Text, Icon, Colors, Spacing } from '@momo-kits/core';
9
5
  import Util from './Util';
10
6
 
11
- const HeaderControl = forwardRef(({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
12
- const [info, setInfo] = useState({
13
- date: moment(selectedDate || new Date())
14
- });
7
+ const HeaderControl = forwardRef(
8
+ ({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
9
+ const [info, setInfo] = useState({
10
+ date: moment(selectedDate || new Date()),
11
+ });
15
12
 
16
- useImperativeHandle(ref, () => ({
17
- onUpdateInfo
18
- }));
13
+ useImperativeHandle(ref, () => ({
14
+ onUpdateInfo,
15
+ }));
19
16
 
20
- const onUpdateInfo = (date) => {
21
- setInfo(date);
22
- };
17
+ const onUpdateInfo = (date) => {
18
+ setInfo(date);
19
+ };
23
20
 
24
- if (info && info.date) {
25
- const headerFormat = `${Util.mapMonth(info.date.month() + 1)}/${info.date.year()}`;
26
- return (
27
- <View style={styles.container}>
28
- <TouchableOpacity
29
- style={styles.btnLeft}
30
- onPress={onPressBackArrow}
31
- >
32
- <Icon name="24_arrow_chevron_left_small" tintColor={Colors.black_17} style={styles.icon} />
33
- </TouchableOpacity>
34
- <Text.H4 style={styles.txtHeader}>
35
- {headerFormat}
36
- </Text.H4>
37
- <TouchableOpacity
38
- style={styles.btnRight}
39
- onPress={onPressNextArrow}
40
- >
41
- <Icon name="24_arrow_chevron_right_small" tintColor={Colors.black_17} style={styles.icon} />
42
- </TouchableOpacity>
43
- </View>
44
- );
45
- }
46
- return <View />;
47
- });
21
+ if (info && info.date) {
22
+ const headerFormat = `${Util.mapMonth(
23
+ info.date.month() + 1,
24
+ )}/${info.date.year()}`;
25
+ return (
26
+ <View style={styles.container}>
27
+ <TouchableOpacity
28
+ style={styles.btnLeft}
29
+ onPress={onPressBackArrow}>
30
+ <Icon
31
+ name="24_arrow_chevron_left_small"
32
+ tintColor={Colors.black_17}
33
+ style={styles.icon}
34
+ />
35
+ </TouchableOpacity>
36
+ <Text.H4 style={styles.txtHeader}>{headerFormat}</Text.H4>
37
+ <TouchableOpacity
38
+ style={styles.btnRight}
39
+ onPress={onPressNextArrow}>
40
+ <Icon
41
+ name="24_arrow_chevron_right_small"
42
+ tintColor={Colors.black_17}
43
+ style={styles.icon}
44
+ />
45
+ </TouchableOpacity>
46
+ </View>
47
+ );
48
+ }
49
+ return <View />;
50
+ },
51
+ );
48
52
 
49
53
  export default HeaderControl;
50
54
  const styles = StyleSheet.create({
@@ -54,26 +58,27 @@ const styles = StyleSheet.create({
54
58
  lineHeight: 19,
55
59
  fontWeight: 'bold',
56
60
  textAlign: 'center',
57
- color: Colors.black_17
61
+ color: Colors.black_17,
58
62
  },
59
63
  btnRight: {
60
64
  width: 36,
61
65
  height: 36,
62
66
  justifyContent: 'center',
63
- alignItems: 'center'
67
+ alignItems: 'center',
64
68
  },
65
69
  btnLeft: {
66
70
  width: 36,
67
71
  height: 36,
68
72
  justifyContent: 'center',
69
- alignItems: 'center'
73
+ alignItems: 'center',
70
74
  },
71
75
  container: {
72
76
  height: 36,
73
77
  flexDirection: 'row',
74
78
  justifyContent: 'space-between',
75
- backgroundColor: '#edf6fe',
79
+ backgroundColor: Colors.white,
76
80
  alignItems: 'center',
77
- borderRadius: 4
81
+ borderRadius: 4,
82
+ marginBottom: Spacing.S,
78
83
  },
79
84
  });
package/src/MonthList.js CHANGED
@@ -1,17 +1,15 @@
1
1
  /* eslint-disable react/no-did-update-set-state */
2
2
  import React, { Component } from 'react';
3
- import {
4
- FlatList,
5
- Dimensions,
6
- Platform
7
- } from 'react-native';
3
+ import { FlatList, Dimensions, Platform } from 'react-native';
8
4
  import moment from 'moment';
9
5
  import Month from './Month';
10
6
  import style from './Day/style';
11
- import { convertSolar2Lunar } from './LunarService';
7
+ import LunarDateConverter from './LunarDateConverter';
12
8
 
13
9
  const ITEM_WIDTH = Dimensions.get('window').width - 24;
14
10
  const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
11
+
12
+ const converter = new LunarDateConverter();
15
13
  export default class MonthList extends Component {
16
14
  constructor(props) {
17
15
  super(props);
@@ -21,7 +19,10 @@ export default class MonthList extends Component {
21
19
  // };
22
20
  this.currentDate = moment();
23
21
  this.data = this.getMonthList();
24
- this.currentScrollIndex = this.getIndexOfMonth(moment(props.selectedDate), this.data);
22
+ this.currentScrollIndex = this.getIndexOfMonth(
23
+ moment(props.selectedDate),
24
+ this.data,
25
+ );
25
26
  this.list = React.createRef();
26
27
  this.heightStyle = {};
27
28
  this.holidays = props.holidays;
@@ -55,33 +56,39 @@ export default class MonthList extends Component {
55
56
 
56
57
  checkRange = (date, start, end) => {
57
58
  if (!date || !start) return false;
58
- if (!end) return date.year() === start.year() && date.month() === start.month();
59
- if (date.year() < start.year() || (date.year() === start.year() && date.month() < start.month())) return false;
60
- return !(date.year() > end.year() || (date.year() === end.year() && date.month() > end.month()));
59
+ if (!end)
60
+ return (
61
+ date.year() === start.year() && date.month() === start.month()
62
+ );
63
+ if (
64
+ date.year() < start.year() ||
65
+ (date.year() === start.year() && date.month() < start.month())
66
+ )
67
+ return false;
68
+ return !(
69
+ date.year() > end.year() ||
70
+ (date.year() === end.year() && date.month() > end.month())
71
+ );
61
72
  };
62
73
 
63
74
  shouldUpdate = (month, props) => {
64
75
  if (!props) return false;
65
- const {
66
- startDate,
67
- endDate
68
- } = props;
76
+ const { startDate, endDate } = props;
69
77
  const { startDate: curStartDate, endDate: curEndDate } = this.props;
70
- const {
71
- date
72
- } = month;
78
+ const { date } = month;
73
79
  const next = this.checkRange(date, startDate, endDate);
74
80
  const prev = this.checkRange(date, curStartDate, curEndDate);
75
81
  return !!(prev || next);
76
82
  };
77
83
 
78
84
  convertLunarToSolar(date) {
79
- return date && convertSolar2Lunar ? convertSolar2Lunar(
80
- date.date(),
81
- date.month() + 1,
82
- date.year(),
83
- 7
84
- ) : {};
85
+ return date
86
+ ? converter.SolarToLunar({
87
+ solarDay: date.date(),
88
+ solarMonth: date.month() + 1,
89
+ solarYear: date.year(),
90
+ })
91
+ : {};
85
92
  }
86
93
 
87
94
  findHoliday = (date) => {
@@ -89,7 +96,9 @@ export default class MonthList extends Component {
89
96
  if (date && holidays && holidays.length > 0) {
90
97
  const day = date.date();
91
98
  const month = date.month() + 1;
92
- return holidays.find((item) => item.day === day && item.month === month);
99
+ return holidays.find(
100
+ (item) => item.day === day && item.month === month,
101
+ );
93
102
  }
94
103
  return null;
95
104
  };
@@ -98,7 +107,7 @@ export default class MonthList extends Component {
98
107
  const holiday = this.findHoliday(date, holidays);
99
108
  return {
100
109
  isSolarHoliday: !!(holiday && !holiday.lunar),
101
- isLunarHoliday: !!(holiday && holiday.lunar)
110
+ isLunarHoliday: !!(holiday && holiday.lunar),
102
111
  };
103
112
  };
104
113
 
@@ -112,7 +121,7 @@ export default class MonthList extends Component {
112
121
  dayList = new Array(weekday - 1).fill({
113
122
  empty: moment(date).subtract(1, 'h'),
114
123
  lunarDate: this.convertLunarToSolar(date),
115
- ...this.checkHoliday(date)
124
+ ...this.checkHoliday(date),
116
125
  });
117
126
  }
118
127
  while (date.month() === month) {
@@ -120,22 +129,26 @@ export default class MonthList extends Component {
120
129
  dayList.push({
121
130
  date: cloned,
122
131
  lunarDate: this.convertLunarToSolar(cloned),
123
- ...this.checkHoliday(date)
132
+ ...this.checkHoliday(date),
124
133
  });
125
134
  date.add(1, 'days');
126
135
  }
127
136
  date.subtract(1, 'days');
128
137
  weekday = date.isoWeekday();
129
138
  if (weekday === 1) {
130
- return dayList.concat(new Array(6).fill({
131
- empty: moment(date).hour(1),
132
- lunarDate: this.convertLunarToSolar(date)
133
- }));
139
+ return dayList.concat(
140
+ new Array(6).fill({
141
+ empty: moment(date).hour(1),
142
+ lunarDate: this.convertLunarToSolar(date),
143
+ }),
144
+ );
134
145
  }
135
- return dayList.concat(new Array(Math.abs(7 - weekday)).fill({
136
- empty: moment(date).hour(1),
137
- lunarDate: this.convertLunarToSolar(date)
138
- }));
146
+ return dayList.concat(
147
+ new Array(Math.abs(7 - weekday)).fill({
148
+ empty: moment(date).hour(1),
149
+ lunarDate: this.convertLunarToSolar(date),
150
+ }),
151
+ );
139
152
  };
140
153
 
141
154
  getMonthList = (props) => {
@@ -143,14 +156,15 @@ export default class MonthList extends Component {
143
156
  const maxDate = moment((props || this.props).maxDate);
144
157
  const monthList = [];
145
158
  if (!maxDate || !minDate) return monthList;
146
- while (maxDate > minDate || (
147
- maxDate.year() === minDate.year()
148
- && maxDate.month() === minDate.month()
149
- )) {
159
+ while (
160
+ maxDate > minDate ||
161
+ (maxDate.year() === minDate.year() &&
162
+ maxDate.month() === minDate.month())
163
+ ) {
150
164
  const d = moment(minDate);
151
165
  const month = {
152
166
  date: d,
153
- dateList: this.getDayList(d)
167
+ dateList: this.getDayList(d),
154
168
  };
155
169
  month.shouldUpdate = this.shouldUpdate(month, props);
156
170
  monthList.push(month);
@@ -159,7 +173,8 @@ export default class MonthList extends Component {
159
173
  return monthList;
160
174
  };
161
175
 
162
- getIndexOfMonth = (month, data) => data.findIndex((item) => item.date.isSame(month, 'month'));
176
+ getIndexOfMonth = (month, data) =>
177
+ data.findIndex((item) => item.date.isSame(month, 'month'));
163
178
 
164
179
  // componentDidMount() {
165
180
  // const {
@@ -191,16 +206,27 @@ export default class MonthList extends Component {
191
206
  if (onScrollCalendar && item && this.currentKey !== key) {
192
207
  this.currentKey = key;
193
208
  try {
194
- this.heightStyle = this.data && this.data[index] && this.data[index].dateList
195
- ? {
196
- height: (style.containerDayHeight * this.data[index].dateList.length / 7) + 10
197
- }
198
- : {};
209
+ this.heightStyle =
210
+ this.data &&
211
+ this.data[index] &&
212
+ this.data[index].dateList
213
+ ? {
214
+ height:
215
+ (style.containerDayHeight *
216
+ this.data[index].dateList.length) /
217
+ 7 +
218
+ 10,
219
+ }
220
+ : {};
199
221
  } catch (e) {
200
222
  this.heightStyle = {};
201
223
  }
202
224
  if (onScrollCalendar) {
203
- onScrollCalendar({ date: item.date, key, currentIndex: index });
225
+ onScrollCalendar({
226
+ date: item.date,
227
+ key,
228
+ currentIndex: index,
229
+ });
204
230
  }
205
231
  }
206
232
  }
@@ -213,14 +239,16 @@ export default class MonthList extends Component {
213
239
  if (this.list.current && index !== -1) {
214
240
  this.list.current.scrollToIndex({
215
241
  index,
216
- animated: true
242
+ animated: true,
217
243
  });
218
244
  }
219
245
  };
220
246
 
221
- getItemLayout = (data, index) => (
222
- { length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index }
223
- )
247
+ getItemLayout = (data, index) => ({
248
+ length: ITEM_WIDTH,
249
+ offset: ITEM_WIDTH * index,
250
+ index,
251
+ });
224
252
 
225
253
  render() {
226
254
  const { priceList } = this.props;
@@ -237,7 +265,7 @@ export default class MonthList extends Component {
237
265
  keyExtractor={this.keyExtractor}
238
266
  onViewableItemsChanged={this.getCurrentVisibleMonth}
239
267
  onScrollToIndexFailed={() => {}}
240
- removeClippedSubviews
268
+ // removeClippedSubviews
241
269
  initialNumToRender={1}
242
270
  maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
243
271
  windowSize={3}
@@ -245,7 +273,7 @@ export default class MonthList extends Component {
245
273
  initialScrollIndex={this.currentScrollIndex}
246
274
  getItemLayout={this.getItemLayout}
247
275
  viewabilityConfig={{
248
- itemVisiblePercentThreshold: 50
276
+ itemVisiblePercentThreshold: 50,
249
277
  }}
250
278
  />
251
279
  );