|
@@ -1,46 +1,59 @@
|
1
|
1
|
import * as React from 'react';
|
|
2
|
+import {View} from "react-native";
|
2
|
3
|
import {withTheme} from 'react-native-paper';
|
3
|
4
|
import {Agenda} from "react-native-calendars";
|
4
|
5
|
|
|
6
|
+type Props = {
|
|
7
|
+ theme: Object,
|
|
8
|
+}
|
|
9
|
+
|
5
|
10
|
/**
|
6
|
11
|
* Abstraction layer for Agenda component, using custom configuration
|
7
|
|
- *
|
8
|
|
- * @param props Props to pass to the element. Must specify an onRef prop to get an Agenda ref.
|
9
|
|
- * @return {*}
|
10
|
12
|
*/
|
11
|
|
-function CustomAgenda(props) {
|
12
|
|
- const {colors} = props.theme;
|
13
|
|
- return (
|
14
|
|
- <Agenda
|
15
|
|
- {...props}
|
16
|
|
- ref={props.onRef}
|
|
13
|
+class CustomAgenda extends React.Component<Props> {
|
|
14
|
+
|
|
15
|
+ getAgenda() {
|
|
16
|
+ return <Agenda
|
|
17
|
+ {...this.props}
|
|
18
|
+ ref={this.props.onRef}
|
17
|
19
|
theme={{
|
18
|
|
- backgroundColor: colors.agendaBackgroundColor,
|
19
|
|
- calendarBackground: colors.background,
|
20
|
|
- textSectionTitleColor: colors.agendaDayTextColor,
|
21
|
|
- selectedDayBackgroundColor: colors.primary,
|
|
20
|
+ backgroundColor: this.props.theme.colors.agendaBackgroundColor,
|
|
21
|
+ calendarBackground: this.props.theme.colors.background,
|
|
22
|
+ textSectionTitleColor: this.props.theme.colors.agendaDayTextColor,
|
|
23
|
+ selectedDayBackgroundColor: this.props.theme.colors.primary,
|
22
|
24
|
selectedDayTextColor: '#ffffff',
|
23
|
|
- todayTextColor: colors.primary,
|
24
|
|
- dayTextColor: colors.text,
|
25
|
|
- textDisabledColor: colors.agendaDayTextColor,
|
26
|
|
- dotColor: colors.primary,
|
|
25
|
+ todayTextColor: this.props.theme.colors.primary,
|
|
26
|
+ dayTextColor: this.props.theme.colors.text,
|
|
27
|
+ textDisabledColor: this.props.theme.colors.agendaDayTextColor,
|
|
28
|
+ dotColor: this.props.theme.colors.primary,
|
27
|
29
|
selectedDotColor: '#ffffff',
|
28
|
30
|
arrowColor: 'orange',
|
29
|
|
- monthTextColor: colors.primary,
|
30
|
|
- indicatorColor: colors.primary,
|
|
31
|
+ monthTextColor: this.props.theme.colors.primary,
|
|
32
|
+ indicatorColor: this.props.theme.colors.primary,
|
31
|
33
|
textDayFontWeight: '300',
|
32
|
34
|
textMonthFontWeight: 'bold',
|
33
|
35
|
textDayHeaderFontWeight: '300',
|
34
|
36
|
textDayFontSize: 16,
|
35
|
37
|
textMonthFontSize: 16,
|
36
|
38
|
textDayHeaderFontSize: 16,
|
37
|
|
- agendaDayTextColor: colors.agendaDayTextColor,
|
38
|
|
- agendaDayNumColor: colors.agendaDayTextColor,
|
39
|
|
- agendaTodayColor: colors.primary,
|
40
|
|
- agendaKnobColor: colors.primary,
|
|
39
|
+ agendaDayTextColor: this.props.theme.colors.agendaDayTextColor,
|
|
40
|
+ agendaDayNumColor: this.props.theme.colors.agendaDayTextColor,
|
|
41
|
+ agendaTodayColor: this.props.theme.colors.primary,
|
|
42
|
+ agendaKnobColor: this.props.theme.colors.primary,
|
41
|
43
|
}}
|
42
|
|
- />
|
43
|
|
- );
|
|
44
|
+ />;
|
|
45
|
+ }
|
|
46
|
+
|
|
47
|
+ render() {
|
|
48
|
+ if (this.props.theme.colors.text === "#ffffff") // We are in light mode
|
|
49
|
+ return (
|
|
50
|
+ <View style={{flex: 1}}>
|
|
51
|
+ {this.getAgenda()}
|
|
52
|
+ </View>
|
|
53
|
+ );
|
|
54
|
+ else
|
|
55
|
+ return this.getAgenda();
|
|
56
|
+ }
|
44
|
57
|
}
|
45
|
58
|
|
46
|
59
|
export default withTheme(CustomAgenda);
|