@woosmap/ui 3.91.0 → 3.94.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -9,6 +9,7 @@ export default class Input extends Component {
|
|
|
9
9
|
super(props);
|
|
10
10
|
this.inputId = uniqueId();
|
|
11
11
|
this.inputRef = React.createRef();
|
|
12
|
+
this.state = { showPassword: false };
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
componentDidMount() {
|
|
@@ -42,8 +43,11 @@ export default class Input extends Component {
|
|
|
42
43
|
onBlur,
|
|
43
44
|
onFocus,
|
|
44
45
|
icon,
|
|
46
|
+
enableTogglePassword,
|
|
45
47
|
} = this.props;
|
|
46
48
|
|
|
49
|
+
const { showPassword } = this.state;
|
|
50
|
+
|
|
47
51
|
let iconSize = size;
|
|
48
52
|
|
|
49
53
|
switch (iconSize) {
|
|
@@ -68,6 +72,7 @@ export default class Input extends Component {
|
|
|
68
72
|
}),
|
|
69
73
|
id: this.inputId,
|
|
70
74
|
ref: this.inputRef,
|
|
75
|
+
'data-testid': 'input',
|
|
71
76
|
name,
|
|
72
77
|
checked,
|
|
73
78
|
autoComplete: autocomplete ? '' : 'off',
|
|
@@ -75,12 +80,26 @@ export default class Input extends Component {
|
|
|
75
80
|
onBlur,
|
|
76
81
|
onFocus,
|
|
77
82
|
onKeyDown: this.onKeyDown,
|
|
78
|
-
type,
|
|
83
|
+
type: type === 'password' && showPassword ? 'text' : type,
|
|
79
84
|
value,
|
|
80
85
|
size: length,
|
|
81
86
|
disabled,
|
|
82
87
|
onChange,
|
|
83
88
|
})}
|
|
89
|
+
{type === 'password' && enableTogglePassword && (
|
|
90
|
+
<span
|
|
91
|
+
onKeyDown={() => ({})}
|
|
92
|
+
role="button"
|
|
93
|
+
tabIndex={0}
|
|
94
|
+
onClick={() => this.setState({ showPassword: !showPassword })}
|
|
95
|
+
>
|
|
96
|
+
<Icon
|
|
97
|
+
icon={showPassword ? 'eye-crossed-out' : 'eye'}
|
|
98
|
+
size={iconSize}
|
|
99
|
+
className={cl('icon--password-toggle', { showed: showPassword })}
|
|
100
|
+
/>
|
|
101
|
+
</span>
|
|
102
|
+
)}
|
|
84
103
|
</div>
|
|
85
104
|
);
|
|
86
105
|
};
|
|
@@ -97,6 +116,7 @@ export default class Input extends Component {
|
|
|
97
116
|
isFilter && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--filter' : null,
|
|
98
117
|
isNoBorder && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--noborder' : null,
|
|
99
118
|
{ 'input--iconed': icon },
|
|
119
|
+
{ 'input--password-toggle': type === 'password' },
|
|
100
120
|
`input--${size}`,
|
|
101
121
|
type === 'checkbox' || type === 'radio' ? `input--${type}` : null,
|
|
102
122
|
disabled ? 'input--disabled' : null,
|
|
@@ -123,6 +143,7 @@ export default class Input extends Component {
|
|
|
123
143
|
);
|
|
124
144
|
}
|
|
125
145
|
}
|
|
146
|
+
|
|
126
147
|
Input.propTypes = {
|
|
127
148
|
value: PropTypes.string,
|
|
128
149
|
size: PropTypes.oneOf(['large', 'normal', 'small', 'mini']),
|
|
@@ -145,6 +166,7 @@ Input.propTypes = {
|
|
|
145
166
|
onBlur: PropTypes.func,
|
|
146
167
|
onFocus: PropTypes.func,
|
|
147
168
|
onPressEnter: PropTypes.func,
|
|
169
|
+
enableTogglePassword: PropTypes.bool,
|
|
148
170
|
};
|
|
149
171
|
|
|
150
172
|
Input.defaultProps = {
|
|
@@ -169,4 +191,5 @@ Input.defaultProps = {
|
|
|
169
191
|
length: undefined,
|
|
170
192
|
onBlur: null,
|
|
171
193
|
onFocus: null,
|
|
194
|
+
enableTogglePassword: false,
|
|
172
195
|
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom/extend-expect';
|
|
4
|
+
|
|
5
|
+
import Input from './Input';
|
|
6
|
+
|
|
7
|
+
it('renders an input password component ', () => {
|
|
8
|
+
const { getByTestId } = render(<Input type="password" />);
|
|
9
|
+
const input = getByTestId('input');
|
|
10
|
+
|
|
11
|
+
expect(input).toHaveAttribute('type', 'password');
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('renders an input password component with icon ', () => {
|
|
15
|
+
const { getByTestId } = render(<Input type="password" icon="woosmap" />);
|
|
16
|
+
const comp = getByTestId('icon-woosmap');
|
|
17
|
+
|
|
18
|
+
expect(comp).toBeInTheDocument();
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('renders an input password component with toggle ', () => {
|
|
22
|
+
const { getByTestId } = render(<Input type="password" enableTogglePassword />);
|
|
23
|
+
const comp = getByTestId('icon-eye');
|
|
24
|
+
|
|
25
|
+
expect(comp).toBeInTheDocument();
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
it('renders an input password component with icon and toggle ', () => {
|
|
29
|
+
const { getByTestId } = render(<Input type="password" icon="woosmap" enableTogglePassword />);
|
|
30
|
+
const icon = getByTestId('icon-woosmap');
|
|
31
|
+
const toggle = getByTestId('icon-eye');
|
|
32
|
+
|
|
33
|
+
expect(icon).toBeInTheDocument();
|
|
34
|
+
expect(toggle).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it('input password component toggle change toggle icon ', () => {
|
|
38
|
+
const { getByTestId } = render(<Input type="password" enableTogglePassword />);
|
|
39
|
+
|
|
40
|
+
const start = getByTestId('icon-eye');
|
|
41
|
+
expect(start).toBeInTheDocument();
|
|
42
|
+
|
|
43
|
+
fireEvent.click(start);
|
|
44
|
+
|
|
45
|
+
const middle = getByTestId('icon-eye-crossed-out');
|
|
46
|
+
expect(middle).toBeInTheDocument();
|
|
47
|
+
|
|
48
|
+
fireEvent.click(middle);
|
|
49
|
+
|
|
50
|
+
const end = getByTestId('icon-eye');
|
|
51
|
+
expect(end).toBeInTheDocument();
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it('input password component toggle change input type ', () => {
|
|
55
|
+
const { getByTestId } = render(<Input type="password" enableTogglePassword />);
|
|
56
|
+
|
|
57
|
+
const input = getByTestId('input');
|
|
58
|
+
expect(input).toHaveAttribute('type', 'password');
|
|
59
|
+
|
|
60
|
+
let toggle = getByTestId('icon-eye');
|
|
61
|
+
fireEvent.click(toggle);
|
|
62
|
+
|
|
63
|
+
expect(input).toHaveAttribute('type', 'text');
|
|
64
|
+
|
|
65
|
+
toggle = getByTestId('icon-eye-crossed-out');
|
|
66
|
+
fireEvent.click(toggle);
|
|
67
|
+
|
|
68
|
+
expect(input).toHaveAttribute('type', 'password');
|
|
69
|
+
});
|
|
@@ -15,7 +15,6 @@ const Template = (args) => {
|
|
|
15
15
|
<Input placeholder={placeholder} hideLabel={hideLabel} icon="search" isFilter isNoBorder />
|
|
16
16
|
<Input placeholder={placeholder} hideLabel={hideLabel} icon="search" size="large" isFilter isNoBorder />
|
|
17
17
|
<Input placeholder={placeholder} hideLabel={hideLabel} icon="search" size="small" isFilter isNoBorder />
|
|
18
|
-
|
|
19
18
|
<Input placeholder={placeholder} label={label} hideLabel={hideLabel} size="large" />
|
|
20
19
|
<Input
|
|
21
20
|
placeholder={placeholder}
|
|
@@ -60,9 +59,31 @@ const Template = (args) => {
|
|
|
60
59
|
hideLabel={hideLabel}
|
|
61
60
|
error="This is an error"
|
|
62
61
|
/>
|
|
63
|
-
|
|
64
62
|
<Input placeholder={placeholder} label={label} type="textarea" />
|
|
65
63
|
<Input placeholder="Type numbers" label="Please type numbers" type="number" />
|
|
64
|
+
<Input placeholder="Type password" type="password" label="Password" hideLabel={hideLabel} />
|
|
65
|
+
<Input
|
|
66
|
+
placeholder="Type password"
|
|
67
|
+
type="password"
|
|
68
|
+
label="Password with icon"
|
|
69
|
+
hideLabel={hideLabel}
|
|
70
|
+
icon="woosmap"
|
|
71
|
+
/>
|
|
72
|
+
<Input
|
|
73
|
+
placeholder="Type password"
|
|
74
|
+
type="password"
|
|
75
|
+
label="Password with toggle"
|
|
76
|
+
hideLabel={hideLabel}
|
|
77
|
+
enableTogglePassword
|
|
78
|
+
/>
|
|
79
|
+
<Input
|
|
80
|
+
icon="woosmap"
|
|
81
|
+
placeholder="Type password"
|
|
82
|
+
type="password"
|
|
83
|
+
label="Password with icon and toggle"
|
|
84
|
+
hideLabel={hideLabel}
|
|
85
|
+
enableTogglePassword
|
|
86
|
+
/>
|
|
66
87
|
</div>
|
|
67
88
|
);
|
|
68
89
|
};
|
|
@@ -17,31 +17,55 @@
|
|
|
17
17
|
display block
|
|
18
18
|
margin .5rem 0 .5rem 0
|
|
19
19
|
&--iconed
|
|
20
|
+
&--password-toggle
|
|
20
21
|
.icon
|
|
21
22
|
fill $inputDemoBorderColor
|
|
22
23
|
position absolute
|
|
23
24
|
left 1rem
|
|
24
25
|
top .7rem
|
|
26
|
+
&--password-toggle
|
|
27
|
+
trans()
|
|
28
|
+
left unset
|
|
29
|
+
right 1rem
|
|
30
|
+
cursor pointer
|
|
31
|
+
&:hover
|
|
32
|
+
&.showed
|
|
33
|
+
fill $dark60
|
|
25
34
|
&.input--large
|
|
26
35
|
.icon
|
|
27
36
|
left 1.2rem
|
|
28
37
|
top 1rem
|
|
38
|
+
&--password-toggle
|
|
39
|
+
left unset
|
|
40
|
+
right 1.2rem
|
|
29
41
|
&.input--filter
|
|
30
42
|
.icon
|
|
31
43
|
left -.4rem
|
|
32
44
|
top .7rem
|
|
45
|
+
&--password-toggle
|
|
46
|
+
left unset
|
|
47
|
+
right -.4rem
|
|
33
48
|
&.input--large
|
|
34
49
|
.icon
|
|
35
50
|
left -.4rem
|
|
36
51
|
top 1.1rem
|
|
52
|
+
&--password-toggle
|
|
53
|
+
left unset
|
|
54
|
+
right -.4rem
|
|
37
55
|
&.input--small
|
|
38
56
|
.icon
|
|
39
57
|
left -.4rem
|
|
40
58
|
top .3rem
|
|
59
|
+
&--password-toggle
|
|
60
|
+
left unset
|
|
61
|
+
right -.4rem
|
|
41
62
|
&.input--small
|
|
42
63
|
.icon
|
|
43
64
|
left .8rem
|
|
44
65
|
top .4rem
|
|
66
|
+
&--password-toggle
|
|
67
|
+
left unset
|
|
68
|
+
right .8rem
|
|
45
69
|
&--checkbox
|
|
46
70
|
&--radio
|
|
47
71
|
position relative
|
|
@@ -95,11 +119,15 @@
|
|
|
95
119
|
border-color $secondary
|
|
96
120
|
.input--iconed &
|
|
97
121
|
padding-left 4rem
|
|
122
|
+
.input--password-toggle &
|
|
123
|
+
padding-right 4rem
|
|
98
124
|
.input--large &
|
|
99
125
|
font-size $inputFontSizeLarge
|
|
100
126
|
line-height $inputLineHeightLarge
|
|
101
127
|
.input--iconed.input--large &
|
|
102
128
|
padding-left 4.6rem
|
|
129
|
+
.input--password-toggle.input--large &
|
|
130
|
+
padding-right 4.6rem
|
|
103
131
|
.input--filter.input--iconed &
|
|
104
132
|
padding-left 2.6rem
|
|
105
133
|
padding-bottom 0
|