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.

AnimatedFAB.tsx 2.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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 {
  21. NativeScrollEvent,
  22. NativeSyntheticEvent,
  23. StyleSheet,
  24. View,
  25. } from 'react-native';
  26. import {FAB} from 'react-native-paper';
  27. import * as Animatable from 'react-native-animatable';
  28. import AutoHideHandler from '../../utils/AutoHideHandler';
  29. import CustomTabBar from '../Tabbar/CustomTabBar';
  30. type PropsType = {
  31. icon: string;
  32. onPress: () => void;
  33. };
  34. const styles = StyleSheet.create({
  35. fab: {
  36. position: 'absolute',
  37. margin: 16,
  38. right: 0,
  39. },
  40. });
  41. export default class AnimatedFAB extends React.Component<PropsType> {
  42. ref: {current: null | (Animatable.View & View)};
  43. hideHandler: AutoHideHandler;
  44. constructor(props: PropsType) {
  45. super(props);
  46. this.ref = React.createRef();
  47. this.hideHandler = new AutoHideHandler(false);
  48. this.hideHandler.addListener(this.onHideChange);
  49. }
  50. onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
  51. this.hideHandler.onScroll(event);
  52. };
  53. onHideChange = (shouldHide: boolean) => {
  54. const ref = this.ref;
  55. if (
  56. ref &&
  57. ref.current &&
  58. ref.current.bounceOutDown &&
  59. ref.current.bounceInUp
  60. ) {
  61. if (shouldHide) {
  62. ref.current.bounceOutDown(1000);
  63. } else {
  64. ref.current.bounceInUp(1000);
  65. }
  66. }
  67. };
  68. render() {
  69. const {props} = this;
  70. return (
  71. <Animatable.View
  72. ref={this.ref}
  73. useNativeDriver={true}
  74. style={{
  75. ...styles.fab,
  76. bottom: CustomTabBar.TAB_BAR_HEIGHT,
  77. }}>
  78. <FAB icon={props.icon} onPress={props.onPress} />
  79. </Animatable.View>
  80. );
  81. }
  82. }