|
import React, { useState } from 'react'; |
|
import PropTypes from 'prop-types'; |
|
import { Input as AntdInput, Button } from 'antd'; |
|
import TextMaskInput from 'react-text-mask'; |
|
import classNames from 'classnames'; |
|
import { Icon } from 'components/UI'; |
|
import './Input.less'; |
|
|
|
const Input = (props) => { |
|
const { |
|
className, |
|
rounded, |
|
type, |
|
placeholder, |
|
onPressEnter, |
|
...rest |
|
} = props; |
|
return ( |
|
<AntdInput |
|
type={type} |
|
className={classNames('ave-input', { rounded }, className)} |
|
{...rest} |
|
/> |
|
); |
|
}; |
|
|
|
const MaskedInput = (props) => { |
|
const { className, ...rest } = props; |
|
|
|
return ( |
|
<TextMaskInput |
|
className={classNames('ave-input', 'ant-input', className)} |
|
{...rest} |
|
/> |
|
); |
|
}; |
|
|
|
const PasswordInput = (props) => { |
|
const [show, setShow] = useState(false); |
|
|
|
const handleShow = () => { |
|
setShow(!show); |
|
}; |
|
|
|
const passwordButton = ( |
|
<Button type="flat" size="small" onClick={handleShow} className="show-password-btn"> |
|
<Icon className="show-password-icon" type={show ? 'eye-o' : 'eye'} /> |
|
<span className="show-password-text">Show</span> |
|
</Button> |
|
); |
|
|
|
return ( |
|
<Input |
|
type={show ? 'text' : 'password'} |
|
suffix={passwordButton} |
|
{...props} |
|
/> |
|
); |
|
}; |
|
|
|
const SearchInput = ({ |
|
onSearch, |
|
...rest |
|
}) => { |
|
const handleSearch = () => { |
|
if (onSearch) { |
|
onSearch(); |
|
} |
|
}; |
|
|
|
const searchButton = ( |
|
<Icon |
|
className="search-icon" |
|
type="search" |
|
onClick={handleSearch} |
|
/> |
|
); |
|
|
|
return ( |
|
<Input |
|
suffix={searchButton} |
|
onPressEnter={handleSearch} |
|
{...rest} |
|
/> |
|
); |
|
}; |
|
|
|
// A special input component that returns an object instead of string for the form builder |
|
const ObjectInput = ({ |
|
className, |
|
valueKey, |
|
onChange, |
|
value, |
|
...rest |
|
}) => { |
|
const handleChange = (e) => { |
|
const eventValue = e.target.value; |
|
if (onChange) { |
|
return onChange({ ...value, [valueKey]: eventValue }); |
|
} |
|
}; |
|
|
|
return ( |
|
<AntdInput |
|
className={classNames('ave-input', className)} |
|
onChange={handleChange} |
|
value={value[valueKey]} |
|
{...rest} |
|
/> |
|
); |
|
}; |
|
|
|
Input.TextArea = AntdInput.TextArea; |
|
Input.Masked = MaskedInput; |
|
Input.Password = PasswordInput; |
|
Input.Object = ObjectInput; |
|
Input.Search = SearchInput; |
|
|
|
Input.propTypes = { |
|
rounded: PropTypes.bool, |
|
valueObject: PropTypes.string, |
|
className: PropTypes.string, |
|
type: PropTypes.string, |
|
placeholder: PropTypes.string, |
|
onPressEnter: PropTypes.func, |
|
}; |
|
|
|
Input.defaultProps = { |
|
valueObject: null, |
|
rounded: false, |
|
className: null, |
|
type: 'default', |
|
placeholder: '', |
|
onPressEnter: () => {}, |
|
}; |
|
|
|
export default Input; |