-
-
Notifications
You must be signed in to change notification settings - Fork 11
Expand file tree
/
Copy pathInput.js
More file actions
113 lines (99 loc) · 2.38 KB
/
Input.js
File metadata and controls
113 lines (99 loc) · 2.38 KB
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
import React from 'react';
import styled, { css } from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
const styles = {
borderRadius(props) {
if (props.shape === 'bluntEdged') {
return props.theme.cornerEdge;
}
if (props.shape === 'sharpEdged') {
return '2px';
}
if (props.shape === 'capsular') {
return props.theme.px(10);
}
return '';
},
};
const InputWrapper = styled.div`
position: relative;
margin-bottom: 32px;
${({ fluid }) => fluid && css`
text-align: center;
`}
`;
const InputIcon = styled(FontAwesomeIcon)`
position: absolute;
top: 15px;
margin-left: 12px;
color: #03567b;
`;
const SuffixInputIcon = styled(InputIcon)`
margin: 0;
top: 50%;
padding-right: 12px;
transform: translate(-100%, -50%);
${({ onClick }) => onClick && css`
cursor: pointer;
`}
`;
const InputBox = styled.input.withConfig({
shouldForwardProp: (prop) => prop !== 'fluid' && prop !== 'spin',
})`
padding: 12px 48px 12px 36px;
border-width: 1px;
border-radius: ${styles.borderRadius};
${({ fluid }) => fluid && css`
width: 100%;
`}
${({ state }) => state === 'error' && css`
border-color: red;
`}
`;
function Input({
reference,
prefixIcon,
placeholder,
suffixIcon,
onClickOnSuffixIcon,
state,
...props
}) {
return (
<InputWrapper>
{prefixIcon && <InputIcon icon={`fa-solid ${prefixIcon}`} size="sm" />}
<InputBox type="text" placeholder={placeholder} ref={reference} state={state} {...props} />
{suffixIcon && <SuffixInputIcon icon={`fa-solid ${suffixIcon}`} size="sm" onClick={onClickOnSuffixIcon} />}
</InputWrapper>
);
}
Input.propTypes = {
placeholder: PropTypes.string,
shape: PropTypes.oneOf(['bluntEdged', 'sharpEdged', 'capsular']),
fluid: PropTypes.bool,
disabled: PropTypes.bool,
spin: PropTypes.bool,
className: PropTypes.string,
prefixIcon: PropTypes.string,
suffixIcon: PropTypes.string,
onClickOnSuffixIcon: PropTypes.func,
state: PropTypes.string,
reference: PropTypes.object,
};
Input.defaultProps = {
placeholder: 'Type here',
shape: 'sharpEdged',
fluid: true,
disabled: false,
spin: false,
className: '',
prefixIcon: '',
suffixIcon: '',
onClickOnSuffixIcon: () => {},
};
export default Input;
// Left Icon
// Right Button
// input design
// Validation