import { Theme } from '@ulangi/ulangi-common/enums' ; import { ObservableReviewState , ObservableScreenLayout , } from '@ulangi/ulangi-observable' ; import { autorun } from 'mobx' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { View } from 'react-native' ; import * as Animatable from 'react-native-animatable' ; import { config } from '../../constants/config' ; import { DefaultText } from '../common/DefaultText' ; import { DefinitionItem } from '../vocabulary/DefinitionItem' ; import { VocabularyExtraFieldList } from '../vocabulary/VocabularyExtraFieldList' ; import { ReviewItemStyles , definitionItemResponsiveStyles , reviewItemResponsiveStyles , } from './ReviewItem.style' ; import { ReviewStrokeOrder } from './ReviewStrokeOrder' ; export interface ReviewItemProps { theme : Theme ; screenLayout : ObservableScreenLayout ; learningLanguageCode : string ; reviewState : ObservableReviewState ; } @ observer export class ReviewItem extends React . Component < ReviewItemProps > { private animationContainerRef ? : any ; private unsubscribeAnimation ? : ( ) => void ; public componentDidMount ( ) { this . unsubscribeAnimation = autorun ( ( ) : void => { if ( this . props . reviewState . shouldRunFadeOutAnimation === true && this . animationContainerRef ) { this . animationContainerRef . fadeOutDown ( 200 ) . then ( ( ) : void => { this . props . reviewState . shouldRunFadeOutAnimation = false ; } ) ; } } ) ; } public componentWillUnmount ( ) { if ( this . unsubscribeAnimation ) { this . unsubscribeAnimation ( ) ; } } public get styles ( ) : ReviewItemStyles { return reviewItemResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { return ( < Animatable . View ref = { ( ref ) : void => { this . animationContainerRef = ref ; } } animation = "fadeInUp" duration = { config . general . animationDuration } useNativeDriver = { true } > { this . props . reviewState . shouldShowAnswer === true ? this . renderAll ( ) : this . props . reviewState . currentQuestionType === 'forward' ? this . renderForwardQuestion ( ) : this . renderReversedQuestion ( ) } < /Animatable.View>); } private renderAll ( ) { return ( < Animatable . View animation = "fadeIn" > < View style = { this . styles . vocabulary_container } > < View style = { this . styles . vocabulary_text_container } > < View style = { this . styles . top_container } > < DefaultText style = { this . styles . vocabulary_text } > { this . props . reviewState . vocabulary . vocabularyTerm } < /DefaultText> < /View> < VocabularyExtraFieldList theme = { this . props . theme } screenLayout = { this . props . screenLayout } extraFields = { this . props . reviewState . vocabulary . vocabularyExtraFields } / > < /View> < View style = { this . styles . definition_list_container } > { this . props . reviewState . vocabulary . definitions . map ( ( definition , index ) : React . ReactElement < any > => { return ( < DefinitionItem key = { definition . definitionId } theme = { this . props . theme } screenLayout = { this . props . screenLayout } index = { index } definition = { definition } styles = { definitionItemResponsiveStyles } / > ) ; } ) } < /View> < /View> { this . props . learningLanguageCode === 'zh' ? ( < ReviewStrokeOrder theme = { this . props . theme } screenLayout = { this . props . screenLayout } reviewState = { this . props . reviewState } / > ) : null } < /Animatable.View>); } private renderForwardQuestion ( ) { return ( < View style = { this . styles . vocabulary_container } > < View style = { this . styles . vocabulary_text_container } > < View style = { this . styles . top_container } > < DefaultText style = { this . styles . vocabulary_text } > { this . props . reviewState . vocabulary . vocabularyTerm } < /DefaultText> < /View> < VocabularyExtraFieldList theme = { this . props . theme } screenLayout = { this . props . screenLayout } extraFields = { this . props . reviewState . vocabulary . vocabularyExtraFields } / > < /View> < View style = { this . styles . message_container } > < DefaultText style = { this . styles . message_inline } > < DefaultText > What does it mean ? < /DefaultText> < /DefaultText> < /View> < /View>); } private renderReversedQuestion ( ) { return ( < View style = { this . styles . vocabulary_container } > < View style = { this . styles . vocabulary_text_container } > < DefaultText style = { this . styles . vocabulary_text } > What is the term ? < /DefaultText> < /View> < View style = { this . styles . definition_list_container } > { this . props . reviewState . vocabulary . definitions . map ( ( definition , index ) : React . ReactElement < any > => { return ( < DefinitionItem key = { definition . definitionId } theme = { this . props . theme } screenLayout = { this . props . screenLayout } index = { index } definition = { definition } hideFields = { [ 'example' , 'note' ] } styles = { definitionItemResponsiveStyles } / > ) ; } ) } < /View> < /View>); } }