Convert mascot popup to functional
THis fixes TS issues
This commit is contained in:
Arnaud Vergnet
джерело
ae1e2fcdc0
коміт
5795fca035
2 змінених файлів з 236 додано та 245 видалено
|
|
@ -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,238 +54,133 @@ 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
|
||||
);
|
||||
}
|
||||
const [shouldRenderDialog, setShouldRenderDialog] = useState(isVisible());
|
||||
const [dialogVisible, setDialogVisible] = useState(isVisible());
|
||||
const lastVisibleProps = useRef(props.visible);
|
||||
const lastVisibleState = useRef(dialogVisible);
|
||||
|
||||
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,
|
||||
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);
|
||||
};
|
||||
|
||||
onBackButtonPressAndroid = (): boolean => {
|
||||
const { state, props } = this;
|
||||
if (state.dialogVisible) {
|
||||
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
|
||||
<MascotSpeechBubble
|
||||
title={props.title}
|
||||
left={
|
||||
props.icon != null
|
||||
? () => (
|
||||
<Avatar.Icon
|
||||
size={48}
|
||||
style={styles.speechBubbleIcon}
|
||||
color={props.theme.colors.primary}
|
||||
message={props.message}
|
||||
icon={props.icon}
|
||||
buttons={props.buttons}
|
||||
visible={dialogVisible}
|
||||
onDismiss={onDismiss}
|
||||
speechArrowPos={MASCOT_SIZE / 3}
|
||||
bubbleMaxHeight={BUBBLE_HEIGHT}
|
||||
/>
|
||||
)
|
||||
: 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>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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()}
|
||||
{getBackground()}
|
||||
<View style={GENERAL_STYLES.centerVertical}>
|
||||
<View style={styles.container}>
|
||||
{this.getMascot()}
|
||||
{this.getSpeechBubble()}
|
||||
{getMascot()}
|
||||
{getSpeechBubble()}
|
||||
</View>
|
||||
</View>
|
||||
</Portal>
|
||||
|
|
@ -343,6 +188,5 @@ class MascotPopup extends React.Component<PropsType, StateType> {
|
|||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(MascotPopup);
|
||||
export default MascotPopup;
|
||||
|
|
|
|||
147
src/components/Mascot/MascotSpeechBubble.tsx
Звичайний файл
147
src/components/Mascot/MascotSpeechBubble.tsx
Звичайний файл
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Завантаження…
Посилання в новій задачі