forked from vergnet/application-amicale
Improved animated components flow typing
This commit is contained in:
parent
6dbce2cc3e
commit
75b7412eb2
3 changed files with 21 additions and 18 deletions
|
@ -2,17 +2,18 @@
|
|||
|
||||
import * as React from 'react';
|
||||
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 * as Animatable from 'react-native-animatable';
|
||||
import CustomTabBar from "../Tabbar/CustomTabBar";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
theme: Object,
|
||||
onPress: Function,
|
||||
navigation: StackNavigationProp,
|
||||
theme: Theme,
|
||||
onPress: (action: string, data: any) => void,
|
||||
seekAttention: boolean,
|
||||
}
|
||||
|
||||
|
@ -28,10 +29,10 @@ const DISPLAY_MODES = {
|
|||
|
||||
class AnimatedBottomBar extends React.Component<Props, State> {
|
||||
|
||||
ref: Object;
|
||||
ref: { current: null | Animatable.View };
|
||||
hideHandler: AutoHideHandler;
|
||||
|
||||
displayModeIcons: Object;
|
||||
displayModeIcons: { [key: string]: string };
|
||||
|
||||
state = {
|
||||
currentMode: DISPLAY_MODES.WEEK,
|
||||
|
@ -55,7 +56,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
onHideChange = (shouldHide: boolean) => {
|
||||
if (this.ref.current) {
|
||||
if (this.ref.current != null) {
|
||||
if (shouldHide)
|
||||
this.ref.current.bounceOutDown(1000);
|
||||
else
|
||||
|
@ -63,7 +64,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
onScroll = (event: Object) => {
|
||||
onScroll = (event: SyntheticEvent<EventTarget>) => {
|
||||
this.hideHandler.onScroll(event);
|
||||
};
|
||||
|
||||
|
|
|
@ -6,18 +6,19 @@ import {FAB} from "react-native-paper";
|
|||
import AutoHideHandler from "../../utils/AutoHideHandler";
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import CustomTabBar from "../Tabbar/CustomTabBar";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
navigation: StackNavigationProp,
|
||||
icon: string,
|
||||
onPress: Function,
|
||||
onPress: () => void,
|
||||
}
|
||||
|
||||
const AnimatedFab = Animatable.createAnimatableComponent(FAB);
|
||||
|
||||
export default class AnimatedFAB extends React.Component<Props> {
|
||||
|
||||
ref: Object;
|
||||
ref: { current: null | Animatable.View };
|
||||
hideHandler: AutoHideHandler;
|
||||
|
||||
constructor() {
|
||||
|
@ -27,12 +28,12 @@ export default class AnimatedFAB extends React.Component<Props> {
|
|||
this.hideHandler.addListener(this.onHideChange);
|
||||
}
|
||||
|
||||
onScroll = (event: Object) => {
|
||||
onScroll = (event: SyntheticEvent<EventTarget>) => {
|
||||
this.hideHandler.onScroll(event);
|
||||
};
|
||||
|
||||
onHideChange = (shouldHide: boolean) => {
|
||||
if (this.ref.current) {
|
||||
if (this.ref.current != null) {
|
||||
if (shouldHide)
|
||||
this.ref.current.bounceOutDown(1000);
|
||||
else
|
||||
|
|
|
@ -3,16 +3,17 @@
|
|||
import * as React from 'react';
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import {CommonActions} from "@react-navigation/native";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
children: React$Node
|
||||
navigation: StackNavigationProp,
|
||||
route: { params?: any, ... },
|
||||
children: React.Node
|
||||
}
|
||||
|
||||
export default class AnimatedFocusView extends React.Component<Props> {
|
||||
|
||||
ref: Object;
|
||||
ref: { current: null | Animatable.View };
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
@ -24,7 +25,7 @@ export default class AnimatedFocusView extends React.Component<Props> {
|
|||
}
|
||||
|
||||
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 === "right")
|
||||
this.ref.current.fadeInRight(300);
|
||||
|
|
Loading…
Reference in a new issue