2020-02-11 14:01:35 +00:00
|
|
|
import React from 'react';
|
2020-05-08 17:36:10 +00:00
|
|
|
import { View, Text } from 'react-native';
|
2020-02-11 14:01:35 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Touchable from 'react-native-platform-touchable';
|
|
|
|
|
|
|
|
import { CustomIcon } from '../../../lib/Icons';
|
|
|
|
import { themes } from '../../../constants/colors';
|
|
|
|
import ActivityIndicator from '../../ActivityIndicator';
|
|
|
|
import styles from './styles';
|
|
|
|
|
|
|
|
const Input = ({
|
2020-05-08 17:36:10 +00:00
|
|
|
children, onPress, theme, loading, inputStyle, placeholder, disabled
|
2020-02-11 14:01:35 +00:00
|
|
|
}) => (
|
|
|
|
<Touchable
|
2020-05-08 17:36:10 +00:00
|
|
|
onPress={onPress}
|
2020-03-30 19:50:27 +00:00
|
|
|
style={[{ backgroundColor: themes[theme].backgroundColor }, inputStyle]}
|
2020-02-11 14:01:35 +00:00
|
|
|
background={Touchable.Ripple(themes[theme].bannerBackground)}
|
2020-03-30 19:50:27 +00:00
|
|
|
disabled={disabled}
|
2020-02-11 14:01:35 +00:00
|
|
|
>
|
|
|
|
<View style={[styles.input, { borderColor: themes[theme].separatorColor }]}>
|
2020-05-08 17:36:10 +00:00
|
|
|
{placeholder ? <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder}</Text> : children}
|
2020-02-11 14:01:35 +00:00
|
|
|
{
|
|
|
|
loading
|
|
|
|
? <ActivityIndicator style={[styles.loading, styles.icon]} />
|
|
|
|
: <CustomIcon name='arrow-down' size={22} color={themes[theme].auxiliaryText} style={styles.icon} />
|
|
|
|
}
|
|
|
|
</View>
|
|
|
|
</Touchable>
|
|
|
|
);
|
|
|
|
Input.propTypes = {
|
|
|
|
children: PropTypes.node,
|
2020-05-08 17:36:10 +00:00
|
|
|
onPress: PropTypes.func,
|
2020-02-11 14:01:35 +00:00
|
|
|
theme: PropTypes.string,
|
2020-03-30 19:50:27 +00:00
|
|
|
inputStyle: PropTypes.object,
|
|
|
|
disabled: PropTypes.bool,
|
2020-05-08 17:36:10 +00:00
|
|
|
placeholder: PropTypes.string,
|
2020-02-11 14:01:35 +00:00
|
|
|
loading: PropTypes.bool
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Input;
|