linear-react-components-ui 0.4.76-beta.28 → 0.4.76-beta.29
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/README.md +5 -7
- package/lib/assets/styles/effects.scss +0 -20
- package/lib/assets/styles/panel.scss +1 -4
- package/lib/assets/styles/select.scss +3 -3
- package/lib/assets/styles/table.scss +0 -13
- package/lib/assets/styles/tabs.scss +44 -49
- package/lib/assets/styles/treeview.scss +5 -0
- package/lib/dropdown/Popup.js +2 -3
- package/lib/form/form.spec.js +0 -8
- package/lib/form/index.js +21 -40
- package/lib/icons/helper.js +0 -4
- package/lib/inputs/base/InputTextBase.js +3 -23
- package/lib/inputs/mask/Phone.js +1 -10
- package/lib/inputs/mask/input_mask.spec.js +4 -21
- package/lib/inputs/select/Dropdown.js +59 -48
- package/lib/inputs/select/helper.js +2 -65
- package/lib/inputs/select/multiple/index.js +3 -6
- package/lib/inputs/select/simple/index.js +2 -5
- package/lib/internals/withTooltip.js +2 -2
- package/lib/skeleton/SkeletonContainer.js +1 -1
- package/lib/table/Body.js +7 -41
- package/lib/table/Header.js +1 -12
- package/lib/table/HeaderColumn.js +2 -4
- package/lib/table/Row.js +7 -14
- package/lib/table/RowColumn.js +3 -4
- package/lib/table/helpers.js +1 -11
- package/lib/table/index.js +8 -32
- package/lib/tabs/Menu.js +11 -1
- package/lib/tabs/index.js +1 -1
- package/lib/treeview/Node.js +7 -15
- package/lib/treeview/index.js +19 -33
- package/lib/treeview/treeview.spec.js +0 -9
- package/package.json +1 -1
- package/lib/assets/styles/uitour.scss +0 -112
- package/lib/inputs/date/helper.js +0 -16
- package/lib/uitour/helpers.js +0 -15
- package/lib/uitour/index.js +0 -271
- package/lib/uitour/uitour.spec.js +0 -176
package/README.md
CHANGED
|
@@ -71,16 +71,14 @@ ficando da seguinte maneira:
|
|
|
71
71
|
|
|
72
72
|
### Publicar versão de demonstração no Heroku
|
|
73
73
|
|
|
74
|
-
Pré-requesistos
|
|
75
|
-
- Ter um conta no heroku
|
|
76
|
-
- Ser um colaborador do projeto no Heroku
|
|
77
|
-
- Ter o heroku cli instalado: https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli
|
|
78
74
|
|
|
75
|
+
No diretorio da aplicação clonar
|
|
76
|
+
`heroku git:clone -a linear-react-comp-demo`
|
|
77
|
+
|
|
78
|
+
Renomear a pastar `linear-react-comp-demo` para `demo`
|
|
79
|
+
|
|
79
80
|
Fazer login no Heroku
|
|
80
81
|
`heroku login`
|
|
81
|
-
|
|
82
|
-
No diretorio da aplicação clonar
|
|
83
|
-
`heroku git:clone -a linear-react-comp-demo demo`
|
|
84
82
|
|
|
85
83
|
Executar o comando
|
|
86
84
|
`npm run deploy:heroku`
|
|
@@ -731,23 +731,3 @@
|
|
|
731
731
|
left: 100%;
|
|
732
732
|
}
|
|
733
733
|
}
|
|
734
|
-
|
|
735
|
-
@keyframes slideRightToLeftWithFade {
|
|
736
|
-
from {
|
|
737
|
-
opacity: 0;
|
|
738
|
-
transform: translateX(2%);
|
|
739
|
-
} to {
|
|
740
|
-
opacity: 1;
|
|
741
|
-
transform: translateX(0);
|
|
742
|
-
}
|
|
743
|
-
}
|
|
744
|
-
|
|
745
|
-
@keyframes slideLeftToRightWithFade {
|
|
746
|
-
from {
|
|
747
|
-
opacity: 0;
|
|
748
|
-
transform: translateX(-2%);
|
|
749
|
-
} to {
|
|
750
|
-
opacity: 1;
|
|
751
|
-
transform: translateX(0);
|
|
752
|
-
}
|
|
753
|
-
}
|
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
height: 100%;
|
|
7
7
|
margin-bottom: 20px;
|
|
8
8
|
border: solid 1px $component-border-color;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
9
|
&.panel-shadow {
|
|
12
10
|
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
|
|
13
11
|
}
|
|
@@ -49,8 +47,7 @@
|
|
|
49
47
|
}
|
|
50
48
|
}
|
|
51
49
|
> .panel-content {
|
|
52
|
-
|
|
53
|
-
overflow: auto;
|
|
50
|
+
height: auto;
|
|
54
51
|
padding: 15px;
|
|
55
52
|
}
|
|
56
53
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
51
|
+
.select-component > .dropdown {
|
|
52
52
|
animation: 0.5s ease-in 0s 1 slideDown;
|
|
53
53
|
background-color: #FFF;
|
|
54
54
|
border: $component-border-color;
|
|
@@ -58,17 +58,17 @@
|
|
|
58
58
|
height: auto;
|
|
59
59
|
overflow-y: auto;
|
|
60
60
|
overflow-x: hidden;
|
|
61
|
+
position: absolute;
|
|
61
62
|
margin-top: 2px;
|
|
63
|
+
z-index: 99999999999;
|
|
62
64
|
> .filtercontainer {
|
|
63
65
|
display: grid;
|
|
64
66
|
grid-template-columns: 1fr 20px;
|
|
65
|
-
align-items: center;
|
|
66
67
|
border: 1px solid $component-border-color;
|
|
67
68
|
margin: 4px;
|
|
68
69
|
}
|
|
69
70
|
> .filtercontainer > .filterinput {
|
|
70
71
|
border: 0;
|
|
71
|
-
width: 100%;
|
|
72
72
|
font-size: 13px;
|
|
73
73
|
text-indent: 4px;
|
|
74
74
|
padding: 10px 5px;
|
|
@@ -19,19 +19,6 @@
|
|
|
19
19
|
> .bodycontainer {
|
|
20
20
|
overflow-y: auto;
|
|
21
21
|
}
|
|
22
|
-
> .bodycontainer > .innertable > .tbody,
|
|
23
|
-
> .tbody {
|
|
24
|
-
position: relative;
|
|
25
|
-
&.skeleton-transparency::before {
|
|
26
|
-
content: '';
|
|
27
|
-
position: absolute;
|
|
28
|
-
width: 100%;
|
|
29
|
-
height: 100%;
|
|
30
|
-
background: rgb(255,255,255);
|
|
31
|
-
background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
|
|
32
|
-
rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
22
|
> .headercontainer > .innertable > .theader > .trow,
|
|
36
23
|
> .bodycontainer > .innertable > .tbody > .trow,
|
|
37
24
|
> .theader > .trow,
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
margin-right: 1px;
|
|
49
49
|
padding: 0;
|
|
50
50
|
width: auto;
|
|
51
|
+
min-width: 100px;
|
|
51
52
|
display: flex;
|
|
52
53
|
justify-content: space-between;
|
|
53
54
|
align-items: center;
|
|
@@ -121,27 +122,25 @@
|
|
|
121
122
|
.tabs-component.menu-left {
|
|
122
123
|
grid-template-columns: auto 1fr;
|
|
123
124
|
grid-template-rows: none;
|
|
124
|
-
> .
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
width: 100%;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
> .menu > .menuitem > .closepanel {
|
|
142
|
-
float: left;
|
|
125
|
+
> .menu {
|
|
126
|
+
box-shadow: -1px 0px 0px 0px $component-border-color inset;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
justify-content: center;
|
|
129
|
+
}
|
|
130
|
+
> .menu > .menuitem {
|
|
131
|
+
border-radius: 5px 0px 0px 5px;
|
|
132
|
+
-moz-border-radius: 5px 0px 0px 5px;
|
|
133
|
+
-webkit-border-radius: 5px 0px 0px 5px;
|
|
134
|
+
&.selected {
|
|
135
|
+
border: 1px solid $component-border-color;
|
|
136
|
+
border-right: 1px solid $font-color-second;
|
|
137
|
+
border-left: 2px solid $component-selected-color;
|
|
138
|
+
width: 100%;
|
|
143
139
|
}
|
|
144
140
|
}
|
|
141
|
+
> .menu > .menuitem > .closepanel {
|
|
142
|
+
float: left;
|
|
143
|
+
}
|
|
145
144
|
> .panel {
|
|
146
145
|
border-top: 1px solid $component-border-color;
|
|
147
146
|
border-left: 0;
|
|
@@ -153,20 +152,18 @@
|
|
|
153
152
|
*/
|
|
154
153
|
.tabs-component.menu-bottom {
|
|
155
154
|
grid-template-rows: 1fr auto;
|
|
156
|
-
.
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
height: 100%;
|
|
169
|
-
}
|
|
155
|
+
> .menu {
|
|
156
|
+
box-shadow: 0 1px 1px 0px $component-border-color inset;
|
|
157
|
+
}
|
|
158
|
+
> .menu > .menuitem {
|
|
159
|
+
border-radius: 0px 0px 5px 5px;
|
|
160
|
+
-moz-border-radius: 0px 0px 5px 5px;
|
|
161
|
+
-webkit-border-radius: 0px 0px 5px 5px;
|
|
162
|
+
&.selected {
|
|
163
|
+
border: 1px solid $component-border-color;
|
|
164
|
+
border-top: 1px solid $font-color-second;
|
|
165
|
+
border-bottom: 2px solid $component-selected-color;
|
|
166
|
+
height: 100%;
|
|
170
167
|
}
|
|
171
168
|
}
|
|
172
169
|
> .panel {
|
|
@@ -181,22 +178,20 @@
|
|
|
181
178
|
.tabs-component.menu-right {
|
|
182
179
|
grid-template-columns: 1fr auto;
|
|
183
180
|
grid-template-rows: none;
|
|
184
|
-
.
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
width: 100%;
|
|
199
|
-
}
|
|
181
|
+
> .menu {
|
|
182
|
+
box-shadow: 2px 0 0px -1px $component-border-color inset;
|
|
183
|
+
flex-direction: column;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
}
|
|
186
|
+
> .menu > .menuitem {
|
|
187
|
+
border-radius: 0px 5px 5px 0px;
|
|
188
|
+
-moz-border-radius: 0px 5px 5px 0px;
|
|
189
|
+
-webkit-border-radius: 0px 5px 5px 0px;
|
|
190
|
+
&.selected {
|
|
191
|
+
border: 1px solid $component-border-color;
|
|
192
|
+
border-left: 1px solid $font-color-second;
|
|
193
|
+
border-right: 2px solid $component-selected-color;
|
|
194
|
+
width: 100%;
|
|
200
195
|
}
|
|
201
196
|
}
|
|
202
197
|
> .panel {
|
package/lib/dropdown/Popup.js
CHANGED
|
@@ -18,9 +18,8 @@ var getCalendarDropdownStyle = function getCalendarDropdownStyle(_ref) {
|
|
|
18
18
|
leftPosition = _ref.leftPosition,
|
|
19
19
|
rightPosition = _ref.rightPosition,
|
|
20
20
|
align = _ref.align,
|
|
21
|
-
isFloatMenu = _ref.isFloatMenu
|
|
22
|
-
|
|
23
|
-
var style = "top: ".concat(topPosition + (isFloatMenu ? 6 : 2), "px; min-width: ").concat(minWidth, "px;");
|
|
21
|
+
isFloatMenu = _ref.isFloatMenu;
|
|
22
|
+
var style = "top: ".concat(topPosition + (isFloatMenu ? 6 : 2), "px;");
|
|
24
23
|
|
|
25
24
|
if (align === 'left') {
|
|
26
25
|
style += "left: ".concat(leftPosition, "px;");
|
package/lib/form/form.spec.js
CHANGED
|
@@ -189,14 +189,6 @@ describe('Form', function () {
|
|
|
189
189
|
}));
|
|
190
190
|
expect(mockHandlerReset).toHaveBeenCalled();
|
|
191
191
|
});
|
|
192
|
-
it('should apply disabled', function () {
|
|
193
|
-
var mockHandlerReset = jest.fn();
|
|
194
|
-
(0, _react2.render)(mockForm({
|
|
195
|
-
disabled: true,
|
|
196
|
-
handlerReset: mockHandlerReset
|
|
197
|
-
}));
|
|
198
|
-
expect(mockHandlerReset).not.toHaveBeenCalled();
|
|
199
|
-
});
|
|
200
192
|
});
|
|
201
193
|
describe('Field', function () {
|
|
202
194
|
describe('Default & Number', function () {
|
package/lib/form/index.js
CHANGED
|
@@ -91,8 +91,7 @@ var Form = function Form(_ref) {
|
|
|
91
91
|
onValidateForm = _ref.onValidateForm,
|
|
92
92
|
externalFieldErrors = _ref.externalFieldErrors,
|
|
93
93
|
onSubmit = _ref.onSubmit,
|
|
94
|
-
skeletonize = _ref.skeletonize
|
|
95
|
-
disabled = _ref.disabled;
|
|
94
|
+
skeletonize = _ref.skeletonize;
|
|
96
95
|
|
|
97
96
|
var _useState = (0, _react.useState)(dataSource),
|
|
98
97
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -232,29 +231,10 @@ var Form = function Form(_ref) {
|
|
|
232
231
|
};
|
|
233
232
|
};
|
|
234
233
|
|
|
235
|
-
var formProps = function formProps() {
|
|
236
|
-
var propsForm = null;
|
|
237
|
-
|
|
238
|
-
if (!disabled) {
|
|
239
|
-
propsForm = {
|
|
240
|
-
onSubmit: function onSubmit(e) {
|
|
241
|
-
return e.preventDefault();
|
|
242
|
-
},
|
|
243
|
-
onKeyPress: function onKeyPress(e) {
|
|
244
|
-
return submitOnEnter(e);
|
|
245
|
-
}
|
|
246
|
-
};
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
return propsForm;
|
|
250
|
-
};
|
|
251
|
-
|
|
252
234
|
(0, _react.useEffect)(function () {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
if (handlerValidates) handlerValidates(checkIsValid);
|
|
257
|
-
}
|
|
235
|
+
handlerSubmit(onFormSubmit);
|
|
236
|
+
if (handlerReset) handlerReset(onReset);
|
|
237
|
+
if (handlerValidates) handlerValidates(checkIsValid);
|
|
258
238
|
}, [data]);
|
|
259
239
|
(0, _react.useEffect)(function () {
|
|
260
240
|
if (securityBeforeUnload) {
|
|
@@ -267,24 +247,27 @@ var Form = function Form(_ref) {
|
|
|
267
247
|
};
|
|
268
248
|
}, [securityBeforeUnload, onBeforeUnload]);
|
|
269
249
|
(0, _react.useEffect)(function () {
|
|
270
|
-
if (
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
setSubmitFormOnEnter(submitOnPressEnterKey);
|
|
277
|
-
}
|
|
250
|
+
if (submitOnPressEnterKey !== submitFormOnEnter || dataSource !== originalData) {
|
|
251
|
+
setData(dataSource);
|
|
252
|
+
setOriginalData(function (prevState) {
|
|
253
|
+
return prevState || dataSource;
|
|
254
|
+
});
|
|
255
|
+
setSubmitFormOnEnter(submitOnPressEnterKey);
|
|
278
256
|
}
|
|
279
257
|
}, [submitOnPressEnterKey, dataSource]);
|
|
280
258
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_helpers.FormContext.Provider, {
|
|
281
259
|
value: getContextValue()
|
|
282
|
-
}, /*#__PURE__*/_react["default"].createElement("form",
|
|
283
|
-
style: style
|
|
284
|
-
|
|
260
|
+
}, /*#__PURE__*/_react["default"].createElement("form", {
|
|
261
|
+
style: style,
|
|
262
|
+
onSubmit: function onSubmit(e) {
|
|
263
|
+
return e.preventDefault();
|
|
264
|
+
},
|
|
265
|
+
onKeyPress: function onKeyPress(e) {
|
|
266
|
+
return submitOnEnter(e);
|
|
267
|
+
},
|
|
285
268
|
role: "presentation",
|
|
286
269
|
className: "form-component ".concat(customClass)
|
|
287
|
-
}
|
|
270
|
+
}, children)), /*#__PURE__*/_react["default"].createElement(_dialog.DialogQuestion, {
|
|
288
271
|
zIndex: "99999999",
|
|
289
272
|
title: securityTitle || 'Dados Alterados',
|
|
290
273
|
text: securityText || 'Você possui dados alterados, confirma o fechamento?',
|
|
@@ -310,8 +293,7 @@ Form.propTypes = {
|
|
|
310
293
|
securityTitle: _propTypes["default"].string,
|
|
311
294
|
securityText: _propTypes["default"].string,
|
|
312
295
|
externalFieldErrors: _propTypes["default"].object,
|
|
313
|
-
skeletonize: _propTypes["default"].bool
|
|
314
|
-
disabled: _propTypes["default"].bool
|
|
296
|
+
skeletonize: _propTypes["default"].bool
|
|
315
297
|
};
|
|
316
298
|
Form.defaultProps = {
|
|
317
299
|
onValidateForm: undefined,
|
|
@@ -325,8 +307,7 @@ Form.defaultProps = {
|
|
|
325
307
|
securityTitle: null,
|
|
326
308
|
securityText: null,
|
|
327
309
|
externalFieldErrors: {},
|
|
328
|
-
skeletonize: false
|
|
329
|
-
disabled: false
|
|
310
|
+
skeletonize: false
|
|
330
311
|
};
|
|
331
312
|
var _default = Form;
|
|
332
313
|
exports["default"] = _default;
|
package/lib/icons/helper.js
CHANGED
|
@@ -554,10 +554,6 @@ function getIcons() {
|
|
|
554
554
|
flipVertical4: {
|
|
555
555
|
viewbox: '0 0 16 16',
|
|
556
556
|
paths: ['M0.854 5.146c-0.143-0.143-0.358-0.186-0.545-0.108s-0.309 0.26-0.309 0.462v10c0 0.202 0.122 0.385 0.309 0.462 0.062 0.026 0.127 0.038 0.191 0.038 0.13 0 0.258-0.051 0.354-0.146l5-5c0.195-0.195 0.195-0.512 0-0.707l-5-5z', 'M7.5 7c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 10c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 13c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 16c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M14.691 5.038c-0.062-0.026-0.127-0.038-0.191-0.038-0.13 0-0.258 0.051-0.354 0.146l-5 5c-0.195 0.195-0.195 0.512 0 0.707l5 5c0.143 0.143 0.358 0.186 0.545 0.108s0.309-0.26 0.309-0.462v-10c0-0.202-0.122-0.385-0.309-0.462zM13.875 13.991l-3.491-3.491 3.491-3.491v6.982z', 'M11.5 3c-0.943-1.257-2.419-2-4-2-1.672 0-3.226 0.831-4.158 2.222-0.154 0.229-0.092 0.54 0.137 0.694s0.54 0.092 0.694-0.137c0.745-1.113 1.989-1.778 3.327-1.778 1.313 0 2.534 0.64 3.284 1.716l-1.284 1.284h3.5v-3.5l-1.5 1.5z']
|
|
557
|
-
},
|
|
558
|
-
tools: {
|
|
559
|
-
viewbox: '0 0 20 16',
|
|
560
|
-
paths: ['M7.696 11.009l2.295 2.295-1.823 2.341c-0.334 0.437-0.926 0.476-1.315 0.087l-1.586-1.586c-0.389-0.389-0.35-0.98 0.087-1.315l2.341-1.823zM19.899 4.101l-2.399 2.399-3-3 2.399-2.399c-0.289-0.066-0.59-0.101-0.899-0.101-2.209 0-4 1.791-4 4 0 0.797 0.233 1.539 0.635 2.163l-2.233 1.739-3.402-3.402 4.5-4.5h-5l-2.22 2.22-0.22-0.22h-1.061v1.061l0.22 0.22-3.22 3.22 2.5 2.5 3-3 9 9 1.5-1.5-3.902-3.902 1.739-2.233c0.624 0.402 1.366 0.635 2.163 0.635 2.209 0 4-1.791 4-4 0-0.309-0.035-0.61-0.101-0.899z']
|
|
561
557
|
}
|
|
562
558
|
};
|
|
563
559
|
return icons;
|
|
@@ -79,12 +79,7 @@ var InputTextBase = function InputTextBase(props) {
|
|
|
79
79
|
onDeniedActions = props.onDeniedActions,
|
|
80
80
|
handlerSetOnDenied = props.handlerSetOnDenied,
|
|
81
81
|
targetRef = props.targetRef,
|
|
82
|
-
skeletonize = props.skeletonize
|
|
83
|
-
style = props.style,
|
|
84
|
-
styleForInputContent = props.styleForInputContent,
|
|
85
|
-
styleForWrapper = props.styleForWrapper,
|
|
86
|
-
styleForLabel = props.styleForLabel,
|
|
87
|
-
styleForSideButtons = props.styleForSideButtons;
|
|
82
|
+
skeletonize = props.skeletonize;
|
|
88
83
|
var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
|
|
89
84
|
|
|
90
85
|
var _useState = (0, _react.useState)(onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(permissionAttr, options)),
|
|
@@ -158,28 +153,23 @@ var InputTextBase = function InputTextBase(props) {
|
|
|
158
153
|
|
|
159
154
|
if (!visible || unvisible) return null;
|
|
160
155
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
161
|
-
style: style,
|
|
162
156
|
className: "input-base-component ".concat(skeletonize ? '-skeletonized' : '', " ").concat(customClass),
|
|
163
157
|
ref: inputBaseRef
|
|
164
158
|
}, label && /*#__PURE__*/_react["default"].createElement("div", {
|
|
165
159
|
className: "labelcontainer"
|
|
166
160
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
167
|
-
style: styleForLabel,
|
|
168
161
|
className: "label ".concat(customClassForLabel, " ").concat(labelUppercase && ' -uppercase')
|
|
169
162
|
}, label, required && /*#__PURE__*/_react["default"].createElement("span", {
|
|
170
163
|
className: "-requiredlabel"
|
|
171
164
|
}, "*"))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
172
165
|
"data-testid": "testInputWrapper",
|
|
173
|
-
style: styleForWrapper,
|
|
174
166
|
className: helpers.getInputWrapperClass(_extends({}, props, {
|
|
175
167
|
disabled: shouldDisable() || hideContent
|
|
176
168
|
}))
|
|
177
169
|
}, leftElements && /*#__PURE__*/_react["default"].createElement("div", {
|
|
178
|
-
style: styleForSideButtons,
|
|
179
170
|
className: "sidebuttons ".concat(customClassForSideButtons)
|
|
180
171
|
}, leftElements), /*#__PURE__*/_react["default"].createElement("div", {
|
|
181
172
|
"data-testid": "testInputContent",
|
|
182
|
-
style: styleForInputContent,
|
|
183
173
|
className: "inputcontent ".concat(customClassForInputContent)
|
|
184
174
|
}, type === 'textarea' ? /*#__PURE__*/_react["default"].createElement("textarea", _extends({
|
|
185
175
|
rows: props.rows,
|
|
@@ -233,12 +223,7 @@ InputTextBase.propTypes = {
|
|
|
233
223
|
handlerSetOnDenied: _propTypes["default"].func,
|
|
234
224
|
targetRef: _propTypes["default"].func,
|
|
235
225
|
gridLayout: _propTypes["default"].string,
|
|
236
|
-
skeletonize: _propTypes["default"].bool
|
|
237
|
-
style: _propTypes["default"].object,
|
|
238
|
-
styleForInputContent: _propTypes["default"].object,
|
|
239
|
-
styleForWrapper: _propTypes["default"].object,
|
|
240
|
-
styleForLabel: _propTypes["default"].object,
|
|
241
|
-
styleForSideButtons: _propTypes["default"].object
|
|
226
|
+
skeletonize: _propTypes["default"].bool
|
|
242
227
|
};
|
|
243
228
|
InputTextBase.defaultProps = {
|
|
244
229
|
value: undefined,
|
|
@@ -281,12 +266,7 @@ InputTextBase.defaultProps = {
|
|
|
281
266
|
handlerSetOnDenied: undefined,
|
|
282
267
|
targetRef: undefined,
|
|
283
268
|
gridLayout: undefined,
|
|
284
|
-
skeletonize: false
|
|
285
|
-
style: {},
|
|
286
|
-
styleForInputContent: {},
|
|
287
|
-
styleForWrapper: {},
|
|
288
|
-
styleForLabel: {},
|
|
289
|
-
styleForSideButtons: {}
|
|
269
|
+
skeletonize: false
|
|
290
270
|
};
|
|
291
271
|
|
|
292
272
|
var _default = (0, _inputHOC["default"])((0, _withTooltip["default"])(InputTextBase));
|
package/lib/inputs/mask/Phone.js
CHANGED
|
@@ -7,8 +7,6 @@ exports["default"] = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
10
|
var _BaseMask = _interopRequireDefault(require("./BaseMask"));
|
|
13
11
|
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -16,17 +14,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
16
14
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
15
|
|
|
18
16
|
var PhoneField = function PhoneField(props) {
|
|
19
|
-
var cellNumber = props.cellNumber;
|
|
20
17
|
return /*#__PURE__*/_react["default"].createElement(_BaseMask["default"], _extends({}, props, {
|
|
21
|
-
mask:
|
|
18
|
+
mask: "(00) 0000-0000"
|
|
22
19
|
}));
|
|
23
20
|
};
|
|
24
21
|
|
|
25
|
-
PhoneField.propTypes = {
|
|
26
|
-
cellNumber: _propTypes["default"].bool
|
|
27
|
-
};
|
|
28
|
-
PhoneField.defaultProps = {
|
|
29
|
-
cellNumber: false
|
|
30
|
-
};
|
|
31
22
|
var _default = PhoneField;
|
|
32
23
|
exports["default"] = _default;
|
|
@@ -562,35 +562,18 @@ describe('Input Masked', function () {
|
|
|
562
562
|
|
|
563
563
|
expect(input).toHaveValue('(11) 1111-1111');
|
|
564
564
|
});
|
|
565
|
-
it('should apply cellNumber', function () {
|
|
566
|
-
var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.PhoneField, {
|
|
567
|
-
cellNumber: true
|
|
568
|
-
})),
|
|
569
|
-
container = _render38.container;
|
|
570
|
-
|
|
571
|
-
var input = container.querySelector('.input-base-component .inputwrapper .inputcontent input.textinput');
|
|
572
|
-
expect(input).toHaveValue('(__) _____-____');
|
|
573
|
-
|
|
574
|
-
_react2.fireEvent.change(input, {
|
|
575
|
-
target: {
|
|
576
|
-
value: '11111111111'
|
|
577
|
-
}
|
|
578
|
-
});
|
|
579
|
-
|
|
580
|
-
expect(input).toHaveValue('(11) 11111-1111');
|
|
581
|
-
});
|
|
582
565
|
});
|
|
583
566
|
describe('Zip Code', function () {
|
|
584
567
|
it('should render correctly', function () {
|
|
585
|
-
var
|
|
586
|
-
container =
|
|
568
|
+
var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ZipCodeField, null)),
|
|
569
|
+
container = _render38.container;
|
|
587
570
|
|
|
588
571
|
expect(container.firstChild).toBeTruthy();
|
|
589
572
|
expect(container.firstChild).toHaveClass('input-base-component');
|
|
590
573
|
});
|
|
591
574
|
it('should apply zipcode mask', function () {
|
|
592
|
-
var
|
|
593
|
-
container =
|
|
575
|
+
var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ZipCodeField, null)),
|
|
576
|
+
container = _render39.container;
|
|
594
577
|
|
|
595
578
|
var input = container.querySelector('.input-base-component .inputwrapper .inputcontent input.textinput');
|
|
596
579
|
expect(input).toHaveValue('_____-___');
|