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.

CollapsibleUtils.tsx 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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 {createCollapsibleStack} from 'react-navigation-collapsible';
  22. import StackNavigator, {StackNavigationOptions} from '@react-navigation/stack';
  23. import {StackNavigationState, TypedNavigator} from '@react-navigation/native';
  24. import {StackNavigationEventMap} from '@react-navigation/stack/lib/typescript/src/types';
  25. type StackNavigatorType = import('@react-navigation/native').TypedNavigator<
  26. Record<string, object | undefined>,
  27. StackNavigationState,
  28. StackNavigationOptions,
  29. StackNavigationEventMap,
  30. typeof StackNavigator
  31. >;
  32. /**
  33. * Creates a navigation stack with the collapsible library, allowing the header to collapse on scroll.
  34. *
  35. * Please use the getWebsiteStack function if your screen uses a webview as their main component as it needs special parameters.
  36. *
  37. * @param name The screen name in the navigation stack
  38. * @param Stack The stack component
  39. * @param component The screen component
  40. * @param title The screen title shown in the header (needs to be translated)
  41. * @param useNativeDriver Whether to use the native driver for animations.
  42. * Set to false if the screen uses a webview as this component does not support native driver.
  43. * In all other cases, set it to true for increase performance.
  44. * @param options Screen options to use, or null if no options are necessary.
  45. * @param headerColor The color of the header. Uses default color if not specified
  46. * @returns {JSX.Element}
  47. */
  48. export function CreateScreenCollapsibleStack(
  49. name: string,
  50. Stack: TypedNavigator<any, any, any, any, any>,
  51. component: React.ComponentType<any>,
  52. title: string,
  53. useNativeDriver: boolean = true,
  54. options: StackNavigationOptions = {},
  55. headerColor?: string,
  56. ) {
  57. const {colors} = useTheme();
  58. return createCollapsibleStack(
  59. <Stack.Screen
  60. name={name}
  61. component={component}
  62. options={{
  63. title,
  64. headerStyle: {
  65. backgroundColor: headerColor != null ? headerColor : colors.surface,
  66. },
  67. ...options,
  68. }}
  69. />,
  70. {
  71. collapsedColor: headerColor != null ? headerColor : colors.surface,
  72. useNativeDriver: useNativeDriver, // native driver does not work with webview
  73. },
  74. );
  75. }
  76. /**
  77. * Creates a navigation stack with the collapsible library, allowing the header to collapse on scroll.
  78. *
  79. * This is a preset for screens using a webview as their main component, as it uses special parameters to work.
  80. * (aka a dirty workaround)
  81. *
  82. * @param name
  83. * @param Stack
  84. * @param component
  85. * @param title
  86. * @returns {JSX.Element}
  87. */
  88. export function getWebsiteStack(
  89. name: string,
  90. Stack: TypedNavigator<any, any, any, any, any>,
  91. component: React.ComponentType<any>,
  92. title: string,
  93. ) {
  94. return CreateScreenCollapsibleStack(name, Stack, component, title, false);
  95. }