From 46d293564f7cfb0300298dac00252cdd18e16623 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Thu, 16 Apr 2020 19:57:11 +0200
Subject: [PATCH] Added accordion animations

---
 package.json                             |  1 +
 src/components/Sidebar/SideBarSection.js | 34 ++++++++++++++++++------
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index d3f686d..10eec8f 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "react-native-appearance": "~0.3.3",
     "react-native-autolink": "^3.0.0",
     "react-native-calendars": "^1.260.0",
+    "react-native-collapsible": "^1.5.2",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-image-modal": "^1.0.1",
     "react-native-modalize": "^1.3.6",
diff --git a/src/components/Sidebar/SideBarSection.js b/src/components/Sidebar/SideBarSection.js
index 88e6154..87dbbf6 100644
--- a/src/components/Sidebar/SideBarSection.js
+++ b/src/components/Sidebar/SideBarSection.js
@@ -4,6 +4,9 @@ import * as React from 'react';
 import {FlatList} from "react-native";
 import {Drawer, List, withTheme} from 'react-native-paper';
 import {Linking} from "expo";
+import Collapsible from "react-native-collapsible";
+import * as Animatable from "react-native-animatable";
+import {View} from "react-native-animatable";
 
 type Props = {
     navigation: Object,
@@ -19,6 +22,8 @@ type State = {
     expanded: boolean
 }
 
+const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
+
 const LIST_ITEM_HEIGHT = 48;
 
 class SideBarSection extends React.PureComponent<Props, State> {
@@ -29,10 +34,12 @@ class SideBarSection extends React.PureComponent<Props, State> {
 
     colors: Object;
     shouldExpand: boolean;
+    chevronRef: Object;
 
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
+        this.chevronRef = React.createRef();
     }
 
     /**
@@ -104,8 +111,10 @@ class SideBarSection extends React.PureComponent<Props, State> {
     };
 
     toggleAccordion = () => {
-        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand)
+        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand) {
+            this.chevronRef.current.transitionTo({ rotate: this.state.expanded ? '0deg' : '180deg' });
             this.setState({expanded: !this.state.expanded})
+        }
     };
 
     shouldRenderAccordion() {
@@ -140,13 +149,22 @@ class SideBarSection extends React.PureComponent<Props, State> {
             if (this.shouldExpand)
                 this.toggleAccordion();
             return (
-                <List.Accordion
-                    title={this.props.sectionName}
-                    expanded={this.state.expanded}
-                    onPress={this.toggleAccordion}
-                >
-                    {this.getFlatList()}
-                </List.Accordion>
+                <View>
+                    <List.Item
+                        title={this.props.sectionName}
+                        // expanded={this.state.expanded}
+                        onPress={this.toggleAccordion}
+                        right={(props) => <AnimatedListIcon
+                            ref={this.chevronRef}
+                            {...props}
+                            icon={"chevron-down"}
+                            useNativeDriver
+                        />}
+                    />
+                    <Collapsible collapsed={!this.state.expanded}>
+                        {this.getFlatList()}
+                    </Collapsible>
+                </View>
             );
         } else
             return this.getFlatList();