@woosmap/ui 4.34.0-beta.15 → 4.34.0-beta.17
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
|
@@ -91,13 +91,14 @@ export default class Input extends Component {
|
|
|
91
91
|
<span
|
|
92
92
|
onKeyDown={() => ({})}
|
|
93
93
|
role="button"
|
|
94
|
+
className="password-toggle"
|
|
94
95
|
tabIndex={0}
|
|
95
96
|
onClick={() => this.setState({ showPassword: !showPassword })}
|
|
96
97
|
>
|
|
97
98
|
<Icon
|
|
98
99
|
icon={showPassword ? 'eye-crossed-out' : 'eye'}
|
|
99
100
|
size={iconSize}
|
|
100
|
-
className={
|
|
101
|
+
className={{ showed: showPassword }}
|
|
101
102
|
/>
|
|
102
103
|
</span>
|
|
103
104
|
)}
|
|
@@ -106,7 +107,19 @@ export default class Input extends Component {
|
|
|
106
107
|
};
|
|
107
108
|
|
|
108
109
|
render() {
|
|
109
|
-
const {
|
|
110
|
+
const {
|
|
111
|
+
hideLabel,
|
|
112
|
+
error,
|
|
113
|
+
label,
|
|
114
|
+
className,
|
|
115
|
+
size,
|
|
116
|
+
type,
|
|
117
|
+
icon,
|
|
118
|
+
enableTogglePassword,
|
|
119
|
+
isFilter,
|
|
120
|
+
isNoBorder,
|
|
121
|
+
disabled,
|
|
122
|
+
} = this.props;
|
|
110
123
|
const errorComponent = error ? (
|
|
111
124
|
<span className="input__error" data-testid="input-error">
|
|
112
125
|
{error}
|
|
@@ -117,7 +130,7 @@ export default class Input extends Component {
|
|
|
117
130
|
isFilter && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--filter' : null,
|
|
118
131
|
isNoBorder && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--noborder' : null,
|
|
119
132
|
{ 'input--iconed': icon },
|
|
120
|
-
{ 'input--password-toggle': type === 'password' },
|
|
133
|
+
{ 'input--password-toggle': enableTogglePassword && type === 'password' },
|
|
121
134
|
`input--${size}`,
|
|
122
135
|
type === 'checkbox' || type === 'radio' ? `input--${type}` : null,
|
|
123
136
|
disabled ? 'input--disabled' : null,
|
|
@@ -76,7 +76,7 @@ const Template = (args) => {
|
|
|
76
76
|
type="password"
|
|
77
77
|
label="Password with icon"
|
|
78
78
|
hideLabel={hideLabel}
|
|
79
|
-
icon="
|
|
79
|
+
icon="marker"
|
|
80
80
|
/>
|
|
81
81
|
<Input
|
|
82
82
|
placeholder="Type password"
|
|
@@ -86,7 +86,7 @@ const Template = (args) => {
|
|
|
86
86
|
enableTogglePassword
|
|
87
87
|
/>
|
|
88
88
|
<Input
|
|
89
|
-
icon="
|
|
89
|
+
icon="shield"
|
|
90
90
|
placeholder="Type password"
|
|
91
91
|
type="password"
|
|
92
92
|
label="Password with icon and toggle"
|
|
@@ -2,6 +2,14 @@ input
|
|
|
2
2
|
font()
|
|
3
3
|
.input
|
|
4
4
|
width 100%
|
|
5
|
+
&:hover
|
|
6
|
+
&:focus
|
|
7
|
+
.input__item
|
|
8
|
+
&:not([type=button]):not([type=checkbox]):not([type=radio])
|
|
9
|
+
border-color $secondary
|
|
10
|
+
.icon
|
|
11
|
+
transition none
|
|
12
|
+
stroke $secondary
|
|
5
13
|
&__container
|
|
6
14
|
position relative
|
|
7
15
|
&__label
|
|
@@ -18,6 +26,7 @@ input
|
|
|
18
26
|
display block
|
|
19
27
|
margin .5rem 0 .5rem 0
|
|
20
28
|
&--iconed
|
|
29
|
+
&--password-toggle
|
|
21
30
|
.icon
|
|
22
31
|
stroke $inputBorderColor
|
|
23
32
|
position absolute
|
|
@@ -43,6 +52,57 @@ input
|
|
|
43
52
|
.icon
|
|
44
53
|
left .8rem
|
|
45
54
|
top .4rem
|
|
55
|
+
&--iconed
|
|
56
|
+
&.input--password-toggle
|
|
57
|
+
.password-toggle
|
|
58
|
+
position absolute
|
|
59
|
+
right 1rem
|
|
60
|
+
top .7rem
|
|
61
|
+
.icon
|
|
62
|
+
position relative
|
|
63
|
+
top auto
|
|
64
|
+
left auto
|
|
65
|
+
&.input--large
|
|
66
|
+
.password-toggle
|
|
67
|
+
right 1.2rem
|
|
68
|
+
top 1rem
|
|
69
|
+
.icon
|
|
70
|
+
position relative
|
|
71
|
+
top auto
|
|
72
|
+
left auto
|
|
73
|
+
&.input--small
|
|
74
|
+
.password-toggle
|
|
75
|
+
right .8rem
|
|
76
|
+
top .4rem
|
|
77
|
+
.icon
|
|
78
|
+
position relative
|
|
79
|
+
top auto
|
|
80
|
+
left auto
|
|
81
|
+
&.input--filter
|
|
82
|
+
.password-toggle
|
|
83
|
+
right -.4rem
|
|
84
|
+
top .7rem
|
|
85
|
+
.icon
|
|
86
|
+
position relative
|
|
87
|
+
top auto
|
|
88
|
+
left auto
|
|
89
|
+
&.input--large
|
|
90
|
+
.password-toggle
|
|
91
|
+
right -.4rem
|
|
92
|
+
top 1.1rem
|
|
93
|
+
.icon
|
|
94
|
+
position relative
|
|
95
|
+
top auto
|
|
96
|
+
left auto
|
|
97
|
+
&.input--small
|
|
98
|
+
.password-toggle
|
|
99
|
+
right -.4rem
|
|
100
|
+
top .3rem
|
|
101
|
+
.icon
|
|
102
|
+
position relative
|
|
103
|
+
top auto
|
|
104
|
+
left auto
|
|
105
|
+
|
|
46
106
|
&--checkbox
|
|
47
107
|
&--radio
|
|
48
108
|
position relative
|
|
@@ -64,6 +124,7 @@ input
|
|
|
64
124
|
order 1
|
|
65
125
|
margin 0 0 0 1rem
|
|
66
126
|
&__item
|
|
127
|
+
trans()
|
|
67
128
|
&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
|
|
68
129
|
height $inputHeight
|
|
69
130
|
padding $inputPadding
|
|
@@ -92,25 +153,33 @@ input
|
|
|
92
153
|
background-color transparent
|
|
93
154
|
&:focus
|
|
94
155
|
border-color $secondary
|
|
156
|
+
.icon
|
|
157
|
+
stroke $secondary
|
|
95
158
|
.input--iconed &
|
|
159
|
+
.input--password-toggle &
|
|
96
160
|
padding-left 4rem
|
|
97
161
|
.input--large &
|
|
98
162
|
font-size $inputFontSizeLarge
|
|
99
163
|
line-height $inputLineHeightLarge
|
|
164
|
+
.input--password-toggle.input--large &
|
|
100
165
|
.input--iconed.input--large &
|
|
101
166
|
padding-left 4.6rem
|
|
167
|
+
.input--filter.input--password-toggle &
|
|
102
168
|
.input--filter.input--iconed &
|
|
103
169
|
padding-left 2.6rem
|
|
104
170
|
padding-bottom 0
|
|
171
|
+
.input--filter.input--password-toggle.input--large &
|
|
105
172
|
.input--filter.input--iconed.input--large &
|
|
106
173
|
padding-left 2.8rem
|
|
107
174
|
padding-bottom 0
|
|
175
|
+
.input--filter.input--password-toggle.input--small &
|
|
108
176
|
.input--filter.input--iconed.input--small &
|
|
109
177
|
padding-left 2.4rem
|
|
110
178
|
padding-bottom .4rem
|
|
111
179
|
.input--small &
|
|
112
180
|
font-size $inputFontSizeSmall
|
|
113
181
|
min-width $inputHeightSmall
|
|
182
|
+
.input--password-toggle.input--small &
|
|
114
183
|
.input--iconed.input--small &
|
|
115
184
|
padding-left 3.4rem
|
|
116
185
|
.input--noborder &
|