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(); }