Application Android et IOS pour l'amicale des élèves
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.

GroupListAccordion.tsx 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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 * as React from 'react';
  20. import {List, withTheme} from 'react-native-paper';
  21. import {FlatList, View} from 'react-native';
  22. import {stringMatchQuery} from '../../../utils/Search';
  23. import GroupListItem from './GroupListItem';
  24. import AnimatedAccordion from '../../Animations/AnimatedAccordion';
  25. import type {
  26. PlanexGroupType,
  27. PlanexGroupCategoryType,
  28. } from '../../../screens/Planex/GroupSelectionScreen';
  29. type PropsType = {
  30. item: PlanexGroupCategoryType;
  31. favorites: Array<PlanexGroupType>;
  32. onGroupPress: (data: PlanexGroupType) => void;
  33. onFavoritePress: (data: PlanexGroupType) => void;
  34. currentSearchString: string;
  35. height: number;
  36. theme: ReactNativePaper.Theme;
  37. };
  38. const LIST_ITEM_HEIGHT = 64;
  39. const REPLACE_REGEX = /_/g;
  40. class GroupListAccordion extends React.Component<PropsType> {
  41. shouldComponentUpdate(nextProps: PropsType): boolean {
  42. const {props} = this;
  43. return (
  44. nextProps.currentSearchString !== props.currentSearchString ||
  45. nextProps.favorites.length !== props.favorites.length ||
  46. nextProps.item.content.length !== props.item.content.length
  47. );
  48. }
  49. getRenderItem = ({item}: {item: PlanexGroupType}) => {
  50. const {props} = this;
  51. const onPress = () => {
  52. props.onGroupPress(item);
  53. };
  54. const onStarPress = () => {
  55. props.onFavoritePress(item);
  56. };
  57. return (
  58. <GroupListItem
  59. height={LIST_ITEM_HEIGHT}
  60. item={item}
  61. favorites={props.favorites}
  62. onPress={onPress}
  63. onStarPress={onStarPress}
  64. />
  65. );
  66. };
  67. getData(): Array<PlanexGroupType> {
  68. const {props} = this;
  69. const originalData = props.item.content;
  70. const displayData: Array<PlanexGroupType> = [];
  71. originalData.forEach((data: PlanexGroupType) => {
  72. if (stringMatchQuery(data.name, props.currentSearchString)) {
  73. displayData.push(data);
  74. }
  75. });
  76. return displayData;
  77. }
  78. itemLayout = (
  79. data: Array<PlanexGroupType> | null | undefined,
  80. index: number,
  81. ): {length: number; offset: number; index: number} => ({
  82. length: LIST_ITEM_HEIGHT,
  83. offset: LIST_ITEM_HEIGHT * index,
  84. index,
  85. });
  86. keyExtractor = (item: PlanexGroupType): string => item.id.toString();
  87. render() {
  88. const {props} = this;
  89. const {item} = this.props;
  90. return (
  91. <View>
  92. <AnimatedAccordion
  93. title={item.name.replace(REPLACE_REGEX, ' ')}
  94. style={{
  95. height: props.height,
  96. justifyContent: 'center',
  97. }}
  98. left={(iconProps) =>
  99. item.id === 0 ? (
  100. <List.Icon
  101. style={iconProps.style}
  102. icon="star"
  103. color={props.theme.colors.tetrisScore}
  104. />
  105. ) : null
  106. }
  107. unmountWhenCollapsed={item.id !== 0} // Only render list if expanded for increased performance
  108. opened={props.currentSearchString.length > 0}>
  109. <FlatList
  110. data={this.getData()}
  111. extraData={props.currentSearchString + props.favorites.length}
  112. renderItem={this.getRenderItem}
  113. keyExtractor={this.keyExtractor}
  114. listKey={item.id.toString()}
  115. // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
  116. getItemLayout={this.itemLayout}
  117. removeClippedSubviews
  118. />
  119. </AnimatedAccordion>
  120. </View>
  121. );
  122. }
  123. }
  124. export default withTheme(GroupListAccordion);