-
Notifications
You must be signed in to change notification settings - Fork 0
/
Input.tsx
84 lines (73 loc) · 1.78 KB
/
Input.tsx
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
import * as React from 'react';
import styled from 'styled-components';
export const ResetInput = styled.input`
flex-shrink: 1;
border: 0;
padding: 8px;
display: inline-block;
vertical-align: middle;
white-space: normal;
background: none;
line-height: 1;
/* Browsers have different default form fonts */
font-size: inherit;
font-family: inherit;
&:focus {
outline: initial;
}
`;
export const FloatingInput: any = styled(ResetInput)`
width: 100%;
height: 56px;
padding-left: 15px; /* Should be same as Label Margin left */
font-size: 14px;
padding-top: 29px;
position: relative;
border: 1px solid;
border-color: ${({ error }: any) => (error ? 'red' : '#e7e7e7')};
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
&:focus {
border-color: #000;
}
&:focus + label,
&:not(:placeholder-shown) + label {
/* &:valid + label { */
transform: translateY(-12px);
font-size: 75%;
}
`;
export const FloatingLabel = styled.label`
position: absolute;
font-size: 14px;
color: ${({ error }: any) => (error ? 'red' : '')};
margin-left: 15px; /* Should be same as input margin left */
line-height: 56px;
/* To also make the label clickable */
// @todo label is not clickable because z-index is not -1
z-index: 1;
transition: all 150ms ease;
`;
export const StyledInputWrapper = styled.div`
display: flex;
margin-bottom: 20px;
`;
interface Props {
/**
* Click event handler
* @default null
*/
name: string;
label: string;
field: {};
type: string;
error: string;
}
const Input: React.SFC<Props> = ({ name, label, field, type, error }) => (
<StyledInputWrapper>
<FloatingInput error={error} type={type} placeholder=" " {...field} />
<FloatingLabel error={error} htmlFor={name}>
{error || label}
</FloatingLabel>
</StyledInputWrapper>
);
export default Input;