Merge pull request #1839 from wix/infra/ExpandableCalendar_to_function

Infra/expandable calendar to function

Author: Inbal-Tish

example/src/screens/expandableCalendar.tsx renamed to example/src/screens/ExpandableCalendarScreen.tsx

@@ -5,15 +5,15 @@ import CalendarsScreen from './calendarScreen';
 import AgendaScreen from './agendaScreen';
 import CalendarsList from './calendarsList';
 import HorizontalCalendarList from './horizontalCalendarList';
-import ExpandableCalendar from './expandableCalendar';
-import TimelineCalendar from './timelineCalendarScreen';
+import ExpandableCalendarScreen from './expandableCalendarScreen';
+import TimelineCalendarScreen from './timelineCalendarScreen';
 
 export function registerScreens() {
   Navigation.registerComponent('Menu', () => MenuScreen);
   Navigation.registerComponent('Calendars', () => CalendarsScreen);
   Navigation.registerComponent('Agenda', () => AgendaScreen);
   Navigation.registerComponent('CalendarsList', () => CalendarsList);
   Navigation.registerComponent('HorizontalCalendarList', () => HorizontalCalendarList);
-  Navigation.registerComponent('ExpandableCalendar', () => ExpandableCalendar);
-  Navigation.registerComponent('TimelineCalendar', () => TimelineCalendar);
+  Navigation.registerComponent('ExpandableCalendar', () => ExpandableCalendarScreen);
+  Navigation.registerComponent('TimelineCalendar', () => TimelineCalendarScreen);
 }

example/src/screens/index.ts

@@ -1,21 +1,25 @@
 import XDate from 'xdate';
 import {UpdateSources} from '../commons';
 import {toMarkingFormat} from '../../interface';
-import Presenter from './Presenter';
+import {
+  getButtonIcon,
+  setDate,
+  setDisabled,
+  shouldAnimateTodayButton,
+  getPositionAnimation,
+  getOpacityAnimation,
+  getTodayDate,
+  getTodayFormatted
+} from './Presenter';
 
 describe('Context provider tests', () => {
-  const makeUUT = () => {
-    return new Presenter();
-  };
-
   const pastDate = '2021-04-04';
   const futureDate = '2050-04-04';
   const todayDate = toMarkingFormat(XDate());
   const updateSources = UpdateSources.CALENDAR_INIT;
 
   describe('Button Icon test', () => {
     it('Expect to get down button on past date', () => {
-      const {getButtonIcon} = makeUUT();
       const imageUp = '../../../src/img/up.png';
       const imageDown = '../../../src/img/down.png';
 
@@ -24,7 +28,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect no image when showTodayButton is false', () => {
-      const {getButtonIcon} = makeUUT();
       expect(getButtonIcon(pastDate, false)).toBe(undefined);
     });
   });
@@ -39,7 +42,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect onDataChanged and updateState to be called on same months dates passed', () => {
-      const {setDate} = makeUUT();
       const date = '2021-01-01';
       const sameMonthDate = '2021-01-20';
       const props = {onDateChanged, onMonthChange, showTodayButton: false};
@@ -52,7 +54,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect onMonthChange to be called when different months date passed', () => {
-      const {setDate} = makeUUT();
       const date = '2021-01-01';
       const differentMonth = '2021-02-20';
       const props = {onDateChanged, onMonthChange, showTodayButton: false};
@@ -67,7 +68,6 @@ describe('Context provider tests', () => {
 
   describe('Set Disabled test suit', () => {
     it('Expect setDisabled would not call updateState when showTodayButton', () => {
-      const {setDisabled} = makeUUT();
       const updateStateMock = jest.fn();
       const showTodayButton = false;
 
@@ -76,7 +76,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect setDisabled will call updateState when showTodayButton is true and disabled value changed', () => {
-      const {setDisabled} = makeUUT();
       const updateStateMock = jest.fn();
       const showTodayButton = true;
 
@@ -88,7 +87,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect setDisabled will NOT call updateState when showTodayButton is true and disabled value is the same', () => {
-      const {setDisabled} = makeUUT();
       const updateStateMock = jest.fn();
       const showTodayButton = true;
 
@@ -102,14 +100,11 @@ describe('Context provider tests', () => {
 
   describe("Animate Today's Button", () => {
     it('Expect shouldAnimateTodayButton to return same value as props.showTodayButton', () => {
-      const {shouldAnimateTodayButton} = makeUUT();
-
       expect(shouldAnimateTodayButton({showTodayButton: false})).toBe(false);
       expect(shouldAnimateTodayButton({showTodayButton: true})).toBe(true);
     });
 
     it("Expect animation value to be top position when today's date passed", () => {
-      const {getPositionAnimation} = makeUUT();
       const TOP_POSITION = 65;
       const {tension, friction, useNativeDriver} = getPositionAnimation(todayDate, 10);
 
@@ -120,7 +115,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect animation value to be minus value of bottomMargin when past or future date passed', () => {
-      const {getPositionAnimation} = makeUUT();
       const TOP_POSITION = 65;
 
       expect(getPositionAnimation(futureDate, 999).toValue).toEqual(-999);
@@ -130,7 +124,6 @@ describe('Context provider tests', () => {
     });
 
     it('Expect opacity animation value', () => {
-      const {getOpacityAnimation} = makeUUT();
       const disabledOpacity = 0.5;
       let data = getOpacityAnimation({disabledOpacity}, true);
 
@@ -146,13 +139,11 @@ describe('Context provider tests', () => {
 
   describe('onTodayPressed tests', () => {
     it("Expect return value to be XDate today's date", () => {
-      const {getTodayDate} = makeUUT();
       expect(getTodayDate()).toEqual(todayDate);
     });
   });
 
   it("Today's date formatted", () => {
-    const {getTodayFormatted} = makeUUT();
     expect(getTodayFormatted()).toEqual('Today');
   });
 });

src/expandableCalendar/Context/Presenter.spec.js

@@ -9,88 +9,84 @@ import {CalendarContextProviderProps} from './Provider';
 const commons = require('../commons');
 const TOP_POSITION = 65;
 
-class Presenter {
-  _getIconDown = () => {
-    return require('../../img/down.png');
+export const _getIconDown = () => {
+  return require('../../img/down.png');
+};
+
+export const _getIconUp = () => {
+  return require('../../img/up.png');
+};
+
+export const getButtonIcon = (date: string, showTodayButton = true) => {
+  if (!showTodayButton) {
+    return undefined;
+  }
+  const icon = isPastDate(date) ? _getIconDown() : _getIconUp();
+  return icon;
+};
+
+export const setDate = (
+  props: CalendarContextProviderProps,
+  date: string,
+  newDate: string,
+  updateState: (buttonIcon: number) => void,
+  updateSource: UpdateSources
+) => {
+  const buttonIcon = getButtonIcon(date, props.showTodayButton);
+
+  updateState(buttonIcon);
+
+  props.onDateChanged?.(date, updateSource);
+
+  if (!sameMonth(new XDate(date), new XDate(newDate))) {
+    props.onMonthChange?.(xdateToData(new XDate(date)), updateSource);
+  }
+};
+
+export const setDisabled = (
+  showTodayButton: boolean,
+  newDisabledValue: boolean,
+  oldDisabledValue: boolean,
+  updateState: (disabled: boolean) => void
+) => {
+  if (!showTodayButton || newDisabledValue === oldDisabledValue) {
+    return;
+  }
+  updateState(newDisabledValue);
+};
+
+export const shouldAnimateTodayButton = (props: CalendarContextProviderProps) => {
+  return props.showTodayButton;
+};
+
+export const getTodayDate = () => {
+  return toMarkingFormat(new XDate());
+};
+
+export const getPositionAnimation = (date: string, todayBottomMargin = 0) => {
+  const toValue = isToday(new XDate(date)) ? TOP_POSITION : -todayBottomMargin || -TOP_POSITION;
+  return {
+    toValue,
+    tension: 30,
+    friction: 8,
+    useNativeDriver: true
   };
+};
 
-  _getIconUp = () => {
-    return require('../../img/up.png');
-  };
-
-  getButtonIcon = (date: string, showTodayButton = true) => {
-    if (!showTodayButton) {
-      return undefined;
-    }
-    const icon = isPastDate(date) ? this._getIconDown() : this._getIconUp();
-    return icon;
-  };
-
-  setDate = (
-    props: CalendarContextProviderProps,
-    date: string,
-    newDate: string,
-    updateState: (buttonIcon: number) => void,
-    updateSource: UpdateSources
-  ) => {
-    const buttonIcon = this.getButtonIcon(date, props.showTodayButton);
-
-    updateState(buttonIcon);
-
-    props.onDateChanged?.(date, updateSource);
-
-    if (!sameMonth(new XDate(date), new XDate(newDate))) {
-      props.onMonthChange?.(xdateToData(new XDate(date)), updateSource);
-    }
-  };
-
-  setDisabled = (
-    showTodayButton: boolean,
-    newDisabledValue: boolean,
-    oldDisabledValue: boolean,
-    updateState: (disabled: boolean) => void
-  ) => {
-    if (!showTodayButton || newDisabledValue === oldDisabledValue) {
-      return;
-    }
-    updateState(newDisabledValue);
-  };
-
-  shouldAnimateTodayButton = (props: CalendarContextProviderProps) => {
-    return props.showTodayButton;
-  };
-
-  getTodayDate = () => {
-    return toMarkingFormat(new XDate());
-  };
-
-  getPositionAnimation = (date: string, todayBottomMargin = 0) => {
-    const toValue = isToday(new XDate(date)) ? TOP_POSITION : -todayBottomMargin || -TOP_POSITION;
-    return {
-      toValue,
-      tension: 30,
-      friction: 8,
-      useNativeDriver: true
-    };
-  };
-
-  shouldAnimateOpacity = (props: CalendarContextProviderProps) => {
-    return props.disabledOpacity;
-  };
-
-  getOpacityAnimation = ({disabledOpacity = 0}: CalendarContextProviderProps, disabled: boolean) => {
-    return {
-      toValue: disabled ? disabledOpacity : 1,
-      duration: 500,
-      useNativeDriver: true
-    };
-  };
+export const shouldAnimateOpacity = (props: CalendarContextProviderProps) => {
+  return props.disabledOpacity;
+};
 
-  getTodayFormatted = () => {
-    const todayString = getDefaultLocale().today || commons.todayString;
-    const today = todayString.charAt(0).toUpperCase() + todayString.slice(1);
-    return today;
+export const getOpacityAnimation = ({disabledOpacity = 0}: CalendarContextProviderProps, disabled: boolean) => {
+  return {
+    toValue: disabled ? disabledOpacity : 1,
+    duration: 500,
+    useNativeDriver: true
   };
-}
+};
 
-export default Presenter;
+export const getTodayFormatted = () => {
+  const todayString = getDefaultLocale().today || commons.todayString;
+  const today = todayString.charAt(0).toUpperCase() + todayString.slice(1);
+  return today;
+};