|
@@ -57,8 +57,8 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
|
57
|
57
|
}
|
58
|
58
|
|
59
|
59
|
setupChevron() {
|
60
|
|
- const {state} = this;
|
61
|
|
- if (state.expanded) {
|
|
60
|
+ const {expanded} = this.state;
|
|
61
|
+ if (expanded) {
|
62
|
62
|
this.chevronIcon = 'chevron-up';
|
63
|
63
|
this.animStart = '180deg';
|
64
|
64
|
this.animEnd = '0deg';
|
|
@@ -70,12 +70,14 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
|
70
|
70
|
}
|
71
|
71
|
|
72
|
72
|
toggleAccordion = () => {
|
73
|
|
- const {state} = this;
|
|
73
|
+ const {expanded} = this.state;
|
74
|
74
|
if (this.chevronRef.current != null) {
|
75
|
75
|
this.chevronRef.current.transitionTo({
|
76
|
|
- rotate: state.expanded ? this.animStart : this.animEnd,
|
|
76
|
+ rotate: expanded ? this.animStart : this.animEnd,
|
77
|
77
|
});
|
78
|
|
- this.setState({expanded: !state.expanded});
|
|
78
|
+ this.setState((prevState: StateType): {expanded: boolean} => ({
|
|
79
|
+ expanded: !prevState.expanded,
|
|
80
|
+ }));
|
79
|
81
|
}
|
80
|
82
|
};
|
81
|
83
|
|
|
@@ -87,15 +89,16 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
|
87
|
89
|
<List.Item
|
88
|
90
|
title={props.title}
|
89
|
91
|
subtitle={props.subtitle}
|
90
|
|
- titleStyle={state.expanded ? {color: colors.primary} : undefined}
|
|
92
|
+ titleStyle={state.expanded ? {color: colors.primary} : null}
|
91
|
93
|
onPress={this.toggleAccordion}
|
92
|
94
|
right={({size}: {size: number}): React.Node => (
|
93
|
95
|
<AnimatedListIcon
|
94
|
96
|
ref={this.chevronRef}
|
95
|
97
|
size={size}
|
96
|
98
|
icon={this.chevronIcon}
|
97
|
|
- color={state.expanded ? colors.primary : undefined}
|
|
99
|
+ color={state.expanded ? colors.primary : null}
|
98
|
100
|
useNativeDriver
|
|
101
|
+ style={{rotate: '0deg'}}
|
99
|
102
|
/>
|
100
|
103
|
)}
|
101
|
104
|
left={props.left}
|