linear-react-components-ui 1.1.22-beta.5 → 1.1.22-beta.6
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/lib/assets/styles/file.scss +10 -7
- package/lib/assets/styles/select.scss +15 -19
- package/lib/assets/styles/tabs.scss +3 -16
- package/lib/assets/styles/wizard.scss +2 -2
- package/lib/calendar/base/index.js +1 -1
- package/lib/dialog/base/index.js +1 -1
- package/lib/dialog/form/index.js +2 -3
- package/lib/dialog/types.d.ts +0 -1
- package/lib/drawer/Drawer.d.ts +1 -1
- package/lib/drawer/Drawer.js +2 -6
- package/lib/drawer/types.d.ts +0 -1
- package/lib/form/Field.js +8 -31
- package/lib/form/FieldArray.js +2 -11
- package/lib/form/FieldNumber.js +1 -10
- package/lib/form/FieldPeriod.js +1 -15
- package/lib/form/index.d.ts +1 -1
- package/lib/form/index.js +5 -30
- package/lib/form/types.d.ts +1 -13
- package/lib/form/withFieldHOC.js +2 -4
- package/lib/inputs/date/helpers.d.ts +1 -31
- package/lib/inputs/date/helpers.js +2 -32
- package/lib/inputs/date/index.js +20 -28
- package/lib/inputs/date/types.d.ts +0 -1
- package/lib/inputs/mask/BaseMask.d.ts +1 -1
- package/lib/inputs/mask/BaseMask.js +4 -6
- package/lib/inputs/mask/helpers.d.ts +53 -6
- package/lib/inputs/mask/helpers.js +35 -15
- package/lib/inputs/mask/types.d.ts +0 -1
- package/lib/inputs/multiSelect/index.js +0 -1
- package/lib/inputs/select/multiple/Selecteds.d.ts +1 -1
- package/lib/inputs/select/multiple/Selecteds.js +1 -3
- package/lib/inputs/select/multiple/index.js +2 -3
- package/lib/inputs/select/types.d.ts +0 -1
- package/lib/panel/Content.js +7 -10
- package/lib/radio/index.d.ts +1 -4
- package/lib/radio/index.js +0 -1
- package/lib/tabs/Menu.d.ts +1 -1
- package/lib/tabs/Menu.js +2 -4
- package/lib/tabs/MenuTabs.js +5 -16
- package/lib/tabs/context.d.ts +1 -1
- package/lib/tabs/context.js +1 -3
- package/lib/tabs/index.d.ts +1 -1
- package/lib/tabs/index.js +6 -13
- package/lib/tabs/types.d.ts +0 -6
- package/package.json +1 -1
|
@@ -159,14 +159,8 @@
|
|
|
159
159
|
margin-top: 3px;
|
|
160
160
|
}
|
|
161
161
|
> .-skeletonized {
|
|
162
|
-
@extend %skeleton-component;
|
|
163
162
|
height: 180px !important;
|
|
164
|
-
|
|
165
|
-
text-shadow: none;
|
|
166
|
-
box-shadow: none;
|
|
167
|
-
border-color: transparent !important;
|
|
168
|
-
transition: none;
|
|
169
|
-
}
|
|
163
|
+
}
|
|
170
164
|
}
|
|
171
165
|
|
|
172
166
|
.input-simple-file-container {
|
|
@@ -219,3 +213,12 @@
|
|
|
219
213
|
}
|
|
220
214
|
}
|
|
221
215
|
}
|
|
216
|
+
|
|
217
|
+
.-skeletonized {
|
|
218
|
+
@extend %skeleton-component;
|
|
219
|
+
color: transparent !important;
|
|
220
|
+
text-shadow: none;
|
|
221
|
+
box-shadow: none;
|
|
222
|
+
border-color: transparent !important;
|
|
223
|
+
transition: none;
|
|
224
|
+
}
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.selectwrapper
|
|
26
|
+
.selectwrapper>.multiselect {
|
|
27
27
|
flex-wrap: wrap;
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
>.textinput {
|
|
30
30
|
order: 1;
|
|
31
31
|
display: inline-block;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
>.selecteditem {
|
|
35
35
|
background-color: #f2f9fc;
|
|
36
36
|
border: 1px solid #c9e6f2;
|
|
37
37
|
border-radius: 3px;
|
|
@@ -44,18 +44,14 @@
|
|
|
44
44
|
float: left;
|
|
45
45
|
margin: 2px;
|
|
46
46
|
padding: 0px 8px 0px 5px;
|
|
47
|
-
|
|
48
|
-
@extend %component-disabled;
|
|
49
|
-
opacity: 0.7;
|
|
50
|
-
border: solid 1px $font-color-disabled;
|
|
51
|
-
}
|
|
47
|
+
|
|
52
48
|
.close {
|
|
53
49
|
all: unset;
|
|
54
50
|
}
|
|
55
51
|
}
|
|
56
52
|
}
|
|
57
53
|
|
|
58
|
-
.selectwrapper
|
|
54
|
+
.selectwrapper>.multiselect>.selecteditem>.close {
|
|
59
55
|
cursor: pointer;
|
|
60
56
|
|
|
61
57
|
&:after {
|
|
@@ -67,9 +63,9 @@
|
|
|
67
63
|
}
|
|
68
64
|
}
|
|
69
65
|
|
|
70
|
-
.dropdown-component
|
|
66
|
+
.dropdown-component>.select-dropdown {
|
|
71
67
|
animation: 0.5s ease-in 0s 1 slideDown;
|
|
72
|
-
background-color: #
|
|
68
|
+
background-color: #FFF;
|
|
73
69
|
border: $component-border-color;
|
|
74
70
|
@extend %component-menu-dropdown;
|
|
75
71
|
display: grid;
|
|
@@ -79,7 +75,7 @@
|
|
|
79
75
|
overflow-x: hidden;
|
|
80
76
|
margin-top: 2px;
|
|
81
77
|
|
|
82
|
-
|
|
78
|
+
>.filtercontainer {
|
|
83
79
|
display: grid;
|
|
84
80
|
grid-template-columns: 1fr 20px;
|
|
85
81
|
align-items: center;
|
|
@@ -87,7 +83,7 @@
|
|
|
87
83
|
margin: 4px;
|
|
88
84
|
}
|
|
89
85
|
|
|
90
|
-
|
|
86
|
+
>.filtercontainer>.filterinput {
|
|
91
87
|
border: 0;
|
|
92
88
|
width: 100%;
|
|
93
89
|
font-size: 13px;
|
|
@@ -95,7 +91,7 @@
|
|
|
95
91
|
padding: 10px 5px;
|
|
96
92
|
}
|
|
97
93
|
|
|
98
|
-
|
|
94
|
+
>.item {
|
|
99
95
|
margin: 0;
|
|
100
96
|
padding: 6px 10px;
|
|
101
97
|
display: flex;
|
|
@@ -136,21 +132,21 @@
|
|
|
136
132
|
display: flex;
|
|
137
133
|
justify-content: space-between;
|
|
138
134
|
align-items: center;
|
|
139
|
-
width: 100
|
|
135
|
+
width: 100%
|
|
140
136
|
}
|
|
141
137
|
|
|
142
138
|
.menubutton {
|
|
143
|
-
|
|
139
|
+
>.label {
|
|
144
140
|
flex-grow: 1;
|
|
145
141
|
}
|
|
146
142
|
|
|
147
|
-
|
|
148
|
-
margin-right: 5px
|
|
143
|
+
>.menuicon {
|
|
144
|
+
margin-right: 5px
|
|
149
145
|
}
|
|
150
146
|
}
|
|
151
147
|
}
|
|
152
148
|
|
|
153
|
-
|
|
149
|
+
>.notfound {
|
|
154
150
|
text-indent: 10px;
|
|
155
151
|
color: graytext;
|
|
156
152
|
font-style: italic;
|
|
@@ -49,15 +49,12 @@ $dropdown-width: 38px;
|
|
|
49
49
|
text-shadow: 0 1px $font-color-second;
|
|
50
50
|
cursor: pointer;
|
|
51
51
|
line-height: 20px;
|
|
52
|
-
margin-right:
|
|
52
|
+
margin-right: 1px;
|
|
53
53
|
padding: 0;
|
|
54
54
|
width: auto;
|
|
55
|
-
min-width:
|
|
55
|
+
min-width: 100px;
|
|
56
56
|
display: flex;
|
|
57
57
|
align-items: center;
|
|
58
|
-
border: 1px solid $font-color-second;
|
|
59
|
-
border-top: 2px solid $font-color-second;
|
|
60
|
-
border-bottom: 1px solid $component-border-color;
|
|
61
58
|
&.selected {
|
|
62
59
|
border: 1px solid $component-border-color;
|
|
63
60
|
background: $font-color-second;
|
|
@@ -66,15 +63,6 @@ $dropdown-width: 38px;
|
|
|
66
63
|
box-shadow: 0;
|
|
67
64
|
font-weight: bold;
|
|
68
65
|
}
|
|
69
|
-
&.witherrorcontent {
|
|
70
|
-
border: 1px solid $input-error-border-color;
|
|
71
|
-
border-top: 2px solid $input-error-border-color;
|
|
72
|
-
border-bottom: 1px solid transparent;
|
|
73
|
-
background-color: $input-error-bg-color;
|
|
74
|
-
&.selected {
|
|
75
|
-
border-top: 2px solid $component-selected-color;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
66
|
&.selected>.closepanel,
|
|
79
67
|
&:hover>.closepanel {
|
|
80
68
|
visibility: visible;
|
|
@@ -87,8 +75,7 @@ $dropdown-width: 38px;
|
|
|
87
75
|
background: transparent;
|
|
88
76
|
border: 0;
|
|
89
77
|
width: 100%;
|
|
90
|
-
text-align: left
|
|
91
|
-
box-shadow: none !important;
|
|
78
|
+
text-align: left
|
|
92
79
|
}
|
|
93
80
|
|
|
94
81
|
.menu>.menuitem>.closepanel {
|
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
> .step-title {
|
|
65
|
+
max-width: 150px;
|
|
65
66
|
overflow: hidden;
|
|
66
67
|
font-weight: 500;
|
|
67
68
|
color: $font-color-soft;
|
|
@@ -108,8 +109,7 @@
|
|
|
108
109
|
right: 45px;
|
|
109
110
|
}
|
|
110
111
|
}
|
|
111
|
-
&::after,
|
|
112
|
-
&::before {
|
|
112
|
+
&::after, &::before {
|
|
113
113
|
content: "";
|
|
114
114
|
position: absolute;
|
|
115
115
|
height: 2px;
|
|
@@ -79,7 +79,7 @@ const Calendar = props => {
|
|
|
79
79
|
}, []);
|
|
80
80
|
(0, _react.useEffect)(() => {
|
|
81
81
|
const daysOfMonth = currentMonth.current?.getElementsByClassName('-selectedday')[0];
|
|
82
|
-
currentDateButton?.(daysOfMonth
|
|
82
|
+
currentDateButton?.(daysOfMonth?.firstChild);
|
|
83
83
|
}, [currentDate]);
|
|
84
84
|
const component = /*#__PURE__*/_react.default.createElement("div", {
|
|
85
85
|
ref: currentCalendarRef,
|
package/lib/dialog/base/index.js
CHANGED
|
@@ -68,7 +68,7 @@ const BaseDialog = props => {
|
|
|
68
68
|
(0, _react.useEffect)(() => {
|
|
69
69
|
if (open && modalContainerRef.current) {
|
|
70
70
|
focusableElementsRef.current = Array.from(modalContainerRef.current.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])"));
|
|
71
|
-
focusableElementsRef.current[
|
|
71
|
+
focusableElementsRef.current[1]?.focus();
|
|
72
72
|
}
|
|
73
73
|
}, [open]);
|
|
74
74
|
const onDialogPositionChange = _ref => {
|
package/lib/dialog/form/index.js
CHANGED
|
@@ -32,8 +32,7 @@ const ModalForm = props => {
|
|
|
32
32
|
children,
|
|
33
33
|
className = '',
|
|
34
34
|
wrapperClassName = '',
|
|
35
|
-
contentClassName = ''
|
|
36
|
-
headerClassName = ''
|
|
35
|
+
contentClassName = ''
|
|
37
36
|
} = props;
|
|
38
37
|
const headerRef = (0, _react.useRef)(null);
|
|
39
38
|
const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
|
|
@@ -63,7 +62,7 @@ const ModalForm = props => {
|
|
|
63
62
|
className: className,
|
|
64
63
|
wrapperClassName: `dialog-form-wrapper ${wrapperClassName}`
|
|
65
64
|
}), props.title && /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
-
className:
|
|
65
|
+
className: "header-form"
|
|
67
66
|
}, /*#__PURE__*/_react.default.createElement(_Header.default, {
|
|
68
67
|
title: props.title,
|
|
69
68
|
handlerClose: props.handlerClose,
|
package/lib/dialog/types.d.ts
CHANGED
package/lib/drawer/Drawer.d.ts
CHANGED
|
@@ -5,6 +5,6 @@ import '../@types/Position.js';
|
|
|
5
5
|
import '../@types/Icon.js';
|
|
6
6
|
import '../icons/helper.js';
|
|
7
7
|
|
|
8
|
-
declare const BaseDrawer: ({ position, customClass, children, style, customClassForContent, targetId, closeOnEsc, overlay, permissionAttr, skeletonize, handlerClose, customClassForDrawer, content, title, isWaiting,
|
|
8
|
+
declare const BaseDrawer: ({ position, customClass, children, style, customClassForContent, targetId, closeOnEsc, overlay, permissionAttr, skeletonize, handlerClose, customClassForDrawer, content, title, isWaiting, ...rest }: IDrawerProps) => React__default.ReactPortal;
|
|
9
9
|
|
|
10
10
|
export { BaseDrawer as default };
|
package/lib/drawer/Drawer.js
CHANGED
|
@@ -10,7 +10,7 @@ var _helpers = _interopRequireDefault(require("./helpers"));
|
|
|
10
10
|
var _permissionValidations = require("../permissionValidations");
|
|
11
11
|
var _ = require(".");
|
|
12
12
|
var _spinner = _interopRequireDefault(require("../spinner"));
|
|
13
|
-
const _excluded = ["position", "customClass", "children", "style", "customClassForContent", "targetId", "closeOnEsc", "overlay", "permissionAttr", "skeletonize", "handlerClose", "customClassForDrawer", "content", "title", "isWaiting"
|
|
13
|
+
const _excluded = ["position", "customClass", "children", "style", "customClassForContent", "targetId", "closeOnEsc", "overlay", "permissionAttr", "skeletonize", "handlerClose", "customClassForDrawer", "content", "title", "isWaiting"];
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -38,8 +38,7 @@ const BaseDrawer = _ref => {
|
|
|
38
38
|
customClassForDrawer = '',
|
|
39
39
|
content,
|
|
40
40
|
title,
|
|
41
|
-
isWaiting = false
|
|
42
|
-
customClassElementDrawer = ''
|
|
41
|
+
isWaiting = false
|
|
43
42
|
} = _ref,
|
|
44
43
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
45
44
|
const headerProps = _objectSpread(_objectSpread({}, rest), {}, {
|
|
@@ -47,9 +46,6 @@ const BaseDrawer = _ref => {
|
|
|
47
46
|
});
|
|
48
47
|
const drawerContainerEl = (0, _react.useRef)(document.createElement('div'));
|
|
49
48
|
drawerContainerEl.current.className = 'drawercontainer';
|
|
50
|
-
if (customClassElementDrawer) {
|
|
51
|
-
drawerContainerEl.current.className = customClassElementDrawer;
|
|
52
|
-
}
|
|
53
49
|
const drawerComponentEl = (0, _react.useRef)();
|
|
54
50
|
const {
|
|
55
51
|
hideContent
|
package/lib/drawer/types.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ interface IDrawerProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
|
10
10
|
customClass?: string;
|
|
11
11
|
customClassForContent?: string;
|
|
12
12
|
customClassForDrawer?: string;
|
|
13
|
-
customClassElementDrawer?: string;
|
|
14
13
|
position?: Exclude<Position, 'center'>;
|
|
15
14
|
handlerClose?: () => void;
|
|
16
15
|
closeOnEsc?: boolean;
|
package/lib/form/Field.js
CHANGED
|
@@ -8,19 +8,18 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _lodash = _interopRequireDefault(require("lodash"));
|
|
9
9
|
var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
|
|
10
10
|
var _helpers = require("./helpers");
|
|
11
|
-
|
|
12
|
-
const _excluded = ["handlerFieldChange", "handlerFieldValidate", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData", "handleValidationErrorsOnTab"];
|
|
11
|
+
const _excluded = ["handlerFieldChange", "handlerFieldValidate", "onChange", "onBlur", "name", "validators", "data", "fieldErrors", "handlerStoreValidators", "handlerRemoveValidators", "component", "externalFieldErrors", "originalData"];
|
|
13
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
14
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
15
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
17
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
18
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
19
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
17
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
18
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
22
19
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
23
20
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
21
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
22
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
24
23
|
const getEvents = _ref => {
|
|
25
24
|
let {
|
|
26
25
|
validators = [],
|
|
@@ -29,13 +28,10 @@ const getEvents = _ref => {
|
|
|
29
28
|
handlerFieldValidate,
|
|
30
29
|
validatorFromComponent,
|
|
31
30
|
handlerFieldChange,
|
|
32
|
-
onChange
|
|
33
|
-
component,
|
|
34
|
-
onKeyDown
|
|
31
|
+
onChange
|
|
35
32
|
} = _ref;
|
|
36
33
|
if (!(validators || validatorFromComponent || onBlur || onChange)) return {};
|
|
37
34
|
const validatorsArray = (0, _helpers.getValidatorsArray)(validators, validatorFromComponent);
|
|
38
|
-
const maskComponents = ['PhoneField', 'CpfField', 'CnpjField', 'ZipCodeField', 'BaseMask'];
|
|
39
35
|
return {
|
|
40
36
|
onBlur: e => {
|
|
41
37
|
if (validatorsArray && e.target && handlerFieldValidate) {
|
|
@@ -43,14 +39,8 @@ const getEvents = _ref => {
|
|
|
43
39
|
}
|
|
44
40
|
if (onBlur) onBlur(e);
|
|
45
41
|
},
|
|
46
|
-
onKeyDown: e => {
|
|
47
|
-
if (component && maskComponents.includes(component.name) && [constants.keyCodes.ENTER].includes(e.keyCode) && validatorsArray && e.target && handlerFieldValidate) {
|
|
48
|
-
handlerFieldValidate(name, e.target.value, validatorsArray);
|
|
49
|
-
if (onKeyDown) onKeyDown(e);
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
42
|
onChange: e => {
|
|
53
|
-
if (
|
|
43
|
+
if (validatorsArray && e.target && handlerFieldValidate) {
|
|
54
44
|
handlerFieldValidate(name, e.target.value, validatorsArray);
|
|
55
45
|
}
|
|
56
46
|
if (handlerFieldChange) handlerFieldChange(e);
|
|
@@ -68,11 +58,8 @@ const getCustomProps = (props, handlerSetComponentValidator) => {
|
|
|
68
58
|
component
|
|
69
59
|
} = props;
|
|
70
60
|
if (componentType && componentType.toLowerCase() === 'radio') {
|
|
71
|
-
const convertedData = _objectSpread(_objectSpread({}, data), {}, {
|
|
72
|
-
[name]: String(data?.[name])
|
|
73
|
-
});
|
|
74
61
|
return {
|
|
75
|
-
checked: _lodash.default.get(
|
|
62
|
+
checked: _lodash.default.get(data, name) === value,
|
|
76
63
|
id: fieldId
|
|
77
64
|
};
|
|
78
65
|
} else if (componentType && componentType.toLowerCase() === 'checkbox') {
|
|
@@ -104,22 +91,13 @@ const Field = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
104
91
|
handlerRemoveValidators,
|
|
105
92
|
component: Component,
|
|
106
93
|
externalFieldErrors,
|
|
107
|
-
originalData
|
|
108
|
-
handleValidationErrorsOnTab
|
|
94
|
+
originalData
|
|
109
95
|
} = props,
|
|
110
96
|
rest = _objectWithoutProperties(props, _excluded);
|
|
111
97
|
const {
|
|
112
98
|
handlerSetValidatorFromComponent,
|
|
113
99
|
validatorFromComponent
|
|
114
100
|
} = (0, _react.useContext)(_helpers.withFieldContext);
|
|
115
|
-
const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
|
|
116
|
-
fieldErrors: props.fieldErrors
|
|
117
|
-
}));
|
|
118
|
-
if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
|
|
119
|
-
name: name,
|
|
120
|
-
tabId: props.tabId,
|
|
121
|
-
hasErrors: !!hasErrorsMessagesOnField.length
|
|
122
|
-
});
|
|
123
101
|
return /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, getEvents({
|
|
124
102
|
name,
|
|
125
103
|
validators,
|
|
@@ -127,8 +105,7 @@ const Field = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
127
105
|
validatorFromComponent,
|
|
128
106
|
handlerFieldValidate,
|
|
129
107
|
handlerFieldChange,
|
|
130
|
-
onChange
|
|
131
|
-
component: Component
|
|
108
|
+
onChange
|
|
132
109
|
}), getCustomProps(props, handlerSetValidatorFromComponent), {
|
|
133
110
|
ref: ref,
|
|
134
111
|
name: name,
|
package/lib/form/FieldArray.js
CHANGED
|
@@ -10,7 +10,7 @@ var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
|
|
|
10
10
|
var _gridlayout = _interopRequireDefault(require("../gridlayout"));
|
|
11
11
|
var _fieldset = _interopRequireDefault(require("../fieldset"));
|
|
12
12
|
var _helpers = require("./helpers");
|
|
13
|
-
const _excluded = ["cols", "label", "bordered", "labelContainerStyle", "skipLabel", "data", "name", "handlerStoreValidators", "component", "handlerFieldChange", "handlerFieldValidate", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData", "handlerSelecionados"
|
|
13
|
+
const _excluded = ["cols", "label", "bordered", "labelContainerStyle", "skipLabel", "data", "name", "handlerStoreValidators", "component", "handlerFieldChange", "handlerFieldValidate", "changePropName", "fieldErrors", "externalMessagesErrors", "handlerRemoveValidators", "validators", "valuePropName", "originalData", "handlerSelecionados"];
|
|
14
14
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -69,19 +69,10 @@ const FieldArray = props => {
|
|
|
69
69
|
validators,
|
|
70
70
|
valuePropName,
|
|
71
71
|
originalData,
|
|
72
|
-
handlerSelecionados
|
|
73
|
-
handleValidationErrorsOnTab
|
|
72
|
+
handlerSelecionados
|
|
74
73
|
} = props,
|
|
75
74
|
rest = _objectWithoutProperties(props, _excluded);
|
|
76
75
|
let content = null;
|
|
77
|
-
const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
|
|
78
|
-
fieldErrors: props.fieldErrors
|
|
79
|
-
}));
|
|
80
|
-
if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
|
|
81
|
-
name: name,
|
|
82
|
-
tabId: props.tabId,
|
|
83
|
-
hasErrors: !!hasErrorsMessagesOnField.length
|
|
84
|
-
});
|
|
85
76
|
if (Component) {
|
|
86
77
|
if (!skipLabel && label) {
|
|
87
78
|
content = /*#__PURE__*/_react.default.createElement(_fieldset.default, {
|
package/lib/form/FieldNumber.js
CHANGED
|
@@ -55,18 +55,9 @@ const getEventProps = _ref => {
|
|
|
55
55
|
const FieldMask = props => {
|
|
56
56
|
const {
|
|
57
57
|
data,
|
|
58
|
-
name
|
|
59
|
-
handleValidationErrorsOnTab
|
|
58
|
+
name
|
|
60
59
|
} = props;
|
|
61
60
|
const currentValue = _lodash.default.get(data, name);
|
|
62
|
-
const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
|
|
63
|
-
fieldErrors: props.fieldErrors
|
|
64
|
-
}));
|
|
65
|
-
if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
|
|
66
|
-
name: name,
|
|
67
|
-
tabId: props.tabId,
|
|
68
|
-
hasErrors: !!hasErrorsMessagesOnField.length
|
|
69
|
-
});
|
|
70
61
|
return /*#__PURE__*/_react.default.createElement(props.component, _extends({}, props, getEventProps(_objectSpread({}, props)), {
|
|
71
62
|
errorMessages: (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
|
|
72
63
|
fieldErrors: props.fieldErrors
|
package/lib/form/FieldPeriod.js
CHANGED
|
@@ -12,11 +12,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
15
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
18
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
19
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
20
15
|
const FieldPeriod = props => {
|
|
21
16
|
const {
|
|
22
17
|
data,
|
|
@@ -31,8 +26,7 @@ const FieldPeriod = props => {
|
|
|
31
26
|
originalData,
|
|
32
27
|
component: Component,
|
|
33
28
|
name,
|
|
34
|
-
externalFieldErrors
|
|
35
|
-
handleValidationErrorsOnTab
|
|
29
|
+
externalFieldErrors
|
|
36
30
|
} = props;
|
|
37
31
|
let content = null;
|
|
38
32
|
const [showValidateMessages, setShowValidateMessages] = (0, _react.useState)(false);
|
|
@@ -51,14 +45,6 @@ const FieldPeriod = props => {
|
|
|
51
45
|
externalFieldErrors,
|
|
52
46
|
externalMessagesErrors
|
|
53
47
|
});
|
|
54
|
-
const hasErrorsMessagesOnField = (0, _helpers.getErrorMessages)(_objectSpread(_objectSpread({}, props), {}, {
|
|
55
|
-
fieldErrors: props.fieldErrors
|
|
56
|
-
}));
|
|
57
|
-
if (handleValidationErrorsOnTab) handleValidationErrorsOnTab({
|
|
58
|
-
name: name,
|
|
59
|
-
tabId: props.tabId,
|
|
60
|
-
hasErrors: !!hasErrorsMessagesOnField.length
|
|
61
|
-
});
|
|
62
48
|
if (Component) {
|
|
63
49
|
content = /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
|
|
64
50
|
errorMessages: errorMessages,
|
package/lib/form/index.d.ts
CHANGED
|
@@ -13,6 +13,6 @@ import '../@types/Period.js';
|
|
|
13
13
|
import '../internals/types.js';
|
|
14
14
|
import '../@types/Position.js';
|
|
15
15
|
|
|
16
|
-
declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, useInternalState,
|
|
16
|
+
declare const Form: ({ submitOnPressEnterKey, dataSource, securityBeforeUnload, handlerReset, handlerSubmit, handlerValidates, style, customClass, securityTitle, securityText, securityData, onDataChange, onValidateForm, externalFieldErrors, onSubmit, skeletonize, disabled, children, useInternalState, }: FormProps) => JSX.Element;
|
|
17
17
|
|
|
18
18
|
export { Form as default };
|
package/lib/form/index.js
CHANGED
|
@@ -68,8 +68,7 @@ const Form = _ref => {
|
|
|
68
68
|
skeletonize,
|
|
69
69
|
disabled,
|
|
70
70
|
children,
|
|
71
|
-
useInternalState = false
|
|
72
|
-
onValidateErrorsOnTab
|
|
71
|
+
useInternalState = false
|
|
73
72
|
} = _ref;
|
|
74
73
|
const formId = (0, _uuid.v1)();
|
|
75
74
|
const [data, setData] = (0, _react.useState)(dataSource);
|
|
@@ -81,7 +80,6 @@ const Form = _ref => {
|
|
|
81
80
|
const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
|
|
82
81
|
const formRef = (0, _react.useRef)(null);
|
|
83
82
|
const fieldsValidators = (0, _react.useRef)({});
|
|
84
|
-
const tabsWithErrorRef = (0, _react.useRef)([]);
|
|
85
83
|
const usedData = useInternalState ? data : dataSource;
|
|
86
84
|
const getValidatesErrorMessages = (validators, fieldValue) => {
|
|
87
85
|
const validatorsArray = !(validators instanceof Array) ? [validators] : validators;
|
|
@@ -96,7 +94,7 @@ const Form = _ref => {
|
|
|
96
94
|
};
|
|
97
95
|
const getErrorMessages = (currentData, currentValidators) => {
|
|
98
96
|
const dataValidate = currentData || usedData;
|
|
99
|
-
let currentFieldErrors = _lodash.default.pickBy(fieldErrors, (
|
|
97
|
+
let currentFieldErrors = _lodash.default.pickBy(fieldErrors, (error, fieldName) => {
|
|
100
98
|
const fieldValidatorsNames = Object.keys(currentValidators);
|
|
101
99
|
return fieldValidatorsNames.includes(fieldName);
|
|
102
100
|
});
|
|
@@ -185,23 +183,6 @@ const Form = _ref => {
|
|
|
185
183
|
event.preventDefault();
|
|
186
184
|
if (_lodash.default.isEqual(usedData, originalData)) return;
|
|
187
185
|
};
|
|
188
|
-
const onValidateTabErrors = (0, _react.useCallback)(props => {
|
|
189
|
-
if (!props.tabId) return;
|
|
190
|
-
const tabIndex = [...tabsWithErrorRef.current].findIndex(tab => tab.name === props.name);
|
|
191
|
-
if (tabIndex !== -1) {
|
|
192
|
-
const novasTabs = [...tabsWithErrorRef.current];
|
|
193
|
-
novasTabs[tabIndex] = props;
|
|
194
|
-
tabsWithErrorRef.current = [...novasTabs];
|
|
195
|
-
} else {
|
|
196
|
-
tabsWithErrorRef.current = [...tabsWithErrorRef.current, props];
|
|
197
|
-
}
|
|
198
|
-
if (onValidateErrorsOnTab) {
|
|
199
|
-
const tabIdsWithErrors = _lodash.default.uniq(_lodash.default.compact(tabsWithErrorRef.current.map(tab => {
|
|
200
|
-
if (tab.hasErrors) return String(tab.tabId);
|
|
201
|
-
})));
|
|
202
|
-
onValidateErrorsOnTab(tabIdsWithErrors);
|
|
203
|
-
}
|
|
204
|
-
}, [onValidateErrorsOnTab]);
|
|
205
186
|
const formProps = () => {
|
|
206
187
|
let propsForm = null;
|
|
207
188
|
if (!disabled) {
|
|
@@ -232,9 +213,7 @@ const Form = _ref => {
|
|
|
232
213
|
if (onDataChange && useInternalState) onDataChange(usedData);
|
|
233
214
|
|
|
234
215
|
// TODO - Usar debounce para evitar chamada a cada letra digitada
|
|
235
|
-
if (onValidateForm)
|
|
236
|
-
onValidateForm(checkIsValid(usedData, true));
|
|
237
|
-
}
|
|
216
|
+
if (onValidateForm) onValidateForm(checkIsValid(usedData, true));
|
|
238
217
|
if (!disabled) {
|
|
239
218
|
handlerSubmit(onFormSubmit);
|
|
240
219
|
if (handlerReset) handlerReset(onReset);
|
|
@@ -250,13 +229,10 @@ const Form = _ref => {
|
|
|
250
229
|
}, [JSON.stringify(dataSource), useInternalState]);
|
|
251
230
|
(0, _react.useEffect)(() => {
|
|
252
231
|
if (securityBeforeUnload) {
|
|
253
|
-
if (
|
|
232
|
+
if (context) context.setSecurityBeforeUnload(true);
|
|
254
233
|
window.addEventListener('beforeunload', onBeforeUnload);
|
|
255
234
|
}
|
|
256
|
-
return () =>
|
|
257
|
-
if (securityBeforeUnload && Object.entries(context).length) context.setSecurityBeforeUnload(false);
|
|
258
|
-
window.removeEventListener('beforeunload', onBeforeUnload);
|
|
259
|
-
};
|
|
235
|
+
return () => window.removeEventListener('beforeunload', onBeforeUnload);
|
|
260
236
|
}, [securityBeforeUnload, onBeforeUnload]);
|
|
261
237
|
(0, _react.useEffect)(() => {
|
|
262
238
|
if (!disabled && submitOnPressEnterKey !== submitFormOnEnter) {
|
|
@@ -274,7 +250,6 @@ const Form = _ref => {
|
|
|
274
250
|
skeletonize,
|
|
275
251
|
handlerFieldChange: onFieldChange,
|
|
276
252
|
handlerFieldValidate: onValidate,
|
|
277
|
-
handleValidationErrorsOnTab: onValidateTabErrors,
|
|
278
253
|
handlerStoreValidators: (fieldName, fieldValidates) => {
|
|
279
254
|
fieldsValidators.current = _objectSpread(_objectSpread({}, fieldsValidators.current), {}, {
|
|
280
255
|
[fieldName]: fieldValidates
|
package/lib/form/types.d.ts
CHANGED
|
@@ -19,11 +19,6 @@ type OnFielChangeEvent = Event & {
|
|
|
19
19
|
type CustomKeyboardEvent = ChangeEvent<HTMLInputElement> & {
|
|
20
20
|
keyCode: number;
|
|
21
21
|
};
|
|
22
|
-
type PropsValidateTabErrors = {
|
|
23
|
-
name: string;
|
|
24
|
-
tabId?: string | number;
|
|
25
|
-
hasErrors: boolean;
|
|
26
|
-
};
|
|
27
22
|
type BaseFormProps = {
|
|
28
23
|
dataSource: object;
|
|
29
24
|
children: ReactNode;
|
|
@@ -32,7 +27,6 @@ type BaseFormProps = {
|
|
|
32
27
|
handlerReset?: (value: () => void) => void;
|
|
33
28
|
handlerValidates?: (value: any) => void;
|
|
34
29
|
onValidateForm?: (value: boolean) => void;
|
|
35
|
-
onValidateErrorsOnTab?: (tabIds: Array<string | number>) => void;
|
|
36
30
|
submitOnPressEnterKey?: boolean;
|
|
37
31
|
style?: CSSProperties;
|
|
38
32
|
customClass?: string;
|
|
@@ -101,8 +95,6 @@ interface IFieldProps extends WithFieldProps {
|
|
|
101
95
|
disabled?: boolean;
|
|
102
96
|
currencySymbol?: string;
|
|
103
97
|
checked?: boolean;
|
|
104
|
-
tabId?: string | number;
|
|
105
|
-
handleValidationErrorsOnTab?: (props: PropsValidateTabErrors) => void;
|
|
106
98
|
}
|
|
107
99
|
interface CustomEvent {
|
|
108
100
|
target: {
|
|
@@ -143,7 +135,6 @@ interface IFieldArrayProps extends WithFieldProps {
|
|
|
143
135
|
hintPosition?: 'below' | 'onLabelRight';
|
|
144
136
|
themePopover?: 'light' | 'dark';
|
|
145
137
|
popoverAlign?: 'right' | 'left';
|
|
146
|
-
tabId?: string | number;
|
|
147
138
|
}
|
|
148
139
|
type PeriodChangeEvent = {
|
|
149
140
|
initial: string;
|
|
@@ -181,7 +172,6 @@ interface IFieldPeriodProps extends WithFieldProps {
|
|
|
181
172
|
hintPosition?: 'below' | 'onLabelRight';
|
|
182
173
|
themePopover?: 'light' | 'dark';
|
|
183
174
|
popoverAlign?: 'right' | 'left';
|
|
184
|
-
tabId?: string | number;
|
|
185
175
|
}
|
|
186
176
|
interface FormContextProps {
|
|
187
177
|
skeletonize?: boolean;
|
|
@@ -194,7 +184,6 @@ interface FormContextProps {
|
|
|
194
184
|
fieldErrors: object;
|
|
195
185
|
externalFieldErrors?: object;
|
|
196
186
|
isFormValid?: boolean;
|
|
197
|
-
handleValidationErrorsOnTab?: (props: PropsValidateTabErrors) => void;
|
|
198
187
|
}
|
|
199
188
|
interface WithFieldProps {
|
|
200
189
|
name: string;
|
|
@@ -203,7 +192,6 @@ interface WithFieldProps {
|
|
|
203
192
|
handlerRemoveValidators?: (name: string) => void;
|
|
204
193
|
validators?: Validator | Validator[] | PeriodValidator | PeriodValidator[];
|
|
205
194
|
customClass?: string;
|
|
206
|
-
handleValidationErrorsOnTab?: (props: PropsValidateTabErrors) => void;
|
|
207
195
|
}
|
|
208
196
|
interface IWithFieldContext {
|
|
209
197
|
validatorFromComponent: Validator | Validator[] | undefined;
|
|
@@ -252,4 +240,4 @@ type FieldValidator = {
|
|
|
252
240
|
[name: string]: Validator | Validator[];
|
|
253
241
|
};
|
|
254
242
|
|
|
255
|
-
export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, FormProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator,
|
|
243
|
+
export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, FormProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };
|