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

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