40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Text, View } from 'react-native';
|
|
import Touchable from 'react-native-platform-touchable';
|
|
|
|
import { CustomIcon } from '../../CustomIcon';
|
|
import { themes } from '../../../lib/constants';
|
|
import ActivityIndicator from '../../ActivityIndicator';
|
|
import styles from './styles';
|
|
import { TSupportedThemes } from '../../../theme';
|
|
|
|
interface IInput {
|
|
children?: JSX.Element;
|
|
onPress: () => void;
|
|
theme: TSupportedThemes;
|
|
inputStyle?: object;
|
|
disabled?: boolean | null;
|
|
placeholder?: string;
|
|
loading?: boolean;
|
|
innerInputStyle?: object;
|
|
}
|
|
|
|
const Input = ({ children, onPress, theme, loading, inputStyle, placeholder, disabled, innerInputStyle }: IInput) => (
|
|
<Touchable
|
|
onPress={onPress}
|
|
style={[{ backgroundColor: themes[theme].backgroundColor }, inputStyle]}
|
|
background={Touchable.Ripple(themes[theme].bannerBackground)}
|
|
disabled={disabled}>
|
|
<View style={[styles.input, { borderColor: themes[theme].separatorColor }, innerInputStyle]}>
|
|
{placeholder ? <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder}</Text> : children}
|
|
{loading ? (
|
|
<ActivityIndicator style={[styles.loading, styles.icon]} />
|
|
) : (
|
|
<CustomIcon name='chevron-down' size={22} color={themes[theme].auxiliaryText} style={styles.icon} />
|
|
)}
|
|
</View>
|
|
</Touchable>
|
|
);
|
|
|
|
export default Input;
|