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.

DashboardEditAccordion.tsx 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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 {useTheme} from 'react-native-paper';
  21. import {FlatList, Image, View} from 'react-native';
  22. import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
  23. import DashboardEditItem from './DashboardEditItem';
  24. import AnimatedAccordion from '../../Animations/AnimatedAccordion';
  25. import type {
  26. ServiceCategoryType,
  27. ServiceItemType,
  28. } from '../../../managers/ServicesManager';
  29. type PropsType = {
  30. item: ServiceCategoryType;
  31. activeDashboard: Array<string>;
  32. onPress: (service: ServiceItemType) => void;
  33. };
  34. const LIST_ITEM_HEIGHT = 64;
  35. function DashboardEditAccordion(props: PropsType) {
  36. const theme = useTheme();
  37. const getRenderItem = ({item}: {item: ServiceItemType}) => {
  38. return (
  39. <DashboardEditItem
  40. height={LIST_ITEM_HEIGHT}
  41. item={item}
  42. isActive={props.activeDashboard.includes(item.key)}
  43. onPress={() => {
  44. props.onPress(item);
  45. }}
  46. />
  47. );
  48. };
  49. const getItemLayout = (
  50. data: Array<ServiceItemType> | null | undefined,
  51. index: number,
  52. ): {length: number; offset: number; index: number} => ({
  53. length: LIST_ITEM_HEIGHT,
  54. offset: LIST_ITEM_HEIGHT * index,
  55. index,
  56. });
  57. const {item} = props;
  58. return (
  59. <View>
  60. <AnimatedAccordion
  61. title={item.title}
  62. left={() =>
  63. typeof item.image === 'number' ? (
  64. <Image
  65. source={item.image}
  66. style={{
  67. width: 40,
  68. height: 40,
  69. }}
  70. />
  71. ) : (
  72. <MaterialCommunityIcons
  73. name={item.image}
  74. color={theme.colors.primary}
  75. size={40}
  76. />
  77. )
  78. }>
  79. <FlatList
  80. data={item.content}
  81. extraData={props.activeDashboard.toString()}
  82. renderItem={getRenderItem}
  83. listKey={item.key}
  84. // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
  85. getItemLayout={getItemLayout}
  86. removeClippedSubviews
  87. />
  88. </AnimatedAccordion>
  89. </View>
  90. );
  91. }
  92. export default DashboardEditAccordion;