@momo-kits/calendar 0.0.55-beta.17 → 0.0.55-beta.18

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