diff --git a/example/src/screens/timelineCalendar.tsx b/example/src/screens/timelineCalendar.tsx
index bb016ebc8e..5d18825c67 100644
--- a/example/src/screens/timelineCalendar.tsx
+++ b/example/src/screens/timelineCalendar.tsx
@@ -103,13 +103,12 @@ export default class TimelineCalendarScreen extends Component {
};
createNewEvent: TimelineProps['onBackgroundLongPress'] = (timeString, timeObject) => {
- const {currentDate} = this.state;
const hourString = `${(timeObject.hour + 1).toString().padStart(2, '0')}`;
const minutesString = `${timeObject.minutes.toString().padStart(2, '0')}`;
const newEvent = {
- start: `${currentDate} ${timeString}`,
- end: `${currentDate} ${hourString}:${minutesString}:00`,
+ start: `${timeString}`,
+ end: `${timeObject.date} ${hourString}:${minutesString}:00`,
title: 'New Event',
color: '#ffffff'
};
@@ -141,11 +140,11 @@ export default class TimelineCalendarScreen extends Component {
};
render() {
- const {events, newEvent} = this.state;
+ const {currentDate, events, newEvent} = this.state;
const timelineEvents = newEvent ? [...events, newEvent] : events;
return (
e}
events={timelineEvents.filter(event => sameDate(new XDate(event.start), new XDate(this.state.currentDate)))}
diff --git a/src/timeline/Timeline.tsx b/src/timeline/Timeline.tsx
index 46ca1266dc..28c3f01f25 100644
--- a/src/timeline/Timeline.tsx
+++ b/src/timeline/Timeline.tsx
@@ -13,6 +13,13 @@ import NowIndicator from './NowIndicator';
const {width: dimensionWidth} = Dimensions.get('window');
export interface TimelineProps {
+ /**
+ * The date of this timeline instance in ISO format (e.g. 2011-10-25)
+ */
+ date?: string;
+ /**
+ * List of events to display in this timeline
+ */
events: Event[];
/**
* The timeline day start time
@@ -33,10 +40,12 @@ export interface TimelineProps {
onEventPress?: (event: Event) => void;
/**
* Pass to handle creation of a new event by long press on the timeline background
+ * NOTE: If passed, the date prop will be included in the returned time string (e.g. 2017-09-06 01:30:00)
*/
onBackgroundLongPress?: TimelineHoursProps['onBackgroundLongPress'];
/**
* Pass to handle creation of a new event by long press out on the timeline background
+ * NOTE: If passed, the date prop will be included in the returned time string (e.g. 2017-09-06 01:30:00)
*/
onBackgroundLongPressOut?: TimelineHoursProps['onBackgroundLongPressOut'];
styles?: Theme; //TODO: deprecate (prop renamed 'theme', as in the other components).
@@ -61,6 +70,7 @@ const Timeline = (props: TimelineProps) => {
format24h = true,
start = 0,
end = 24,
+ date,
events = [],
onEventPress,
onBackgroundLongPress,
@@ -139,6 +149,7 @@ const Timeline = (props: TimelineProps) => {
void;
- onBackgroundLongPressOut?: (timeString: string, time: {hour: number; minutes: number}) => void;
+ onBackgroundLongPress?: (timeString: string, time: NewEventTime) => void;
+ onBackgroundLongPressOut?: (timeString: string, time: NewEventTime) => void;
styles: {[key: string]: ViewStyle | TextStyle};
}
const TimelineHours = (props: TimelineHoursProps) => {
- const {format24h, start = 0, end = 24, styles, onBackgroundLongPress, onBackgroundLongPressOut} = props;
+ const {format24h, start = 0, end = 24, date, styles, onBackgroundLongPress, onBackgroundLongPressOut} = props;
const lastLongPressEventTime = useRef();
// const offset = this.calendarHeight / (end - start);
@@ -52,22 +54,22 @@ const TimelineHours = (props: TimelineHoursProps) => {
const yPosition = event.nativeEvent.locationY;
const {hour, minutes} = calcTimeByPosition(yPosition, HOUR_BLOCK_HEIGHT);
- lastLongPressEventTime.current = {hour, minutes};
+ lastLongPressEventTime.current = {hour, minutes, date};
- const timeString = buildTimeString(hour, minutes);
+ const timeString = buildTimeString(hour, minutes, date);
onBackgroundLongPress?.(timeString, lastLongPressEventTime.current);
},
- [onBackgroundLongPress]
+ [onBackgroundLongPress, date]
);
const handlePressOut = useCallback(() => {
if (lastLongPressEventTime.current) {
- const {hour, minutes} = lastLongPressEventTime.current;
- const timeString = buildTimeString(hour, minutes);
+ const {hour, minutes, date} = lastLongPressEventTime.current;
+ const timeString = buildTimeString(hour, minutes, date);
onBackgroundLongPressOut?.(timeString, lastLongPressEventTime.current);
lastLongPressEventTime.current = undefined;
}
- }, [onBackgroundLongPressOut]);
+ }, [onBackgroundLongPressOut, date]);
return (
<>
diff --git a/src/timeline/__tests__/presenter.spec.js b/src/timeline/__tests__/presenter.spec.js
index 925cdef27f..1f9e0ff8d4 100644
--- a/src/timeline/__tests__/presenter.spec.js
+++ b/src/timeline/__tests__/presenter.spec.js
@@ -62,5 +62,10 @@ describe('timeline presenter', () => {
expect(uut.buildTimeString(undefined, 30)).toBe('00:30:00');
expect(uut.buildTimeString(9, undefined)).toBe('09:00:00');
});
+
+ it('should concatenate date when passed', () => {
+ expect(uut.buildTimeString(10, 30, '2022-12-23')).toBe('2022-12-23 10:30:00');
+ expect(uut.buildTimeString(15, 0, '2017-03-05')).toBe('2017-03-05 15:00:00');
+ });
});
});
diff --git a/src/timeline/helpers/presenter.ts b/src/timeline/helpers/presenter.ts
index 1b1c776c82..0cf570add5 100644
--- a/src/timeline/helpers/presenter.ts
+++ b/src/timeline/helpers/presenter.ts
@@ -7,6 +7,6 @@ export function calcTimeByPosition(yPosition: number, hourBlockHeight: number) {
return {hour, minutes};
}
-export function buildTimeString(hour = 0, minutes = 0) {
- return `${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+export function buildTimeString(hour = 0, minutes = 0, date = '') {
+ return `${date} ${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`.trimStart();
}