ExpandableCalendar - Added imperative Calendar Toggling (#2634)

* Added imperative toggling of the calendar

* Rename toggleCalendar to toggleCalendarPosition in ExpandableCalendarRef

* Remove ExpandableCalendarRef type export from index

* Define ExpandableCalendarRef type for toggling calendar position

* Removed forwaredRef typings

* Implement toggleCalendarPosition and add example to screen

* Fixed lint

* Changed chevron asset to use next and minor rename to interpolation variable

Author: nitzanyiz

example/src/screens/expandableCalendarScreen.tsx

@@ -1,10 +1,11 @@
 import React, {useRef, useCallback} from 'react';
-import {StyleSheet} from 'react-native';
+import {Animated, Easing, StyleSheet, Text, TouchableOpacity} 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';
+import type XDate from 'xdate';
 
 const leftArrowIcon = require('../img/previous.png');
 const rightArrowIcon = require('../img/next.png');
@@ -13,7 +14,7 @@ const ITEMS: any[] = agendaItems;
 interface Props {
   weekView?: boolean;
 }
-
+const CHEVRON = require('../img/next.png');
 const ExpandableCalendarScreen = (props: Props) => {
   const {weekView} = props;
   const marked = useRef(getMarkedDates());
@@ -34,6 +35,35 @@ const ExpandableCalendarScreen = (props: Props) => {
     return <AgendaItem item={item}/>;
   }, []);
 
+  const calendarRef = useRef<{toggleCalendarPosition: () => boolean}>(null);
+  const rotation = useRef(new Animated.Value(0));
+
+  const toggleCalendarExpansion = useCallback(() => {
+    const isOpen = calendarRef.current?.toggleCalendarPosition();
+    Animated.timing(rotation.current, {
+      toValue: isOpen ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+      easing: Easing.out(Easing.ease)
+    }).start();
+  }, []);
+
+  const renderHeader = useCallback(
+    (date?: XDate) => {
+      const rotationInDegrees = rotation.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg']
+      });
+      return (
+        <TouchableOpacity style={styles.header} onPress={toggleCalendarExpansion}>
+          <Text style={styles.headerTitle}>{date?.toString('MMMM yyyy')}</Text>
+          <Animated.Image source={CHEVRON} style={{transform: [{rotate: '-90deg'}, {rotate: rotationInDegrees}]}}/>
+        </TouchableOpacity>
+      );
+    },
+    [toggleCalendarExpansion]
+  );
+
   return (
     <CalendarProvider
       date={ITEMS[1]?.title}
@@ -49,6 +79,8 @@ const ExpandableCalendarScreen = (props: Props) => {
       ) : (
         <ExpandableCalendar
           testID={testIDs.expandableCalendar.CONTAINER}
+          renderHeader={renderHeader}
+          ref={calendarRef}
           // horizontal={false}
           // hideArrows
           // disablePan
@@ -86,8 +118,12 @@ const styles = StyleSheet.create({
     paddingRight: 20
   },
   header: {
-    backgroundColor: 'lightgrey'
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 10
   },
+  headerTitle: {fontSize: 16, fontWeight: 'bold', marginRight: 6},
   section: {
     backgroundColor: lightThemeColor,
     color: 'grey',

src/expandableCalendar/index.tsx

@@ -5,7 +5,16 @@ import throttle from 'lodash/throttle';
 
 import XDate from 'xdate';
 
-import React, {useContext, useRef, useState, useEffect, useCallback, useMemo} from 'react';
+import React, {
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useImperativeHandle,
+  forwardRef
+} from 'react';
 import {
   AccessibilityInfo,
   PanResponder,
@@ -71,6 +80,10 @@ export interface ExpandableCalendarProps extends CalendarListProps {
   closeOnDayPress?: boolean;
 }
 
+type ExpandableCalendarRef = {
+  toggleCalendarPosition: () => boolean;
+};
+
 const headerStyleOverride = {
   stylesheet: {
     calendar: {
@@ -94,7 +107,7 @@ const headerStyleOverride = {
  * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.js
  */
 
-const ExpandableCalendar = (props: ExpandableCalendarProps) => {
+const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarProps>((props, ref) => {
   const _context = useContext(Context);
   const {date, setDate, numberOfDays, timelineLeftInset} = _context;
 
@@ -370,7 +383,6 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     _height.current = Number(_wrapperStyles.current.style.height);
     bounceToPosition();
   };
-
   const numberOfDaysCondition = useMemo(() => {
     return !numberOfDays || numberOfDays && numberOfDays <= 1;
   }, [numberOfDays]);
@@ -437,8 +449,17 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const toggleCalendarPosition = useCallback(() => {
     bounceToPosition(isOpen ? closedHeight : openHeight.current);
+    return !isOpen;
   }, [isOpen, bounceToPosition, closedHeight]);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      toggleCalendarPosition
+    }),
+    [toggleCalendarPosition]
+  );
+
   /** Events */
 
   const _onPressArrowLeft = useCallback((method: () => void, month?: XDate) => {
@@ -626,20 +647,20 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
       )}
     </View>
   );
-};
-
-export default ExpandableCalendar;
-
-ExpandableCalendar.displayName = 'ExpandableCalendar';
-ExpandableCalendar.defaultProps = {
-  horizontal: true,
-  initialPosition: Positions.CLOSED,
-  firstDay: 0,
-  leftArrowImageSource: LEFT_ARROW,
-  rightArrowImageSource: RIGHT_ARROW,
-  allowShadow: true,
-  openThreshold: PAN_GESTURE_THRESHOLD,
-  closeThreshold: PAN_GESTURE_THRESHOLD,
-  closeOnDayPress: true
-};
-ExpandableCalendar.positions = Positions;
+});
+
+export default Object.assign(ExpandableCalendar, {
+  displayName: 'ExpandableCalendar',
+  positions: Positions,
+  defaultProps: {
+    horizontal: true,
+    initialPosition: Positions.CLOSED,
+    firstDay: 0,
+    leftArrowImageSource: LEFT_ARROW,
+    rightArrowImageSource: RIGHT_ARROW,
+    allowShadow: true,
+    openThreshold: PAN_GESTURE_THRESHOLD,
+    closeThreshold: PAN_GESTURE_THRESHOLD,
+    closeOnDayPress: true
+  }
+});