forked from decred/decrediton
/
Input.jsx
119 lines (113 loc) · 2.54 KB
/
Input.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { defineMessages } from "react-intl";
import styles from "./Input.module.css";
import { classNames, TextInput } from "pi-ui";
import { useIntl } from "react-intl";
const messages = defineMessages({
invalidInput: {
id: "input.invalidInput",
defaultMessage: "This field is wrong"
},
requiredInput: {
id: "input.requiredInput",
defaultMessage: "This field is required"
}
});
const Input = ({
children,
label,
id,
onFocus,
onBlur,
onKeyDownSubmit,
onKeyDown,
onChange,
showErrors,
showSuccess,
hideIcons,
invalidMessage,
successMessage,
requiredMessage,
required,
invalid,
value,
placeholder,
disabled,
readOnly,
unit,
hidden,
type,
className,
inputClassNames,
unitAreaClassName,
autoFocus,
dataTestId,
ariaLabelledBy,
newBiggerFontStyle
}) => {
const onInputKeyDown = (e) => {
e.keyCode === 13 && onKeyDownSubmit?.(e);
!e.defaultPrevented && onKeyDown?.(e);
};
let error = null;
const intl = useIntl();
const hasErrorToShow =
showErrors && ((invalid && value) || (required && !value));
if (showErrors) {
if (invalid && value) {
error = invalidMessage
? invalidMessage
: intl.formatMessage(messages.invalidInput);
}
if (required && !value) {
error = requiredMessage
? requiredMessage
: intl.formatMessage(messages.requiredInput);
}
}
return hidden ? null : (
<TextInput
{...{
id,
label,
error,
inputClassNames,
autoFocus,
disabled,
readOnly,
placeholder
}}
type={type ?? "text"}
success={showSuccess ? successMessage : ""}
value={value ?? ""}
onChange={(e) => onChange?.(e)}
onFocus={(e) => onFocus?.(e)}
onBlur={(e) => onBlur?.(e)}
wrapperClassNames={classNames(
className,
styles.wrapper,
hideIcons && styles.hideIcons
)}
inputClassNames={classNames(
inputClassNames,
newBiggerFontStyle ? styles.newBiggerFontStyleInput : styles.input
)}
labelClassNames={styles.label}
messageClassNames={!newBiggerFontStyle ? styles.message : null}
onKeyDown={onInputKeyDown}
data-testid={dataTestId}
aria-labelledby={ariaLabelledBy}>
{unit && (
<span
className={classNames(
styles.unitArea,
unitAreaClassName,
hasErrorToShow && styles.error
)}>
{unit}
</span>
)}
{children}
</TextInput>
);
};
export default Input;