@momo-kits/calendar 0.0.52-beta.1 → 0.0.53-beta.12

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 (4) hide show
  1. package/package.json +1 -1
  2. package/publish.sh +1 -1
  3. package/src/Day/index.js +197 -191
  4. package/src/MonthList.js +78 -51
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.52-beta.1",
3
+ "version": "0.0.53-beta.12",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
package/publish.sh CHANGED
@@ -26,4 +26,4 @@ cd ..
26
26
  rm -rf dist
27
27
 
28
28
 
29
- #curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'
29
+ #curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'
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;
package/src/MonthList.js CHANGED
@@ -1,10 +1,6 @@
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';
@@ -23,7 +19,10 @@ export default class MonthList extends Component {
23
19
  // };
24
20
  this.currentDate = moment();
25
21
  this.data = this.getMonthList();
26
- this.currentScrollIndex = this.getIndexOfMonth(moment(props.selectedDate), this.data);
22
+ this.currentScrollIndex = this.getIndexOfMonth(
23
+ moment(props.selectedDate),
24
+ this.data,
25
+ );
27
26
  this.list = React.createRef();
28
27
  this.heightStyle = {};
29
28
  this.holidays = props.holidays;
@@ -57,32 +56,39 @@ export default class MonthList extends Component {
57
56
 
58
57
  checkRange = (date, start, end) => {
59
58
  if (!date || !start) return false;
60
- if (!end) return date.year() === start.year() && date.month() === start.month();
61
- if (date.year() < start.year() || (date.year() === start.year() && date.month() < start.month())) return false;
62
- 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
+ );
63
72
  };
64
73
 
65
74
  shouldUpdate = (month, props) => {
66
75
  if (!props) return false;
67
- const {
68
- startDate,
69
- endDate
70
- } = props;
76
+ const { startDate, endDate } = props;
71
77
  const { startDate: curStartDate, endDate: curEndDate } = this.props;
72
- const {
73
- date
74
- } = month;
78
+ const { date } = month;
75
79
  const next = this.checkRange(date, startDate, endDate);
76
80
  const prev = this.checkRange(date, curStartDate, curEndDate);
77
81
  return !!(prev || next);
78
82
  };
79
83
 
80
84
  convertLunarToSolar(date) {
81
- return date ? converter.SolarToLunar({
82
- solarDay: date.date(),
83
- solarMonth: date.month() + 1,
84
- solarYear: date.year()
85
- }) : {};
85
+ return date
86
+ ? converter.SolarToLunar({
87
+ solarDay: date.date(),
88
+ solarMonth: date.month() + 1,
89
+ solarYear: date.year(),
90
+ })
91
+ : {};
86
92
  }
87
93
 
88
94
  findHoliday = (date) => {
@@ -90,7 +96,9 @@ export default class MonthList extends Component {
90
96
  if (date && holidays && holidays.length > 0) {
91
97
  const day = date.date();
92
98
  const month = date.month() + 1;
93
- return holidays.find((item) => item.day === day && item.month === month);
99
+ return holidays.find(
100
+ (item) => item.day === day && item.month === month,
101
+ );
94
102
  }
95
103
  return null;
96
104
  };
@@ -99,7 +107,7 @@ export default class MonthList extends Component {
99
107
  const holiday = this.findHoliday(date, holidays);
100
108
  return {
101
109
  isSolarHoliday: !!(holiday && !holiday.lunar),
102
- isLunarHoliday: !!(holiday && holiday.lunar)
110
+ isLunarHoliday: !!(holiday && holiday.lunar),
103
111
  };
104
112
  };
105
113
 
@@ -113,7 +121,7 @@ export default class MonthList extends Component {
113
121
  dayList = new Array(weekday - 1).fill({
114
122
  empty: moment(date).subtract(1, 'h'),
115
123
  lunarDate: this.convertLunarToSolar(date),
116
- ...this.checkHoliday(date)
124
+ ...this.checkHoliday(date),
117
125
  });
118
126
  }
119
127
  while (date.month() === month) {
@@ -121,22 +129,26 @@ export default class MonthList extends Component {
121
129
  dayList.push({
122
130
  date: cloned,
123
131
  lunarDate: this.convertLunarToSolar(cloned),
124
- ...this.checkHoliday(date)
132
+ ...this.checkHoliday(date),
125
133
  });
126
134
  date.add(1, 'days');
127
135
  }
128
136
  date.subtract(1, 'days');
129
137
  weekday = date.isoWeekday();
130
138
  if (weekday === 1) {
131
- return dayList.concat(new Array(6).fill({
132
- empty: moment(date).hour(1),
133
- lunarDate: this.convertLunarToSolar(date)
134
- }));
139
+ return dayList.concat(
140
+ new Array(6).fill({
141
+ empty: moment(date).hour(1),
142
+ lunarDate: this.convertLunarToSolar(date),
143
+ }),
144
+ );
135
145
  }
136
- return dayList.concat(new Array(Math.abs(7 - weekday)).fill({
137
- empty: moment(date).hour(1),
138
- lunarDate: this.convertLunarToSolar(date)
139
- }));
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
+ );
140
152
  };
141
153
 
142
154
  getMonthList = (props) => {
@@ -144,14 +156,15 @@ export default class MonthList extends Component {
144
156
  const maxDate = moment((props || this.props).maxDate);
145
157
  const monthList = [];
146
158
  if (!maxDate || !minDate) return monthList;
147
- while (maxDate > minDate || (
148
- maxDate.year() === minDate.year()
149
- && maxDate.month() === minDate.month()
150
- )) {
159
+ while (
160
+ maxDate > minDate ||
161
+ (maxDate.year() === minDate.year() &&
162
+ maxDate.month() === minDate.month())
163
+ ) {
151
164
  const d = moment(minDate);
152
165
  const month = {
153
166
  date: d,
154
- dateList: this.getDayList(d)
167
+ dateList: this.getDayList(d),
155
168
  };
156
169
  month.shouldUpdate = this.shouldUpdate(month, props);
157
170
  monthList.push(month);
@@ -160,7 +173,8 @@ export default class MonthList extends Component {
160
173
  return monthList;
161
174
  };
162
175
 
163
- getIndexOfMonth = (month, data) => data.findIndex((item) => item.date.isSame(month, 'month'));
176
+ getIndexOfMonth = (month, data) =>
177
+ data.findIndex((item) => item.date.isSame(month, 'month'));
164
178
 
165
179
  // componentDidMount() {
166
180
  // const {
@@ -192,16 +206,27 @@ export default class MonthList extends Component {
192
206
  if (onScrollCalendar && item && this.currentKey !== key) {
193
207
  this.currentKey = key;
194
208
  try {
195
- this.heightStyle = this.data && this.data[index] && this.data[index].dateList
196
- ? {
197
- height: (style.containerDayHeight * this.data[index].dateList.length / 7) + 10
198
- }
199
- : {};
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
+ : {};
200
221
  } catch (e) {
201
222
  this.heightStyle = {};
202
223
  }
203
224
  if (onScrollCalendar) {
204
- onScrollCalendar({ date: item.date, key, currentIndex: index });
225
+ onScrollCalendar({
226
+ date: item.date,
227
+ key,
228
+ currentIndex: index,
229
+ });
205
230
  }
206
231
  }
207
232
  }
@@ -214,14 +239,16 @@ export default class MonthList extends Component {
214
239
  if (this.list.current && index !== -1) {
215
240
  this.list.current.scrollToIndex({
216
241
  index,
217
- animated: true
242
+ animated: true,
218
243
  });
219
244
  }
220
245
  };
221
246
 
222
- getItemLayout = (data, index) => (
223
- { length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index }
224
- )
247
+ getItemLayout = (data, index) => ({
248
+ length: ITEM_WIDTH,
249
+ offset: ITEM_WIDTH * index,
250
+ index,
251
+ });
225
252
 
226
253
  render() {
227
254
  const { priceList } = this.props;
@@ -238,7 +265,7 @@ export default class MonthList extends Component {
238
265
  keyExtractor={this.keyExtractor}
239
266
  onViewableItemsChanged={this.getCurrentVisibleMonth}
240
267
  onScrollToIndexFailed={() => {}}
241
- removeClippedSubviews
268
+ // removeClippedSubviews
242
269
  initialNumToRender={1}
243
270
  maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
244
271
  windowSize={3}
@@ -246,7 +273,7 @@ export default class MonthList extends Component {
246
273
  initialScrollIndex={this.currentScrollIndex}
247
274
  getItemLayout={this.getItemLayout}
248
275
  viewabilityConfig={{
249
- itemVisiblePercentThreshold: 50
276
+ itemVisiblePercentThreshold: 50,
250
277
  }}
251
278
  />
252
279
  );