forked from vergnet/application-amicale
Improve Mascot components to match linter
This commit is contained in:
parent
1cc0802c12
commit
7b94afadcc
3 changed files with 559 additions and 510 deletions
|
|
@ -1,259 +1,269 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import {Image, TouchableWithoutFeedback, View} from "react-native";
|
||||
import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import {Image, TouchableWithoutFeedback, View} from 'react-native';
|
||||
import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
|
||||
|
||||
type Props = {
|
||||
style?: ViewStyle,
|
||||
emotion: number,
|
||||
animated: boolean,
|
||||
entryAnimation: Animatable.AnimatableProperties | null,
|
||||
loopAnimation: Animatable.AnimatableProperties | null,
|
||||
onPress?: (viewRef: AnimatableViewRef) => null,
|
||||
onLongPress?: (viewRef: AnimatableViewRef) => null,
|
||||
}
|
||||
export type AnimatableViewRefType = {current: null | Animatable.View};
|
||||
|
||||
type State = {
|
||||
currentEmotion: number,
|
||||
}
|
||||
|
||||
export type AnimatableViewRef = {current: null | Animatable.View};
|
||||
|
||||
const MASCOT_IMAGE = require("../../../assets/mascot/mascot.png");
|
||||
const MASCOT_EYES_NORMAL = require("../../../assets/mascot/mascot_eyes_normal.png");
|
||||
const MASCOT_EYES_GIRLY = require("../../../assets/mascot/mascot_eyes_girly.png");
|
||||
const MASCOT_EYES_CUTE = require("../../../assets/mascot/mascot_eyes_cute.png");
|
||||
const MASCOT_EYES_WINK = require("../../../assets/mascot/mascot_eyes_wink.png");
|
||||
const MASCOT_EYES_HEART = require("../../../assets/mascot/mascot_eyes_heart.png");
|
||||
const MASCOT_EYES_ANGRY = require("../../../assets/mascot/mascot_eyes_angry.png");
|
||||
const MASCOT_GLASSES = require("../../../assets/mascot/mascot_glasses.png");
|
||||
const MASCOT_SUNGLASSES = require("../../../assets/mascot/mascot_sunglasses.png");
|
||||
|
||||
export const EYE_STYLE = {
|
||||
NORMAL: 0,
|
||||
GIRLY: 2,
|
||||
CUTE: 3,
|
||||
WINK: 4,
|
||||
HEART: 5,
|
||||
ANGRY: 6,
|
||||
}
|
||||
|
||||
const GLASSES_STYLE = {
|
||||
NORMAL: 0,
|
||||
COOl: 1
|
||||
}
|
||||
|
||||
export const MASCOT_STYLE = {
|
||||
NORMAL: 0,
|
||||
HAPPY: 1,
|
||||
GIRLY: 2,
|
||||
WINK: 3,
|
||||
CUTE: 4,
|
||||
INTELLO: 5,
|
||||
LOVE: 6,
|
||||
COOL: 7,
|
||||
ANGRY: 8,
|
||||
RANDOM: 999,
|
||||
type PropsType = {
|
||||
emotion?: number,
|
||||
animated?: boolean,
|
||||
style?: ViewStyle | null,
|
||||
entryAnimation?: Animatable.AnimatableProperties | null,
|
||||
loopAnimation?: Animatable.AnimatableProperties | null,
|
||||
onPress?: null | ((viewRef: AnimatableViewRefType) => void),
|
||||
onLongPress?: null | ((viewRef: AnimatableViewRefType) => void),
|
||||
};
|
||||
|
||||
type StateType = {
|
||||
currentEmotion: number,
|
||||
};
|
||||
|
||||
class Mascot extends React.Component<Props, State> {
|
||||
const MASCOT_IMAGE = require('../../../assets/mascot/mascot.png');
|
||||
const MASCOT_EYES_NORMAL = require('../../../assets/mascot/mascot_eyes_normal.png');
|
||||
const MASCOT_EYES_GIRLY = require('../../../assets/mascot/mascot_eyes_girly.png');
|
||||
const MASCOT_EYES_CUTE = require('../../../assets/mascot/mascot_eyes_cute.png');
|
||||
const MASCOT_EYES_WINK = require('../../../assets/mascot/mascot_eyes_wink.png');
|
||||
const MASCOT_EYES_HEART = require('../../../assets/mascot/mascot_eyes_heart.png');
|
||||
const MASCOT_EYES_ANGRY = require('../../../assets/mascot/mascot_eyes_angry.png');
|
||||
const MASCOT_GLASSES = require('../../../assets/mascot/mascot_glasses.png');
|
||||
const MASCOT_SUNGLASSES = require('../../../assets/mascot/mascot_sunglasses.png');
|
||||
|
||||
static defaultProps = {
|
||||
animated: false,
|
||||
entryAnimation: {
|
||||
useNativeDriver: true,
|
||||
animation: "rubberBand",
|
||||
duration: 2000,
|
||||
},
|
||||
loopAnimation: {
|
||||
useNativeDriver: true,
|
||||
animation: "swing",
|
||||
duration: 2000,
|
||||
iterationDelay: 250,
|
||||
iterationCount: "infinite",
|
||||
},
|
||||
clickAnimation: {
|
||||
useNativeDriver: true,
|
||||
animation: "rubberBand",
|
||||
duration: 2000,
|
||||
},
|
||||
}
|
||||
export const EYE_STYLE = {
|
||||
NORMAL: 0,
|
||||
GIRLY: 2,
|
||||
CUTE: 3,
|
||||
WINK: 4,
|
||||
HEART: 5,
|
||||
ANGRY: 6,
|
||||
};
|
||||
|
||||
viewRef: AnimatableViewRef;
|
||||
eyeList: { [key: number]: number | string };
|
||||
glassesList: { [key: number]: number | string };
|
||||
const GLASSES_STYLE = {
|
||||
NORMAL: 0,
|
||||
COOl: 1,
|
||||
};
|
||||
|
||||
onPress: (viewRef: AnimatableViewRef) => null;
|
||||
onLongPress: (viewRef: AnimatableViewRef) => null;
|
||||
export const MASCOT_STYLE = {
|
||||
NORMAL: 0,
|
||||
HAPPY: 1,
|
||||
GIRLY: 2,
|
||||
WINK: 3,
|
||||
CUTE: 4,
|
||||
INTELLO: 5,
|
||||
LOVE: 6,
|
||||
COOL: 7,
|
||||
ANGRY: 8,
|
||||
RANDOM: 999,
|
||||
};
|
||||
|
||||
initialEmotion: number;
|
||||
class Mascot extends React.Component<PropsType, StateType> {
|
||||
static defaultProps = {
|
||||
emotion: MASCOT_STYLE.NORMAL,
|
||||
animated: false,
|
||||
style: null,
|
||||
entryAnimation: {
|
||||
useNativeDriver: true,
|
||||
animation: 'rubberBand',
|
||||
duration: 2000,
|
||||
},
|
||||
loopAnimation: {
|
||||
useNativeDriver: true,
|
||||
animation: 'swing',
|
||||
duration: 2000,
|
||||
iterationDelay: 250,
|
||||
iterationCount: 'infinite',
|
||||
},
|
||||
onPress: null,
|
||||
onLongPress: null,
|
||||
};
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.viewRef = React.createRef();
|
||||
this.eyeList = {};
|
||||
this.glassesList = {};
|
||||
this.eyeList[EYE_STYLE.NORMAL] = MASCOT_EYES_NORMAL;
|
||||
this.eyeList[EYE_STYLE.GIRLY] = MASCOT_EYES_GIRLY;
|
||||
this.eyeList[EYE_STYLE.CUTE] = MASCOT_EYES_CUTE;
|
||||
this.eyeList[EYE_STYLE.WINK] = MASCOT_EYES_WINK;
|
||||
this.eyeList[EYE_STYLE.HEART] = MASCOT_EYES_HEART;
|
||||
this.eyeList[EYE_STYLE.ANGRY] = MASCOT_EYES_ANGRY;
|
||||
viewRef: AnimatableViewRefType;
|
||||
|
||||
this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES;
|
||||
this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES;
|
||||
eyeList: {[key: number]: number | string};
|
||||
|
||||
this.initialEmotion = this.props.emotion;
|
||||
glassesList: {[key: number]: number | string};
|
||||
|
||||
if (this.initialEmotion === MASCOT_STYLE.RANDOM)
|
||||
this.initialEmotion = Math.floor(Math.random() * MASCOT_STYLE.ANGRY) + 1;
|
||||
onPress: (viewRef: AnimatableViewRefType) => void;
|
||||
|
||||
this.state = {
|
||||
currentEmotion: this.initialEmotion
|
||||
onLongPress: (viewRef: AnimatableViewRefType) => void;
|
||||
|
||||
initialEmotion: number;
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.viewRef = React.createRef();
|
||||
this.eyeList = {};
|
||||
this.glassesList = {};
|
||||
this.eyeList[EYE_STYLE.NORMAL] = MASCOT_EYES_NORMAL;
|
||||
this.eyeList[EYE_STYLE.GIRLY] = MASCOT_EYES_GIRLY;
|
||||
this.eyeList[EYE_STYLE.CUTE] = MASCOT_EYES_CUTE;
|
||||
this.eyeList[EYE_STYLE.WINK] = MASCOT_EYES_WINK;
|
||||
this.eyeList[EYE_STYLE.HEART] = MASCOT_EYES_HEART;
|
||||
this.eyeList[EYE_STYLE.ANGRY] = MASCOT_EYES_ANGRY;
|
||||
|
||||
this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES;
|
||||
this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES;
|
||||
|
||||
this.initialEmotion =
|
||||
props.emotion != null ? props.emotion : Mascot.defaultProps.emotion;
|
||||
|
||||
if (this.initialEmotion === MASCOT_STYLE.RANDOM)
|
||||
this.initialEmotion = Math.floor(Math.random() * MASCOT_STYLE.ANGRY) + 1;
|
||||
|
||||
this.state = {
|
||||
currentEmotion: this.initialEmotion,
|
||||
};
|
||||
|
||||
if (props.onPress == null) {
|
||||
this.onPress = (viewRef: AnimatableViewRefType) => {
|
||||
const ref = viewRef.current;
|
||||
if (ref != null) {
|
||||
this.setState({currentEmotion: MASCOT_STYLE.LOVE});
|
||||
ref.rubberBand(1500).then(() => {
|
||||
this.setState({currentEmotion: this.initialEmotion});
|
||||
});
|
||||
}
|
||||
};
|
||||
} else this.onPress = props.onPress;
|
||||
|
||||
if (this.props.onPress == null) {
|
||||
this.onPress = (viewRef: AnimatableViewRef) => {
|
||||
let ref = viewRef.current;
|
||||
if (ref != null) {
|
||||
this.setState({currentEmotion: MASCOT_STYLE.LOVE});
|
||||
ref.rubberBand(1500).then(() => {
|
||||
this.setState({currentEmotion: this.initialEmotion});
|
||||
});
|
||||
|
||||
}
|
||||
return null;
|
||||
}
|
||||
} else
|
||||
this.onPress = this.props.onPress;
|
||||
|
||||
if (this.props.onLongPress == null) {
|
||||
this.onLongPress = (viewRef: AnimatableViewRef) => {
|
||||
let ref = viewRef.current;
|
||||
if (ref != null) {
|
||||
this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
|
||||
ref.tada(1000).then(() => {
|
||||
this.setState({currentEmotion: this.initialEmotion});
|
||||
});
|
||||
|
||||
}
|
||||
return null;
|
||||
}
|
||||
} else
|
||||
this.onLongPress = this.props.onLongPress;
|
||||
|
||||
}
|
||||
|
||||
getGlasses(style: number) {
|
||||
const glasses = this.glassesList[style];
|
||||
return <Image
|
||||
key={"glasses"}
|
||||
source={glasses != null ? glasses : this.glassesList[GLASSES_STYLE.NORMAL]}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "15%",
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
getEye(style: number, isRight: boolean, rotation: string="0deg") {
|
||||
const eye = this.eyeList[style];
|
||||
return <Image
|
||||
key={isRight ? "right" : "left"}
|
||||
source={eye != null ? eye : this.eyeList[EYE_STYLE.NORMAL]}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "15%",
|
||||
left: isRight ? "-11%" : "11%",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transform: [{rotateY: rotation}]
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
getEyes(emotion: number) {
|
||||
let final = [];
|
||||
final.push(<View
|
||||
key={"container"}
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}/>);
|
||||
if (emotion === MASCOT_STYLE.CUTE) {
|
||||
final.push(this.getEye(EYE_STYLE.CUTE, true));
|
||||
final.push(this.getEye(EYE_STYLE.CUTE, false));
|
||||
} else if (emotion === MASCOT_STYLE.GIRLY) {
|
||||
final.push(this.getEye(EYE_STYLE.GIRLY, true));
|
||||
final.push(this.getEye(EYE_STYLE.GIRLY, false));
|
||||
} else if (emotion === MASCOT_STYLE.HAPPY) {
|
||||
final.push(this.getEye(EYE_STYLE.WINK, true));
|
||||
final.push(this.getEye(EYE_STYLE.WINK, false));
|
||||
} else if (emotion === MASCOT_STYLE.WINK) {
|
||||
final.push(this.getEye(EYE_STYLE.WINK, true));
|
||||
final.push(this.getEye(EYE_STYLE.NORMAL, false));
|
||||
} else if (emotion === MASCOT_STYLE.LOVE) {
|
||||
final.push(this.getEye(EYE_STYLE.HEART, true));
|
||||
final.push(this.getEye(EYE_STYLE.HEART, false));
|
||||
} else if (emotion === MASCOT_STYLE.ANGRY) {
|
||||
final.push(this.getEye(EYE_STYLE.ANGRY, true));
|
||||
final.push(this.getEye(EYE_STYLE.ANGRY, false, "180deg"));
|
||||
} else if (emotion === MASCOT_STYLE.COOL) {
|
||||
final.push(this.getGlasses(GLASSES_STYLE.COOl));
|
||||
} else {
|
||||
final.push(this.getEye(EYE_STYLE.NORMAL, true));
|
||||
final.push(this.getEye(EYE_STYLE.NORMAL, false));
|
||||
if (props.onLongPress == null) {
|
||||
this.onLongPress = (viewRef: AnimatableViewRefType) => {
|
||||
const ref = viewRef.current;
|
||||
if (ref != null) {
|
||||
this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
|
||||
ref.tada(1000).then(() => {
|
||||
this.setState({currentEmotion: this.initialEmotion});
|
||||
});
|
||||
}
|
||||
};
|
||||
} else this.onLongPress = props.onLongPress;
|
||||
}
|
||||
|
||||
if (emotion === MASCOT_STYLE.INTELLO) { // Needs to have normal eyes behind the glasses
|
||||
final.push(this.getGlasses(GLASSES_STYLE.NORMAL));
|
||||
getGlasses(style: number): React.Node {
|
||||
const glasses = this.glassesList[style];
|
||||
return (
|
||||
<Image
|
||||
key="glasses"
|
||||
source={
|
||||
glasses != null ? glasses : this.glassesList[GLASSES_STYLE.NORMAL]
|
||||
}
|
||||
final.push(<View key={"container2"}/>);
|
||||
return final;
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
getEye(
|
||||
style: number,
|
||||
isRight: boolean,
|
||||
rotation: string = '0deg',
|
||||
): React.Node {
|
||||
const eye = this.eyeList[style];
|
||||
return (
|
||||
<Image
|
||||
key={isRight ? 'right' : 'left'}
|
||||
source={eye != null ? eye : this.eyeList[EYE_STYLE.NORMAL]}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '15%',
|
||||
left: isRight ? '-11%' : '11%',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
transform: [{rotateY: rotation}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
getEyes(emotion: number): React.Node {
|
||||
const final = [];
|
||||
final.push(
|
||||
<View
|
||||
key="container"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
if (emotion === MASCOT_STYLE.CUTE) {
|
||||
final.push(this.getEye(EYE_STYLE.CUTE, true));
|
||||
final.push(this.getEye(EYE_STYLE.CUTE, false));
|
||||
} else if (emotion === MASCOT_STYLE.GIRLY) {
|
||||
final.push(this.getEye(EYE_STYLE.GIRLY, true));
|
||||
final.push(this.getEye(EYE_STYLE.GIRLY, false));
|
||||
} else if (emotion === MASCOT_STYLE.HAPPY) {
|
||||
final.push(this.getEye(EYE_STYLE.WINK, true));
|
||||
final.push(this.getEye(EYE_STYLE.WINK, false));
|
||||
} else if (emotion === MASCOT_STYLE.WINK) {
|
||||
final.push(this.getEye(EYE_STYLE.WINK, true));
|
||||
final.push(this.getEye(EYE_STYLE.NORMAL, false));
|
||||
} else if (emotion === MASCOT_STYLE.LOVE) {
|
||||
final.push(this.getEye(EYE_STYLE.HEART, true));
|
||||
final.push(this.getEye(EYE_STYLE.HEART, false));
|
||||
} else if (emotion === MASCOT_STYLE.ANGRY) {
|
||||
final.push(this.getEye(EYE_STYLE.ANGRY, true));
|
||||
final.push(this.getEye(EYE_STYLE.ANGRY, false, '180deg'));
|
||||
} else if (emotion === MASCOT_STYLE.COOL) {
|
||||
final.push(this.getGlasses(GLASSES_STYLE.COOl));
|
||||
} else {
|
||||
final.push(this.getEye(EYE_STYLE.NORMAL, true));
|
||||
final.push(this.getEye(EYE_STYLE.NORMAL, false));
|
||||
}
|
||||
|
||||
render() {
|
||||
const entryAnimation = this.props.animated ? this.props.entryAnimation : null;
|
||||
const loopAnimation = this.props.animated ? this.props.loopAnimation : null;
|
||||
return (
|
||||
if (emotion === MASCOT_STYLE.INTELLO) {
|
||||
// Needs to have normal eyes behind the glasses
|
||||
final.push(this.getGlasses(GLASSES_STYLE.NORMAL));
|
||||
}
|
||||
final.push(<View key="container2" />);
|
||||
return final;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props, state} = this;
|
||||
const entryAnimation = props.animated ? props.entryAnimation : null;
|
||||
const loopAnimation = props.animated ? props.loopAnimation : null;
|
||||
return (
|
||||
<Animatable.View
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
...props.style,
|
||||
}}
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...entryAnimation}>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => {
|
||||
this.onPress(this.viewRef);
|
||||
}}
|
||||
onLongPress={() => {
|
||||
this.onLongPress(this.viewRef);
|
||||
}}>
|
||||
<Animatable.View ref={this.viewRef}>
|
||||
<Animatable.View
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...loopAnimation}>
|
||||
<Image
|
||||
source={MASCOT_IMAGE}
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
...this.props.style
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
{...entryAnimation}
|
||||
>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => this.onPress(this.viewRef)}
|
||||
onLongPress={() => this.onLongPress(this.viewRef)}
|
||||
>
|
||||
<Animatable.View
|
||||
ref={this.viewRef}
|
||||
>
|
||||
<Animatable.View
|
||||
{...loopAnimation}
|
||||
>
|
||||
<Image
|
||||
source={MASCOT_IMAGE}
|
||||
style={{
|
||||
width: "100%",
|
||||
height:"100%",
|
||||
}}
|
||||
/>
|
||||
{this.getEyes(this.state.currentEmotion)}
|
||||
</Animatable.View>
|
||||
</Animatable.View>
|
||||
</TouchableWithoutFeedback>
|
||||
/>
|
||||
{this.getEyes(state.currentEmotion)}
|
||||
</Animatable.View>
|
||||
);
|
||||
}
|
||||
</Animatable.View>
|
||||
</TouchableWithoutFeedback>
|
||||
</Animatable.View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Mascot;
|
||||
|
|
|
|||
|
|
@ -1,283 +1,312 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Avatar, Button, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
|
||||
import Mascot from "./Mascot";
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import {BackHandler, Dimensions, ScrollView, TouchableWithoutFeedback, View} from "react-native";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import SpeechArrow from "./SpeechArrow";
|
||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Paragraph,
|
||||
Portal,
|
||||
withTheme,
|
||||
} from 'react-native-paper';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import {
|
||||
BackHandler,
|
||||
Dimensions,
|
||||
ScrollView,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import Mascot from './Mascot';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import SpeechArrow from './SpeechArrow';
|
||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||
|
||||
type Props = {
|
||||
theme: CustomTheme,
|
||||
icon: string,
|
||||
title: string,
|
||||
message: string,
|
||||
buttons: {
|
||||
action: {
|
||||
message: string,
|
||||
icon: string | null,
|
||||
color: string | null,
|
||||
onPress?: () => void,
|
||||
},
|
||||
cancel: {
|
||||
message: string,
|
||||
icon: string | null,
|
||||
color: string | null,
|
||||
onPress?: () => void,
|
||||
}
|
||||
type PropsType = {
|
||||
theme: CustomTheme,
|
||||
icon: string,
|
||||
title: string,
|
||||
message: string,
|
||||
buttons: {
|
||||
action: {
|
||||
message: string,
|
||||
icon: string | null,
|
||||
color: string | null,
|
||||
onPress?: () => void,
|
||||
},
|
||||
emotion: number,
|
||||
visible?: boolean,
|
||||
prefKey?: string,
|
||||
}
|
||||
cancel: {
|
||||
message: string,
|
||||
icon: string | null,
|
||||
color: string | null,
|
||||
onPress?: () => void,
|
||||
},
|
||||
},
|
||||
emotion: number,
|
||||
visible?: boolean,
|
||||
prefKey?: string,
|
||||
};
|
||||
|
||||
type State = {
|
||||
shouldRenderDialog: boolean, // Used to stop rendering after hide animation
|
||||
dialogVisible: boolean,
|
||||
}
|
||||
type StateType = {
|
||||
shouldRenderDialog: boolean, // Used to stop rendering after hide animation
|
||||
dialogVisible: boolean,
|
||||
};
|
||||
|
||||
/**
|
||||
* Component used to display a popup with the mascot.
|
||||
*/
|
||||
class MascotPopup extends React.Component<Props, State> {
|
||||
class MascotPopup extends React.Component<PropsType, StateType> {
|
||||
static defaultProps = {
|
||||
visible: null,
|
||||
prefKey: null,
|
||||
};
|
||||
|
||||
mascotSize: number;
|
||||
windowWidth: number;
|
||||
windowHeight: number;
|
||||
mascotSize: number;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
windowWidth: number;
|
||||
|
||||
this.windowWidth = Dimensions.get('window').width;
|
||||
this.windowHeight = Dimensions.get('window').height;
|
||||
windowHeight: number;
|
||||
|
||||
this.mascotSize = Dimensions.get('window').height / 6;
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
|
||||
if (this.props.visible != null) {
|
||||
this.state = {
|
||||
shouldRenderDialog: this.props.visible,
|
||||
dialogVisible: this.props.visible,
|
||||
};
|
||||
} else if (this.props.prefKey != null) {
|
||||
const visible = AsyncStorageManager.getBool(this.props.prefKey);
|
||||
this.state = {
|
||||
shouldRenderDialog: visible,
|
||||
dialogVisible: visible,
|
||||
};
|
||||
} else {
|
||||
this.state = {
|
||||
shouldRenderDialog: false,
|
||||
dialogVisible: false,
|
||||
};
|
||||
}
|
||||
this.windowWidth = Dimensions.get('window').width;
|
||||
this.windowHeight = Dimensions.get('window').height;
|
||||
|
||||
this.mascotSize = Dimensions.get('window').height / 6;
|
||||
|
||||
if (props.visible != null) {
|
||||
this.state = {
|
||||
shouldRenderDialog: props.visible,
|
||||
dialogVisible: props.visible,
|
||||
};
|
||||
} else if (props.prefKey != null) {
|
||||
const visible = AsyncStorageManager.getBool(props.prefKey);
|
||||
this.state = {
|
||||
shouldRenderDialog: visible,
|
||||
dialogVisible: visible,
|
||||
};
|
||||
} else {
|
||||
this.state = {
|
||||
shouldRenderDialog: false,
|
||||
dialogVisible: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
onAnimationEnd = () => {
|
||||
this.setState({
|
||||
shouldRenderDialog: false,
|
||||
})
|
||||
componentDidMount(): * {
|
||||
BackHandler.addEventListener(
|
||||
'hardwareBackPress',
|
||||
this.onBackButtonPressAndroid,
|
||||
);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
|
||||
const {props, state} = this;
|
||||
if (nextProps.visible) {
|
||||
this.state.shouldRenderDialog = true;
|
||||
this.state.dialogVisible = true;
|
||||
} else if (
|
||||
nextProps.visible !== props.visible ||
|
||||
(!nextState.dialogVisible &&
|
||||
nextState.dialogVisible !== state.dialogVisible)
|
||||
) {
|
||||
this.state.dialogVisible = false;
|
||||
setTimeout(this.onAnimationEnd, 300);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
|
||||
if (nextProps.visible) {
|
||||
this.state.shouldRenderDialog = true;
|
||||
this.state.dialogVisible = true;
|
||||
} else if (nextProps.visible !== this.props.visible
|
||||
|| (!nextState.dialogVisible && nextState.dialogVisible !== this.state.dialogVisible)) {
|
||||
this.state.dialogVisible = false;
|
||||
setTimeout(this.onAnimationEnd, 300);
|
||||
}
|
||||
return true;
|
||||
onAnimationEnd = () => {
|
||||
this.setState({
|
||||
shouldRenderDialog: false,
|
||||
});
|
||||
};
|
||||
|
||||
onBackButtonPressAndroid = (): boolean => {
|
||||
const {state, props} = this;
|
||||
if (state.dialogVisible) {
|
||||
const {cancel} = props.buttons;
|
||||
const {action} = props.buttons;
|
||||
if (cancel != null) this.onDismiss(cancel.onPress);
|
||||
else this.onDismiss(action.onPress);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
componentDidMount(): * {
|
||||
BackHandler.addEventListener(
|
||||
'hardwareBackPress',
|
||||
this.onBackButtonPressAndroid
|
||||
)
|
||||
}
|
||||
|
||||
onBackButtonPressAndroid = () => {
|
||||
if (this.state.dialogVisible) {
|
||||
const cancel = this.props.buttons.cancel;
|
||||
const action = this.props.buttons.action;
|
||||
if (cancel != null)
|
||||
this.onDismiss(cancel.onPress);
|
||||
else
|
||||
this.onDismiss(action.onPress);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
getSpeechBubble() {
|
||||
return (
|
||||
<Animatable.View
|
||||
style={{
|
||||
marginLeft: "10%",
|
||||
marginRight: "10%",
|
||||
}}
|
||||
useNativeDriver={true}
|
||||
animation={this.state.dialogVisible ? "bounceInLeft" : "bounceOutLeft"}
|
||||
duration={this.state.dialogVisible ? 1000 : 300}
|
||||
>
|
||||
<SpeechArrow
|
||||
style={{marginLeft: this.mascotSize / 3}}
|
||||
size={20}
|
||||
color={this.props.theme.colors.mascotMessageArrow}
|
||||
/>
|
||||
<Card style={{
|
||||
borderColor: this.props.theme.colors.mascotMessageArrow,
|
||||
borderWidth: 4,
|
||||
borderRadius: 10,
|
||||
}}>
|
||||
<Card.Title
|
||||
title={this.props.title}
|
||||
left={this.props.icon != null ?
|
||||
(props) => <Avatar.Icon
|
||||
{...props}
|
||||
size={48}
|
||||
style={{backgroundColor: "transparent"}}
|
||||
color={this.props.theme.colors.primary}
|
||||
icon={this.props.icon}
|
||||
/>
|
||||
|
||||
: null}
|
||||
getSpeechBubble(): React.Node {
|
||||
const {state, props} = this;
|
||||
return (
|
||||
<Animatable.View
|
||||
style={{
|
||||
marginLeft: '10%',
|
||||
marginRight: '10%',
|
||||
}}
|
||||
useNativeDriver
|
||||
animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
|
||||
duration={state.dialogVisible ? 1000 : 300}>
|
||||
<SpeechArrow
|
||||
style={{marginLeft: this.mascotSize / 3}}
|
||||
size={20}
|
||||
color={props.theme.colors.mascotMessageArrow}
|
||||
/>
|
||||
<Card
|
||||
style={{
|
||||
borderColor: props.theme.colors.mascotMessageArrow,
|
||||
borderWidth: 4,
|
||||
borderRadius: 10,
|
||||
}}>
|
||||
<Card.Title
|
||||
title={props.title}
|
||||
left={
|
||||
props.icon != null
|
||||
? (): React.Node => (
|
||||
<Avatar.Icon
|
||||
size={48}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
color={props.theme.colors.primary}
|
||||
icon={props.icon}
|
||||
/>
|
||||
|
||||
<Card.Content style={{
|
||||
maxHeight: this.windowHeight / 3
|
||||
}}>
|
||||
<ScrollView>
|
||||
<Paragraph style={{marginBottom: 10}}>
|
||||
{this.props.message}
|
||||
</Paragraph>
|
||||
</ScrollView>
|
||||
</Card.Content>
|
||||
|
||||
<Card.Actions style={{marginTop: 10, marginBottom: 10}}>
|
||||
{this.getButtons()}
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
</Animatable.View>
|
||||
);
|
||||
}
|
||||
|
||||
getMascot() {
|
||||
return (
|
||||
<Animatable.View
|
||||
useNativeDriver={true}
|
||||
animation={this.state.dialogVisible ? "bounceInLeft" : "bounceOutLeft"}
|
||||
duration={this.state.dialogVisible ? 1500 : 200}
|
||||
>
|
||||
<Mascot
|
||||
style={{width: this.mascotSize}}
|
||||
animated={true}
|
||||
emotion={this.props.emotion}
|
||||
/>
|
||||
</Animatable.View>
|
||||
);
|
||||
}
|
||||
|
||||
getButtons() {
|
||||
const action = this.props.buttons.action;
|
||||
const cancel = this.props.buttons.cancel;
|
||||
return (
|
||||
<View style={{
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
)
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Card.Content
|
||||
style={{
|
||||
maxHeight: this.windowHeight / 3,
|
||||
}}>
|
||||
{action != null
|
||||
? <Button
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
mode={"contained"}
|
||||
icon={action.icon}
|
||||
color={action.color}
|
||||
onPress={() => this.onDismiss(action.onPress)}
|
||||
>
|
||||
{action.message}
|
||||
</Button>
|
||||
: null}
|
||||
{cancel != null
|
||||
? <Button
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
mode={"contained"}
|
||||
icon={cancel.icon}
|
||||
color={cancel.color}
|
||||
onPress={() => this.onDismiss(cancel.onPress)}
|
||||
>
|
||||
{cancel.message}
|
||||
</Button>
|
||||
: null}
|
||||
<ScrollView>
|
||||
<Paragraph style={{marginBottom: 10}}>{props.message}</Paragraph>
|
||||
</ScrollView>
|
||||
</Card.Content>
|
||||
|
||||
<Card.Actions style={{marginTop: 10, marginBottom: 10}}>
|
||||
{this.getButtons()}
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
</Animatable.View>
|
||||
);
|
||||
}
|
||||
|
||||
getMascot(): React.Node {
|
||||
const {props, state} = this;
|
||||
return (
|
||||
<Animatable.View
|
||||
useNativeDriver
|
||||
animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
|
||||
duration={state.dialogVisible ? 1500 : 200}>
|
||||
<Mascot
|
||||
style={{width: this.mascotSize}}
|
||||
animated
|
||||
emotion={props.emotion}
|
||||
/>
|
||||
</Animatable.View>
|
||||
);
|
||||
}
|
||||
|
||||
getButtons(): React.Node {
|
||||
const {props} = this;
|
||||
const {action} = props.buttons;
|
||||
const {cancel} = props.buttons;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
}}>
|
||||
{action != null ? (
|
||||
<Button
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
mode="contained"
|
||||
icon={action.icon}
|
||||
color={action.color}
|
||||
onPress={() => {
|
||||
this.onDismiss(action.onPress);
|
||||
}}>
|
||||
{action.message}
|
||||
</Button>
|
||||
) : null}
|
||||
{cancel != null ? (
|
||||
<Button
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
mode="contained"
|
||||
icon={cancel.icon}
|
||||
color={cancel.color}
|
||||
onPress={() => {
|
||||
this.onDismiss(cancel.onPress);
|
||||
}}>
|
||||
{cancel.message}
|
||||
</Button>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getBackground(): React.Node {
|
||||
const {props, state} = this;
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => {
|
||||
this.onDismiss(props.buttons.cancel.onPress);
|
||||
}}>
|
||||
<Animatable.View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
useNativeDriver
|
||||
animation={state.dialogVisible ? 'fadeIn' : 'fadeOut'}
|
||||
duration={state.dialogVisible ? 300 : 300}
|
||||
/>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
onDismiss = (callback?: () => void) => {
|
||||
const {prefKey} = this.props;
|
||||
if (prefKey != null) {
|
||||
AsyncStorageManager.set(prefKey, false);
|
||||
this.setState({dialogVisible: false});
|
||||
}
|
||||
if (callback != null) callback();
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
const {shouldRenderDialog} = this.state;
|
||||
if (shouldRenderDialog) {
|
||||
return (
|
||||
<Portal>
|
||||
{this.getBackground()}
|
||||
<View
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
marginTop: -80,
|
||||
width: '100%',
|
||||
}}>
|
||||
{this.getMascot()}
|
||||
{this.getSpeechBubble()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getBackground() {
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => this.onDismiss(this.props.buttons.cancel.onPress)}>
|
||||
<Animatable.View
|
||||
style={{
|
||||
position: "absolute",
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
useNativeDriver={true}
|
||||
animation={this.state.dialogVisible ? "fadeIn" : "fadeOut"}
|
||||
duration={this.state.dialogVisible ? 300 : 300}
|
||||
/>
|
||||
</TouchableWithoutFeedback>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
onDismiss = (callback?: ()=> void) => {
|
||||
if (this.props.prefKey != null) {
|
||||
AsyncStorageManager.set(this.props.prefKey, false);
|
||||
this.setState({dialogVisible: false});
|
||||
}
|
||||
if (callback != null)
|
||||
callback();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.shouldRenderDialog) {
|
||||
return (
|
||||
<Portal>
|
||||
{this.getBackground()}
|
||||
<View style={{
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
}}>
|
||||
<View style={{
|
||||
marginTop: -80,
|
||||
width: "100%"
|
||||
}}>
|
||||
{this.getMascot()}
|
||||
{this.getSpeechBubble()}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</Portal>
|
||||
);
|
||||
} else
|
||||
return null;
|
||||
|
||||
</View>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(MascotPopup);
|
||||
|
|
|
|||
|
|
@ -1,33 +1,43 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {View} from "react-native";
|
||||
import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
|
||||
import {View} from 'react-native';
|
||||
import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
|
||||
|
||||
type Props = {
|
||||
style?: ViewStyle,
|
||||
size: number,
|
||||
color: string,
|
||||
}
|
||||
|
||||
export default class SpeechArrow extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={this.props.style}>
|
||||
<View style={{
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: this.props.size,
|
||||
borderBottomWidth: this.props.size,
|
||||
borderStyle: 'solid',
|
||||
backgroundColor: 'transparent',
|
||||
borderLeftColor: 'transparent',
|
||||
borderRightColor: 'transparent',
|
||||
borderBottomColor: this.props.color,
|
||||
}}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
type PropsType = {
|
||||
style?: ViewStyle | null,
|
||||
size: number,
|
||||
color: string,
|
||||
};
|
||||
|
||||
export default class SpeechArrow extends React.Component<PropsType> {
|
||||
static defaultProps = {
|
||||
style: null,
|
||||
};
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View style={props.style}>
|
||||
<View
|
||||
style={{
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: props.size,
|
||||
borderBottomWidth: props.size,
|
||||
borderStyle: 'solid',
|
||||
backgroundColor: 'transparent',
|
||||
borderLeftColor: 'transparent',
|
||||
borderRightColor: 'transparent',
|
||||
borderBottomColor: props.color,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue