ysimard/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-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",

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

@ -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();