@momo-kits/calendar 0.0.53-beta.66 → 0.0.54-beta.1

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