/
index.jsx
70 lines (65 loc) · 1.81 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
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import InputError from '../InputError';
const TextArea = ({
ariaLabel, className, disabled, error, errorMessage, handleChange, id, label, negative, placeholder, value,
rows, cols, onBlur, onFocus,
}) => {
const [inputValue, setValue] = useState(value);
const inputId = id || uuidv4();
const handleInputChange = e => {
setValue(e.target.value);
handleChange(e.target.value);
};
return (
<div className={`ssb-text-area${negative ? ' negative' : ''}${error ? ' error' : ''}${className ? ` ${className}` : ''}`}>
{label && <label htmlFor={inputId}>{label}</label>}
<div className="text-area-wrapper">
<textarea
id={inputId}
disabled={disabled}
value={inputValue}
onChange={e => handleInputChange(e)}
onFocus={onFocus}
onBlur={onBlur}
placeholder={placeholder}
aria-label={ariaLabel}
rows={rows}
cols={cols}
aria-describedby={error && errorMessage ? `error_${inputId}` : undefined}
/>
</div>
{error && (errorMessage && (
<InputError errorMessage={errorMessage} negative={negative} id={`error_${inputId}`} />
))}
</div>
);
};
TextArea.defaultProps = {
className: '',
disabled: false,
error: false,
handleChange: () => {},
onFocus: () => {},
onBlur: () => {},
negative: false,
};
TextArea.propTypes = {
ariaLabel: 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,
value: PropTypes.string,
rows: PropTypes.number,
cols: PropTypes.number,
};
export default TextArea;