Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AnimatedAccordion.tsx 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import React, { useEffect, useRef } from 'react';
  20. import { View, ViewStyle } from 'react-native';
  21. import { List, useTheme } from 'react-native-paper';
  22. import Collapsible from 'react-native-collapsible';
  23. import * as Animatable from 'react-native-animatable';
  24. import GENERAL_STYLES from '../../constants/Styles';
  25. type PropsType = {
  26. title: string;
  27. subtitle?: string;
  28. style?: ViewStyle;
  29. left?: (props: {
  30. color: string;
  31. style?: {
  32. marginRight: number;
  33. marginVertical?: number;
  34. };
  35. }) => React.ReactNode;
  36. opened?: boolean;
  37. unmountWhenCollapsed?: boolean;
  38. enabled?: boolean;
  39. renderItem: () => React.ReactNode;
  40. };
  41. function AnimatedAccordion(props: PropsType) {
  42. const theme = useTheme();
  43. const [expanded, setExpanded] = React.useState(props.opened);
  44. const lastOpenedProp = useRef(props.opened);
  45. const chevronIcon = useRef(props.opened ? 'chevron-up' : 'chevron-down');
  46. const animStart = useRef(props.opened ? '180deg' : '0deg');
  47. const animEnd = useRef(props.opened ? '0deg' : '180deg');
  48. const enabled = props.enabled !== false;
  49. const getAccordionAnimation = ():
  50. | Animatable.Animation
  51. | string
  52. | Animatable.CustomAnimation => {
  53. // I don't knwo why ts is complaining
  54. // The type definitions must be broken because this is a valid style and it works
  55. if (expanded) {
  56. return {
  57. from: {
  58. // @ts-ignore
  59. rotate: animStart.current,
  60. },
  61. to: {
  62. // @ts-ignore
  63. rotate: animEnd.current,
  64. },
  65. };
  66. } else {
  67. return {
  68. from: {
  69. // @ts-ignore
  70. rotate: animEnd.current,
  71. },
  72. to: {
  73. // @ts-ignore
  74. rotate: animStart.current,
  75. },
  76. };
  77. }
  78. };
  79. useEffect(() => {
  80. // Force the expanded state to follow the prop when changing
  81. if (!enabled) {
  82. setExpanded(false);
  83. } else if (
  84. props.opened !== undefined &&
  85. props.opened !== lastOpenedProp.current
  86. ) {
  87. setExpanded(props.opened);
  88. }
  89. }, [enabled, props.opened]);
  90. const toggleAccordion = () => setExpanded(!expanded);
  91. const renderChildren =
  92. !props.unmountWhenCollapsed || (props.unmountWhenCollapsed && expanded);
  93. return (
  94. <View style={props.style}>
  95. <List.Item
  96. title={props.title}
  97. description={props.subtitle}
  98. descriptionNumberOfLines={2}
  99. titleStyle={expanded ? { color: theme.colors.primary } : null}
  100. onPress={enabled ? toggleAccordion : undefined}
  101. right={
  102. enabled
  103. ? (iconProps) => (
  104. <Animatable.View
  105. animation={getAccordionAnimation()}
  106. duration={300}
  107. useNativeDriver={true}
  108. >
  109. <List.Icon
  110. style={{ ...iconProps.style, ...GENERAL_STYLES.center }}
  111. icon={chevronIcon.current}
  112. color={expanded ? theme.colors.primary : iconProps.color}
  113. />
  114. </Animatable.View>
  115. )
  116. : undefined
  117. }
  118. left={props.left}
  119. />
  120. {enabled ? (
  121. <Collapsible collapsed={!expanded}>
  122. {renderChildren ? props.renderItem() : null}
  123. </Collapsible>
  124. ) : null}
  125. </View>
  126. );
  127. }
  128. export default AnimatedAccordion;