Merge pull request #1748 from wix/fix/ExpandableCalendarContextType

Fix ExpandableCalendar Context type

Author: Inbal-Tish

src/expandableCalendar/Context/Presenter.ts

@@ -2,10 +2,9 @@ import XDate from 'xdate';
 
 import {sameMonth, isToday} from '../../dateutils';
 import {xdateToData, toMarkingFormat} from '../../interface';
-import {UpdateSource} from '../../types';
+import {UpdateSources} from '../commons';
 import {CalendarContextProviderProps} from './Provider';
 
-
 const commons = require('../commons');
 const TOP_POSITION = 65;
 
@@ -46,7 +45,13 @@ class Presenter {
     return icon;
   };
 
-  setDate = (props: CalendarContextProviderProps, date: string, newDate: string, updateState: (buttonIcon: number) => void, updateSource: UpdateSource) => {
+  setDate = (
+    props: CalendarContextProviderProps,
+    date: string,
+    newDate: string,
+    updateState: (buttonIcon: number) => void,
+    updateSource: UpdateSources
+  ) => {
     const isSameMonth = sameMonth(new XDate(date), new XDate(newDate));
     const buttonIcon = this.getButtonIcon(date, props.showTodayButton);
 
@@ -59,7 +64,12 @@ class Presenter {
     }
   };
 
-  setDisabled = (showTodayButton: boolean, newDisabledValue: boolean, oldDisabledValue: boolean, updateState: (disabled: boolean) => void) => {
+  setDisabled = (
+    showTodayButton: boolean,
+    newDisabledValue: boolean,
+    oldDisabledValue: boolean,
+    updateState: (disabled: boolean) => void
+  ) => {
     if (!showTodayButton || newDisabledValue === oldDisabledValue) {
       return;
     }

src/expandableCalendar/Context/Provider.tsx

@@ -5,23 +5,21 @@ import React, {Component} from 'react';
 import {StyleSheet, Animated, TouchableOpacity, View, StyleProp, ViewStyle} from 'react-native';
 
 import {toMarkingFormat} from '../../interface';
-import {Theme, UpdateSource, DateData} from '../../types';
+import {Theme, DateData} from '../../types';
 import styleConstructor from '../style';
 import CalendarContext from '.';
 import Presenter from './Presenter';
+import {UpdateSources} from '../commons';
 
-
-const commons = require('../commons');
-const updateSources = commons.UpdateSources;
 const TOP_POSITION = 65;
 
 interface Props {
   /** Initial date in 'yyyy-MM-dd' format. Default = now */
   date: string;
   /** Callback for date change event */
-  onDateChanged?: (date: string, updateSource: UpdateSource) => void;
+  onDateChanged?: (date: string, updateSource: UpdateSources) => void;
   /** Callback for month change event */
-  onMonthChange?: (date: DateData, updateSource: UpdateSource) => void;
+  onMonthChange?: (date: DateData, updateSource: UpdateSources) => void;
   /** Whether to show the today button */
   showTodayButton?: boolean;
   /** Today button's top position */
@@ -62,11 +60,10 @@ class CalendarProvider extends Component<Props> {
   style = styleConstructor(this.props.theme);
   presenter = new Presenter();
 
-  
   state = {
     prevDate: this.getDate(this.props.date),
     date: this.getDate(this.props.date),
-    updateSource: updateSources.CALENDAR_INIT,
+    updateSource: UpdateSources.CALENDAR_INIT,
     buttonY: new Animated.Value(this.props.todayBottomMargin ? -this.props.todayBottomMargin : -TOP_POSITION),
     buttonIcon: this.presenter.getButtonIcon(this.getDate(this.props.date), this.props.showTodayButton),
     disabled: false,
@@ -75,7 +72,7 @@ class CalendarProvider extends Component<Props> {
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.date && prevProps.date !== this.props.date) {
-      this.setDate(this.props.date, updateSources.PROP_UPDATE);
+      this.setDate(this.props.date, UpdateSources.PROP_UPDATE);
     }
   }
 
@@ -93,7 +90,7 @@ class CalendarProvider extends Component<Props> {
     };
   };
 
-  setDate = (date: string, updateSource: UpdateSource) => {
+  setDate = (date: string, updateSource: UpdateSources) => {
     const {setDate} = this.presenter;
 
     const updateState = (buttonIcon: number) => {
@@ -143,7 +140,7 @@ class CalendarProvider extends Component<Props> {
 
   onTodayPress = () => {
     const today = this.presenter.getTodayDate();
-    this.setDate(today, updateSources.TODAY_PRESS);
+    this.setDate(today, UpdateSources.TODAY_PRESS);
   };
 
   renderTodayButton() {

src/expandableCalendar/Context/index.ts

@@ -1,4 +1,13 @@
 import React from 'react';
+import {UpdateSources} from '../commons';
+interface CalendarContextProps {
+  date: string;
+  prevDate: string;
+  setDate: (date: string, source: UpdateSources) => void;
+  updateSource: UpdateSources;
+  setDisabled: (disable: boolean) => void;
+}
 
-const CalendarContext = React.createContext({});
+// @ts-expect-error
+const CalendarContext = React.createContext<CalendarContextProps>({});
 export default CalendarContext;

src/types.ts

@@ -1,10 +1,8 @@
 import {ViewStyle, TextStyle, StyleProp} from 'react-native';
-import {UpdateSources} from './expandableCalendar/commons';
 
 export type MarkingTypes = 'dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom';
 export type DayState = 'selected' | 'disabled' | 'inactive' | 'today' | '';
 export type Direction = 'left' | 'right';
-export type UpdateSource = keyof typeof UpdateSources;
 export type DateData = {
   year: number;
   month: number;