From 81fa81ac3aa2209c517f380b730f6b0148272daa Mon Sep 17 00:00:00 2001
From: Joe Attard-Owen <jattardowen@gmail.com>
Date: Fri, 29 Jan 2021 12:10:21 +0300
Subject: [PATCH] feat: add prop right to List Accordion

---
 src/components/List/ListAccordion.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index f7f730e5e7..deb13b235d 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -28,6 +28,10 @@ type Props = {
    * Callback which returns a React element to display on the left side.
    */
   left?: (props: { color: string }) => React.ReactNode;
+  /**
+   * Callback which returns a React element to display on the right side.
+   */
+  right?: (props: { isExpanded: boolean }) => React.ReactNode;
   /**
    * Whether the accordion is expanded
    * If this prop is provided, the accordion will behave as a "controlled component".
@@ -127,6 +131,7 @@ type Props = {
  */
 const ListAccordion = ({
   left,
+  right,
   title,
   description,
   children,
@@ -224,12 +229,18 @@ const ListAccordion = ({
           <View
             style={[styles.item, description ? styles.multiline : undefined]}
           >
-            <MaterialCommunityIcon
-              name={isExpanded ? 'chevron-up' : 'chevron-down'}
-              color={titleColor}
-              size={24}
-              direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
-            />
+            {right ? (
+              right({
+                isExpanded: isExpanded,
+              })
+            ) : (
+              <MaterialCommunityIcon
+                name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                color={titleColor}
+                size={24}
+                direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+              />
+            )}
           </View>
         </View>
       </TouchableRipple>