@momo-kits/calendar 0.0.55-beta → 0.0.55-beta.2

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 (10) hide show
  1. package/package.json +17 -16
  2. package/publish.sh +2 -2
  3. package/src/Calendar.js +214 -90
  4. package/src/CalendarPro.js +158 -88
  5. package/src/Day/index.js +119 -96
  6. package/src/HeaderControl.js +50 -45
  7. package/src/MonthList.js +81 -53
  8. package/src/TabHeader.js +47 -34
  9. package/src/calendarPicker/Day.js +33 -32
  10. package/src/calendarPicker/WeekDaysLabels.js +6 -7
package/src/TabHeader.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import React from 'react';
2
- import { TouchableWithoutFeedback, View, Text } from 'react-native';
2
+ import { TouchableWithoutFeedback, View } from 'react-native';
3
3
  import Moment from 'moment';
4
4
  import Util from './Util';
5
+ import { Colors, Text } from '@momo-kits/core';
5
6
 
6
7
  export default class TabHeader extends React.Component {
7
8
  constructor(props) {
8
9
  super(props);
9
10
  this.state = {
10
- active: props.activeTab
11
+ active: props.activeTab,
11
12
  };
12
13
  this.label = props.label;
13
14
  this.defaultDate = props.date ? Moment(props.date) : '';
@@ -23,7 +24,7 @@ export default class TabHeader extends React.Component {
23
24
  updateView = (date, activeTab) => {
24
25
  this.setState({
25
26
  date: date ? Moment(date) : '',
26
- active: activeTab
27
+ active: activeTab,
27
28
  });
28
29
  };
29
30
 
@@ -35,42 +36,54 @@ export default class TabHeader extends React.Component {
35
36
  const { label, disabled } = this.props;
36
37
  const { date, active } = this.state;
37
38
  const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
38
- const formattedDateFromDefault = this.defaultDate ? this.defaultDate.format('DD/MM/YYYY') : '';
39
- const dayOfWeekFromState = date ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -` : '';
40
- const dayOfWeekFromDefault = this.defaultDate ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -` : '';
39
+ const formattedDateFromDefault = this.defaultDate
40
+ ? this.defaultDate.format('DD/MM/YYYY')
41
+ : '';
42
+ const dayOfWeekFromState = date
43
+ ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -`
44
+ : '';
45
+ const dayOfWeekFromDefault = this.defaultDate
46
+ ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -`
47
+ : '';
41
48
 
42
49
  return (
43
- <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
44
- <View style={{
45
- flex: 1,
46
- justifyContent: 'center',
47
- alignItems: 'center',
48
- backgroundColor: active ? 'white' : '#eeeeef',
49
- borderRadius: 8
50
- }}
51
- >
52
- <Text style={{
53
- fontSize: 12,
54
- // lineHeight: 14,
55
- color: active ? '#222222' : '#8d919d',
56
- fontWeight: 'bold'
57
- }}
58
- >
50
+ <TouchableWithoutFeedback
51
+ disabled={disabled}
52
+ onPress={this.onChangeTab}>
53
+ <View
54
+ style={{
55
+ flex: 1,
56
+ backgroundColor: Colors.white,
57
+ }}>
58
+ <Text
59
+ style={{
60
+ fontSize: 12,
61
+ lineHeight: 16,
62
+ color: Colors.black_09,
63
+ }}>
59
64
  {label}
60
-
61
65
  </Text>
62
- <Text style={{
63
- marginTop: 3,
64
- fontSize: 12,
65
- // lineHeight: 14,
66
- color: '#8d919d'
67
- }}
68
- >
69
- <Text style={{ color: active ? '#b0006d' : '#8d919d', fontWeight: 'bold' }}>
70
- {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
71
-
66
+ <Text
67
+ weight={active ? 'semibold' : 'regular'}
68
+ style={{
69
+ marginTop: 3,
70
+ fontSize: 14,
71
+ color: Colors.black_17,
72
+ }}>
73
+ <Text
74
+ weight={active ? 'semibold' : 'regular'}
75
+ style={{
76
+ color: Colors.black_17,
77
+ }}>
78
+ {`${
79
+ dayOfWeekFromState ||
80
+ dayOfWeekFromDefault ||
81
+ '--'
82
+ } `}
72
83
  </Text>
73
- {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
84
+ {formattedDateFromState ||
85
+ formattedDateFromDefault ||
86
+ '--/--/----'}
74
87
  </Text>
75
88
  </View>
76
89
  </TouchableWithoutFeedback>
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