@momo-kits/calendar 0.0.55-beta.14 → 0.0.55-beta.16

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