import { ObservableAddEditVocabularyScreen , ObservableLanguage , ObservableThemeStore , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { ScrollView , View } from 'react-native' ; import { AddEditVocabularyScreenDelegate } from '../../delegates/vocabulary/AddEditVocabularyScreenDelegate' ; import { DefaultText } from '../common/DefaultText' ; import { DismissKeyboardView } from '../common/DismissKeyboardView' ; import { Screen } from '../common/Screen' ; import { SmartScrollView } from '../common/SmartScrollView' ; import { AddEditVocabularyScreenStyles , addEditVocabularyScreenResponsiveStyles , } from './AddEditVocabularyScreen.style' ; import { VocabularyForm } from './VocabularyForm' ; import { VocabularyFormTopBar } from './VocabularyFormTopBar' ; import { VocabularyItem } from './VocabularyItem' ; export interface AddEditVocabularyScreenProps { testID : string ; learningLanguage : ObservableLanguage ; translatedToLanguage : ObservableLanguage ; themeStore : ObservableThemeStore ; observableScreen : ObservableAddEditVocabularyScreen ; screenDelegate : AddEditVocabularyScreenDelegate ; } @ observer export class AddEditVocabularyScreen extends React . Component < AddEditVocabularyScreenProps > { private get styles ( ) : AddEditVocabularyScreenStyles { return addEditVocabularyScreenResponsiveStyles . compile ( this . props . observableScreen . screenLayout , this . props . themeStore . theme ) ; } public render ( ) { return ( < Screen style = { this . styles . screen } testID = { this . props . testID } useSafeAreaView = { true } observableScreen = { this . props . observableScreen } > < VocabularyFormTopBar theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } currentTab = { this . props . observableScreen . currentTab } / > { this . props . observableScreen . currentTab . get ( ) === 'Editor' ? this . renderEditor ( ) : this . renderPreview ( ) } < /Screen>); } private renderEditor ( ) { return ( < React . Fragment > < SmartScrollView keyboardShouldPersistTaps = "handled" keyboardAware = { true } style = { this . styles . scrollview } > < DismissKeyboardView > < VocabularyForm theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } learningLanguage = { this . props . learningLanguage } translatedToLanguage = { this . props . translatedToLanguage } vocabularyFormState = { this . props . observableScreen . vocabularyFormState } lookUp = { this . props . screenDelegate . lookUp } showSuggestions = { this . props . screenDelegate . showSuggestions } showVocabularyExtraFieldsPicker = { this . props . screenDelegate . showVocabularyExtraFieldsPicker } showDefinitionExtraFieldsPicker = { this . props . screenDelegate . showDefinitionExtraFieldsPicker } editCategory = { this . props . screenDelegate . editCategory } addDefinitionSlot = { this . props . screenDelegate . addDefinitionSlot } deleteDefinition = { this . props . screenDelegate . deleteDefinition } / > { this . renderTip ( ) } < /DismissKeyboardView> < /SmartScrollView> < /React.Fragment>); } private renderPreview ( ) { return ( < ScrollView contentContainerStyle = { this . styles . preview_container } > < VocabularyItem theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } vocabulary = { this . props . screenDelegate . createPreview ( ) } shouldShowTags = { false } / > < /ScrollView>); } private renderTip ( ) { return ( < View style = { this . styles . tip_container } > < DefaultText style = { this . styles . tip } > < DefaultText style = { this . styles . bold } > Tip : < /DefaultText> < DefaultText > To add images , tap on < /DefaultText> < DefaultText style = { this . styles . bold } > Extra fields < /DefaultText> < DefaultText > button for definitions then press < /DefaultText> < DefaultText style = { this . styles . bold } > Search images < /DefaultText>. < /DefaultText> < /View>); } }