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 * 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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue