bquintan/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added accordion animations

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-16 19:57:11 +02:00
parent 5a9f33669c
commit 46d293564f
2 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -43,6 +43,7 @@
"react-native-appearance": "~0.3.3", "react-native-appearance": "~0.3.3",
"react-native-autolink": "^3.0.0", "react-native-autolink": "^3.0.0",
"react-native-calendars": "^1.260.0", "react-native-calendars": "^1.260.0",
"react-native-collapsible": "^1.5.2",
"react-native-gesture-handler": "~1.6.0", "react-native-gesture-handler": "~1.6.0",
"react-native-image-modal": "^1.0.1", "react-native-image-modal": "^1.0.1",
"react-native-modalize": "^1.3.6", "react-native-modalize": "^1.3.6",

34
src/components/Sidebar/SideBarSection.js
View file

@ -4,6 +4,9 @@ import * as React from 'react';
import {FlatList} from "react-native"; import {FlatList} from "react-native";
import {Drawer, List, withTheme} from 'react-native-paper'; import {Drawer, List, withTheme} from 'react-native-paper';
import {Linking} from "expo"; 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 = { type Props = {
navigation: Object, navigation: Object,
@ -19,6 +22,8 @@ type State = {
expanded: boolean expanded: boolean
} }
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
const LIST_ITEM_HEIGHT = 48; const LIST_ITEM_HEIGHT = 48;
class SideBarSection extends React.PureComponent<Props, State> { class SideBarSection extends React.PureComponent<Props, State> {
@ -29,10 +34,12 @@ class SideBarSection extends React.PureComponent<Props, State> {
colors: Object; colors: Object;
shouldExpand: boolean; shouldExpand: boolean;
chevronRef: Object;
constructor(props) { constructor(props) {
super(props); super(props);
this.colors = props.theme.colors; this.colors = props.theme.colors;
this.chevronRef = React.createRef();
} }
/** /**
@ -104,8 +111,10 @@ class SideBarSection extends React.PureComponent<Props, State> {
}; };
toggleAccordion = () => { 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}) this.setState({expanded: !this.state.expanded})
}
}; };
shouldRenderAccordion() { shouldRenderAccordion() {
@ -140,13 +149,22 @@ class SideBarSection extends React.PureComponent<Props, State> {
if (this.shouldExpand) if (this.shouldExpand)
this.toggleAccordion(); this.toggleAccordion();
return ( return (
<List.Accordion <View>
title={this.props.sectionName} <List.Item
expanded={this.state.expanded} title={this.props.sectionName}
onPress={this.toggleAccordion} // expanded={this.state.expanded}
> onPress={this.toggleAccordion}
{this.getFlatList()} right={(props) => <AnimatedListIcon
</List.Accordion> ref={this.chevronRef}
{...props}
icon={"chevron-down"}
useNativeDriver
/>}
/>
<Collapsible collapsed={!this.state.expanded}>
{this.getFlatList()}
</Collapsible>
</View>
); );
} else } else
return this.getFlatList(); return this.getFlatList();