Timeline: Enable Custom Time Intervals and Dynamic Cell Sizing

example/src/mocks/AgendaItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ItemProps {
+    item: any;
+}
+declare const _default: React.MemoExoticComponent<(props: ItemProps) => React.JSX.Element>;
+export default _default;

example/src/mocks/AgendaItem.js

@@ -0,0 +1,72 @@
+import isEmpty from 'lodash/isEmpty';
+import React, {useCallback} from 'react';
+import {StyleSheet, Alert, View, Text, TouchableOpacity, Button} from 'react-native';
+import testIDs from '../testIDs';
+const AgendaItem = props => {
+  const {item} = props;
+  const buttonPressed = useCallback(() => {
+    Alert.alert('Show me more');
+  }, []);
+  const itemPressed = useCallback(() => {
+    Alert.alert(item.title);
+  }, []);
+  if (isEmpty(item)) {
+    return (
+      <View style={styles.emptyItem}>
+        <Text style={styles.emptyItemText}>No Events Planned Today</Text>
+      </View>
+    );
+  }
+  return (
+    <TouchableOpacity onPress={itemPressed} style={styles.item} testID={testIDs.agenda.ITEM}>
+      <View>
+        <Text style={styles.itemHourText}>{item.hour}</Text>
+        <Text style={styles.itemDurationText}>{item.duration}</Text>
+      </View>
+      <Text style={styles.itemTitleText}>{item.title}</Text>
+      <View style={styles.itemButtonContainer}>
+        <Button color={'grey'} title={'Info'} onPress={buttonPressed} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+export default React.memo(AgendaItem);
+const styles = StyleSheet.create({
+  item: {
+    padding: 20,
+    backgroundColor: 'white',
+    borderBottomWidth: 1,
+    borderBottomColor: 'lightgrey',
+    flexDirection: 'row'
+  },
+  itemHourText: {
+    color: 'black'
+  },
+  itemDurationText: {
+    color: 'grey',
+    fontSize: 12,
+    marginTop: 4,
+    marginLeft: 4
+  },
+  itemTitleText: {
+    color: 'black',
+    marginLeft: 16,
+    fontWeight: 'bold',
+    fontSize: 16
+  },
+  itemButtonContainer: {
+    flex: 1,
+    alignItems: 'flex-end'
+  },
+  emptyItem: {
+    paddingLeft: 20,
+    height: 52,
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: 'lightgrey'
+  },
+  emptyItemText: {
+    color: 'lightgrey',
+    fontSize: 14
+  }
+});

example/src/mocks/agendaItems.d.ts

@@ -0,0 +1,19 @@
+import { MarkedDates } from '../../../src/types';
+export declare const agendaItems: ({
+    title: string;
+    data: ({
+        hour: string;
+        duration: string;
+        title: string;
+        itemCustomHeightType?: undefined;
+    } | {
+        hour: string;
+        duration: string;
+        title: string;
+        itemCustomHeightType: string;
+    })[];
+} | {
+    title: string;
+    data: {}[];
+})[];
+export declare function getMarkedDates(): MarkedDates;

example/src/mocks/agendaItems.js

@@ -0,0 +1,121 @@
+import isEmpty from 'lodash/isEmpty';
+const today = new Date().toISOString().split('T')[0];
+const fastDate = getPastDate(3);
+const futureDates = getFutureDates(12);
+const dates = [fastDate, today].concat(futureDates);
+function getFutureDates(numberOfDays) {
+  const array = [];
+  for (let index = 1; index <= numberOfDays; index++) {
+    let d = Date.now();
+    if (index > 8) {
+      // set dates on the next month
+      const newMonth = new Date(d).getMonth() + 1;
+      d = new Date(d).setMonth(newMonth);
+    }
+    const date = new Date(d + 864e5 * index); // 864e5 == 86400000 == 24*60*60*1000
+    const dateString = date.toISOString().split('T')[0];
+    array.push(dateString);
+  }
+  return array;
+}
+function getPastDate(numberOfDays) {
+  return new Date(Date.now() - 864e5 * numberOfDays).toISOString().split('T')[0];
+}
+export const agendaItems = [
+  {
+    title: dates[0],
+    data: [
+      {hour: '12am', duration: '1h', title: 'First Yoga'},
+      {hour: '9am', duration: '1h', title: 'Long Yoga', itemCustomHeightType: 'LongEvent'}
+    ]
+  },
+  {
+    title: dates[1],
+    data: [
+      {hour: '4pm', duration: '1h', title: 'Pilates ABC'},
+      {hour: '5pm', duration: '1h', title: 'Vinyasa Yoga'}
+    ]
+  },
+  {
+    title: dates[2],
+    data: [
+      {hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'},
+      {hour: '2pm', duration: '1h', title: 'Deep Stretches'},
+      {hour: '3pm', duration: '1h', title: 'Private Yoga'}
+    ]
+  },
+  {
+    title: dates[3],
+    data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}]
+  },
+  {
+    title: dates[4],
+    data: [{}]
+  },
+  {
+    title: dates[5],
+    data: [
+      {hour: '9pm', duration: '1h', title: 'Middle Yoga'},
+      {hour: '10pm', duration: '1h', title: 'Ashtanga'},
+      {hour: '11pm', duration: '1h', title: 'TRX'},
+      {hour: '12pm', duration: '1h', title: 'Running Group'}
+    ]
+  },
+  {
+    title: dates[6],
+    data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}]
+  },
+  {
+    title: dates[7],
+    data: [{}]
+  },
+  {
+    title: dates[8],
+    data: [
+      {hour: '9pm', duration: '1h', title: 'Pilates Reformer'},
+      {hour: '10pm', duration: '1h', title: 'Ashtanga'},
+      {hour: '11pm', duration: '1h', title: 'TRX'},
+      {hour: '12pm', duration: '1h', title: 'Running Group'}
+    ]
+  },
+  {
+    title: dates[9],
+    data: [
+      {hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'},
+      {hour: '2pm', duration: '1h', title: 'Deep Stretches'},
+      {hour: '3pm', duration: '1h', title: 'Private Yoga'}
+    ]
+  },
+  {
+    title: dates[10],
+    data: [{hour: '12am', duration: '1h', title: 'Last Yoga'}]
+  },
+  {
+    title: dates[11],
+    data: [
+      {hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'},
+      {hour: '2pm', duration: '1h', title: 'Deep Stretches'},
+      {hour: '3pm', duration: '1h', title: 'Private Yoga'}
+    ]
+  },
+  {
+    title: dates[12],
+    data: [{hour: '12am', duration: '1h', title: 'Last Yoga'}]
+  },
+  {
+    title: dates[13],
+    data: [{hour: '12am', duration: '1h', title: 'Last Yoga'}]
+  }
+];
+export function getMarkedDates() {
+  const marked = {};
+  agendaItems.forEach(item => {
+    // NOTE: only mark dates with data
+    if (item.data && item.data.length > 0 && !isEmpty(item.data[0])) {
+      marked[item.title] = {marked: true};
+    } else {
+      marked[item.title] = {disabled: true};
+    }
+  });
+  return marked;
+}

example/src/mocks/theme.d.ts

@@ -0,0 +1,34 @@
+export declare const themeColor = "#00AAAF";
+export declare const lightThemeColor = "#f2f7f7";
+export declare function getTheme(): {
+    arrowColor: string;
+    arrowStyle: {
+        padding: number;
+    };
+    expandableKnobColor: string;
+    monthTextColor: string;
+    textMonthFontSize: number;
+    textMonthFontFamily: string;
+    textMonthFontWeight: "bold";
+    textSectionTitleColor: string;
+    textDayHeaderFontSize: number;
+    textDayHeaderFontFamily: string;
+    textDayHeaderFontWeight: "normal";
+    dayTextColor: string;
+    todayTextColor: string;
+    textDayFontSize: number;
+    textDayFontFamily: string;
+    textDayFontWeight: "500";
+    textDayStyle: {
+        marginTop: number;
+    };
+    selectedDayBackgroundColor: string;
+    selectedDayTextColor: string;
+    textDisabledColor: string;
+    dotColor: string;
+    selectedDotColor: string;
+    disabledDotColor: string;
+    dotStyle: {
+        marginTop: number;
+    };
+};

example/src/mocks/theme.js

@@ -0,0 +1,40 @@
+import {Platform} from 'react-native';
+export const themeColor = '#00AAAF';
+export const lightThemeColor = '#f2f7f7';
+export function getTheme() {
+  const disabledColor = 'grey';
+  return {
+    // arrows
+    arrowColor: 'black',
+    arrowStyle: {padding: 0},
+    // knob
+    expandableKnobColor: themeColor,
+    // month
+    monthTextColor: 'black',
+    textMonthFontSize: 16,
+    textMonthFontFamily: 'HelveticaNeue',
+    textMonthFontWeight: 'bold',
+    // day names
+    textSectionTitleColor: 'black',
+    textDayHeaderFontSize: 12,
+    textDayHeaderFontFamily: 'HelveticaNeue',
+    textDayHeaderFontWeight: 'normal',
+    // dates
+    dayTextColor: themeColor,
+    todayTextColor: '#af0078',
+    textDayFontSize: 18,
+    textDayFontFamily: 'HelveticaNeue',
+    textDayFontWeight: '500',
+    textDayStyle: {marginTop: Platform.OS === 'android' ? 2 : 4},
+    // selected date
+    selectedDayBackgroundColor: themeColor,
+    selectedDayTextColor: 'white',
+    // disabled date
+    textDisabledColor: disabledColor,
+    // dot (marked date)
+    dotColor: themeColor,
+    selectedDotColor: 'white',
+    disabledDotColor: disabledColor,
+    dotStyle: {marginTop: -2}
+  };
+}

example/src/mocks/timelineEvents.d.ts

@@ -0,0 +1,3 @@
+import { TimelineEventProps } from 'react-native-calendars';
+export declare const getDate: (offset?: number) => any;
+export declare const timelineEvents: TimelineEventProps[];