Skip to content

Commit 0b6a2f2

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-calendars into infra/Docs_site
2 parents 0e62775 + 102e48b commit 0b6a2f2

File tree

24 files changed

+760
-172
lines changed

24 files changed

+760
-172
lines changed

‎example/src/screens/calendars.tsx‎

Lines changed: 10 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
import React, {useState, Fragment, useCallback} from 'react';
2-
import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch} from 'react-native';
2+
import {StyleSheet, View, ScrollView, Text, TouchableOpacity} from 'react-native';
33
import {Calendar, CalendarProps} from 'react-native-calendars';
44
import testIDs from '../testIDs';
55

66
const INITIAL_DATE = '2020-02-02';
77

88
const CalendarsScreen = () => {
99
const [selected, setSelected] = useState(INITIAL_DATE);
10-
const [showMarkedDatesExamples, setShowMarkedDatesExamples] = useState(false);
11-
12-
const toggleSwitch = () => {
13-
setShowMarkedDatesExamples(!showMarkedDatesExamples);
14-
};
1510

1611
const onDayPress: CalendarProps['onDayPress'] = day => {
1712
setSelected(day.dateString);
@@ -259,7 +254,8 @@ const CalendarsScreen = () => {
259254
elevation: 2
260255
},
261256
text: {
262-
color: 'red'
257+
color: 'red',
258+
marginTop: 0
263259
}
264260
}
265261
},
@@ -454,19 +450,6 @@ const CalendarsScreen = () => {
454450
);
455451
};
456452

457-
const renderMarkedDatesExamples = () => {
458-
return (
459-
<Fragment>
460-
{renderCalendarWithMarkedDatesAndHiddenArrows()}
461-
{renderCalendarWithMultiDotMarking()}
462-
{renderCalendarWithPeriodMarkingAndSpinner()}
463-
{renderCalendarWithPeriodMarkingAndDotMarking()}
464-
{renderCalendarWithMultiPeriodMarking()}
465-
{renderCalendarWithCustomMarkingType()}
466-
</Fragment>
467-
);
468-
};
469-
470453
const renderExamples = () => {
471454
return (
472455
<Fragment>
@@ -477,29 +460,19 @@ const CalendarsScreen = () => {
477460
{renderCalendarWithInactiveDays()}
478461
{renderCalendarWithCustomHeaderTitle()}
479462
{renderCalendarWithCustomHeader()}
463+
{renderCalendarWithMarkedDatesAndHiddenArrows()}
464+
{renderCalendarWithMultiDotMarking()}
465+
{renderCalendarWithPeriodMarkingAndSpinner()}
466+
{renderCalendarWithPeriodMarkingAndDotMarking()}
467+
{renderCalendarWithMultiPeriodMarking()}
468+
{renderCalendarWithCustomMarkingType()}
480469
</Fragment>
481470
);
482471
};
483472

484-
const renderSwitch = () => {
485-
// Workaround for Detox 18 migration bug
486-
return (
487-
<View style={styles.switchContainer}>
488-
<Switch
489-
trackColor={{false: '#d9e1e8', true: '#00BBF2'}}
490-
onValueChange={toggleSwitch}
491-
value={showMarkedDatesExamples}
492-
/>
493-
<Text style={styles.switchText}>Show markings examples</Text>
494-
</View>
495-
);
496-
};
497-
498473
return (
499474
<ScrollView showsVerticalScrollIndicator={false} testID={testIDs.calendars.CONTAINER}>
500-
{renderSwitch()}
501-
{showMarkedDatesExamples && renderMarkedDatesExamples()}
502-
{!showMarkedDatesExamples && renderExamples()}
475+
{renderExamples()}
503476
</ScrollView>
504477
);
505478
};

‎example/src/screens/timelineCalendar.tsx‎

Lines changed: 105 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,114 @@
1-
import XDate from 'xdate';
21
import React, {Component} from 'react';
32
import {Alert} from 'react-native';
4-
import {ExpandableCalendar, Timeline, CalendarProvider, TimelineProps} from 'react-native-calendars';
5-
import {sameDate} from '../../../src/dateutils';
3+
import {
4+
ExpandableCalendar,
5+
TimelineEventProps,
6+
TimelineList,
7+
CalendarProvider,
8+
TimelineProps,
9+
CalendarUtils
10+
} from 'react-native-calendars';
11+
import _ from 'lodash';
612

7-
const EVENTS = [
13+
const INITIAL_TIME = {hour: 9, minutes: 0};
14+
const today = new Date();
15+
const getDate = (offset = 0) => CalendarUtils.getCalendarDateString(new Date().setDate(today.getDate() + offset));
16+
17+
const EVENTS: TimelineEventProps[] = [
18+
{
19+
start: `${getDate(-1)} 09:20:00`,
20+
end: `${getDate(-1)} 12:00:00`,
21+
title: 'Merge Request to React Native Calendars',
22+
summary: 'Merge Timeline Calendar to React Native Calendars'
23+
},
824
{
9-
start: '2017-09-06 01:30:00',
10-
end: '2017-09-06 02:30:00',
25+
start: `${getDate()} 01:30:00`,
26+
end: `${getDate()} 02:30:00`,
1127
title: 'Dr. Mariana Joseph',
1228
summary: '3412 Piedmont Rd NE, GA 3032',
1329
color: '#e6add8'
1430
},
1531
{
16-
start: '2017-09-07 00:30:00',
17-
end: '2017-09-07 01:30:00',
32+
start: `${getDate(1)} 00:30:00`,
33+
end: `${getDate(1)} 01:30:00`,
1834
title: 'Visit Grand Mother',
1935
summary: 'Visit Grand Mother and bring some fruits.',
2036
color: '#ade6d8'
2137
},
2238
{
23-
start: '2017-09-07 02:30:00',
24-
end: '2017-09-07 03:20:00',
39+
start: `${getDate(1)} 02:30:00`,
40+
end: `${getDate(1)} 03:20:00`,
2541
title: 'Meeting with Prof. Behjet Zuhaira',
2642
summary: 'Meeting with Prof. Behjet at 130 in her office.',
2743
color: '#e6add8'
2844
},
2945
{
30-
start: '2017-09-07 04:10:00',
31-
end: '2017-09-07 04:40:00',
46+
start: `${getDate(1)} 04:10:00`,
47+
end: `${getDate(1)} 04:40:00`,
3248
title: 'Tea Time with Dr. Hasan',
3349
summary: 'Tea Time with Dr. Hasan, Talk about Project'
3450
},
3551
{
36-
start: '2017-09-07 01:05:00',
37-
end: '2017-09-07 01:35:00',
52+
start: `${getDate(1)} 01:05:00`,
53+
end: `${getDate(1)} 01:35:00`,
3854
title: 'Dr. Mariana Joseph',
3955
summary: '3412 Piedmont Rd NE, GA 3032'
4056
},
4157
{
42-
start: '2017-09-07 14:30:00',
43-
end: '2017-09-07 16:30:00',
58+
start: `${getDate(1)} 14:30:00`,
59+
end: `${getDate(1)} 16:30:00`,
4460
title: 'Meeting Some Friends in ARMED',
4561
summary: 'Arsalan, Hasnaat, Talha, Waleed, Bilal',
4662
color: '#d8ade6'
4763
},
4864
{
49-
start: '2017-09-08 01:40:00',
50-
end: '2017-09-08 02:25:00',
65+
start: `${getDate(2)} 01:40:00`,
66+
end: `${getDate(2)} 02:25:00`,
5167
title: 'Meet Sir Khurram Iqbal',
5268
summary: 'Computer Science Dept. Comsats Islamabad',
5369
color: '#e6bcad'
5470
},
5571
{
56-
start: '2017-09-08 04:10:00',
57-
end: '2017-09-08 04:40:00',
72+
start: `${getDate(2)} 04:10:00`,
73+
end: `${getDate(2)} 04:40:00`,
5874
title: 'Tea Time with Colleagues',
5975
summary: 'WeRplay'
6076
},
6177
{
62-
start: '2017-09-08 00:45:00',
63-
end: '2017-09-08 01:45:00',
78+
start: `${getDate(2)} 00:45:00`,
79+
end: `${getDate(2)} 01:45:00`,
6480
title: 'Lets Play Apex Legends',
6581
summary: 'with Boys at Work'
6682
},
6783
{
68-
start: '2017-09-08 11:30:00',
69-
end: '2017-09-08 12:30:00',
84+
start: `${getDate(2)} 11:30:00`,
85+
end: `${getDate(2)} 12:30:00`,
7086
title: 'Dr. Mariana Joseph',
7187
summary: '3412 Piedmont Rd NE, GA 3032'
7288
},
7389
{
74-
start: '2017-09-10 12:10:00',
75-
end: '2017-09-10 13:45:00',
90+
start: `${getDate(4)} 12:10:00`,
91+
end: `${getDate(4)} 13:45:00`,
7692
title: 'Merge Request to React Native Calendars',
7793
summary: 'Merge Timeline Calendar to React Native Calendars'
7894
}
7995
];
8096

8197
export default class TimelineCalendarScreen extends Component {
8298
state = {
83-
currentDate: '2017-09-10',
99+
currentDate: getDate(),
84100
events: EVENTS,
85-
newEvent: undefined
101+
eventsByDate: _.groupBy(EVENTS, e => CalendarUtils.getCalendarDateString(e.start)) as {
102+
[key: string]: TimelineEventProps[];
103+
}
86104
};
87105

88106
marked = {
89-
'2017-09-06': {marked: true},
90-
'2017-09-07': {marked: true},
91-
'2017-09-08': {marked: true},
92-
'2017-09-10': {marked: true}
107+
[`${getDate(-1)}`]: {marked: true},
108+
[`${getDate()}`]: {marked: true},
109+
[`${getDate(1)}`]: {marked: true},
110+
[`${getDate(2)}`]: {marked: true},
111+
[`${getDate(4)}`]: {marked: true}
93112
};
94113

95114
onDateChanged = (date: string) => {
@@ -103,49 +122,81 @@ export default class TimelineCalendarScreen extends Component {
103122
};
104123

105124
createNewEvent: TimelineProps['onBackgroundLongPress'] = (timeString, timeObject) => {
106-
const {currentDate} = this.state;
125+
const {eventsByDate} = this.state;
107126
const hourString = `${(timeObject.hour + 1).toString().padStart(2, '0')}`;
108127
const minutesString = `${timeObject.minutes.toString().padStart(2, '0')}`;
109128

110129
const newEvent = {
111-
start: `${currentDate} ${timeString}`,
112-
end: `${currentDate} ${hourString}:${minutesString}:00`,
130+
id: 'draft',
131+
start: `${timeString}`,
132+
end: `${timeObject.date} ${hourString}:${minutesString}:00`,
113133
title: 'New Event',
114134
color: '#ffffff'
115135
};
116136

117-
this.setState({newEvent});
137+
if (timeObject.date) {
138+
if (eventsByDate[timeObject.date]) {
139+
eventsByDate[timeObject.date] = [...eventsByDate[timeObject.date], newEvent];
140+
this.setState({eventsByDate});
141+
} else {
142+
eventsByDate[timeObject.date] = [newEvent];
143+
this.setState({eventsByDate: {...eventsByDate}});
144+
}
145+
}
118146
};
119147

120-
approveNewEvent = () => {
148+
approveNewEvent: TimelineProps['onBackgroundLongPressOut'] = (_timeString, timeObject) => {
149+
const {eventsByDate} = this.state;
150+
121151
Alert.prompt('New Event', 'Enter event title', [
122152
{
123153
text: 'Cancel',
124154
onPress: () => {
125-
this.setState({
126-
newEvent: undefined
127-
});
155+
if (timeObject.date) {
156+
eventsByDate[timeObject.date] = _.filter(eventsByDate[timeObject.date], e => e.id !== 'draft');
157+
158+
this.setState({
159+
eventsByDate
160+
});
161+
}
128162
}
129163
},
130164
{
131165
text: 'Create',
132166
onPress: eventTitle => {
133-
const {newEvent = {}, events} = this.state;
134-
this.setState({
135-
newEvent: undefined,
136-
events: [...events, {...newEvent, title: eventTitle ?? 'New Event', color: '#d8ade6'}]
137-
});
167+
if (timeObject.date) {
168+
const draftEvent = _.find(eventsByDate[timeObject.date], {id: 'draft'});
169+
if (draftEvent) {
170+
draftEvent.id = undefined;
171+
draftEvent.title = eventTitle ?? 'New Event';
172+
draftEvent.color = '#d8ade6';
173+
eventsByDate[timeObject.date] = [...eventsByDate[timeObject.date]];
174+
175+
this.setState({
176+
eventsByDate
177+
});
178+
}
179+
}
138180
}
139181
}
140182
]);
141183
};
142184

185+
private timelineProps = {
186+
format24h: true,
187+
onBackgroundLongPress: this.createNewEvent,
188+
onBackgroundLongPressOut: this.approveNewEvent
189+
// scrollToFirst: true,
190+
// start: 0,
191+
// end: 24
192+
};
193+
143194
render() {
144-
const {events, newEvent} = this.state;
145-
const timelineEvents = newEvent ? [...events, newEvent] : events;
195+
const {currentDate, eventsByDate} = this.state;
196+
146197
return (
147198
<CalendarProvider
148-
date={this.state.currentDate}
199+
date={currentDate}
149200
onDateChanged={this.onDateChanged}
150201
onMonthChange={this.onMonthChange}
151202
showTodayButton
@@ -157,15 +208,13 @@ export default class TimelineCalendarScreen extends Component {
157208
rightArrowImageSource={require('../img/next.png')}
158209
markedDates={this.marked}
159210
/>
160-
<Timeline
161-
format24h={true}
162-
eventTapped={e => e}
163-
events={timelineEvents.filter(event => sameDate(new XDate(event.start), new XDate(this.state.currentDate)))}
211+
<TimelineList
212+
events={eventsByDate}
213+
timelineProps={this.timelineProps}
214+
showNowIndicator
215+
scrollToNow
164216
scrollToFirst
165-
onBackgroundLongPress={this.createNewEvent}
166-
onBackgroundLongPressOut={this.approveNewEvent}
167-
// start={0}
168-
// end={24}
217+
initialTime={INITIAL_TIME}
169218
/>
170219
</CalendarProvider>
171220
);

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"memoize-one": "^5.2.1",
3939
"prop-types": "^15.5.10",
4040
"react-native-swipe-gestures": "^1.0.5",
41+
"recyclerlistview": "^3.0.5",
4142
"xdate": "^0.8.0"
4243
},
4344
"devDependencies": {

‎scripts/release.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,8 @@ function tagAndPublish(newVersion) {
103103
exec.execSyncRead(`npm publish --tag ${VERSION_TAG}`);
104104
if (isReleaseBuild && !IS_SNAPSHOT) {
105105
exec.execSync(`git tag -a ${newVersion} -m "${newVersion}"`);
106-
exec.execSyncSilent(`git push deploy ${newVersion} || true`);
106+
console.log(`tagging git for version ${newVersion}...`);
107+
exec.execSyncSilent(`git push origin ${newVersion}`);
107108
}
108109
}
109110

‎src/commons/constants.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Dimensions} from 'react-native';
2+
3+
const {width: screenWidth, height: screenHeight} = Dimensions.get('screen');
4+
5+
export default {
6+
screenWidth,
7+
screenHeight
8+
};

0 commit comments

Comments
 (0)