vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Create animated accordion component for reuse in the app

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-19 21:44:58 +02:00
parent 581ea516ae
commit 7f24eb77ac
5 changed files with 127 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/components/Animations/AnimatedAccordion.js Normal file
View file

@ -0,0 +1,87 @@
// @flow
import * as React from 'react';
import {View} from "react-native";
import {List, withTheme} from 'react-native-paper';
import Collapsible from "react-native-collapsible";
import * as Animatable from "react-native-animatable";
import type {CustomTheme} from "../../managers/ThemeManager";
type Props = {
theme: CustomTheme,
title: string,
subtitle?: string,
left?: (props: { [keys: string]: any }) => React.Node,
startOpen: boolean,
keepOpen: boolean,
unmountWhenCollapsed: boolean,
children?: React.Node,
}
type State = {
expanded: boolean
}
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
class AnimatedAccordion extends React.PureComponent<Props, State> {
static defaultProps = {
startOpen: false,
keepOpen: false,
unmountWhenCollapsed: false,
}
chevronRef: { current: null | AnimatedListIcon };
state = {
expanded: false,
}
constructor(props) {
super(props);
this.chevronRef = React.createRef();
}
componentDidMount() {
if (this.props.startOpen)
this.toggleAccordion();
}
toggleAccordion = () => {
if (!this.props.keepOpen) {
if (this.chevronRef.current != null)
this.chevronRef.current.transitionTo({rotate: this.state.expanded ? '0deg' : '180deg'});
this.setState({expanded: !this.state.expanded})
}
};
render() {
const colors = this.props.theme.colors;
return (
<View>
<List.Item
{...this.props}
title={this.props.title}
subtitle={this.props.subtitle}
titleStyle={this.state.expanded ? {color: colors.primary} : undefined}
onPress={this.toggleAccordion}
right={(props) => <AnimatedListIcon
ref={this.chevronRef}
{...props}
icon={"chevron-down"}
color={this.state.expanded ? colors.primary : undefined}
useNativeDriver
/>}
left={this.props.left}
/>
<Collapsible collapsed={!this.props.keepOpen && !this.state.expanded}>
{!this.props.unmountWhenCollapsed || (this.props.unmountWhenCollapsed && this.state.expanded)
? this.props.children
: null}
</Collapsible>
</View>
);
}
}
export default withTheme(AnimatedAccordion);

19
src/components/Lists/Clubs/ClubListHeader.js
View file

@ -4,21 +4,15 @@ import * as React from 'react';
import {Card, List, Text, withTheme} from 'react-native-paper';
import {StyleSheet, View} from "react-native";
import i18n from 'i18n-js';
import AnimatedAccordion from "../../Animations/AnimatedAccordion";
type Props = {
categoryRender: Function,
categories: Array<Object>,
}
type State = {
expanded: boolean,
}
class ClubListHeader extends React.Component<Props> {
class ClubListHeader extends React.Component<Props, State> {
state = {
expanded: true
};
colors: Object;
@ -35,22 +29,19 @@ class ClubListHeader extends React.Component<Props, State> {
return final;
}
onPress = () => this.setState({expanded: !this.state.expanded});
render() {
return (
<Card style={styles.card}>
<List.Accordion
<AnimatedAccordion
title={i18n.t("clubs.categories")}
left={props => <List.Icon {...props} icon="star"/>}
expanded={this.state.expanded}
onPress={this.onPress}
startOpen={true}
>
<Text style={styles.text}>{i18n.t("clubs.categoriesFilterMessage")}</Text>
<View style={styles.chipContainer}>
{this.getCategoriesRender()}
</View>
</List.Accordion>
</AnimatedAccordion>
</Card>
);
}

55
src/components/Lists/PlanexGroups/GroupListAccordion.js
View file

@ -4,9 +4,9 @@ import * as React from 'react';
import {List, withTheme} from 'react-native-paper';
import {FlatList, View} from "react-native";
import {stringMatchQuery} from "../../../utils/Search";
import Collapsible from "react-native-collapsible";
import * as Animatable from "react-native-animatable";
import GroupListItem from "./GroupListItem";
import AnimatedAccordion from "../../Animations/AnimatedAccordion";
type Props = {
item: Object,
@ -47,11 +47,6 @@ class GroupListAccordion extends React.Component<Props, State> {
|| (nextProps.item.content.length !== this.props.item.content.length);
}
onPress = () => {
this.chevronRef.current.transitionTo({rotate: this.state.expanded ? '0deg' : '180deg'});
this.setState({expanded: !this.state.expanded})
};
keyExtractor = (item: Object) => item.id.toString();
renderItem = ({item}: Object) => {
@ -73,20 +68,14 @@ class GroupListAccordion extends React.Component<Props, State> {
render() {
const item = this.props.item;
const accordionColor = this.state.expanded
? this.props.theme.colors.primary
: this.props.theme.colors.text;
// console.log(item.id);
return (
<View>
<List.Item
<AnimatedAccordion
title={item.name}
onPress={this.onPress}
style={{
height: this.props.height,
justifyContent: 'center',
}}
titleStyle={{color: accordionColor}}
left={props =>
item.id === "0"
? <List.Icon
@ -95,35 +84,19 @@ class GroupListAccordion extends React.Component<Props, State> {
color={this.props.theme.colors.tetrisScore}
/>
: null}
right={(props) => <AnimatedListIcon
ref={this.chevronRef}
{...props}
icon={"chevron-down"}
color={this.state.expanded
? this.props.theme.colors.primary
: props.color
}
useNativeDriver
/>}
/>
<Collapsible
collapsed={!this.state.expanded}
ease={"easeInOut"}
unmountWhenCollapsed={true}// Only render list if expanded for increased performance
>
{this.state.expanded // Only render list if expanded for increased performance
? <FlatList
data={item.content}
extraData={this.props.currentSearchString}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
listKey={item.id}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={this.itemLayout} // Broken with search
removeClippedSubviews={true}
/>
: null}
</Collapsible>
<FlatList
data={item.content}
extraData={this.props.currentSearchString}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
listKey={item.id}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={this.itemLayout} // Broken with search
removeClippedSubviews={true}
/>
</AnimatedAccordion>
</View>
);
}

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

@ -1,11 +1,10 @@
// @flow
import * as React from 'react';
import {FlatList, View} from "react-native";
import {Drawer, List, withTheme} from 'react-native-paper';
import {FlatList} from "react-native";
import {Drawer, withTheme} from 'react-native-paper';
import {Linking} from "expo";
import Collapsible from "react-native-collapsible";
import * as Animatable from "react-native-animatable";
import AnimatedAccordion from "../Animations/AnimatedAccordion";
type Props = {
navigation: Object,
@ -17,28 +16,17 @@ type Props = {
listData: Array<Object>,
}
type State = {
expanded: boolean
}
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
const LIST_ITEM_HEIGHT = 48;
class SideBarSection extends React.PureComponent<Props, State> {
state = {
expanded: this.props.startOpen,
};
class SideBarSection extends React.PureComponent<Props> {
colors: Object;
shouldExpand: boolean;
chevronRef: Object;
accordionRef: {current: null | AnimatedAccordion};
constructor(props) {
super(props);
this.colors = props.theme.colors;
this.chevronRef = React.createRef();
this.accordionRef = React.createRef();
}
/**
@ -50,7 +38,7 @@ class SideBarSection extends React.PureComponent<Props, State> {
shouldExpandList() {
for (let i = 0; i < this.props.listData.length; i++) {
if (this.props.listData[i].route === this.props.activeRoute) {
return this.state.expanded === false;
return true;
}
}
return false;
@ -109,13 +97,6 @@ class SideBarSection extends React.PureComponent<Props, State> {
);
};
toggleAccordion = () => {
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() {
let itemsToRender = 0;
for (let i = 0; i < this.props.listData.length; i++) {
@ -144,26 +125,13 @@ class SideBarSection extends React.PureComponent<Props, State> {
render() {
if (this.shouldRenderAccordion()) {
this.shouldExpand = this.shouldExpandList();
if (this.shouldExpand)
this.toggleAccordion();
return (
<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>
<AnimatedAccordion
title={this.props.sectionName}
keepOpen={this.shouldExpandList()}
>
{this.getFlatList()}
</AnimatedAccordion>
);
} else
return this.getFlatList();

13
src/screens/Other/SettingsScreen.js
View file

@ -8,6 +8,7 @@ import AsyncStorageManager from "../../managers/AsyncStorageManager";
import {setMachineReminderNotificationTime} from "../../utils/Notifications";
import {Card, List, Switch, ToggleButton} from 'react-native-paper';
import {Appearance} from "react-native-appearance";
import AnimatedAccordion from "../../components/Animations/AnimatedAccordion";
type Props = {
navigation: Object,
@ -89,6 +90,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
<ToggleButton.Row
onValueChange={this.onProxiwashNotifPickerValueChange}
value={this.state.proxiwashNotifPickerSelected}
style={{marginLeft: 'auto', marginRight: 'auto'}}
>
<ToggleButton icon="close" value="never"/>
<ToggleButton icon="numeric-2" value="2"/>
@ -107,6 +109,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
<ToggleButton.Row
onValueChange={this.onStartScreenPickerValueChange}
value={this.state.startScreenPickerSelected}
style={{marginLeft: 'auto', marginRight: 'auto'}}
>
<ToggleButton icon="shopping" value="proximo"/>
<ToggleButton icon="calendar-range" value="planning"/>
@ -188,25 +191,25 @@ export default class SettingsScreen extends React.Component<Props, State> {
this.state.nightMode
) : null
}
<List.Accordion
<AnimatedAccordion
title={i18n.t('settingsScreen.startScreen')}
description={i18n.t('settingsScreen.startScreenSub')}
subtitle={i18n.t('settingsScreen.startScreenSub')}
left={props => <List.Icon {...props} icon="power"/>}
>
{this.getStartScreenPicker()}
</List.Accordion>
</AnimatedAccordion>
</List.Section>
</Card>
<Card style={{margin: 5}}>
<Card.Title title="Proxiwash"/>
<List.Section>
<List.Accordion
<AnimatedAccordion
title={i18n.t('settingsScreen.proxiwashNotifReminder')}
description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
left={props => <List.Icon {...props} icon="washing-machine"/>}
>
{this.getProxiwashNotifPicker()}
</List.Accordion>
</AnimatedAccordion>
</List.Section>
</Card>
</ScrollView>