import { Theme } from '@ulangi/ulangi-common/enums' ; import { ObservableCategoryFormState , ObservableScreenLayout , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { View } from 'react-native' ; import { config } from '../../constants/config' ; import { CategoryFormIds } from '../../constants/ids/CategoryFormIds' ; import { CategorySuggestionList } from '../category/CategorySuggestionList' ; import { DefaultTextInput } from '../common/DefaultTextInput' ; import { KeyboardSpacer } from '../common/KeyboardSpacer' ; import { CategoryFormStyles , categoryFormResponsiveStyles , } from './CategoryForm.style' ; export interface CategoryFormProps { theme : Theme ; screenLayout : ObservableScreenLayout ; placeholderText ? : string ; categoryFormState : ObservableCategoryFormState ; handleInputChange : ( searchInput : string ) => void ; selectCategory : ( categoryName : string ) => void ; fetchCategorySuggestions : ( ) => void ; clear : ( ) => void ; styles ? : { light : CategoryFormStyles ; dark : CategoryFormStyles ; } ; } @ observer export class CategoryForm extends React . Component < CategoryFormProps > { private get styles ( ) : CategoryFormStyles { return categoryFormResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { return ( < View style = { this . styles . container } > < View style = { this . styles . category_input_container } > < DefaultTextInput testID = { CategoryFormIds . CATEGORY_INPUT } placeholder = { this . props . placeholderText || 'Enter category to search' } placeholderTextColor = { this . props . theme === Theme . LIGHT ? config . styles . light . secondaryTextColor : config . styles . dark . secondaryTextColor } onChangeText = { this . props . handleInputChange } style = { this . styles . category_input } value = { this . props . categoryFormState . searchInput } / > < /View> < CategorySuggestionList theme = { this . props . theme } screenLayout = { this . props . screenLayout } suggestions = { this . props . categoryFormState . suggestions } fetchState = { this . props . categoryFormState . fetchSuggestionsState } selectCategory = { this . props . selectCategory } fetchMore = { this . props . fetchCategorySuggestions } clear = { this . props . clear } / > < KeyboardSpacer /> < /View>); } }