1
0
Fork 0

Convert mascot popup to functional

THis fixes TS issues
Dieser Commit ist enthalten in:
Arnaud Vergnet 2021-05-13 16:32:41 +02:00
Ursprung ae1e2fcdc0
Commit 5795fca035
2 geänderte Dateien mit 236 neuen und 245 gelöschten Zeilen

Datei anzeigen

@ -17,81 +17,31 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import {
Avatar,
Button,
Card,
Paragraph,
Portal,
withTheme,
} from 'react-native-paper';
import React, { useEffect, useRef, useState } from 'react';
import { Portal, withTheme } from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import {
BackHandler,
Dimensions,
ScrollView,
StyleSheet,
TouchableWithoutFeedback,
View,
} from 'react-native';
import Mascot from './Mascot';
import SpeechArrow from './SpeechArrow';
import AsyncStorageManager from '../../managers/AsyncStorageManager';
import GENERAL_STYLES from '../../constants/Styles';
import MascotSpeechBubble, {
MascotSpeechBubbleProps,
} from './MascotSpeechBubble';
import { useMountEffect } from '../../utils/customHooks';
type PropsType = {
theme: ReactNativePaper.Theme;
icon: string;
title: string;
message: string;
buttons: {
action?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
cancel?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
};
type PropsType = MascotSpeechBubbleProps & {
emotion: number;
visible?: boolean;
prefKey?: string;
};
type StateType = {
shouldRenderDialog: boolean; // Used to stop rendering after hide animation
dialogVisible: boolean;
};
const styles = StyleSheet.create({
speechBubbleContainer: {
marginLeft: '10%',
marginRight: '10%',
},
speechBubbleCard: {
borderWidth: 4,
borderRadius: 10,
},
speechBubbleIcon: {
backgroundColor: 'transparent',
},
speechBubbleText: {
marginBottom: 10,
},
actionsContainer: {
marginTop: 10,
marginBottom: 10,
},
button: {
...GENERAL_STYLES.centerHorizontal,
marginBottom: 10,
},
background: {
position: 'absolute',
backgroundColor: 'rgba(0,0,0,0.7)',
@ -104,245 +54,139 @@ const styles = StyleSheet.create({
},
});
const MASCOT_SIZE = Dimensions.get('window').height / 6;
const BUBBLE_HEIGHT = Dimensions.get('window').height / 3;
/**
* Component used to display a popup with the mascot.
*/
class MascotPopup extends React.Component<PropsType, StateType> {
mascotSize: number;
windowWidth: number;
windowHeight: number;
constructor(props: PropsType) {
super(props);
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,
};
function MascotPopup(props: PropsType) {
const isVisible = () => {
if (props.visible !== undefined) {
return props.visible;
} else if (props.prefKey != null) {
const visible = AsyncStorageManager.getBool(props.prefKey);
this.state = {
shouldRenderDialog: visible,
dialogVisible: visible,
};
return AsyncStorageManager.getBool(props.prefKey);
} else {
this.state = {
shouldRenderDialog: false,
dialogVisible: false,
};
return false;
}
}
componentDidMount() {
BackHandler.addEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid
);
}
shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
// TODO this is so dirty it shouldn't even work
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;
}
onAnimationEnd = () => {
this.setState({
shouldRenderDialog: false,
});
};
onBackButtonPressAndroid = (): boolean => {
const { state, props } = this;
if (state.dialogVisible) {
const [shouldRenderDialog, setShouldRenderDialog] = useState(isVisible());
const [dialogVisible, setDialogVisible] = useState(isVisible());
const lastVisibleProps = useRef(props.visible);
const lastVisibleState = useRef(dialogVisible);
useMountEffect(() => {
BackHandler.addEventListener('hardwareBackPress', onBackButtonPressAndroid);
});
useEffect(() => {
if (props.visible && !dialogVisible) {
setShouldRenderDialog(true);
setDialogVisible(true);
} else if (
lastVisibleProps.current !== props.visible ||
(!dialogVisible && dialogVisible !== lastVisibleState.current)
) {
setDialogVisible(false);
setTimeout(onAnimationEnd, 400);
}
lastVisibleProps.current = props.visible;
lastVisibleState.current = dialogVisible;
}, [props.visible, dialogVisible]);
const onAnimationEnd = () => {
setShouldRenderDialog(false);
};
const onBackButtonPressAndroid = (): boolean => {
if (dialogVisible) {
const { cancel } = props.buttons;
const { action } = props.buttons;
if (cancel) {
this.onDismiss(cancel.onPress);
onDismiss(cancel.onPress);
} else if (action) {
this.onDismiss(action.onPress);
onDismiss(action.onPress);
} else {
this.onDismiss();
onDismiss();
}
return true;
}
return false;
};
getSpeechBubble() {
const { state, props } = this;
const getSpeechBubble = () => {
return (
<Animatable.View
style={styles.speechBubbleContainer}
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,
...styles.speechBubbleCard,
}}
>
<Card.Title
title={props.title}
left={
props.icon != null
? () => (
<Avatar.Icon
size={48}
style={styles.speechBubbleIcon}
color={props.theme.colors.primary}
icon={props.icon}
/>
)
: undefined
}
/>
<Card.Content
style={{
maxHeight: this.windowHeight / 3,
}}
>
<ScrollView>
<Paragraph style={styles.speechBubbleText}>
{props.message}
</Paragraph>
</ScrollView>
</Card.Content>
<Card.Actions style={styles.actionsContainer}>
{this.getButtons()}
</Card.Actions>
</Card>
</Animatable.View>
<MascotSpeechBubble
title={props.title}
message={props.message}
icon={props.icon}
buttons={props.buttons}
visible={dialogVisible}
onDismiss={onDismiss}
speechArrowPos={MASCOT_SIZE / 3}
bubbleMaxHeight={BUBBLE_HEIGHT}
/>
);
}
};
getMascot() {
const { props, state } = this;
const getMascot = () => {
return (
<Animatable.View
useNativeDriver
animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={state.dialogVisible ? 1500 : 200}
animation={dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={dialogVisible ? 1500 : 200}
>
<Mascot
style={{ width: this.mascotSize }}
style={{ width: MASCOT_SIZE }}
animated
emotion={props.emotion}
/>
</Animatable.View>
);
}
};
getButtons() {
const { props } = this;
const { action } = props.buttons;
const { cancel } = props.buttons;
return (
<View style={GENERAL_STYLES.center}>
{action != null ? (
<Button
style={styles.button}
mode="contained"
icon={action.icon}
color={action.color}
onPress={() => {
this.onDismiss(action.onPress);
}}
>
{action.message}
</Button>
) : null}
{cancel != null ? (
<Button
style={styles.button}
mode="contained"
icon={cancel.icon}
color={cancel.color}
onPress={() => {
this.onDismiss(cancel.onPress);
}}
>
{cancel.message}
</Button>
) : null}
</View>
);
}
getBackground() {
const { props, state } = this;
const getBackground = () => {
return (
<TouchableWithoutFeedback
onPress={() => {
this.onDismiss(props.buttons.cancel?.onPress);
onDismiss(props.buttons.cancel?.onPress);
}}
>
<Animatable.View
style={styles.background}
useNativeDriver
animation={state.dialogVisible ? 'fadeIn' : 'fadeOut'}
duration={state.dialogVisible ? 300 : 300}
animation={dialogVisible ? 'fadeIn' : 'fadeOut'}
duration={dialogVisible ? 300 : 300}
/>
</TouchableWithoutFeedback>
);
}
};
onDismiss = (callback?: () => void) => {
const { prefKey } = this.props;
if (prefKey != null) {
AsyncStorageManager.set(prefKey, false);
this.setState({ dialogVisible: false });
const onDismiss = (callback?: () => void) => {
if (props.prefKey != null) {
AsyncStorageManager.set(props.prefKey, false);
setDialogVisible(false);
}
if (callback != null) {
if (callback) {
callback();
}
};
render() {
const { shouldRenderDialog } = this.state;
if (shouldRenderDialog) {
return (
<Portal>
{this.getBackground()}
<View style={GENERAL_STYLES.centerVertical}>
<View style={styles.container}>
{this.getMascot()}
{this.getSpeechBubble()}
</View>
if (shouldRenderDialog) {
return (
<Portal>
{getBackground()}
<View style={GENERAL_STYLES.centerVertical}>
<View style={styles.container}>
{getMascot()}
{getSpeechBubble()}
</View>
</Portal>
);
}
return null;
</View>
</Portal>
);
}
return null;
}
export default withTheme(MascotPopup);
export default MascotPopup;

Datei anzeigen

@ -0,0 +1,147 @@
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { Avatar, Button, Card, Paragraph, useTheme } from 'react-native-paper';
import GENERAL_STYLES from '../../constants/Styles';
import SpeechArrow from './SpeechArrow';
export type MascotSpeechBubbleProps = {
icon: string;
title: string;
message: string;
visible?: boolean;
buttons: {
action?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
cancel?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
};
};
type Props = MascotSpeechBubbleProps & {
onDismiss: (callback?: () => void) => void;
speechArrowPos: number;
bubbleMaxHeight: number;
};
const styles = StyleSheet.create({
speechBubbleContainer: {
marginLeft: '10%',
marginRight: '10%',
},
speechBubbleCard: {
borderWidth: 4,
borderRadius: 10,
},
speechBubbleIcon: {
backgroundColor: 'transparent',
},
speechBubbleText: {
marginBottom: 10,
},
actionsContainer: {
marginTop: 10,
marginBottom: 10,
},
button: {
...GENERAL_STYLES.centerHorizontal,
marginBottom: 10,
},
});
export default function MascotSpeechBubble(props: Props) {
const theme = useTheme();
const getButtons = () => {
const { action, cancel } = props.buttons;
return (
<View style={GENERAL_STYLES.center}>
{action ? (
<Button
style={styles.button}
mode="contained"
icon={action.icon}
color={action.color}
onPress={() => {
props.onDismiss(action.onPress);
}}
>
{action.message}
</Button>
) : null}
{cancel != null ? (
<Button
style={styles.button}
mode="contained"
icon={cancel.icon}
color={cancel.color}
onPress={() => {
props.onDismiss(cancel.onPress);
}}
>
{cancel.message}
</Button>
) : null}
</View>
);
};
return (
<Animatable.View
style={styles.speechBubbleContainer}
useNativeDriver={true}
animation={props.visible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={props.visible ? 1000 : 300}
>
<SpeechArrow
style={{ marginLeft: props.speechArrowPos }}
size={20}
color={theme.colors.mascotMessageArrow}
/>
<Card
style={{
borderColor: theme.colors.mascotMessageArrow,
...styles.speechBubbleCard,
}}
>
<Card.Title
title={props.title}
left={
props.icon
? () => (
<Avatar.Icon
size={48}
style={styles.speechBubbleIcon}
color={theme.colors.primary}
icon={props.icon}
/>
)
: undefined
}
/>
<Card.Content
style={{
maxHeight: props.bubbleMaxHeight,
}}
>
<ScrollView>
<Paragraph style={styles.speechBubbleText}>
{props.message}
</Paragraph>
</ScrollView>
</Card.Content>
<Card.Actions style={styles.actionsContainer}>
{getButtons()}
</Card.Actions>
</Card>
</Animatable.View>
);
}