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.

CardList.tsx 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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 {Animated, Dimensions, ViewStyle} from 'react-native';
  21. import ImageListItem from './ImageListItem';
  22. import CardListItem from './CardListItem';
  23. import type {ServiceItemType} from '../../../managers/ServicesManager';
  24. type PropsType = {
  25. dataset: Array<ServiceItemType>;
  26. isHorizontal?: boolean;
  27. contentContainerStyle?: ViewStyle;
  28. };
  29. export default class CardList extends React.Component<PropsType> {
  30. static defaultProps = {
  31. isHorizontal: false,
  32. contentContainerStyle: null,
  33. };
  34. windowWidth: number;
  35. horizontalItemSize: number;
  36. constructor(props: PropsType) {
  37. super(props);
  38. this.windowWidth = Dimensions.get('window').width;
  39. this.horizontalItemSize = this.windowWidth / 4; // So that we can fit 3 items, and a part of the 4th => user knows he can scroll
  40. }
  41. getRenderItem = ({item}: {item: ServiceItemType}) => {
  42. const {props} = this;
  43. if (props.isHorizontal) {
  44. return (
  45. <ImageListItem
  46. item={item}
  47. key={item.title}
  48. width={this.horizontalItemSize}
  49. />
  50. );
  51. }
  52. return <CardListItem item={item} key={item.title} />;
  53. };
  54. keyExtractor = (item: ServiceItemType): string => item.key;
  55. render() {
  56. const {props} = this;
  57. let containerStyle = {};
  58. if (props.isHorizontal) {
  59. containerStyle = {
  60. height: this.horizontalItemSize + 50,
  61. justifyContent: 'space-around',
  62. };
  63. }
  64. return (
  65. <Animated.FlatList
  66. data={props.dataset}
  67. renderItem={this.getRenderItem}
  68. keyExtractor={this.keyExtractor}
  69. numColumns={props.isHorizontal ? undefined : 2}
  70. horizontal={props.isHorizontal}
  71. contentContainerStyle={
  72. props.isHorizontal ? containerStyle : props.contentContainerStyle
  73. }
  74. pagingEnabled={props.isHorizontal}
  75. snapToInterval={
  76. props.isHorizontal ? (this.horizontalItemSize + 5) * 3 : undefined
  77. }
  78. />
  79. );
  80. }
  81. }