linear-react-components-ui 1.1.22-beta.1 → 1.1.22-beta.2
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/dialog/base/index.js +26 -12
- 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/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 {
|
package/lib/dialog/base/index.js
CHANGED
|
@@ -35,10 +35,11 @@ const BaseDialog = props => {
|
|
|
35
35
|
const {
|
|
36
36
|
headerRef
|
|
37
37
|
} = (0, _react.useContext)(_form.FormDialogContext);
|
|
38
|
-
const wrapperEl = (0, _react.useRef)(null);
|
|
39
|
-
const modalContainerRef = (0, _react.useRef)(null);
|
|
40
38
|
const [isDragging, setIsDragging] = (0, _react.useState)(false);
|
|
41
39
|
const [open = true, setOpen] = (0, _react.useState)(openProp);
|
|
40
|
+
const wrapperEl = (0, _react.useRef)(null);
|
|
41
|
+
const modalContainerRef = (0, _react.useRef)(null);
|
|
42
|
+
const focusableElementsRef = (0, _react.useRef)([]);
|
|
42
43
|
if (openProp !== undefined && openProp !== open) {
|
|
43
44
|
setOpen(openProp);
|
|
44
45
|
}
|
|
@@ -64,17 +65,12 @@ const BaseDialog = props => {
|
|
|
64
65
|
handleClose();
|
|
65
66
|
}
|
|
66
67
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
if (focusOnAnotherField && elementsFocusable?.length) {
|
|
72
|
-
const firstElement = elementsFocusable[0];
|
|
73
|
-
setTimeout(() => {
|
|
74
|
-
firstElement.focus();
|
|
75
|
-
}, 150);
|
|
68
|
+
(0, _react.useEffect)(() => {
|
|
69
|
+
if (open && modalContainerRef.current) {
|
|
70
|
+
focusableElementsRef.current = Array.from(modalContainerRef.current.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])"));
|
|
71
|
+
focusableElementsRef.current[0]?.focus();
|
|
76
72
|
}
|
|
77
|
-
};
|
|
73
|
+
}, [open]);
|
|
78
74
|
const onDialogPositionChange = _ref => {
|
|
79
75
|
let {
|
|
80
76
|
positionX,
|
|
@@ -116,8 +112,26 @@ const BaseDialog = props => {
|
|
|
116
112
|
const onMouseUp = () => {
|
|
117
113
|
if (wrapperEl.current) setIsDragging(false);
|
|
118
114
|
};
|
|
115
|
+
const handleKeyDown = e => {
|
|
116
|
+
if (e.key === 'Tab') {
|
|
117
|
+
const {
|
|
118
|
+
current: elements
|
|
119
|
+
} = focusableElementsRef;
|
|
120
|
+
if (elements.length === 0) return;
|
|
121
|
+
const firstElement = elements[0];
|
|
122
|
+
const lastElement = elements[elements.length - 1];
|
|
123
|
+
if (e.shiftKey && document.activeElement === firstElement) {
|
|
124
|
+
lastElement.focus();
|
|
125
|
+
e.preventDefault();
|
|
126
|
+
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
127
|
+
firstElement.focus();
|
|
128
|
+
e.preventDefault();
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
};
|
|
119
132
|
const createdModal = /*#__PURE__*/_react.default.createElement("div", {
|
|
120
133
|
id: id,
|
|
134
|
+
onKeyDown: handleKeyDown,
|
|
121
135
|
ref: modalContainerRef,
|
|
122
136
|
className: "modalcontainer",
|
|
123
137
|
onMouseDown: handleClickOutside,
|
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
|