Merge pull request #1 from maggialejandro/feature/week

feat: add Week view type

README.md

@@ -35,6 +35,7 @@ yarn add agenda-react-native
 | **`monthTheme`**     | Month component theme                    | no        |         | MonthThemeType         |
 | **`theme`**          | Agenda theme                             | no        |         | ThemeType              |
 | **`locale`**         | Locale                                   | no        |         | LocaleType             |
+| **`viewType`**       | Locale                                   | no        | 'month' | AgendaViewType         |
 | **`firstDayMonday`** | Monday as first day of the week          | no        | false   | boolean                |
 
 ## License

example/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SafeAreaView, useWindowDimensions } from 'react-native';
-import { Agenda, Event, MonthThemeType } from 'react-native-agenda';
+import { Agenda, Event, MonthThemeType } from 'agenda-react-native';
 
 const MONTH_THEME: MonthThemeType = {
   activeDayContentStyle: {
@@ -51,6 +51,30 @@ const events: Event[] = [
     endDate: new Date(2022, 8, 3, 14, 20),
     color: '#fa8100',
   },
+  {
+    name: 'Study 2 ',
+    startDate: new Date(2022, 7, 28, 14, 20),
+    endDate: new Date(2022, 8, 3, 14, 20),
+    color: '#A0E7E5',
+  },
+  {
+    name: 'Study 3',
+    startDate: new Date(2022, 7, 28, 14, 20),
+    endDate: new Date(2022, 8, 3, 14, 20),
+    color: '#B4F8C8',
+  },
+  {
+    name: 'Study 4',
+    startDate: new Date(2022, 7, 28, 14, 20),
+    endDate: new Date(2022, 8, 3, 14, 20),
+    color: '#FBE7C6',
+  },
+  {
+    name: 'Study 5',
+    startDate: new Date(2022, 7, 28, 14, 20),
+    endDate: new Date(2022, 8, 3, 14, 20),
+    color: '#FFAEBC',
+  },
   {
     name: 'Check-in',
     startDate: new Date(2022, 8, 5, 14, 20),

example/package.json

@@ -12,7 +12,7 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.6",
-    "react-native-month": "^1.4.0",
+    "react-native-month": "^1.5.0",
     "react-native-web": "~0.18.9"
   },
   "devDependencies": {

example/tsconfig.json

@@ -6,7 +6,7 @@
       "esnext"
     ],
     "paths": {
-      "react-native-agenda": [
+      "agenda-react-native": [
         "../src/index"
       ]
     },

example/yarn.lock

@@ -8617,10 +8617,10 @@
   "resolved" "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz"
   "version" "0.0.7"
 
-"react-native-month@^1.4.0":
-  "integrity" "sha512-fOtQ6CpsHkGEqRxw1E3SR/OqZskGeIgoIgZj+xorQDlMgATXxPac4sAWqjsB7TrDUz4yi4kGxKONQjYwG+k3fg=="
-  "resolved" "https://registry.npmjs.org/react-native-month/-/react-native-month-1.4.0.tgz"
-  "version" "1.4.0"
+"react-native-month@^1.5.0":
+  "integrity" "sha512-pKJlueHhSZ2D9RnDshsAFkV28Z/IB1E+9/8nStMDJnS/UYfi/tsBbJO42xbKG4jOV0rymymnRD0xZQKOejG0eA=="
+  "resolved" "https://registry.npmjs.org/react-native-month/-/react-native-month-1.5.0.tgz"
+  "version" "1.5.0"
 
 "react-native-web@~0.18.9":
   "integrity" "sha512-BaV5Mpe7u9pN5vTRDW2g+MLh6PbPBJZpXRQM3Jr2cNv7hNa3sxCGh9T+NcW6wOFzf/+USrdrEPI1M9wNyr7vyA=="

package.json

@@ -114,6 +114,6 @@
   },
   "dependencies": {
     "dayjs": "^1.11.5",
-    "react-native-month": "^1.4.0"
+    "react-native-month": "^1.5.0"
   }
 }

src/components/Agenda/Agenda.tsx

@@ -7,6 +7,7 @@ import { Events } from '../Events/Events';
 
 import { viewStyles } from './Agenda.styles';
 import dayjs from 'dayjs';
+import { Week } from '../Week/Week';
 
 export const Agenda = ({
   selectedDay,
@@ -17,46 +18,72 @@ export const Agenda = ({
   renderSectionHeader,
   locale = 'en',
   firstDayMonday = false,
+  viewType = 'month',
 }: AgendaProps) => {
   const sectionListRef = useRef<SectionList>(null);
   const currentDay = useMemo(() => selectedDay ?? new Date(), [selectedDay]);
 
   const onDayPressCallback = useCallback(
     (date: Date) => {
       onDayPress?.(date);
-      const dayIndex = dayjs(date).date() - 1;
+
+      const dayIndex =
+        viewType === 'week'
+          ? firstDayMonday
+            ? dayjs(date).isoWeekday() - 1
+            : date.getDay()
+          : dayjs(date).date() - 1;
 
       sectionListRef.current?.scrollToLocation({
         sectionIndex: dayIndex,
         itemIndex: 1,
         viewPosition: 0,
       });
     },
-    [onDayPress]
+    [firstDayMonday, onDayPress, viewType]
   );
 
-  const { markedDays } = useAgendaEvents(currentDay, events ?? []);
+  const { markedDays } = useAgendaEvents(
+    currentDay,
+    events ?? [],
+    viewType,
+    firstDayMonday
+  );
 
   return (
     <View style={[viewStyles.container, theme?.container]}>
-      <View style={[viewStyles.monthContainer, theme?.monthContainer]}>
-        <Month
-          month={currentDay.getMonth()}
-          year={currentDay.getFullYear()}
-          startDate={currentDay}
-          onPress={onDayPressCallback}
-          markedDays={markedDays}
-          showWeekdays
-          locale={locale}
+      {viewType === 'month' && (
+        <View style={[viewStyles.monthContainer, theme?.monthContainer]}>
+          <Month
+            month={currentDay.getMonth()}
+            year={currentDay.getFullYear()}
+            startDate={currentDay}
+            onPress={onDayPressCallback}
+            markedDays={markedDays}
+            showWeekdays
+            locale={locale}
+            firstDayMonday={firstDayMonday}
+            theme={monthTheme}
+          />
+        </View>
+      )}
+      {viewType === 'week' && (
+        <Week
+          selectedDate={currentDay}
+          monthTheme={monthTheme}
           firstDayMonday={firstDayMonday}
-          theme={monthTheme}
+          locale={locale}
+          markedDays={markedDays}
+          onPress={onDayPressCallback}
         />
-      </View>
+      )}
       <Events
         currentDay={currentDay}
         markedDays={markedDays}
         ref={sectionListRef}
         renderSectionHeader={renderSectionHeader}
+        viewType={viewType}
+        firstDayMonday={firstDayMonday}
       />
     </View>
   );

src/components/Events/Events.hooks.ts

@@ -1,20 +1,30 @@
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import { SectionListData } from 'react-native';
-import { Event, ExtendedMarkedDays } from 'src/types';
+import { AgendaProps, Event, ExtendedMarkedDays } from 'src/types';
 
 export const useMonthEvents = (
   currentDay: Date,
-  markedDays?: ExtendedMarkedDays
+  firstDayMonday: boolean,
+  markedDays?: ExtendedMarkedDays,
+  viewType?: AgendaProps['viewType']
 ) => {
+  const eventDaysCount =
+    viewType === 'week' ? 7 : dayjs(currentDay).daysInMonth();
   const monthDays = useMemo(
-    () => new Array(dayjs(currentDay).daysInMonth()).fill(true),
-    [currentDay]
+    () => new Array(eventDaysCount).fill(true),
+    [eventDaysCount]
   );
 
+  const startWeekType = firstDayMonday ? 'isoWeek' : 'week';
+  const weekStartDay = dayjs(currentDay).startOf(startWeekType);
+
   const sections: SectionListData<Event>[] = useMemo(() => {
     return monthDays.map((_, index): SectionListData<Event> => {
-      const day = dayjs(currentDay).date(index + 1);
+      const day =
+        viewType === 'week'
+          ? weekStartDay.add(index, 'day')
+          : dayjs(currentDay).date(index + 1);
       const key = day.format('YYYY-MM-DD');
       let data: Event[] = [];
 
@@ -28,7 +38,7 @@ export const useMonthEvents = (
         title: day.format('ddd, MMM D'),
       };
     });
-  }, [currentDay, markedDays, monthDays]);
+  }, [currentDay, markedDays, monthDays, viewType, weekStartDay]);
 
   return sections;
 };

src/components/Events/Events.tsx

@@ -1,7 +1,12 @@
 import dayjs from 'dayjs';
 import React, { forwardRef, Ref, useCallback } from 'react';
 import { SectionList, SectionListProps, Text, View } from 'react-native';
-import { Event as Event, ExtendedMarkedDays, ThemeType } from 'src/types';
+import {
+  AgendaProps,
+  Event as Event,
+  ExtendedMarkedDays,
+  ThemeType,
+} from 'src/types';
 import { EventItem } from '../EventItem/EventItem';
 import { Line } from '../Line/Line';
 import { useMonthEvents } from './Events.hooks';
@@ -14,6 +19,8 @@ type EventsProps = {
   onEventPress?: (event: Event) => void;
   renderSectionHeader?: SectionListProps<Event>['renderSectionHeader'];
   theme?: ThemeType;
+  viewType: AgendaProps['viewType'];
+  firstDayMonday: boolean;
 };
 
 const keyExtractor = (item: Event, index: number) => `${item.name}-${index}`;
@@ -26,10 +33,17 @@ export const Events = forwardRef(
       onEventPress,
       renderSectionHeader,
       theme,
+      viewType,
+      firstDayMonday,
     }: EventsProps,
     ref: Ref<SectionList>
   ) => {
-    const sections = useMonthEvents(currentDay, markedDays);
+    const sections = useMonthEvents(
+      currentDay,
+      firstDayMonday,
+      markedDays,
+      viewType
+    );
 
     const renderEvent = useCallback(
       ({ item: event }) => {

src/components/Week/Week.hooks.ts

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs';
+import { DayType } from 'react-native-month/lib/typescript/src/types';
+
+export const useWeekDays = (
+  selectedDate: Date,
+  firstDayMonday: boolean
+): DayType[] => {
+  const days: DayType[] = [];
+
+  const startWeekType = firstDayMonday ? 'isoWeek' : 'week';
+  const startOfWeek = dayjs(selectedDate).startOf(startWeekType);
+
+  for (let index = 0; index < 7; index++) {
+    const currentDay = startOfWeek.add(index, 'day');
+    const dow = currentDay.day();
+    const isActive = currentDay.isSame(selectedDate);
+
+    days.push({
+      key: currentDay.format('YYYY-MM-DD'),
+      id: currentDay.format('YYYY-MM-DD'),
+      date: currentDay.toDate(),
+      isToday: currentDay.isSame(dayjs()),
+      isWeekend: dow === 6 || dow === 0,
+      isMonthDate: true,
+      isActive,
+      isStartDate: isActive,
+      isEndDate: isActive,
+      isOutOfRange: false,
+      isVisible: true,
+      isHidden: false,
+    });
+  }
+
+  return days;
+};

src/components/Week/Week.styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+import { spacing } from '../../constants/spacing';
+
+export const viewStyles = StyleSheet.create({
+  weekContainer: {
+    flexDirection: 'row',
+    marginBottom: spacing.small,
+  },
+});