feat(infiniteAgendaList): add the ability to set item height per item (…

…#2515) * feat(infiniteAgendaList): add the ability to set item height per item * Update infiniteAgendaList.tsx * add example * Fix PR comment * Rename itemType to itemCustomHeightType
wix · Sep 11, 2024 · 7bc7398 · 7bc7398
1 parent 6b091db
commit 7bc7398
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 9 deletions.
diff --git a/example/src/mocks/agendaItems.ts b/example/src/mocks/agendaItems.ts
@@ -28,7 +28,7 @@ function getPastDate(numberOfDays: number) {
 export const agendaItems = [
   {
     title: dates[0],
-    data: [{hour: '12am', duration: '1h', title: 'First Yoga'}]
+    data: [{hour: '12am', duration: '1h', title: 'First Yoga'}, {hour: '9am', duration: '1h', title: 'Long Yoga', itemCustomHeightType: 'LongEvent'}],
   },
   {
     title: dates[1],
@@ -63,13 +63,13 @@ export const agendaItems = [
     ]
   },
   {
-    title: dates[6], 
+    title: dates[6],
     data: [
       {hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}
     ]
   },
   {
-    title: dates[7], 
+    title: dates[7],
     data: [{}]
   },
   {
@@ -90,7 +90,7 @@ export const agendaItems = [
     ]
   },
   {
-    title: dates[10], 
+    title: dates[10],
     data: [
       {hour: '12am', duration: '1h', title: 'Last Yoga'}
     ]
@@ -104,13 +104,13 @@ export const agendaItems = [
     ]
   },
   {
-    title: dates[12], 
+    title: dates[12],
     data: [
       {hour: '12am', duration: '1h', title: 'Last Yoga'}
     ]
   },
   {
-    title: dates[13], 
+    title: dates[13],
     data: [
       {hour: '12am', duration: '1h', title: 'Last Yoga'}
     ]

diff --git a/example/src/screens/agendaInfiniteListScreen.tsx b/example/src/screens/agendaInfiniteListScreen.tsx
@@ -0,0 +1,81 @@
+import React, {useRef, useCallback} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {ExpandableCalendar, AgendaList, CalendarProvider, WeekCalendar} from 'react-native-calendars';
+import testIDs from '../testIDs';
+import {agendaItems, getMarkedDates} from '../mocks/agendaItems';
+import AgendaItem from '../mocks/AgendaItem';
+import {getTheme, themeColor, lightThemeColor} from '../mocks/theme';
+
+const leftArrowIcon = require('../img/previous.png');
+const rightArrowIcon = require('../img/next.png');
+const ITEMS: any[] = agendaItems;
+
+interface Props {
+  weekView?: boolean;
+}
+
+const AgendaInfiniteListScreen = (props: Props) => {
+  const {weekView} = props;
+  const marked = useRef(getMarkedDates());
+  const theme = useRef(getTheme());
+  const todayBtnTheme = useRef({
+    todayButtonTextColor: themeColor
+  });
+
+  const renderItem = useCallback(({item}: any) => {
+    const isLongItem = item.itemCustomHeightType === 'LongEvent';
+    return <View style={{paddingTop: isLongItem ? 40 : 0}}><AgendaItem item={item}/></View>;
+  }, []);
+
+  return (
+    <CalendarProvider
+      date={ITEMS[1]?.title}
+      showTodayButton
+      theme={todayBtnTheme.current}
+    >
+      {weekView ? (
+        <WeekCalendar testID={testIDs.weekCalendar.CONTAINER} firstDay={1} markedDates={marked.current}/>
+      ) : (
+        <ExpandableCalendar
+          testID={testIDs.expandableCalendar.CONTAINER}
+          theme={theme.current}
+          firstDay={1}
+          markedDates={marked.current}
+          leftArrowImageSource={leftArrowIcon}
+          rightArrowImageSource={rightArrowIcon}
+        />
+      )}
+      <AgendaList
+        sections={ITEMS}
+        renderItem={renderItem}
+        sectionStyle={styles.section}
+        infiniteListProps={
+          {
+            itemHeight: 80,
+            titleHeight: 50,
+            itemHeightByType: {
+              LongEvent: 120,
+            }
+          }
+        }
+      />
+    </CalendarProvider>
+  );
+};
+
+export default AgendaInfiniteListScreen;
+
+const styles = StyleSheet.create({
+  calendar: {
+    paddingLeft: 20,
+    paddingRight: 20
+  },
+  header: {
+    backgroundColor: 'lightgrey'
+  },
+  section: {
+    backgroundColor: lightThemeColor,
+    color: 'grey',
+    textTransform: 'capitalize'
+  }
+});
diff --git a/example/src/screens/index.ts b/example/src/screens/index.ts
@@ -4,6 +4,7 @@ import MenuScreen from './menuScreen';
 import CalendarScreen from './calendarScreen';
 import CalendarPlaygroundScreen from './calendarPlaygroundScreen';
 import AgendaScreen from './agendaScreen';
+import AgendaInfiniteListScreen from './agendaInfiniteListScreen';
 import CalendarsListScreen from './calendarListScreen';
 import NewCalendarsListScreen from './newCalendarListScreen';
 import ExpandableCalendarScreen from './expandableCalendarScreen';
@@ -16,6 +17,7 @@ export function registerScreens() {
   Navigation.registerComponent('CalendarScreen', () => CalendarScreen);
   Navigation.registerComponent('CalendarPlaygroundScreen', () => CalendarPlaygroundScreen);
   Navigation.registerComponent('AgendaScreen', () => AgendaScreen);
+  Navigation.registerComponent('AgendaInfiniteListScreen', () => AgendaInfiniteListScreen);
   Navigation.registerComponent('CalendarListScreen', () => CalendarsListScreen);
   Navigation.registerComponent('NewCalendarListScreen', () => NewCalendarsListScreen);
   Navigation.registerComponent('ExpandableCalendarScreen', () => ExpandableCalendarScreen);

diff --git a/example/src/screens/menuScreen.tsx b/example/src/screens/menuScreen.tsx
@@ -14,7 +14,7 @@ interface Props {
 const MenuScreen = (props: Props) => {
   const {componentId} = props;
   const [forceRTL, setForceRTL] = useState(false);
-  
+
   const toggleRTL = (value) => {
     I18nManager.forceRTL(value);
     setForceRTL(value);
@@ -67,6 +67,7 @@ const MenuScreen = (props: Props) => {
         {renderEntry(testIDs.menu.HORIZONTAL_LIST, 'Horizontal Calendar List', 'CalendarListScreen', {horizontalView: true})}
         {renderEntry(testIDs.menu.HORIZONTAL_LIST, 'NEW Calendar List', 'NewCalendarListScreen')}
         {renderEntry(testIDs.menu.AGENDA, 'Agenda', 'AgendaScreen')}
+        {renderEntry(testIDs.menu.AGENDA_INFINITE, 'Agenda Infinite List', 'AgendaInfiniteListScreen')}
         {renderEntry(testIDs.menu.EXPANDABLE_CALENDAR, 'Expandable Calendar', 'ExpandableCalendarScreen')}
         {renderEntry(testIDs.menu.TIMELINE_CALENDAR, 'Timeline Calendar', 'TimelineCalendarScreen')}
         {renderEntry(testIDs.menu.WEEK_CALENDAR, 'Week Calendar', 'ExpandableCalendarScreen', {weekView: true})}

diff --git a/example/src/testIDs.ts b/example/src/testIDs.ts
@@ -5,6 +5,7 @@ export default {
     CALENDAR_LIST: 'calendar_list_btn',
     HORIZONTAL_LIST: 'horizontal_list_btn',
     AGENDA: 'agenda_btn',
+    AGENDA_INFINITE: 'agenda_infinite_btn',
     EXPANDABLE_CALENDAR: 'expandable_calendar_btn',
     WEEK_CALENDAR: 'week_calendar_btn',
     TIMELINE_CALENDAR: 'timeline_calendar_btn',

diff --git a/src/expandableCalendar/AgendaListsCommon.tsx b/src/expandableCalendar/AgendaListsCommon.tsx
@@ -30,6 +30,8 @@ export interface AgendaListProps extends SectionListProps<any, DefaultSectionT>
   infiniteListProps?: {
     itemHeight?: number;
     titleHeight?: number;
+    /** item height by type, require passing itemCustomHeightType in the elements you want to set custom height */
+    itemHeightByType?: Record<string, number>;
     visibleIndicesChangedDebounce?: number;
     renderFooter?: () => React.ReactElement | null;
   };

diff --git a/src/expandableCalendar/infiniteAgendaList.tsx b/src/expandableCalendar/infiniteAgendaList.tsx
@@ -149,10 +149,19 @@ const InfiniteAgendaList = ({
 
   const layoutProvider = useMemo(
     () => new LayoutProvider(
-      (index) => dataRef.current[index]?.isTitle ? 'title': 'page',
+      (index) => dataRef.current[index]?.isTitle ? 'title': dataRef.current[index]?.itemCustomHeightType ?? 'page',
       (type, dim) => {
         dim.width = constants.screenWidth;
-        dim.height = type === 'title' ? infiniteListProps?.titleHeight ?? 60 : infiniteListProps?.itemHeight ?? 80;
+        switch (type) {
+          case 'title':
+            dim.height = infiniteListProps?.titleHeight ?? 60;
+            break;
+          case 'page':
+            dim.height = infiniteListProps?.itemHeight ?? 80;
+            break;
+          default:
+            dim.height = infiniteListProps?.itemHeightByType?.[type] ?? infiniteListProps?.itemHeight ?? 80;
+        }
       }
     ),
     []