Merge pull request #1700 from wix/fix/Provider_onDateChange_return_type

Context Provider - fix onDateChange return value

Author: Inbal-Tish

CHANGELOG.md

@@ -765,3 +765,8 @@
 
 ## [1.1270.0] - 2021-11-29
 - testIDs - reverting to js file with module.exports.
+
+## [1.1271.0] - 2021-xx-xx
+
+## Fixed
+- ContextProvider - 'onDateChanged' return type.

README.md

@@ -73,7 +73,7 @@ LocaleConfig.defaultLocale = 'fr';
 
 ```javascript
 <Calendar
-  // Initially visible month. Default = Date()
+  // Initially visible month. Default = now
   current={'2012-03-01'}
   // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
   minDate={'2012-05-10'}

src/calendar/index.tsx

@@ -89,7 +89,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     theme: PropTypes.object,
     /** Specify style for calendar container element. Default = {} */
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.number]),
-    /** Initially visible month. Default = Date() */
+    /** Initially visible month in 'yyyy-MM-dd' format. Default = now */
     current: PropTypes.any,
     /** Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined */
     minDate: PropTypes.any,

src/expandableCalendar/Context/Presenter.ts

@@ -11,7 +11,7 @@ const commons = require('../commons');
 const TOP_POSITION = 65;
 
 class Presenter {
-  _isPastDate(date: Date) {
+  _isPastDate(date: string) {
     const today = new XDate();
     const d = new XDate(date);
 
@@ -39,15 +39,15 @@ class Presenter {
     return require('../../img/up.png');
   };
 
-  getButtonIcon = (date: Date, showTodayButton = true) => {
+  getButtonIcon = (date: string, showTodayButton = true) => {
     if (!showTodayButton) {
       return undefined;
     }
     const icon = this._isPastDate(date) ? this._getIconDown() : this._getIconUp();
     return icon;
   };
 
-  setDate = (props: CalendarContextProviderProps, date: Date, newDate: Date, updateState: (buttonIcon: any) => void, updateSource: UpdateSource) => {
+  setDate = (props: CalendarContextProviderProps, date: string, newDate: string, updateState: (buttonIcon: number) => void, updateSource: UpdateSource) => {
     const isSameMonth = sameMonth(new XDate(date), new XDate(newDate));
     const buttonIcon = this.getButtonIcon(date, props.showTodayButton);
 
@@ -75,7 +75,7 @@ class Presenter {
     return toMarkingFormat(new XDate());
   };
 
-  getPositionAnimation = (date: Date, todayBottomMargin = 0) => {
+  getPositionAnimation = (date: string, todayBottomMargin = 0) => {
     const toValue = isToday(new XDate(date)) ? TOP_POSITION : -todayBottomMargin || -TOP_POSITION;
     return {
       toValue,

src/expandableCalendar/Context/Provider.tsx

@@ -16,10 +16,10 @@ const updateSources = commons.UpdateSources;
 const TOP_POSITION = 65;
 
 interface Props {
-  /** Initial date in 'yyyy-MM-dd' format. Default = Date() */
-  date: Date;
+  /** Initial date in 'yyyy-MM-dd' format. Default = now */
+  date: XDate;
   /** Callback for date change event */
-  onDateChanged?: () => Date;
+  onDateChanged?: () => XDate;
   /** Callback for month change event */
   onMonthChange?: () => DateData;
   /** Whether to show the today button */
@@ -43,7 +43,7 @@ class CalendarProvider extends Component<Props> {
   static displayName = 'CalendarProvider';
 
   static propTypes = {
-    /** Initial date in 'yyyy-MM-dd' format. Default = Date() */
+    /** Initial date in 'yyyy-MM-dd' format. Default = now */
     date: PropTypes.any.isRequired,
     /** Callback for date change event */
     onDateChanged: PropTypes.func,
@@ -62,22 +62,27 @@ class CalendarProvider extends Component<Props> {
   style = styleConstructor(this.props.theme);
   presenter = new Presenter();
 
+  
   state = {
-    prevDate: this.props.date || toMarkingFormat(new XDate()),
-    date: this.props.date || toMarkingFormat(new XDate()),
+    prevDate: this.getDate(this.props.date),
+    date: this.getDate(this.props.date),
     updateSource: updateSources.CALENDAR_INIT,
     buttonY: new Animated.Value(this.props.todayBottomMargin ? -this.props.todayBottomMargin : -TOP_POSITION),
-    buttonIcon: this.presenter.getButtonIcon(this.props.date, this.props.showTodayButton),
+    buttonIcon: this.presenter.getButtonIcon(this.getDate(this.props.date), this.props.showTodayButton),
     disabled: false,
     opacity: new Animated.Value(1)
   };
 
   componentDidUpdate(prevProps: Props) {
-    if (prevProps.date !== this.props.date) {
-      this.setDate(this.props.date, updateSources.PROP_UPDATE);
+    if (this.props.date && prevProps.date !== this.props.date) {
+      this.setDate(toMarkingFormat(this.props.date), updateSources.PROP_UPDATE);
     }
   }
 
+  getDate(date: XDate) {
+    return toMarkingFormat(date || new XDate());
+  }
+
   getProviderContextValue = () => {
     return {
       setDate: this.setDate,
@@ -88,17 +93,16 @@ class CalendarProvider extends Component<Props> {
     };
   };
 
-  setDate = (date: Date | string, updateSource: UpdateSource) => {
+  setDate = (date: string, updateSource: UpdateSource) => {
     const {setDate} = this.presenter;
-    const d = date instanceof Date ? date : new Date(date);
 
-    const updateState = (buttonIcon: any) => {
+    const updateState = (buttonIcon: number) => {
       this.setState({date, prevDate: this.state.date, updateSource, buttonIcon}, () => {
-        this.animateTodayButton(d);
+        this.animateTodayButton(date);
       });
     };
 
-    setDate(this.props, d, this.state.date, updateState, updateSource);
+    setDate(this.props, date, this.state.date, updateState, updateSource);
   };
 
   setDisabled = (disabled: boolean) => {
@@ -113,7 +117,7 @@ class CalendarProvider extends Component<Props> {
     setDisabled(showTodayButton, disabled, this.state.disabled, updateState);
   };
 
-  animateTodayButton(date: Date) {
+  animateTodayButton(date: string) {
     const {shouldAnimateTodayButton, getPositionAnimation} = this.presenter;
 
     if (shouldAnimateTodayButton(this.props)) {