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.

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