@momo-kits/calendar 0.0.54-beta.1 → 0.0.54-beta.5

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/src/CalendarPro.js +150 -87
  3. package/src/calendarPicker/Day.js +33 -32
  4. package/src/calendarPicker/WeekDaysLabels.js +6 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.54-beta.1",
3
+ "version": "0.0.54-beta.5",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
package/src/CalendarPro.js CHANGED
@@ -7,11 +7,16 @@ import {
7
7
  Dimensions,
8
8
  ScrollView,
9
9
  TouchableWithoutFeedback,
10
- StyleSheet
10
+ StyleSheet,
11
11
  } from 'react-native';
12
12
  import Moment from 'moment';
13
13
  import {
14
- Text, SwitchLanguage, LocalizedStrings, Colors, Image, IconSource
14
+ Text,
15
+ SwitchLanguage,
16
+ LocalizedStrings,
17
+ Colors,
18
+ Image,
19
+ IconSource,
15
20
  } from '@momo-kits/core';
16
21
  import MonthList from './MonthList';
17
22
  import HeaderControl from './HeaderControl';
@@ -44,7 +49,8 @@ export default class CalendarPro extends Component {
44
49
  return {
45
50
  ownUpdate: false,
46
51
  };
47
- } if (nextProps.isShowLunar !== prevState.showLunar) {
52
+ }
53
+ if (nextProps.isShowLunar !== prevState.showLunar) {
48
54
  return { showLunar: nextProps.isShowLunar };
49
55
  }
50
56
  return null;
@@ -52,24 +58,29 @@ export default class CalendarPro extends Component {
52
58
 
53
59
  setDateRange = (dateRange, isScrollToStartDate) => {
54
60
  if (dateRange && dateRange.startDate && dateRange.endDate) {
55
- this.setState({ startDate: dateRange.startDate, endDate: dateRange.endDate }, () => {
56
- const dateScroll = isScrollToStartDate ? dateRange.startDate : dateRange.endDate;
57
- this.refs.MonthList.scrollToMonth(dateScroll);
58
- });
61
+ this.setState(
62
+ { startDate: dateRange.startDate, endDate: dateRange.endDate },
63
+ () => {
64
+ const dateScroll = isScrollToStartDate
65
+ ? dateRange.startDate
66
+ : dateRange.endDate;
67
+ this.refs.MonthList.scrollToMonth(dateScroll);
68
+ },
69
+ );
59
70
  }
60
- }
71
+ };
61
72
 
62
73
  ownSetState(state) {
63
74
  this.setState({ ...state, ownUpdate: true });
64
75
  }
65
76
 
66
77
  loadLabel = (data, type) => {
67
- const {
68
- i18n,
69
- customI18n
70
- } = this.props;
78
+ const { i18n, customI18n } = this.props;
71
79
  if (~['w', 'weekday', 'text'].indexOf(type)) {
72
- return (customI18n[type] || {})[data] || Util.I18N_MAP[i18n][type][data];
80
+ return (
81
+ (customI18n[type] || {})[data] ||
82
+ Util.I18N_MAP[i18n][type][data]
83
+ );
73
84
  }
74
85
  if (type === 'date') {
75
86
  return data.format(customI18n[type] || Util.I18N_MAP[i18n][type]);
@@ -77,11 +88,7 @@ export default class CalendarPro extends Component {
77
88
  };
78
89
 
79
90
  getDateRange = () => {
80
- const {
81
- maxDate,
82
- minDate,
83
- format
84
- } = this.props;
91
+ const { maxDate, minDate, format } = this.props;
85
92
  let max = Moment(maxDate, format);
86
93
  let min = Moment(minDate, format);
87
94
  const maxValid = max.isValid();
@@ -102,25 +109,23 @@ export default class CalendarPro extends Component {
102
109
  };
103
110
 
104
111
  onChoose = (day) => {
105
- const {
106
- startDate, tabSelected
107
- } = this.state;
112
+ const { startDate, tabSelected } = this.state;
108
113
  const { isDoubleDateMode, onDateChange } = this.props;
109
114
  if (isDoubleDateMode) {
110
115
  if (tabSelected === 1) {
111
116
  if (startDate && day >= startDate) {
112
117
  this.ownSetState({
113
- endDate: day
118
+ endDate: day,
114
119
  });
115
120
  } else if (startDate && day < startDate) {
116
121
  this.ownSetState({
117
122
  startDate: day,
118
- endDate: null
123
+ endDate: null,
119
124
  });
120
125
  }
121
126
  } else {
122
127
  this.ownSetState({
123
- startDate: day
128
+ startDate: day,
124
129
  });
125
130
  }
126
131
  } else {
@@ -136,9 +141,7 @@ export default class CalendarPro extends Component {
136
141
 
137
142
  executeProcessAfterScrollCalendar = (date, key) => {
138
143
  const holidays = Object.values(Util.getHolidaysInMonth(Moment(date)));
139
- const {
140
- showLunar
141
- } = this.state;
144
+ const { showLunar } = this.state;
142
145
  if (this.refs && this.refs.HeaderControl) {
143
146
  this.refs.HeaderControl.onUpdateInfo({ date });
144
147
  this.header = date.clone().startOf('month');
@@ -165,7 +168,7 @@ export default class CalendarPro extends Component {
165
168
  this.ownSetState({
166
169
  startDate: firstDate ? Moment(firstDate) : null,
167
170
  endDate: secondDate ? Moment(secondDate) : null,
168
- tabSelected
171
+ tabSelected,
169
172
  });
170
173
  };
171
174
 
@@ -183,12 +186,22 @@ export default class CalendarPro extends Component {
183
186
  onCallbackCalendar('lunar', nextStateShowLunar);
184
187
  }
185
188
 
186
- this.ownSetState({ showLunar: !showLunar, temp: data, ownUpdate: true });
189
+ this.ownSetState({
190
+ showLunar: !showLunar,
191
+ temp: data,
192
+ ownUpdate: true,
193
+ });
187
194
  };
188
195
 
189
196
  onPressBackArrow = () => {
190
- const previousDate = Moment(this.header).startOf('month').subtract(1, 'months');
191
- if (this.refs && this.refs.HeaderControl && previousDate.isSameOrAfter(this.minDate, 'month')) {
197
+ const previousDate = Moment(this.header)
198
+ .startOf('month')
199
+ .subtract(1, 'months');
200
+ if (
201
+ this.refs &&
202
+ this.refs.HeaderControl &&
203
+ previousDate.isSameOrAfter(this.minDate, 'month')
204
+ ) {
192
205
  this.header = previousDate;
193
206
  this.refs.HeaderControl.onUpdateInfo({ date: previousDate });
194
207
  this.refs.MonthList.scrollToMonth(previousDate);
@@ -197,7 +210,11 @@ export default class CalendarPro extends Component {
197
210
 
198
211
  onPressNextArrow = () => {
199
212
  const nextDate = Moment(this.header).startOf('month').add(1, 'months');
200
- if (this.refs && this.refs.HeaderControl && nextDate.isSameOrBefore(this.maxDate, 'month')) {
213
+ if (
214
+ this.refs &&
215
+ this.refs.HeaderControl &&
216
+ nextDate.isSameOrBefore(this.maxDate, 'month')
217
+ ) {
201
218
  this.header = nextDate;
202
219
  this.refs.HeaderControl.onUpdateInfo({ date: nextDate });
203
220
  this.refs.MonthList.scrollToMonth(nextDate);
@@ -205,15 +222,22 @@ export default class CalendarPro extends Component {
205
222
  };
206
223
 
207
224
  render() {
225
+ const { startDate, endDate, showLunar, tabSelected, holidays, temp } =
226
+ this.state;
208
227
  const {
209
- startDate, endDate, showLunar, tabSelected, holidays, temp
210
- } = this.state;
211
- const {
212
- i18n, isDoubleDateMode, priceList, labelFrom, labelTo, isHideLabel, isHideHoliday, isOffLunar
228
+ i18n,
229
+ isDoubleDateMode,
230
+ priceList,
231
+ labelFrom,
232
+ labelTo,
233
+ isHideLabel,
234
+ isHideHoliday,
235
+ isOffLunar,
213
236
  } = this.props;
214
237
  let priceListFormat = priceList?.outbound;
215
238
  if (isDoubleDateMode) {
216
- priceListFormat = tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
239
+ priceListFormat =
240
+ tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
217
241
  }
218
242
  return (
219
243
  <View style={styles.container}>
@@ -227,13 +251,19 @@ export default class CalendarPro extends Component {
227
251
  <View style={styles.viewDay}>
228
252
  {[1, 2, 3, 4, 5, 6, 7].map((item) => (
229
253
  <Text
230
- style={[styles.textDay, { color: item === 6 || item === 7 ? Colors.red_05 : Colors.black_12 }]}
231
- key={item}
232
- >
254
+ style={[
255
+ styles.textDay,
256
+ {
257
+ color:
258
+ item === 6 || item === 7
259
+ ? Colors.red_05
260
+ : Colors.black_12,
261
+ },
262
+ ]}
263
+ key={item}>
233
264
  {Util.mapWeeKDate(item)}
234
265
  </Text>
235
- )
236
- )}
266
+ ))}
237
267
  </View>
238
268
  <MonthList
239
269
  ref="MonthList"
@@ -257,51 +287,72 @@ export default class CalendarPro extends Component {
257
287
  isHideLabel={isHideLabel}
258
288
  />
259
289
  </View>
260
- {
261
- !isOffLunar && (
262
- <View style={styles.viewLunar}>
263
- <TouchableWithoutFeedback onPress={this.toggleLunarDate}>
264
- <Image source={showLunar ? IconSource.ic_checkbox_checked_24 : IconSource.ic_checkbox_unchecked_24} style={styles.iconSelected} />
265
- </TouchableWithoutFeedback>
266
- <Text.SubTitle
267
- style={styles.txtLunar}
268
- onPress={this.toggleLunarDate}
269
- >
270
- {SwitchLanguage.showLunar}
271
- </Text.SubTitle>
272
- </View>
273
- )
274
- }
290
+ {!isOffLunar && (
291
+ <View style={styles.viewLunar}>
292
+ <TouchableWithoutFeedback
293
+ onPress={this.toggleLunarDate}>
294
+ <Image
295
+ source={
296
+ showLunar
297
+ ? IconSource.ic_checkbox_checked_24
298
+ : IconSource.ic_checkbox_unchecked_24
299
+ }
300
+ style={styles.iconSelected}
301
+ />
302
+ </TouchableWithoutFeedback>
303
+ <Text
304
+ style={styles.txtLunar}
305
+ onPress={this.toggleLunarDate}>
306
+ {SwitchLanguage.showLunar}
307
+ </Text>
308
+ </View>
309
+ )}
275
310
 
276
- {
277
- !isHideHoliday && (
278
- <ScrollView
279
- contentContainerStyle={styles.contentScroll}
280
- showsVerticalScrollIndicator={false}
281
- enabledNestedScroll
282
- >
283
- {temp && temp.length > 0 && temp.map((item, idx) => {
284
- const labelHoliday = showLunar ? (item.mixedLabel || item.label || '') : (item.label || '');
285
- const labelHighlight = showLunar ? (item.highlight || '') : '';
286
- const labelDate = LocalizedStrings.defaultLanguage === 'en' ? `${Util.mapMonthShorten(item.month)} ${item.day}` : `${item.day} tháng ${item.month}`;
311
+ {!isHideHoliday && (
312
+ <ScrollView
313
+ contentContainerStyle={styles.contentScroll}
314
+ showsVerticalScrollIndicator={false}
315
+ enabledNestedScroll>
316
+ {temp &&
317
+ temp.length > 0 &&
318
+ temp.map((item, idx) => {
319
+ const labelHoliday = showLunar
320
+ ? item.mixedLabel || item.label || ''
321
+ : item.label || '';
322
+ const labelHighlight = showLunar
323
+ ? item.highlight || ''
324
+ : '';
325
+ const labelDate =
326
+ LocalizedStrings.defaultLanguage === 'en'
327
+ ? `${Util.mapMonthShorten(
328
+ item.month,
329
+ )} ${item.day}`
330
+ : `${item.day} tháng ${item.month}`;
287
331
  return (
288
- <View style={styles.row} key={idx.toString()}>
289
- <Text.SubTitle style={styles.txtMonthLunar}>
332
+ <View
333
+ style={styles.row}
334
+ key={idx.toString()}>
335
+ <Text style={styles.txtMonthLunar}>
290
336
  {labelDate}
291
- </Text.SubTitle>
292
- <Text.SubTitle style={styles.subTextLunar}>
337
+ </Text>
338
+ <Text style={styles.subTextLunar}>
293
339
  {`${labelHoliday} `}
294
- {
295
- labelHighlight ? <Text style={{ color: Colors.red_05 }}>{labelHighlight}</Text> : ''
296
- }
297
- </Text.SubTitle>
340
+ {labelHighlight ? (
341
+ <Text
342
+ style={{
343
+ color: Colors.red_05,
344
+ }}>
345
+ {labelHighlight}
346
+ </Text>
347
+ ) : (
348
+ ''
349
+ )}
350
+ </Text>
298
351
  </View>
299
352
  );
300
353
  })}
301
- </ScrollView>
302
- )
303
- }
304
-
354
+ </ScrollView>
355
+ )}
305
356
  </View>
306
357
  );
307
358
  }
@@ -313,15 +364,21 @@ CalendarPro.propTypes = {
313
364
  customI18n: PropTypes.object,
314
365
  isShowLunar: PropTypes.bool,
315
366
  onCallbackCalendar: PropTypes.func,
316
- minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
317
- maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
367
+ minDate: PropTypes.oneOfType([
368
+ PropTypes.string,
369
+ PropTypes.instanceOf(Date),
370
+ ]),
371
+ maxDate: PropTypes.oneOfType([
372
+ PropTypes.string,
373
+ PropTypes.instanceOf(Date),
374
+ ]),
318
375
  };
319
376
 
320
377
  CalendarPro.defaultProps = {
321
378
  format: 'YYYY-MM-DD',
322
379
  i18n: 'vi',
323
380
  customI18n: {},
324
- isShowLunar: true
381
+ isShowLunar: true,
325
382
  };
326
383
 
327
384
  const styles = StyleSheet.create({
@@ -331,7 +388,7 @@ const styles = StyleSheet.create({
331
388
  // fontSize: 12,
332
389
  color: '#222222',
333
390
  paddingLeft: 6,
334
- flexShrink: 1
391
+ flexShrink: 1,
335
392
  },
336
393
  contentScroll: { paddingHorizontal: 12, paddingVertical: 10 },
337
394
  iconSelected: { width: 24, height: 24, resizeMode: 'cover' },
@@ -339,10 +396,16 @@ const styles = StyleSheet.create({
339
396
  paddingLeft: 6,
340
397
  color: '#222222',
341
398
  // fontSize: 12,
342
- lineHeight: 14
399
+ lineHeight: 14,
343
400
  },
344
401
  viewLunar: {
345
- flexDirection: 'row', alignItems: 'center', marginHorizontal: 12, paddingVertical: 12, borderBottomWidth: 1, borderStyle: 'solid', borderColor: '#c7c7cd'
402
+ flexDirection: 'row',
403
+ alignItems: 'center',
404
+ marginHorizontal: 12,
405
+ paddingVertical: 12,
406
+ borderBottomWidth: 1,
407
+ borderStyle: 'solid',
408
+ borderColor: '#c7c7cd',
346
409
  },
347
410
  viewDate: { paddingHorizontal: 12 },
348
411
  textDay: {
@@ -359,5 +422,5 @@ const styles = StyleSheet.create({
359
422
  paddingTop: 15,
360
423
  paddingBottom: 10,
361
424
  },
362
- container: { flex: 1, backgroundColor: 'white', marginTop: 20, },
425
+ container: { flex: 1, backgroundColor: 'white', marginTop: 20 },
363
426
  });
package/src/calendarPicker/Day.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { Component, } from 'react';
1
+ import React, { Component } from 'react';
2
2
  import { TouchableOpacity, View } from 'react-native';
3
3
  import PropTypes from 'prop-types';
4
4
  import { Text } from '@momo-kits/core';
@@ -26,9 +26,8 @@ export default class Day extends Component {
26
26
  }
27
27
 
28
28
  processDoubleDate() {
29
- const {
30
- mode, otherMonth, firstDate, secondDate, tabSelected
31
- } = this.props;
29
+ const { mode, otherMonth, firstDate, secondDate, tabSelected } =
30
+ this.props;
32
31
  const { date } = this;
33
32
  if (mode === 'doubleDate' && !otherMonth) {
34
33
  if (firstDate && tabSelected === 1) {
@@ -100,9 +99,7 @@ export default class Day extends Component {
100
99
  }
101
100
 
102
101
  render() {
103
- const {
104
- day, month, year, otherMonth, onDayChange
105
- } = this.props;
102
+ const { day, month, year, otherMonth, onDayChange } = this.props;
106
103
  this.colorCanTouch = 'white';
107
104
  this.colorText = '#393939';
108
105
  this.colorTextDisable = '#DADADA';
@@ -114,33 +111,37 @@ export default class Day extends Component {
114
111
  this.date.setHours(0, 0, 0, 0);
115
112
  this.processRender();
116
113
  return (
117
-
118
114
  <View style={styles.dayWrapper}>
119
115
  <View style={this.styleDouble} />
120
- {
121
- this.disableTouch || otherMonth
122
- ? (
123
- <View style={styles.dayButton}>
124
- <Text.Title style={[styles.dayLabel, { color: this.colorTextDisable }]}>
125
- {day}
126
- </Text.Title>
127
- </View>
128
- )
129
- : (
130
- <View style={[styles.dayButtonSelected, { backgroundColor: this.colorCanTouch }]}>
131
- <TouchableOpacity
132
- style={styles.dayButton}
133
- onPress={() => onDayChange(day, month, year)}
134
- >
135
- <Text.Title style={[styles.dayLabel, { color: this.colorText }]}>
136
- {day}
137
- </Text.Title>
138
- </TouchableOpacity>
139
-
140
- </View>
141
- )
142
-
143
- }
116
+ {this.disableTouch || otherMonth ? (
117
+ <View style={styles.dayButton}>
118
+ <Text.Title1
119
+ style={[
120
+ styles.dayLabel,
121
+ { color: this.colorTextDisable },
122
+ ]}>
123
+ {day}
124
+ </Text.Title1>
125
+ </View>
126
+ ) : (
127
+ <View
128
+ style={[
129
+ styles.dayButtonSelected,
130
+ { backgroundColor: this.colorCanTouch },
131
+ ]}>
132
+ <TouchableOpacity
133
+ style={styles.dayButton}
134
+ onPress={() => onDayChange(day, month, year)}>
135
+ <Text.Title1
136
+ style={[
137
+ styles.dayLabel,
138
+ { color: this.colorText },
139
+ ]}>
140
+ {day}
141
+ </Text.Title1>
142
+ </TouchableOpacity>
143
+ </View>
144
+ )}
144
145
  </View>
145
146
  );
146
147
  }
package/src/calendarPicker/WeekDaysLabels.js CHANGED
@@ -3,19 +3,18 @@ import { View } from 'react-native';
3
3
 
4
4
  import { Text } from '@momo-kits/core';
5
5
  import styles from './styles';
6
- import { WEEKDAYS, } from './util';
6
+ import { WEEKDAYS } from './util';
7
7
 
8
8
  const colorDay = '#9199a2';
9
9
  const WeekDaysLabels = () => (
10
10
  <View style={styles.dayLabelsWrapper}>
11
- { WEEKDAYS.map((day, key) => (
12
- <Text.Title
11
+ {WEEKDAYS.map((day, key) => (
12
+ <Text.Title1
13
13
  key={key.toString()}
14
- style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}
15
- >
14
+ style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}>
16
15
  {day}
17
- </Text.Title>
18
- )) }
16
+ </Text.Title1>
17
+ ))}
19
18
  </View>
20
19
  );
21
20