From 086d45096ec88b62d890b1001bbb3d6dca79ab94 Mon Sep 17 00:00:00 2001
From: Aviad Chmelnik <aviadch@thevets.com>
Date: Mon, 15 Nov 2021 16:10:45 +0200
Subject: [PATCH] Add container styles for prev and next components as props

---
 CalendarPicker/HeaderControls.js | 8 +++++---
 CalendarPicker/YearSelector.js   | 4 ++++
 CalendarPicker/YearsHeader.js    | 6 ++++--
 CalendarPicker/index.js          | 6 ++++++
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/CalendarPicker/HeaderControls.js b/CalendarPicker/HeaderControls.js
index 8abdffd1..e0aec8b6 100644
--- a/CalendarPicker/HeaderControls.js
+++ b/CalendarPicker/HeaderControls.js
@@ -33,7 +33,9 @@ export default function HeaderControls(props) {
     minDate,
     headingLevel,
     monthYearHeaderWrapperStyle,
-    headerWrapperStyle
+    headerWrapperStyle,
+    previousContainerStyle,
+    nextContainerStyle,
   } = props;
   const MONTHS = months || Utils.MONTHS; // English Month Array
   const monthName = MONTHS[currentMonth];
@@ -54,7 +56,7 @@ export default function HeaderControls(props) {
         label={previousTitle}
         component={previousComponent}
         onPressControl={onPressPrevious}
-        styles={styles.previousContainer}
+        styles={[styles.previousContainer,previousContainerStyle]}
         textStyles={[styles.navButtonText, textStyle, previousTitleStyle]}
       />
       <View style={[styles.monthYearHeaderWrapper,monthYearHeaderWrapperStyle]}>
@@ -74,7 +76,7 @@ export default function HeaderControls(props) {
         label={nextTitle}
         component={nextComponent}
         onPressControl={onPressNext}
-        styles={styles.nextContainer}
+        styles={[styles.nextContainer,nextContainerStyle]}
         textStyles={[styles.navButtonText, textStyle, nextTitleStyle]}
       />
     </View>
diff --git a/CalendarPicker/YearSelector.js b/CalendarPicker/YearSelector.js
index 57b15489..634651c3 100644
--- a/CalendarPicker/YearSelector.js
+++ b/CalendarPicker/YearSelector.js
@@ -44,6 +44,8 @@ export default class YearSelector extends Component {
       nextTitleStyle,
       headingLevel,
       onSelectYear,
+      previousContainerStyle,
+      nextContainerStyle
     } = this.props;
 
     return (
@@ -66,6 +68,8 @@ export default class YearSelector extends Component {
           nextTitleStyle={nextTitleStyle}
           onYearViewPrevious={this.handleOnYearViewPrevious}
           onYearViewNext={this.handleOnYearViewNext}
+          previousContainerStyle={previousContainerStyle}
+          nextContainerStyle={nextContainerStyle}
         />
         <YearsGridView
           intialYear={this.state.initialYear}
diff --git a/CalendarPicker/YearsHeader.js b/CalendarPicker/YearsHeader.js
index 7b964b0f..66b99ccd 100644
--- a/CalendarPicker/YearsHeader.js
+++ b/CalendarPicker/YearsHeader.js
@@ -26,6 +26,8 @@ export default function YearsHeader(props) {
     onYearViewPrevious,
     onYearViewNext,
     headingLevel,
+    previousContainerStyle,
+    nextContainerStyle
   } = props;
 
   const disablePrevious = restrictNavigation && minDate && (minDate.year() >= year);
@@ -43,7 +45,7 @@ export default function YearsHeader(props) {
         label={previousTitle}
         component={previousComponent}
         onPressControl={onYearViewPrevious}
-        styles={styles.previousContainer}
+        styles={[styles.previousContainer,previousContainerStyle]}
         textStyles={[styles.navButtonText, textStyle, previousTitleStyle]}
       />
       <Text style={[styles.yearsHeaderText, textStyle]} {...accessibilityProps}>
@@ -54,7 +56,7 @@ export default function YearsHeader(props) {
         label={nextTitle}
         component={nextComponent}
         onPressControl={onYearViewNext}
-        styles={styles.nextContainer}
+        styles={[styles.nextContainer,nextContainerStyle]}
         textStyles={[styles.navButtonText, textStyle, nextTitleStyle]}
       />
     </View>
diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js
index 6c60fac8..69e73ce3 100644
--- a/CalendarPicker/index.js
+++ b/CalendarPicker/index.js
@@ -484,6 +484,8 @@ export default class CalendarPicker extends Component {
       onMonthChange,
       scrollable,
       horizontal,
+      previousContainerStyle,
+      nextContainerStyle,
     } = this.props;
 
     let content;
@@ -523,6 +525,8 @@ export default class CalendarPicker extends Component {
           nextTitleStyle={nextTitleStyle}
           onSelectYear={this.handleOnSelectMonthYear}
           headingLevel={headingLevel}
+          previousContainerStyle={previousContainerStyle}
+          nextContainerStyle={nextContainerStyle}
         />
       );
       break;
@@ -554,6 +558,8 @@ export default class CalendarPicker extends Component {
             headingLevel={headingLevel}
             monthYearHeaderWrapperStyle={monthYearHeaderWrapperStyle}
             headerWrapperStyle={headerWrapperStyle}
+            previousContainerStyle={previousContainerStyle}
+            nextContainerStyle={nextContainerStyle}
           />
           <Weekdays
             styles={styles}