From d5b921b8df9b06e23c47ccace18e098434a37e3f Mon Sep 17 00:00:00 2001
From: Victor Laurentino <victorlaurentino7@gmail.com>
Date: Fri, 31 Dec 2021 03:56:57 -0300
Subject: [PATCH] feat: add support to barContainerStyle prop (#109)

---
 README.md                              |  1 +
 example/src/components/Panel/Bar.tsx   | 11 ++++++-----
 example/src/components/Panel/Panel.tsx |  4 +++-
 example/src/hooks/useSwipeablePanel.ts |  2 ++
 index.d.ts                             |  5 +++++
 src/Bar.tsx                            |  5 +++--
 src/Panel.tsx                          |  4 +++-
 src/typings.d.ts                       |  4 ++++
 8 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index ee74be9..778eca9 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,7 @@ export default App = () => {
 | **closeIconStyle**      | `Object`   | Use this prop to override close button icon style           | `{}`    |
 | **barStyle**            | `Object`   | Use this prop to override bar style                         | `{}`    |
 | **smallPanelHeight**    | `Object`   | Use this prop to override the small panel default height    |         |
+| **barContainerStyle**   | `Object`   | Use this prop to override bar container style               | `{}`    |
 | **closeOnTouchOutside** | `bool`     | Set true if you want to close panel by touching outside     | `false` |
 | **allowTouchOutside**   | `bool`     | Set true if you want to make toucable outside of panel      | `false` |
 | **noBar**               | `bool`     | Set true if you want to remove gray bar                     | `false` |
diff --git a/example/src/components/Panel/Bar.tsx b/example/src/components/Panel/Bar.tsx
index e81c67a..dcf1746 100644
--- a/example/src/components/Panel/Bar.tsx
+++ b/example/src/components/Panel/Bar.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
 
 type BarProps = {
-  barStyle?: Object;
+  barStyle?: object;
+  barContainerStyle?: object;
 };
 
-export const Bar = ({barStyle}: BarProps) => {
+export const Bar = ({ barStyle, barContainerStyle }: BarProps) => {
   return (
-    <View style={BarStyles.barContainer}>
+    <View style={[BarStyles.barContainer, barContainerStyle]}>
       <View style={[BarStyles.bar, barStyle]} />
     </View>
   );
diff --git a/example/src/components/Panel/Panel.tsx b/example/src/components/Panel/Panel.tsx
index 15f0ffc..83d9cf0 100644
--- a/example/src/components/Panel/Panel.tsx
+++ b/example/src/components/Panel/Panel.tsx
@@ -40,6 +40,7 @@ type SwipeablePanelProps = {
   smallPanelHeight?: number;
   noBar?: boolean;
   barStyle?: object;
+  barContainerStyle?: object;
   allowTouchOutside?: boolean;
   scrollViewProps?: ScrollViewProps;
 };
@@ -205,6 +206,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
       noBackgroundOpacity,
       style,
       barStyle,
+      barContainerStyle,
       closeRootStyle,
       closeIconStyle,
       onClose,
@@ -249,7 +251,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
           ]}
           {...this._panResponder.panHandlers}
         >
-          {!this.props.noBar && <Bar barStyle={barStyle} />}
+          {!this.props.noBar && <Bar barStyle={barStyle} barContainerStyle={barContainerStyle} />}
           {this.props.showCloseButton && (
             <Close rootStyle={closeRootStyle} iconStyle={closeIconStyle} onPress={this.props.onClose} />
           )}
diff --git a/example/src/hooks/useSwipeablePanel.ts b/example/src/hooks/useSwipeablePanel.ts
index 714c71f..da81a82 100644
--- a/example/src/hooks/useSwipeablePanel.ts
+++ b/example/src/hooks/useSwipeablePanel.ts
@@ -18,6 +18,7 @@ const useSwipeablePanel = () => {
     onlySmall: false,
     allowTouchOutside: false,
     barStyle: {},
+    barContainerStyle: {},
     style: {},
     closeRootStyle: {},
     contentType: null,
@@ -77,6 +78,7 @@ const useSwipeablePanel = () => {
       noBar: false,
       style: { backgroundColor: '#1f1f1f' },
       barStyle: { backgroundColor: 'rgba(255,255,255,0.2)' },
+      barContainerStyle: { backgroundColor: '#1f1f1f' },
       closeRootStyle: { backgroundColor: 'rgba(255,255,255,0.2)' },
       contentType: 'darkShoppingCart',
     });
diff --git a/index.d.ts b/index.d.ts
index 6c37d9c..172b2bd 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -79,6 +79,11 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
    */
   smallPanelHeight?: number;
 
+  /**
+   * Use this prop to override bar container style
+   */
+  barContainerStyle?: object;
+
   /**
    * Set true if you want to make toucable outside of panel
    */
diff --git a/src/Bar.tsx b/src/Bar.tsx
index 046ee8e..dcf1746 100644
--- a/src/Bar.tsx
+++ b/src/Bar.tsx
@@ -3,11 +3,12 @@ import { StyleSheet, View } from 'react-native';
 
 type BarProps = {
   barStyle?: object;
+  barContainerStyle?: object;
 };
 
-export const Bar = ({ barStyle }: BarProps) => {
+export const Bar = ({ barStyle, barContainerStyle }: BarProps) => {
   return (
-    <View style={BarStyles.barContainer}>
+    <View style={[BarStyles.barContainer, barContainerStyle]}>
       <View style={[BarStyles.bar, barStyle]} />
     </View>
   );
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 15f0ffc..6eb28e4 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -40,6 +40,7 @@ type SwipeablePanelProps = {
   smallPanelHeight?: number;
   noBar?: boolean;
   barStyle?: object;
+  barContainerStyle?: object,
   allowTouchOutside?: boolean;
   scrollViewProps?: ScrollViewProps;
 };
@@ -205,6 +206,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
       noBackgroundOpacity,
       style,
       barStyle,
+      barContainerStyle,
       closeRootStyle,
       closeIconStyle,
       onClose,
@@ -249,7 +251,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
           ]}
           {...this._panResponder.panHandlers}
         >
-          {!this.props.noBar && <Bar barStyle={barStyle} />}
+          {!this.props.noBar && <Bar barStyle={barStyle} barContainerStyle={barContainerStyle} />}
           {this.props.showCloseButton && (
             <Close rootStyle={closeRootStyle} iconStyle={closeIconStyle} onPress={this.props.onClose} />
           )}
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 22a4964..117d98b 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -76,6 +76,10 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
    * Use this prop to override the small panel default height
    */
   smallPanelHeight?: number;
+  /**
+   * Use this prop to override bar container style
+   */
+  barContainerStyle?: object;
 
   /**
    * Set true if you want to make toucable outside of panel