77 lines
1.6 KiB
JavaScript
77 lines
1.6 KiB
JavaScript
import React from "react";
|
|
import { StyleSheet } from "react-native";
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { Input } from "galio-framework";
|
|
|
|
import Icon from './Icon';
|
|
import { argonTheme } from "../constants";
|
|
|
|
class ArInput extends React.Component {
|
|
render() {
|
|
const { shadowless, success, error } = this.props;
|
|
|
|
const inputStyles = [
|
|
styles.input,
|
|
!shadowless && styles.shadow,
|
|
success && styles.success,
|
|
error && styles.error,
|
|
{...this.props.style}
|
|
];
|
|
|
|
return (
|
|
<Input
|
|
placeholder="write something here"
|
|
placeholderTextColor={argonTheme.COLORS.MUTED}
|
|
style={inputStyles}
|
|
color={argonTheme.COLORS.HEADER}
|
|
iconContent={
|
|
<Icon
|
|
size={14}
|
|
color={argonTheme.COLORS.ICON}
|
|
name="link"
|
|
family="AntDesign"
|
|
/>
|
|
}
|
|
{...this.props}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
ArInput.defaultProps = {
|
|
shadowless: false,
|
|
success: false,
|
|
error: false
|
|
};
|
|
|
|
ArInput.propTypes = {
|
|
shadowless: PropTypes.bool,
|
|
success: PropTypes.bool,
|
|
error: PropTypes.bool
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
input: {
|
|
borderRadius: 4,
|
|
borderColor: argonTheme.COLORS.BORDER,
|
|
height: 44,
|
|
backgroundColor: '#FFFFFF'
|
|
},
|
|
success: {
|
|
borderColor: argonTheme.COLORS.INPUT_SUCCESS,
|
|
},
|
|
error: {
|
|
borderColor: argonTheme.COLORS.INPUT_ERROR,
|
|
},
|
|
shadow: {
|
|
shadowColor: argonTheme.COLORS.BLACK,
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowRadius: 2,
|
|
shadowOpacity: 0.05,
|
|
elevation: 2,
|
|
}
|
|
});
|
|
|
|
export default ArInput;
|