/
Input.js
76 lines (70 loc) · 1.43 KB
/
Input.js
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
import React from "react";
import styled from "styled-components";
import { Text, Grid } from "./index";
const Input = ({
label,
placeholder,
_onChange,
type,
multiLine,
value,
is_Submit,
onSubmit,
}) => {
if (multiLine) {
return (
<Grid>
{label && <Text margin="0">{label}</Text>}
<ElTextarea
placeholder={placeholder}
onChange={_onChange}
rows={10}
value={value}
></ElTextarea>
</Grid>
);
}
return (
<Grid>
{label && <Text margin="0">{label}</Text>}
{is_Submit ? (
<ElInput
placeholder={placeholder}
onChange={_onChange}
type={type}
value={value}
onKeyPress={(e) => {
if (e.key === "Enter") {
onSubmit();
}
}}
/>
) : (
<ElInput placeholder={placeholder} onChange={_onChange} type={type} />
)}
</Grid>
);
};
Input.defaultProps = {
label: false,
placeholder: "텍스트를 입력해주세요.",
_onChange: () => {},
type: "text",
multiLine: false,
value: "",
is_Submit: false,
onSubmit: () => {},
};
const ElInput = styled.input`
border: 1px solid #212121;
width: 100%;
padding: 12px 4px;
box-sizing: border-box;
`;
const ElTextarea = styled.textarea`
border: 1px solid #212121;
width: 100%;
padding: 12px 4px;
box-sizing: border-box;
`;
export default Input;