/
index.jsx
95 lines (89 loc) · 2.78 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import { Search } from 'react-feather';
import InputError from '../InputError';
const Input = ({
role, ariaLabelWrapper, ariaLabel, ariaLabelledBy, ariaLabelSearchButton,
className, disabled, error, errorMessage, handleChange, id, label, negative, placeholder, searchField, submitCallback, type, value, onFocus, onBlur, size,
}) => {
const [inputValue, setValue] = useState(value);
const inputId = id || uuidv4();
const handleInputChange = e => {
setValue(e.target.value);
handleChange(e.target.value);
};
const handleKeyDown = e => {
if (e.key === 'Enter') {
submitCallback(inputValue);
}
};
return (
<div className={`ssb-input${negative ? ' negative' : ''}${error ? ' error' : ''}${size === 'lg' ? ' input-lg' : ''}${className ? ` ${className}` : ''}`}>
{label && <label htmlFor={inputId}>{label}</label>}
<div className="input-wrapper" role={searchField ? 'search' : role} aria-label={ariaLabelWrapper}>
<input
id={inputId}
disabled={disabled}
type={type}
value={inputValue}
onChange={e => handleInputChange(e)}
onFocus={onFocus}
onBlur={onBlur}
placeholder={placeholder}
aria-label={ariaLabel}
className={searchField || error ? ' with-icon' : ''}
onKeyDown={searchField ? e => handleKeyDown(e) : undefined}
aria-describedby={error && errorMessage ? `error_${inputId}` : undefined}
aria-labelledby={ariaLabelledBy}
/>
{searchField && (
<button aria-label={ariaLabelSearchButton} className="icon-wrapper search-icon" onClick={() => submitCallback(inputValue)}>
<Search size={size === 'lg' ? '72' : '18'} />
</button>
)}
</div>
{error && (errorMessage && (
<InputError negative={negative} errorMessage={errorMessage} id={`error_${inputId}`} />
))}
</div>
);
};
Input.defaultProps = {
className: '',
disabled: false,
error: false,
handleChange: () => {},
onFocus: () => {},
onBlur: () => {},
negative: false,
searchField: false,
submitCallback: () => {},
type: 'text',
ariaLabelSearchButton: 'search',
value: '',
};
Input.propTypes = {
role: PropTypes.string,
ariaLabelWrapper: PropTypes.string,
ariaLabel: PropTypes.string,
ariaLabelledBy: PropTypes.string,
ariaLabelSearchButton: PropTypes.string,
className: PropTypes.string,
disabled: PropTypes.bool,
error: PropTypes.bool,
errorMessage: PropTypes.string,
handleChange: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
id: PropTypes.string,
label: PropTypes.string,
negative: PropTypes.bool,
placeholder: PropTypes.string,
searchField: PropTypes.bool,
size: PropTypes.string,
submitCallback: PropTypes.func,
type: PropTypes.string,
value: PropTypes.string,
};
export default Input;