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.

AutoHideHandler.ts 2.9KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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 {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
  20. const speedOffset = 5;
  21. type ListenerFunctionType = (shouldHide: boolean) => void;
  22. /**
  23. * Class used to detect when to show or hide a component based on scrolling
  24. */
  25. export default class AutoHideHandler {
  26. lastOffset: number;
  27. isHidden: boolean;
  28. listeners: Array<ListenerFunctionType>;
  29. constructor(startHidden: boolean) {
  30. this.listeners = [];
  31. this.isHidden = startHidden;
  32. this.lastOffset = 0;
  33. }
  34. /**
  35. * Adds a listener to the hide event
  36. *
  37. * @param listener
  38. */
  39. addListener(listener: (shouldHide: boolean) => void) {
  40. this.listeners.push(listener);
  41. }
  42. /**
  43. * Notifies every listener whether they should hide or show.
  44. *
  45. * @param shouldHide
  46. */
  47. notifyListeners(shouldHide: boolean) {
  48. this.listeners.forEach((func: ListenerFunctionType) => {
  49. func(shouldHide);
  50. });
  51. }
  52. /**
  53. * Callback to be used on the onScroll animated component event.
  54. *
  55. * Detects if the current speed exceeds a threshold and notifies listeners to hide or show.
  56. *
  57. * The hide even is triggered when the user scrolls down, and the show event on scroll up.
  58. * This does not take into account the speed when the y coordinate is negative, to prevent hiding on over scroll.
  59. * (When scrolling up and hitting the top on ios for example)
  60. *
  61. * //TODO Known issue:
  62. * When refreshing a list with the pull down gesture on ios,
  63. * this can trigger the hide event as it scrolls down the list to show the refresh indicator.
  64. * Android shows the refresh indicator on top of the list so this is not an issue.
  65. *
  66. * @param event The scroll event generated by the animated component onScroll prop
  67. */
  68. onScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
  69. const {nativeEvent} = event;
  70. const speed =
  71. nativeEvent.contentOffset.y < 0
  72. ? 0
  73. : this.lastOffset - nativeEvent.contentOffset.y;
  74. if (speed < -speedOffset && !this.isHidden) {
  75. // Go down
  76. this.notifyListeners(true);
  77. this.isHidden = true;
  78. } else if (speed > speedOffset && this.isHidden) {
  79. // Go up
  80. this.notifyListeners(false);
  81. this.isHidden = false;
  82. }
  83. this.lastOffset = nativeEvent.contentOffset.y;
  84. }
  85. }