refactor: refactoring code

README.md

@@ -54,6 +54,7 @@ $ npx expo install react-native-gesture-handler react-native-reanimated
 - [ ] Drag/drop to edit event
 - [ ] Update documentation
 - [ ] Support all day events
+- [ ] Month View
 - [ ] Support RTL
 
 [npm-shield]: https://img.shields.io/npm/v/@howljs/calendar-kit

example/app/(drawer)/index.tsx

@@ -2,7 +2,7 @@ import CalendarKit, {
   OutOfRangeProps,
   type CalendarKitHandle,
   type CalendarViewMode,
-  type LocaleConfigs,
+  type LocaleConfigsProps,
 } from '@howljs/calendar-kit';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
@@ -39,7 +39,7 @@ const INITIAL_DATE = new Date(
   new Date().getDate()
 ).toISOString();
 
-const initialLocales: Record<string, LocaleConfigs> = {
+const initialLocales: Record<string, LocaleConfigsProps> = {
   en: {
     weekDayShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
     meridiem: { ante: 'am', post: 'pm' },

example/package.json

@@ -11,11 +11,10 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
     "@react-navigation/drawer": "^6.6.11",
-    "@shopify/react-native-skia": "1.2.3",
-    "@tanstack/react-query": "^5.29.2",
     "axios": "^1.6.7",
     "expo": "^51.0.2",
     "expo-constants": "~16.0.1",
+    "expo-haptics": "^13.0.1",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.11",
     "expo-secure-store": "~13.0.1",
@@ -29,8 +28,7 @@
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.6",
-    "react-native-webview": "13.8.6",
-    "zustand": "^4.5.2"
+    "react-native-webview": "13.8.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package.json

@@ -69,12 +69,14 @@
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "expo-haptics": "^13.0.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-native": "0.73.4",
     "react-native-builder-bob": "^0.20.0",
     "react-native-gesture-handler": "^2.14.0",
+    "react-native-haptic-feedback": "^2.3.1",
     "react-native-reanimated": "^3.6.2",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
@@ -83,11 +85,21 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
+    "expo-haptics": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=1.10.1",
+    "react-native-haptic-feedback": "*",
     "react-native-reanimated": ">=2.2.0"
   },
+  "peerDependenciesMeta": {
+    "expo-haptics": {
+      "optional": true
+    },
+    "react-native-haptic-feedback": {
+      "optional": true
+    }
+  },
   "workspaces": [
     "example",
     "server"

src/CalendarBody.tsx

@@ -9,13 +9,13 @@ import {
 } from 'react-native';
 import { GestureDetector, ScrollView } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useCalendar } from './CalendarProvider';
 import BodyItem from './components/BodyItem';
 import CalendarListView from './components/CalendarListView';
 import TimeColumn from './components/TimeColumn';
 import { EXTRA_HEIGHT, MILLISECONDS_IN_DAY, ScrollType } from './constants';
 import { useActions } from './context/ActionsProvider';
 import { BodyContext, type BodyContextProps } from './context/BodyContext';
-import { useCalendar } from './context/CalendarProvider';
 import usePinchToZoom from './hooks/usePinchToZoom';
 import useSyncedList from './hooks/useSyncedList';
 import type { CalendarBodyProps } from './types';
@@ -67,6 +67,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
     snapToInterval,
     calendarListRef,
     startOffset,
+    scrollVisibleHeightAnim,
   } = useCalendar();
 
   const { onRefresh } = useActions();
@@ -75,6 +76,49 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
     id: ScrollType.calendarGrid,
   });
 
+  const animContentStyle = useAnimatedStyle(() => ({
+    height: timelineHeight.value,
+  }));
+
+  const { pinchGesture, pinchGestureRef } = usePinchToZoom();
+
+  const _onLayout = (event: LayoutChangeEvent) => {
+    scrollVisibleHeight.current = event.nativeEvent.layout.height;
+    scrollVisibleHeightAnim.value = event.nativeEvent.layout.height;
+  };
+
+  const _onRefresh = useCallback(() => {
+    if (onRefresh) {
+      const date = parseDateTime(visibleDateUnix.current);
+      onRefresh(dateTimeToISOString(date));
+    }
+  }, [onRefresh, visibleDateUnix]);
+
+  const extraWidth = numberOfDays > 1 ? hourWidth : 0;
+
+  const extraData = useMemo(() => {
+    return {
+      minDate: calendarData.minDateUnix,
+      isRTL,
+      numberOfDays,
+    };
+  }, [calendarData.minDateUnix, isRTL, numberOfDays]);
+
+  const _renderTimeSlots = useCallback(
+    (index: number, extra: typeof extraData) => {
+      let totalColumns = extra.numberOfDays === 1 ? 1 : 7;
+      const dateUnixByIndex =
+        extra.minDate + index * totalColumns * MILLISECONDS_IN_DAY;
+
+      return <BodyItem startUnix={dateUnixByIndex} />;
+    },
+    []
+  );
+
+  const _onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    offsetY.value = e.nativeEvent.contentOffset.y;
+  };
+
   const value = useMemo<BodyContextProps>(
     () => ({
       renderHour,
@@ -148,48 +192,6 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
     ]
   );
 
-  const animContentStyle = useAnimatedStyle(() => ({
-    height: timelineHeight.value,
-  }));
-
-  const { pinchGesture, pinchGestureRef } = usePinchToZoom();
-
-  const _onLayout = (event: LayoutChangeEvent) => {
-    scrollVisibleHeight.current = event.nativeEvent.layout.height;
-  };
-
-  const _onRefresh = useCallback(() => {
-    if (onRefresh) {
-      const date = parseDateTime(visibleDateUnix.current);
-      onRefresh(dateTimeToISOString(date));
-    }
-  }, [onRefresh, visibleDateUnix]);
-
-  const extraWidth = numberOfDays > 1 ? hourWidth : 0;
-
-  const extraData = useMemo(() => {
-    return {
-      minDate: calendarData.minDateUnix,
-      isRTL,
-      numberOfDays,
-    };
-  }, [calendarData.minDateUnix, isRTL, numberOfDays]);
-
-  const _renderTimeSlots = useCallback(
-    (index: number, extra: typeof extraData) => {
-      let totalColumns = extra.numberOfDays === 1 ? 1 : 7;
-      const dateUnixByIndex =
-        extra.minDate + index * totalColumns * MILLISECONDS_IN_DAY;
-
-      return <BodyItem startUnix={dateUnixByIndex} />;
-    },
-    []
-  );
-
-  const _onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    offsetY.value = e.nativeEvent.contentOffset.y;
-  };
-
   return (
     <View style={styles.container}>
       <GestureDetector gesture={pinchGesture}>

src/CalendarDayBar.tsx

@@ -10,7 +10,7 @@ import MultiDayBarItem from './components/MultiDayBarItem';
 import SingleDayBarItem from './components/SingleDayBarItem';
 import WeekNumber from './components/WeekNumber';
 import { DAY_BAR_HEIGHT, MILLISECONDS_IN_DAY, ScrollType } from './constants';
-import { useCalendar } from './context/CalendarProvider';
+import { useCalendar } from './CalendarProvider';
 import {
   DayBarContext,
   type DayBarContextProps,

src/CalendarKit.tsx

@@ -4,15 +4,15 @@ import React, {
   type PropsWithChildren,
   type RefAttributes,
 } from 'react';
-import CalendarProvider from './context/CalendarProvider';
 import CalendarBody from './CalendarBody';
 import CalendarDayBar from './CalendarDayBar';
+import CalendarProvider from './CalendarProvider';
 import LayoutProvider from './context/LayoutProvider';
 import type {
   CalendarBodyProps,
+  CalendarDayBarProps,
   CalendarKitHandle,
   CalendarProviderProps,
-  CalendarDayBarProps,
 } from './types';
 
 type CalendarKitProps = CalendarProviderProps &

src/context/CalendarProvider.tsx → src/CalendarProvider.tsx

@@ -17,7 +17,7 @@ import Animated, {
   type AnimatedRef,
   type SharedValue,
 } from 'react-native-reanimated';
-import { CalendarListViewHandle } from '../components/CalendarListView';
+import { CalendarListViewHandle } from './components/CalendarListView';
 import {
   HOUR_WIDTH,
   INITIAL_DATE,
@@ -26,35 +26,35 @@ import {
   MIN_DATE,
   NUMBER_OF_DAYS,
   ScrollType,
-} from '../constants';
-import useLatestCallback from '../hooks/useLatestCallback';
-import useLazyRef from '../hooks/useLazyRef';
+} from './constants';
+import ActionsProvider from './context/ActionsProvider';
+import EventsProvider from './context/EventsProvider';
+import HighlightDatesProvider from './context/HighlightDatesProvider';
+import { useLayout } from './context/LayoutProvider';
+import { LoadingContext } from './context/LoadingContext';
+import LocaleProvider from './context/LocaleProvider';
+import NowIndicatorProvider from './context/NowIndicatorProvider';
+import ThemeProvider from './context/ThemeProvider';
+import TimeZoneProvider from './context/TimeZoneProvider';
+import UnavailableHoursProvider from './context/UnavailableHoursProvider';
+import VisibleDateProvider from './context/VisibleDateProvider';
+import useLatestCallback from './hooks/useLatestCallback';
+import useLazyRef from './hooks/useLazyRef';
 import type {
   CalendarKitHandle,
   CalendarProviderProps,
   CalendarViewMode,
   DateType,
   GoToDateOptions,
-} from '../types';
-// import Haptic from '../utils/HapticService';
-import { parseDateTime, startOfWeek } from '../utils/dateUtils';
+} from './types';
+import { parseDateTime, startOfWeek } from './utils/dateUtils';
+import Haptic from './utils/HapticService';
 import {
   calculateSlots,
   clampValues,
   prepareCalendarRange,
   type DataByMode,
-} from '../utils/utils';
-import ActionsProvider from './ActionsProvider';
-import EventsProvider from './EventsProvider';
-import HighlightDatesProvider from './HighlightDatesProvider';
-import { useLayout } from './LayoutProvider';
-import { LoadingContext } from './LoadingContext';
-import LocaleProvider from './LocaleProvider';
-import NowIndicatorProvider from './NowIndicatorProvider';
-import ThemeProvider from './ThemeProvider';
-import TimeZoneProvider from './TimeZoneProvider';
-import UnavailableHoursProvider from './UnavailableHoursProvider';
-import VisibleDateProvider from './VisibleDateProvider';
+} from './utils/utils';
 
 Settings.throwOnInvalid = true;
 
@@ -101,6 +101,7 @@ export interface CalendarContextProps {
   visibleDateUnixAnim: SharedValue<number>;
   calendarListRef: React.RefObject<CalendarListViewHandle>;
   startOffset: Readonly<SharedValue<number>>;
+  scrollVisibleHeightAnim: SharedValue<number>;
 }
 
 export const CalendarContext = React.createContext<
@@ -148,11 +149,10 @@ const CalendarProvider: React.ForwardRefRenderFunction<
     onPressEvent,
     numberOfDays = NUMBER_OF_DAYS[viewMode] || 7,
     scrollToNow = true,
+    useHaptic = false,
   },
   ref
 ) => {
-  // TODO: Implement haptic feedback
-  // const useHaptic = false;
   // TODO: Implement all day events
   const useAllDayEvent = false;
   // TODO: Implement RTL
@@ -172,6 +172,10 @@ const CalendarProvider: React.ForwardRefRenderFunction<
     [initialHourWidth]
   );
 
+  useEffect(() => {
+    Haptic.setEnabled(useHaptic);
+  }, [useHaptic]);
+
   const calendarData = useMemo(
     () =>
       prepareCalendarRange({
@@ -247,6 +251,7 @@ const CalendarProvider: React.ForwardRefRenderFunction<
   const columnWidthAnim = useSharedValue(columnWidth);
   const offsetY = useSharedValue(0);
   const offsetX = useSharedValue(0);
+  const scrollVisibleHeightAnim = useSharedValue(0);
   const timeIntervalHeight = useSharedValue(initialTimeIntervalHeight);
 
   const totalSlots = hours.length;
@@ -490,10 +495,6 @@ const CalendarProvider: React.ForwardRefRenderFunction<
   const snapToInterval =
     numberOfDays > 1 && scrollByDay ? columnWidth : undefined;
 
-  // useEffect(() => {
-  //   Haptic.setEnabled(useHaptic);
-  // }, [useHaptic]);
-
   const context = useMemo<CalendarContextProps>(
     () => ({
       calendarLayout,
@@ -539,6 +540,7 @@ const CalendarProvider: React.ForwardRefRenderFunction<
       visibleDateUnixAnim,
       calendarListRef,
       startOffset,
+      scrollVisibleHeightAnim,
     }),
     [
       calendarLayout,
@@ -577,9 +579,9 @@ const CalendarProvider: React.ForwardRefRenderFunction<
       isRTL,
       snapToInterval,
       columns,
-      triggerDateChanged,
       visibleDateUnixAnim,
       startOffset,
+      scrollVisibleHeightAnim,
     ]
   );