Merge pull request #902 from wix/feat/TodayButton_topPosition

Adding 'buttonTopPosition' prop to control button's y position
wix · Aug 7, 2019 · 0e60114 · 0e60114
2 parents f404438 + d538daf
commit 0e60114
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -74,3 +74,7 @@
 ## [1.203.0] - 2019-07-31
 ### Fix
 - ExpandableCalendar - fix for vertical open height.
+
+## [1.204.0] - 2019-08-6
+### Fix
+- CalendarProvider - adding 'buttonTopPosition' prop to control the button's y position.
diff --git a/example/src/screens/expandableCalendar.js b/example/src/screens/expandableCalendar.js
@@ -157,6 +157,7 @@ export default class ExpandableCalendarScreen extends Component {
         theme={{todayButtonTextColor: '#0059ff'}} 
         showTodayButton 
         disabledOpacity={0.6}
+        // todayBottomMargin={16}
       >
         <ExpandableCalendar 
           // horizontal={false}

diff --git a/src/expandableCalendar/calendarProvider.js b/src/expandableCalendar/calendarProvider.js
@@ -14,6 +14,7 @@ const commons = require('./commons');
 const UPDATE_SOURCES = commons.UPDATE_SOURCES;
 const iconDown = require('../img/down.png');
 const iconUp = require('../img/up.png');
+const TOP_POSITION = 65;
 
 /**
  * @description: Calendar context provider component
@@ -31,6 +32,8 @@ class CalendarProvider extends Component {
     onMonthChange: PropTypes.func,
     /** whether to show the today button */
     showTodayButton: PropTypes.bool,
+    /** The button top position */
+    todayBottomMargin: PropTypes.number,
     /** The opacity for the disabled today button (0-1) */
     disabledOpacity: PropTypes.number
   }
@@ -42,7 +45,7 @@ class CalendarProvider extends Component {
     this.state = {
       date: this.props.date || XDate().toString('yyyy-MM-dd'),
       updateSource: UPDATE_SOURCES.CALENDAR_INIT,
-      buttonY: new Animated.Value(-65),
+      buttonY: new Animated.Value(-props.todayBottomMargin || -TOP_POSITION),
       buttonIcon: this.getButtonIcon(props.date),
       disabled: false,
       opacity: new Animated.Value(1)
@@ -119,7 +122,7 @@ class CalendarProvider extends Component {
       const isToday = today === date;
 
       Animated.spring(this.state.buttonY, {
-        toValue: isToday ? 65 : -65,
+        toValue: isToday ? TOP_POSITION : -this.props.todayBottomMargin || -TOP_POSITION,
         tension: 30,
         friction: 8,
         useNativeDriver: true