index.tsx
47 lines
| 1 | import {ChangeEventHandler, forwardRef} from 'react'; |
| 2 | |
| 3 | import './style.scss'; |
| 4 | |
| 5 | interface InputProps { |
| 6 | name?: string; |
| 7 | value?: string; |
| 8 | placeholder?: string; |
| 9 | type?: string; |
| 10 | onChange?: ChangeEventHandler<HTMLInputElement>; |
| 11 | disabled?: boolean; |
| 12 | label?: string; |
| 13 | [x: string]: any; |
| 14 | } |
| 15 | |
| 16 | const Input = forwardRef<HTMLInputElement, InputProps>( |
| 17 | ({name, value, placeholder, onChange, label, disabled = false, type = 'text', ...rest}, ref) => { |
| 18 | |
| 19 | const Input = () => ( |
| 20 | <input |
| 21 | ref={ref} |
| 22 | type={type} |
| 23 | name={name} |
| 24 | aria-label={name} |
| 25 | placeholder={placeholder} |
| 26 | className="givewp-input" |
| 27 | onChange={onChange} |
| 28 | disabled={disabled} |
| 29 | value={value} |
| 30 | {...rest} |
| 31 | /> |
| 32 | ) |
| 33 | |
| 34 | if (label) { |
| 35 | return ( |
| 36 | <label className="label"> |
| 37 | {Input()} |
| 38 | {label} |
| 39 | </label> |
| 40 | ) |
| 41 | } |
| 42 | |
| 43 | return Input(); |
| 44 | }) |
| 45 | |
| 46 | export default Input |
| 47 |