|
@@ -4,6 +4,9 @@ import * as React from 'react';
|
4
|
4
|
import {FlatList} from "react-native";
|
5
|
5
|
import {Drawer, List, withTheme} from 'react-native-paper';
|
6
|
6
|
import {Linking} from "expo";
|
|
7
|
+import Collapsible from "react-native-collapsible";
|
|
8
|
+import * as Animatable from "react-native-animatable";
|
|
9
|
+import {View} from "react-native-animatable";
|
7
|
10
|
|
8
|
11
|
type Props = {
|
9
|
12
|
navigation: Object,
|
|
@@ -19,6 +22,8 @@ type State = {
|
19
|
22
|
expanded: boolean
|
20
|
23
|
}
|
21
|
24
|
|
|
25
|
+const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
|
|
26
|
+
|
22
|
27
|
const LIST_ITEM_HEIGHT = 48;
|
23
|
28
|
|
24
|
29
|
class SideBarSection extends React.PureComponent<Props, State> {
|
|
@@ -29,10 +34,12 @@ class SideBarSection extends React.PureComponent<Props, State> {
|
29
|
34
|
|
30
|
35
|
colors: Object;
|
31
|
36
|
shouldExpand: boolean;
|
|
37
|
+ chevronRef: Object;
|
32
|
38
|
|
33
|
39
|
constructor(props) {
|
34
|
40
|
super(props);
|
35
|
41
|
this.colors = props.theme.colors;
|
|
42
|
+ this.chevronRef = React.createRef();
|
36
|
43
|
}
|
37
|
44
|
|
38
|
45
|
/**
|
|
@@ -104,8 +111,10 @@ class SideBarSection extends React.PureComponent<Props, State> {
|
104
|
111
|
};
|
105
|
112
|
|
106
|
113
|
toggleAccordion = () => {
|
107
|
|
- if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand)
|
|
114
|
+ if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand) {
|
|
115
|
+ this.chevronRef.current.transitionTo({ rotate: this.state.expanded ? '0deg' : '180deg' });
|
108
|
116
|
this.setState({expanded: !this.state.expanded})
|
|
117
|
+ }
|
109
|
118
|
};
|
110
|
119
|
|
111
|
120
|
shouldRenderAccordion() {
|
|
@@ -140,13 +149,22 @@ class SideBarSection extends React.PureComponent<Props, State> {
|
140
|
149
|
if (this.shouldExpand)
|
141
|
150
|
this.toggleAccordion();
|
142
|
151
|
return (
|
143
|
|
- <List.Accordion
|
144
|
|
- title={this.props.sectionName}
|
145
|
|
- expanded={this.state.expanded}
|
146
|
|
- onPress={this.toggleAccordion}
|
147
|
|
- >
|
148
|
|
- {this.getFlatList()}
|
149
|
|
- </List.Accordion>
|
|
152
|
+ <View>
|
|
153
|
+ <List.Item
|
|
154
|
+ title={this.props.sectionName}
|
|
155
|
+ // expanded={this.state.expanded}
|
|
156
|
+ onPress={this.toggleAccordion}
|
|
157
|
+ right={(props) => <AnimatedListIcon
|
|
158
|
+ ref={this.chevronRef}
|
|
159
|
+ {...props}
|
|
160
|
+ icon={"chevron-down"}
|
|
161
|
+ useNativeDriver
|
|
162
|
+ />}
|
|
163
|
+ />
|
|
164
|
+ <Collapsible collapsed={!this.state.expanded}>
|
|
165
|
+ {this.getFlatList()}
|
|
166
|
+ </Collapsible>
|
|
167
|
+ </View>
|
150
|
168
|
);
|
151
|
169
|
} else
|
152
|
170
|
return this.getFlatList();
|