saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improved animated components flow typing

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-19 19:03:25 +02:00
parent 6dbce2cc3e
commit 75b7412eb2
3 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/Animations/AnimatedBottomBar.js
View file

@ -2,17 +2,18 @@
import * as React from 'react'; import * as React from 'react';
import {StyleSheet, View} from "react-native"; import {StyleSheet, View} from "react-native";
import {FAB, IconButton, Surface, withTheme} from "react-native-paper"; import {FAB, IconButton, Surface, Theme, withTheme} from "react-native-paper";
import AutoHideHandler from "../../utils/AutoHideHandler"; import AutoHideHandler from "../../utils/AutoHideHandler";
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import CustomTabBar from "../Tabbar/CustomTabBar"; import CustomTabBar from "../Tabbar/CustomTabBar";
import {StackNavigationProp} from "@react-navigation/stack";
const AnimatedFAB = Animatable.createAnimatableComponent(FAB); const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
type Props = { type Props = {
navigation: Object, navigation: StackNavigationProp,
theme: Object, theme: Theme,
onPress: Function, onPress: (action: string, data: any) => void,
seekAttention: boolean, seekAttention: boolean,
} }
@ -28,10 +29,10 @@ const DISPLAY_MODES = {
class AnimatedBottomBar extends React.Component<Props, State> { class AnimatedBottomBar extends React.Component<Props, State> {
ref: Object; ref: { current: null | Animatable.View };
hideHandler: AutoHideHandler; hideHandler: AutoHideHandler;
displayModeIcons: Object; displayModeIcons: { [key: string]: string };
state = { state = {
currentMode: DISPLAY_MODES.WEEK, currentMode: DISPLAY_MODES.WEEK,
@ -55,7 +56,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
} }
onHideChange = (shouldHide: boolean) => { onHideChange = (shouldHide: boolean) => {
if (this.ref.current) { if (this.ref.current != null) {
if (shouldHide) if (shouldHide)
this.ref.current.bounceOutDown(1000); this.ref.current.bounceOutDown(1000);
else else
@ -63,7 +64,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
} }
} }
onScroll = (event: Object) => { onScroll = (event: SyntheticEvent<EventTarget>) => {
this.hideHandler.onScroll(event); this.hideHandler.onScroll(event);
}; };

11
src/components/Animations/AnimatedFAB.js
View file

@ -6,18 +6,19 @@ import {FAB} from "react-native-paper";
import AutoHideHandler from "../../utils/AutoHideHandler"; import AutoHideHandler from "../../utils/AutoHideHandler";
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import CustomTabBar from "../Tabbar/CustomTabBar"; import CustomTabBar from "../Tabbar/CustomTabBar";
import {StackNavigationProp} from "@react-navigation/stack";
type Props = { type Props = {
navigation: Object, navigation: StackNavigationProp,
icon: string, icon: string,
onPress: Function, onPress: () => void,
} }
const AnimatedFab = Animatable.createAnimatableComponent(FAB); const AnimatedFab = Animatable.createAnimatableComponent(FAB);
export default class AnimatedFAB extends React.Component<Props> { export default class AnimatedFAB extends React.Component<Props> {
ref: Object; ref: { current: null | Animatable.View };
hideHandler: AutoHideHandler; hideHandler: AutoHideHandler;
constructor() { constructor() {
@ -27,12 +28,12 @@ export default class AnimatedFAB extends React.Component<Props> {
this.hideHandler.addListener(this.onHideChange); this.hideHandler.addListener(this.onHideChange);
} }
onScroll = (event: Object) => { onScroll = (event: SyntheticEvent<EventTarget>) => {
this.hideHandler.onScroll(event); this.hideHandler.onScroll(event);
}; };
onHideChange = (shouldHide: boolean) => { onHideChange = (shouldHide: boolean) => {
if (this.ref.current) { if (this.ref.current != null) {
if (shouldHide) if (shouldHide)
this.ref.current.bounceOutDown(1000); this.ref.current.bounceOutDown(1000);
else else

11
src/components/Animations/AnimatedFocusView.js
View file

@ -3,16 +3,17 @@
import * as React from 'react'; import * as React from 'react';
import * as Animatable from "react-native-animatable"; import * as Animatable from "react-native-animatable";
import {CommonActions} from "@react-navigation/native"; import {CommonActions} from "@react-navigation/native";
import {StackNavigationProp} from "@react-navigation/stack";
type Props = { type Props = {
navigation: Object, navigation: StackNavigationProp,
route: Object, route: { params?: any, ... },
children: React$Node children: React.Node
} }
export default class AnimatedFocusView extends React.Component<Props> { export default class AnimatedFocusView extends React.Component<Props> {
ref: Object; ref: { current: null | Animatable.View };
constructor() { constructor() {
super(); super();
@ -24,7 +25,7 @@ export default class AnimatedFocusView extends React.Component<Props> {
} }
onScreenFocus = () => { onScreenFocus = () => {
if (this.props.route.params !== undefined) { if (this.props.route.params != null) {
if (this.props.route.params.animationDir && this.ref.current) { if (this.props.route.params.animationDir && this.ref.current) {
if (this.props.route.params.animationDir === "right") if (this.props.route.params.animationDir === "right")
this.ref.current.fadeInRight(300); this.ref.current.fadeInRight(300);