135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
/*
|
|
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
|
*
|
|
* This file is part of Campus INSAT.
|
|
*
|
|
* Campus INSAT is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Campus INSAT is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {View, ViewStyle} from 'react-native';
|
|
import {List, withTheme} from 'react-native-paper';
|
|
import Collapsible from 'react-native-collapsible';
|
|
import * as Animatable from 'react-native-animatable';
|
|
|
|
type PropsType = {
|
|
theme: ReactNativePaper.Theme;
|
|
title: string;
|
|
subtitle?: string;
|
|
style: ViewStyle;
|
|
left?: (props: {
|
|
color: string;
|
|
style?: {
|
|
marginRight: number;
|
|
marginVertical?: number;
|
|
};
|
|
}) => React.ReactNode;
|
|
opened?: boolean;
|
|
unmountWhenCollapsed?: boolean;
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
type StateType = {
|
|
expanded: boolean;
|
|
};
|
|
|
|
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
|
|
|
|
class AnimatedAccordion extends React.Component<PropsType, StateType> {
|
|
chevronRef: {current: null | (typeof AnimatedListIcon & List.Icon)};
|
|
|
|
chevronIcon: string;
|
|
|
|
animStart: string;
|
|
|
|
animEnd: string;
|
|
|
|
constructor(props: PropsType) {
|
|
super(props);
|
|
this.chevronIcon = '';
|
|
this.animStart = '';
|
|
this.animEnd = '';
|
|
this.state = {
|
|
expanded: props.opened != null ? props.opened : false,
|
|
};
|
|
this.chevronRef = React.createRef();
|
|
this.setupChevron();
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps: PropsType): boolean {
|
|
const {state, props} = this;
|
|
if (nextProps.opened != null && nextProps.opened !== props.opened) {
|
|
state.expanded = nextProps.opened;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
setupChevron() {
|
|
const {expanded} = this.state;
|
|
if (expanded) {
|
|
this.chevronIcon = 'chevron-up';
|
|
this.animStart = '180deg';
|
|
this.animEnd = '0deg';
|
|
} else {
|
|
this.chevronIcon = 'chevron-down';
|
|
this.animStart = '0deg';
|
|
this.animEnd = '180deg';
|
|
}
|
|
}
|
|
|
|
toggleAccordion = () => {
|
|
const {expanded} = this.state;
|
|
if (this.chevronRef.current != null) {
|
|
this.chevronRef.current.transitionTo({
|
|
rotate: expanded ? this.animStart : this.animEnd,
|
|
});
|
|
this.setState((prevState: StateType): {expanded: boolean} => ({
|
|
expanded: !prevState.expanded,
|
|
}));
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const {props, state} = this;
|
|
const {colors} = props.theme;
|
|
return (
|
|
<View style={props.style}>
|
|
<List.Item
|
|
title={props.title}
|
|
description={props.subtitle}
|
|
titleStyle={state.expanded ? {color: colors.primary} : null}
|
|
onPress={this.toggleAccordion}
|
|
right={(iconProps) => (
|
|
<AnimatedListIcon
|
|
ref={this.chevronRef}
|
|
style={iconProps.style}
|
|
icon={this.chevronIcon}
|
|
color={state.expanded ? colors.primary : iconProps.color}
|
|
useNativeDriver
|
|
/>
|
|
)}
|
|
left={props.left}
|
|
/>
|
|
<Collapsible collapsed={!state.expanded}>
|
|
{!props.unmountWhenCollapsed ||
|
|
(props.unmountWhenCollapsed && state.expanded)
|
|
? props.children
|
|
: null}
|
|
</Collapsible>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTheme(AnimatedAccordion);
|