linear-react-components-ui 0.4.76-rc.11 → 0.4.76-rc.12
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/.tool-versions +1 -0
- package/.vscode/settings.json +1 -2
- package/README.md +23 -0
- package/lib/assets/styles/dropdown.scss +25 -2
- package/lib/assets/styles/effects.scss +12 -0
- package/lib/assets/styles/floatMenu.scss +0 -1
- package/lib/assets/styles/multiSelect.scss +105 -0
- package/lib/assets/styles/panel.scss +0 -1
- package/lib/assets/styles/periodpicker.scss +65 -0
- package/lib/assets/styles/progress.scss +8 -1
- package/lib/assets/styles/select.scss +1 -0
- package/lib/assets/styles/table.scss +13 -5
- package/lib/assets/styles/tabs.scss +79 -46
- package/lib/assets/styles/treeview.scss +32 -0
- package/lib/avatar/avatar.spec.js +17 -6
- package/lib/avatar/index.js +1 -1
- package/lib/buttons/DefaultButton.js +7 -1
- package/lib/checkbox/Label.js +37 -0
- package/lib/checkbox/index.js +20 -6
- package/lib/dialog/base/index.js +15 -6
- package/lib/dialog/form/index.js +16 -3
- package/lib/drawer/index.js +4 -1
- package/lib/form/Field.js +2 -0
- package/lib/form/FieldNumber.js +10 -2
- package/lib/form/FieldPeriod.js +100 -0
- package/lib/form/helpers.js +9 -1
- package/lib/form/index.js +76 -10
- package/lib/form/withFieldHOC.js +2 -0
- package/lib/form/withFormSecurity.js +106 -0
- package/lib/icons/helper.js +16 -0
- package/lib/inputs/base/InputTextBase.js +1 -10
- package/lib/inputs/base/helpers.js +3 -11
- package/lib/inputs/multiSelect/ActionButtons.js +68 -0
- package/lib/inputs/multiSelect/Dropdown.js +200 -0
- package/lib/inputs/multiSelect/helper.js +18 -0
- package/lib/inputs/multiSelect/index.js +343 -0
- package/lib/inputs/number/BaseNumber.js +1 -1
- package/lib/inputs/number/index.js +7 -5
- package/lib/inputs/period/Dialog.js +38 -0
- package/lib/inputs/period/Dropdown.js +90 -0
- package/lib/inputs/period/PeriodList.js +79 -0
- package/lib/inputs/period/helper.js +118 -0
- package/lib/inputs/period/index.js +490 -0
- package/lib/inputs/select/Dropdown.js +4 -4
- package/lib/inputs/select/index.js +26 -3
- package/lib/inputs/select/multiple/index.js +9 -7
- package/lib/inputs/select/simple/index.js +30 -18
- package/lib/internals/withTooltip.js +83 -82
- package/lib/list/Item.js +3 -3
- package/lib/list/index.js +20 -10
- package/lib/list/list.spec.js +129 -85
- package/lib/menus/float/MenuItem.js +25 -8
- package/lib/menus/sidenav/index.js +7 -3
- package/lib/menus/sidenav/popup_menu_search/index.js +1 -1
- package/lib/progress/Bar.js +40 -9
- package/lib/progress/index.js +12 -4
- package/lib/spinner/index.js +6 -1
- package/lib/split/Split.js +5 -11
- package/lib/table/Row.js +1 -1
- package/lib/tabs/DropdownItems.js +84 -0
- package/lib/tabs/Menu.js +18 -5
- package/lib/tabs/MenuItems.js +7 -7
- package/lib/tabs/Panel.js +1 -3
- package/lib/tabs/index.js +153 -20
- package/lib/toolbar/index.js +8 -4
- package/lib/tooltip/index.js +12 -0
- package/lib/treeview/Node.js +288 -18
- package/lib/treeview/index.js +448 -35
- package/package.json +9 -8
package/lib/avatar/index.js
CHANGED
|
@@ -85,7 +85,7 @@ var Avatar = function Avatar(props) {
|
|
|
85
85
|
backgroundColor: "".concat(color),
|
|
86
86
|
cursor: "".concat(dropdown ? 'pointer' : 'normal')
|
|
87
87
|
}, style)
|
|
88
|
-
}, (iconName || icon) && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
|
|
88
|
+
}, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
|
|
89
89
|
className: "imgavatar",
|
|
90
90
|
style: {
|
|
91
91
|
width: "".concat(width),
|
|
@@ -69,7 +69,8 @@ var DefaultButton = function DefaultButton(props) {
|
|
|
69
69
|
boxShadow = props.boxShadow,
|
|
70
70
|
transparent = props.transparent,
|
|
71
71
|
round = props.round,
|
|
72
|
-
permissionAttr = props.permissionAttr
|
|
72
|
+
permissionAttr = props.permissionAttr,
|
|
73
|
+
_onBlur = props.onBlur;
|
|
73
74
|
|
|
74
75
|
var _useState = (0, _react.useState)(false),
|
|
75
76
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -147,6 +148,9 @@ var DefaultButton = function DefaultButton(props) {
|
|
|
147
148
|
if (dropdown) showDropdown();
|
|
148
149
|
if (_onClick && toggleable) setActiveButton(!activeButton);
|
|
149
150
|
},
|
|
151
|
+
onBlur: function onBlur(e) {
|
|
152
|
+
if (_onBlur) _onBlur(e);
|
|
153
|
+
},
|
|
150
154
|
disabled: shouldDisable(),
|
|
151
155
|
className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : ''),
|
|
152
156
|
ref: function ref(r) {
|
|
@@ -176,6 +180,7 @@ DefaultButton.propTypes = {
|
|
|
176
180
|
boxShadow: _propTypes["default"].bool,
|
|
177
181
|
icon: _propTypes["default"].instanceOf(Object),
|
|
178
182
|
onClick: _propTypes["default"].func,
|
|
183
|
+
onBlur: _propTypes["default"].func,
|
|
179
184
|
targetRef: _propTypes["default"].func,
|
|
180
185
|
tabIndex: _propTypes["default"].string,
|
|
181
186
|
dropdown: _propTypes["default"].bool,
|
|
@@ -211,6 +216,7 @@ DefaultButton.defaultProps = {
|
|
|
211
216
|
icon: null,
|
|
212
217
|
content: null,
|
|
213
218
|
onClick: null,
|
|
219
|
+
onBlur: null,
|
|
214
220
|
targetRef: undefined,
|
|
215
221
|
tabIndex: undefined,
|
|
216
222
|
isLoading: false,
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
|
|
16
|
+
var Label = function Label(_ref) {
|
|
17
|
+
var label = _ref.label,
|
|
18
|
+
targetRef = _ref.targetRef;
|
|
19
|
+
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
20
|
+
className: "checkbox-description",
|
|
21
|
+
ref: function ref(r) {
|
|
22
|
+
return targetRef && targetRef(r);
|
|
23
|
+
}
|
|
24
|
+
}, label);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
Label.propTypes = {
|
|
28
|
+
label: _propTypes["default"].string.isRequired,
|
|
29
|
+
targetRef: _propTypes["default"].func
|
|
30
|
+
};
|
|
31
|
+
Label.defaultProps = {
|
|
32
|
+
targetRef: undefined
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
var _default = (0, _withTooltip["default"])(Label);
|
|
36
|
+
|
|
37
|
+
exports["default"] = _default;
|
package/lib/checkbox/index.js
CHANGED
|
@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
13
13
|
|
|
14
14
|
var _gridlayout = _interopRequireDefault(require("../gridlayout"));
|
|
15
15
|
|
|
16
|
+
var _Label = _interopRequireDefault(require("./Label"));
|
|
17
|
+
|
|
16
18
|
require("../assets/styles/checkbox.scss");
|
|
17
19
|
|
|
18
20
|
var _permissionValidations = require("../permissionValidations");
|
|
@@ -52,7 +54,10 @@ var CheckBox = function CheckBox(props) {
|
|
|
52
54
|
id = props.id,
|
|
53
55
|
gridLayout = props.gridLayout,
|
|
54
56
|
checked = props.checked,
|
|
55
|
-
permissionAttr = props.permissionAttr
|
|
57
|
+
permissionAttr = props.permissionAttr,
|
|
58
|
+
tooltip = props.tooltip,
|
|
59
|
+
tooltipPosition = props.tooltipPosition,
|
|
60
|
+
tooltipWidth = props.tooltipWidth;
|
|
56
61
|
|
|
57
62
|
var _useState = (0, _react.useState)(checked),
|
|
58
63
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -122,9 +127,12 @@ var CheckBox = function CheckBox(props) {
|
|
|
122
127
|
value: value,
|
|
123
128
|
id: id,
|
|
124
129
|
onChange: function onChange() {}
|
|
125
|
-
}), /*#__PURE__*/_react["default"].createElement("span", null), label && /*#__PURE__*/_react["default"].createElement("
|
|
126
|
-
|
|
127
|
-
|
|
130
|
+
}), /*#__PURE__*/_react["default"].createElement("span", null), label && /*#__PURE__*/_react["default"].createElement(_Label["default"], {
|
|
131
|
+
label: label,
|
|
132
|
+
tooltip: tooltip,
|
|
133
|
+
tooltipWidth: tooltipWidth,
|
|
134
|
+
tooltipPosition: tooltipPosition
|
|
135
|
+
})), hint && /*#__PURE__*/_react["default"].createElement("div", {
|
|
128
136
|
className: "checkbox-hint"
|
|
129
137
|
}, hint));
|
|
130
138
|
};
|
|
@@ -149,7 +157,10 @@ CheckBox.propTypes = {
|
|
|
149
157
|
autofocus: _propTypes["default"].bool,
|
|
150
158
|
hint: _propTypes["default"].string,
|
|
151
159
|
gridLayout: _propTypes["default"].string,
|
|
152
|
-
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
|
|
160
|
+
permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
|
|
161
|
+
tooltip: _propTypes["default"].string,
|
|
162
|
+
tooltipPosition: _propTypes["default"].string,
|
|
163
|
+
tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
|
|
153
164
|
};
|
|
154
165
|
CheckBox.defaultProps = {
|
|
155
166
|
label: '',
|
|
@@ -164,7 +175,10 @@ CheckBox.defaultProps = {
|
|
|
164
175
|
hint: undefined,
|
|
165
176
|
id: undefined,
|
|
166
177
|
gridLayout: undefined,
|
|
167
|
-
permissionAttr: undefined
|
|
178
|
+
permissionAttr: undefined,
|
|
179
|
+
tooltip: '',
|
|
180
|
+
tooltipPosition: 'top',
|
|
181
|
+
tooltipWidth: 'auto'
|
|
168
182
|
};
|
|
169
183
|
var _default = CheckBox;
|
|
170
184
|
exports["default"] = _default;
|
package/lib/dialog/base/index.js
CHANGED
|
@@ -31,7 +31,8 @@ var BaseDialog = function BaseDialog(props) {
|
|
|
31
31
|
handlerClose = props.handlerClose,
|
|
32
32
|
closeOnOutsideClick = props.closeOnOutsideClick,
|
|
33
33
|
wrapperClassName = props.wrapperClassName,
|
|
34
|
-
children = props.children
|
|
34
|
+
children = props.children,
|
|
35
|
+
zIndex = props.zIndex;
|
|
35
36
|
var dialogEl = (0, _react.useRef)(document.createElement('div'));
|
|
36
37
|
dialogEl.current.className = 'dialog';
|
|
37
38
|
dialogEl.current.dataset.testid = 'dialog-component';
|
|
@@ -48,25 +49,30 @@ var BaseDialog = function BaseDialog(props) {
|
|
|
48
49
|
|
|
49
50
|
var handleClickOutside = function handleClickOutside(event) {
|
|
50
51
|
var target = event.target;
|
|
52
|
+
var dialogAlert = document.getElementsByClassName('dialog-alert-wrapper');
|
|
51
53
|
|
|
52
54
|
if (wrapperEl !== null && wrapperEl.current !== null && target !== wrapperEl.current && !wrapperEl.current.contains(target)) {
|
|
55
|
+
if (dialogAlert.length > 0 && dialogAlert[dialogAlert.length - 1].contains(target) || target.className !== 'button-component') return;
|
|
53
56
|
handlerClose();
|
|
54
57
|
}
|
|
55
58
|
};
|
|
56
59
|
|
|
57
60
|
var handleCloseOnEsc = function handleCloseOnEsc(event) {
|
|
58
|
-
if (event.keyCode === 27 || event.key === 'ESC')
|
|
61
|
+
if (event.keyCode === 27 || event.key === 'ESC') {
|
|
62
|
+
handlerClose();
|
|
63
|
+
}
|
|
59
64
|
};
|
|
60
65
|
|
|
61
66
|
var setModalContainer = function setModalContainer() {
|
|
62
67
|
modalContainerEl.current.className = 'modalcontainer';
|
|
68
|
+
if (zIndex) modalContainerEl.current.style.zIndex = zIndex;
|
|
63
69
|
body.appendChild(modalContainerEl.current);
|
|
64
70
|
modalContainerEl.current.appendChild(dialogEl.current);
|
|
65
71
|
};
|
|
66
72
|
|
|
67
73
|
var removeModalContainer = function removeModalContainer() {
|
|
68
|
-
var modalComponent = document.getElementsByClassName('modalcontainer')
|
|
69
|
-
document.body.removeChild(modalComponent);
|
|
74
|
+
var modalComponent = document.getElementsByClassName('modalcontainer');
|
|
75
|
+
document.body.removeChild(modalComponent[modalComponent.length - 1]);
|
|
70
76
|
};
|
|
71
77
|
|
|
72
78
|
var removeOverlay = function removeOverlay() {
|
|
@@ -108,15 +114,18 @@ BaseDialog.propTypes = {
|
|
|
108
114
|
closeOnEsc: _propTypes["default"].bool,
|
|
109
115
|
closeOnOutsideClick: _propTypes["default"].bool,
|
|
110
116
|
overlay: _propTypes["default"].bool,
|
|
117
|
+
changedData: _propTypes["default"].bool,
|
|
111
118
|
children: _propTypes["default"].any.isRequired,
|
|
112
|
-
textAlign: _propTypes["default"].string
|
|
119
|
+
textAlign: _propTypes["default"].string,
|
|
120
|
+
zIndex: _propTypes["default"].string
|
|
113
121
|
};
|
|
114
122
|
BaseDialog.defaultProps = {
|
|
115
123
|
closeOnEsc: false,
|
|
116
124
|
closeOnOutsideClick: false,
|
|
117
125
|
overlay: true,
|
|
118
126
|
handlerClose: null,
|
|
119
|
-
textAlign: 'justify'
|
|
127
|
+
textAlign: 'justify',
|
|
128
|
+
zIndex: null
|
|
120
129
|
};
|
|
121
130
|
var _default = BaseDialog;
|
|
122
131
|
exports["default"] = _default;
|
package/lib/dialog/form/index.js
CHANGED
|
@@ -23,6 +23,8 @@ var _Footer = _interopRequireDefault(require("../base/Footer"));
|
|
|
23
23
|
|
|
24
24
|
var _spinner = _interopRequireDefault(require("../../spinner"));
|
|
25
25
|
|
|
26
|
+
var _withFormSecurity = _interopRequireDefault(require("../../form/withFormSecurity"));
|
|
27
|
+
|
|
26
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
29
|
|
|
28
30
|
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); }
|
|
@@ -54,6 +56,13 @@ var ModalForm = function ModalForm(props) {
|
|
|
54
56
|
}, props.children), getSpinner(), props.showFooter && /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement(_index.ButtonContainer, _extends({}, props, {
|
|
55
57
|
style: _extends({}, overlayStyle)
|
|
56
58
|
}), props.buttons.map(function (button) {
|
|
59
|
+
if (button.type.name === 'CancelButton') {
|
|
60
|
+
return /*#__PURE__*/_react["default"].cloneElement(button, {
|
|
61
|
+
key: "button-".concat(_uuid["default"].v1()),
|
|
62
|
+
onClick: props.handlerClose
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
|
|
57
66
|
return /*#__PURE__*/_react["default"].cloneElement(button, {
|
|
58
67
|
key: "button-".concat(_uuid["default"].v1())
|
|
59
68
|
});
|
|
@@ -68,7 +77,8 @@ ModalForm.propTypes = {
|
|
|
68
77
|
height: _propTypes["default"].string,
|
|
69
78
|
showFooter: _propTypes["default"].bool,
|
|
70
79
|
buttons: _propTypes["default"].any.isRequired,
|
|
71
|
-
isWaiting: _propTypes["default"].bool
|
|
80
|
+
isWaiting: _propTypes["default"].bool,
|
|
81
|
+
handlerClose: _propTypes["default"].func
|
|
72
82
|
};
|
|
73
83
|
ModalForm.defaultProps = {
|
|
74
84
|
title: '',
|
|
@@ -76,7 +86,10 @@ ModalForm.defaultProps = {
|
|
|
76
86
|
height: '50%',
|
|
77
87
|
styleForContent: {},
|
|
78
88
|
showFooter: true,
|
|
79
|
-
isWaiting: false
|
|
89
|
+
isWaiting: false,
|
|
90
|
+
handlerClose: undefined
|
|
80
91
|
};
|
|
81
|
-
|
|
92
|
+
|
|
93
|
+
var _default = (0, _withFormSecurity["default"])(ModalForm);
|
|
94
|
+
|
|
82
95
|
exports["default"] = _default;
|
package/lib/drawer/index.js
CHANGED
|
@@ -25,7 +25,10 @@ var _Content = _interopRequireDefault(require("./Content"));
|
|
|
25
25
|
|
|
26
26
|
require("../assets/styles/drawers.scss");
|
|
27
27
|
|
|
28
|
+
var _withFormSecurity = _interopRequireDefault(require("../form/withFormSecurity"));
|
|
29
|
+
|
|
28
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
31
|
|
|
30
|
-
var _default = _Drawer["default"];
|
|
32
|
+
var _default = (0, _withFormSecurity["default"])(_Drawer["default"]);
|
|
33
|
+
|
|
31
34
|
exports["default"] = _default;
|
package/lib/form/Field.js
CHANGED
|
@@ -125,6 +125,7 @@ Field.propTypes = {
|
|
|
125
125
|
onBlur: _propTypes["default"].func,
|
|
126
126
|
validators: _propTypes["default"].any,
|
|
127
127
|
fieldErrors: _propTypes["default"].object,
|
|
128
|
+
externalFieldErrors: _propTypes["default"].object,
|
|
128
129
|
externalMessagesErrors: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
129
130
|
fieldId: _propTypes["default"].string
|
|
130
131
|
};
|
|
@@ -136,6 +137,7 @@ Field.defaultProps = {
|
|
|
136
137
|
onBlur: undefined,
|
|
137
138
|
validators: null,
|
|
138
139
|
fieldErrors: {},
|
|
140
|
+
externalFieldErrors: {},
|
|
139
141
|
externalMessagesErrors: [],
|
|
140
142
|
fieldId: '' // Inicialmente implementado para atender radios e checkboxs
|
|
141
143
|
|
package/lib/form/FieldNumber.js
CHANGED
|
@@ -36,10 +36,16 @@ var getOnBlurEvent = function getOnBlurEvent(_ref) {
|
|
|
36
36
|
|
|
37
37
|
var FieldMask = function FieldMask(props) {
|
|
38
38
|
var data = props.data,
|
|
39
|
-
name = props.name
|
|
39
|
+
name = props.name,
|
|
40
|
+
handlerFieldChange = props.handlerFieldChange,
|
|
41
|
+
_onChange = props.onChange;
|
|
40
42
|
return /*#__PURE__*/_react["default"].createElement(props.component, _extends({}, props, getOnBlurEvent(props), {
|
|
41
43
|
errorMessages: (0, _helpers.getErrorMessages)(props),
|
|
42
|
-
value: _lodash["default"].get(data, name)
|
|
44
|
+
value: _lodash["default"].get(data, name),
|
|
45
|
+
onChange: function onChange(e) {
|
|
46
|
+
handlerFieldChange(e);
|
|
47
|
+
if (_onChange) _onChange(e);
|
|
48
|
+
}
|
|
43
49
|
}));
|
|
44
50
|
};
|
|
45
51
|
|
|
@@ -49,6 +55,7 @@ FieldMask.propTypes = {
|
|
|
49
55
|
handlerFieldChange: _propTypes["default"].func.isRequired,
|
|
50
56
|
component: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
|
|
51
57
|
onBlur: _propTypes["default"].func,
|
|
58
|
+
onChange: _propTypes["default"].func,
|
|
52
59
|
validators: _propTypes["default"].oneOf([_propTypes["default"].func, _propTypes["default"].arrayOf(_propTypes["default"].func)]),
|
|
53
60
|
fieldErrors: _propTypes["default"].object,
|
|
54
61
|
externalMessagesErrors: _propTypes["default"].arrayOf(_propTypes["default"].string)
|
|
@@ -56,6 +63,7 @@ FieldMask.propTypes = {
|
|
|
56
63
|
FieldMask.defaultProps = {
|
|
57
64
|
component: undefined,
|
|
58
65
|
onBlur: undefined,
|
|
66
|
+
onChange: undefined,
|
|
59
67
|
validators: undefined,
|
|
60
68
|
fieldErrors: {},
|
|
61
69
|
externalMessagesErrors: []
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
|
13
|
+
|
|
14
|
+
var _withFieldHOC = _interopRequireDefault(require("./withFieldHOC"));
|
|
15
|
+
|
|
16
|
+
var _helpers = require("./helpers");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
var FieldPeriod = function FieldPeriod(props) {
|
|
23
|
+
var data = props.data,
|
|
24
|
+
nameDateInitial = props.nameDateInitial,
|
|
25
|
+
nameDateFinal = props.nameDateFinal,
|
|
26
|
+
handlerFieldChange = props.handlerFieldChange,
|
|
27
|
+
handlerFieldValidade = props.handlerFieldValidade,
|
|
28
|
+
fieldErrors = props.fieldErrors,
|
|
29
|
+
externalMessagesErrors = props.externalMessagesErrors,
|
|
30
|
+
_onChange = props.onChange,
|
|
31
|
+
validators = props.validators;
|
|
32
|
+
var errorMessages = (0, _helpers.getErrorMessages)({
|
|
33
|
+
name: nameDateInitial,
|
|
34
|
+
fieldErrors: fieldErrors,
|
|
35
|
+
externalMessagesErrors: externalMessagesErrors
|
|
36
|
+
});
|
|
37
|
+
return /*#__PURE__*/_react["default"].createElement(props.component, _extends({}, props, {
|
|
38
|
+
errorMessages: errorMessages,
|
|
39
|
+
onChange: function onChange(_ref) {
|
|
40
|
+
var initial = _ref.initial,
|
|
41
|
+
_final = _ref["final"];
|
|
42
|
+
|
|
43
|
+
if (validators) {
|
|
44
|
+
handlerFieldValidade(nameDateInitial, {
|
|
45
|
+
initial: initial,
|
|
46
|
+
"final": _final
|
|
47
|
+
}, validators);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
handlerFieldChange({
|
|
51
|
+
target: {
|
|
52
|
+
name: nameDateInitial,
|
|
53
|
+
value: initial
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
handlerFieldChange({
|
|
57
|
+
target: {
|
|
58
|
+
name: nameDateFinal,
|
|
59
|
+
value: _final
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
_onChange({
|
|
64
|
+
initial: initial,
|
|
65
|
+
"final": _final
|
|
66
|
+
});
|
|
67
|
+
},
|
|
68
|
+
value: {
|
|
69
|
+
initial: _lodash["default"].get(data, nameDateInitial),
|
|
70
|
+
"final": _lodash["default"].get(data, nameDateFinal)
|
|
71
|
+
}
|
|
72
|
+
}));
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
FieldPeriod.propTypes = {
|
|
76
|
+
data: _propTypes["default"].object.isRequired,
|
|
77
|
+
nameDateInitial: _propTypes["default"].string.isRequired,
|
|
78
|
+
nameDateFinal: _propTypes["default"].string.isRequired,
|
|
79
|
+
handlerFieldChange: _propTypes["default"].func.isRequired,
|
|
80
|
+
component: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
|
|
81
|
+
onBlur: _propTypes["default"].func,
|
|
82
|
+
validators: _propTypes["default"].oneOf([_propTypes["default"].func, _propTypes["default"].arrayOf(_propTypes["default"].func)]),
|
|
83
|
+
fieldErrors: _propTypes["default"].object,
|
|
84
|
+
externalMessagesErrors: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
85
|
+
handlerFieldValidade: _propTypes["default"].func,
|
|
86
|
+
onChange: _propTypes["default"].func
|
|
87
|
+
};
|
|
88
|
+
FieldPeriod.defaultProps = {
|
|
89
|
+
component: undefined,
|
|
90
|
+
onBlur: undefined,
|
|
91
|
+
validators: undefined,
|
|
92
|
+
fieldErrors: {},
|
|
93
|
+
externalMessagesErrors: [],
|
|
94
|
+
handlerFieldValidade: undefined,
|
|
95
|
+
onChange: undefined
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
var _default = (0, _withFieldHOC["default"])(FieldPeriod);
|
|
99
|
+
|
|
100
|
+
exports["default"] = _default;
|
package/lib/form/helpers.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getValidatorsArray = exports.getErrorMessages = exports.withFieldContext = exports.FormContext = exports.FieldContext = void 0;
|
|
6
|
+
exports.getValidatorsArray = exports.getErrorMessages = exports.withFieldContext = exports.FormContext = exports.FieldContext = exports.securityBeforeUnload = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -21,6 +21,9 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
|
|
|
21
21
|
|
|
22
22
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
23
23
|
|
|
24
|
+
var securityBeforeUnload = 'securityBeforeUnload';
|
|
25
|
+
exports.securityBeforeUnload = securityBeforeUnload;
|
|
26
|
+
|
|
24
27
|
var FieldContext = /*#__PURE__*/_react["default"].createContext();
|
|
25
28
|
|
|
26
29
|
exports.FieldContext = FieldContext;
|
|
@@ -36,6 +39,7 @@ exports.withFieldContext = withFieldContext;
|
|
|
36
39
|
var getErrorMessages = function getErrorMessages(_ref) {
|
|
37
40
|
var name = _ref.name,
|
|
38
41
|
fieldErrors = _ref.fieldErrors,
|
|
42
|
+
externalFieldErrors = _ref.externalFieldErrors,
|
|
39
43
|
externalMessagesErrors = _ref.externalMessagesErrors;
|
|
40
44
|
|
|
41
45
|
var errors = _toConsumableArray(externalMessagesErrors);
|
|
@@ -44,6 +48,10 @@ var getErrorMessages = function getErrorMessages(_ref) {
|
|
|
44
48
|
errors = [].concat(_toConsumableArray(errors), _toConsumableArray(fieldErrors[name]));
|
|
45
49
|
}
|
|
46
50
|
|
|
51
|
+
if (externalFieldErrors && externalFieldErrors[name]) {
|
|
52
|
+
errors = [].concat(_toConsumableArray(errors), _toConsumableArray(externalFieldErrors[name]));
|
|
53
|
+
}
|
|
54
|
+
|
|
47
55
|
return errors;
|
|
48
56
|
};
|
|
49
57
|
|
package/lib/form/index.js
CHANGED
|
@@ -41,6 +41,10 @@ var _FieldArray = _interopRequireDefault(require("./FieldArray"));
|
|
|
41
41
|
|
|
42
42
|
require("../assets/styles/form.scss");
|
|
43
43
|
|
|
44
|
+
var _dialog = require("../dialog");
|
|
45
|
+
|
|
46
|
+
var _withFormSecurity = require("./withFormSecurity");
|
|
47
|
+
|
|
44
48
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
45
49
|
|
|
46
50
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -94,6 +98,20 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
94
98
|
_classCallCheck(this, Form);
|
|
95
99
|
|
|
96
100
|
_this = _super.call(this, props);
|
|
101
|
+
Object.defineProperty(_assertThisInitialized(_this), "onBeforeUnload", {
|
|
102
|
+
configurable: true,
|
|
103
|
+
enumerable: true,
|
|
104
|
+
writable: true,
|
|
105
|
+
value: function value(e) {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
|
|
108
|
+
if (Object.is(_this.state.data, _this.state.originalData)) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
e.returnValue = true;
|
|
113
|
+
}
|
|
114
|
+
});
|
|
97
115
|
Object.defineProperty(_assertThisInitialized(_this), "onFieldChange", {
|
|
98
116
|
configurable: true,
|
|
99
117
|
enumerable: true,
|
|
@@ -106,12 +124,19 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
106
124
|
var _e$target = e.target,
|
|
107
125
|
name = _e$target.name,
|
|
108
126
|
value = _e$target.value;
|
|
127
|
+
var onChangedData = _this.context.onChangedData;
|
|
109
128
|
|
|
110
129
|
_lodash["default"].set(data, name, value);
|
|
111
130
|
|
|
112
131
|
_this.setState({
|
|
113
132
|
data: data
|
|
114
|
-
});
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
if (!Object.is(data, _this.state.originalData)) {
|
|
136
|
+
onChangedData(true);
|
|
137
|
+
} else {
|
|
138
|
+
onChangedData(false);
|
|
139
|
+
} // TODO - Usar debounce para evitar chamada a cada letra digitada
|
|
115
140
|
|
|
116
141
|
|
|
117
142
|
if (onValidateForm) onValidateForm(_this.checkIsValid(data, false));
|
|
@@ -196,7 +221,8 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
196
221
|
},
|
|
197
222
|
handlerRemoveValidators: _this.onRemoveFieldValidators,
|
|
198
223
|
data: _this.state.data,
|
|
199
|
-
fieldErrors: _this.state.fieldErrors
|
|
224
|
+
fieldErrors: _this.state.fieldErrors,
|
|
225
|
+
externalFieldErrors: _this.props.externalFieldErrors
|
|
200
226
|
};
|
|
201
227
|
}
|
|
202
228
|
});
|
|
@@ -254,12 +280,23 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
254
280
|
var _this$props2 = this.props,
|
|
255
281
|
handlerReset = _this$props2.handlerReset,
|
|
256
282
|
handlerSubmit = _this$props2.handlerSubmit,
|
|
257
|
-
handlerValidates = _this$props2.handlerValidates
|
|
283
|
+
handlerValidates = _this$props2.handlerValidates,
|
|
284
|
+
securityBeforeUnload = _this$props2.securityBeforeUnload;
|
|
285
|
+
var setSecurityBeforeUnload = this.context.setSecurityBeforeUnload;
|
|
258
286
|
handlerSubmit(this.onSubmit);
|
|
259
287
|
if (handlerReset) handlerReset(this.onReset);
|
|
260
288
|
if (handlerValidates) handlerValidates(this.checkIsValid);
|
|
261
|
-
} // up = data => _.debounce((data) => { this.props.onValidateForm(this.checkIsValid(data)); }, 300)
|
|
262
289
|
|
|
290
|
+
if (securityBeforeUnload) {
|
|
291
|
+
setSecurityBeforeUnload(true);
|
|
292
|
+
window.addEventListener('beforeunload', this.onBeforeUnload);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}, {
|
|
296
|
+
key: "componentWillUnmount",
|
|
297
|
+
value: function componentWillUnmount() {
|
|
298
|
+
window.removeEventListener('beforeunload', this.onBeforeUnload);
|
|
299
|
+
}
|
|
263
300
|
}, {
|
|
264
301
|
key: "render",
|
|
265
302
|
value: function render() {
|
|
@@ -268,8 +305,15 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
268
305
|
var _this$props3 = this.props,
|
|
269
306
|
style = _this$props3.style,
|
|
270
307
|
customClass = _this$props3.customClass,
|
|
271
|
-
children = _this$props3.children
|
|
272
|
-
|
|
308
|
+
children = _this$props3.children,
|
|
309
|
+
securityBeforeUnload = _this$props3.securityBeforeUnload,
|
|
310
|
+
securityTitle = _this$props3.securityTitle,
|
|
311
|
+
securityText = _this$props3.securityText;
|
|
312
|
+
var _this$context = this.context,
|
|
313
|
+
showQuestion = _this$context.showQuestion,
|
|
314
|
+
onUnconfirmClick = _this$context.onUnconfirmClick,
|
|
315
|
+
onConfirmClick = _this$context.onConfirmClick;
|
|
316
|
+
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_helpers.FormContext.Provider, {
|
|
273
317
|
value: this.getContextValue()
|
|
274
318
|
}, /*#__PURE__*/_react["default"].createElement("form", {
|
|
275
319
|
style: style,
|
|
@@ -281,7 +325,15 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
281
325
|
},
|
|
282
326
|
role: "presentation",
|
|
283
327
|
className: "form-component ".concat(customClass)
|
|
284
|
-
}, children))
|
|
328
|
+
}, children)), /*#__PURE__*/_react["default"].createElement(_dialog.DialogQuestion, {
|
|
329
|
+
zIndex: "99999999",
|
|
330
|
+
customClassName: "classTeste",
|
|
331
|
+
title: securityTitle || 'Dados Alterados',
|
|
332
|
+
text: securityText || 'Vocẽ possui dados alterados, confirma o fechamento?',
|
|
333
|
+
visible: securityBeforeUnload && showQuestion,
|
|
334
|
+
onConfirmClick: onConfirmClick,
|
|
335
|
+
onUnconfirmClick: onUnconfirmClick
|
|
336
|
+
}));
|
|
285
337
|
}
|
|
286
338
|
}], [{
|
|
287
339
|
key: "getDerivedStateFromProps",
|
|
@@ -293,7 +345,7 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
293
345
|
return {
|
|
294
346
|
submitFormOnEnter: submitOnPressEnterKey,
|
|
295
347
|
data: dataSource,
|
|
296
|
-
originalData: dataSource
|
|
348
|
+
originalData: state.originalData || dataSource
|
|
297
349
|
};
|
|
298
350
|
}
|
|
299
351
|
|
|
@@ -304,6 +356,12 @@ var Form = /*#__PURE__*/function (_Component) {
|
|
|
304
356
|
return Form;
|
|
305
357
|
}(_react.Component);
|
|
306
358
|
|
|
359
|
+
Object.defineProperty(Form, "contextType", {
|
|
360
|
+
configurable: true,
|
|
361
|
+
enumerable: true,
|
|
362
|
+
writable: true,
|
|
363
|
+
value: _withFormSecurity.FormSecurityContext
|
|
364
|
+
});
|
|
307
365
|
Form.propTypes = {
|
|
308
366
|
dataSource: _propTypes["default"].object.isRequired,
|
|
309
367
|
children: _propTypes["default"].any.isRequired,
|
|
@@ -315,7 +373,11 @@ Form.propTypes = {
|
|
|
315
373
|
submitOnPressEnterKey: _propTypes["default"].bool,
|
|
316
374
|
style: _propTypes["default"].object,
|
|
317
375
|
customClass: _propTypes["default"].string,
|
|
318
|
-
onDataChange: _propTypes["default"].func
|
|
376
|
+
onDataChange: _propTypes["default"].func,
|
|
377
|
+
securityBeforeUnload: _propTypes["default"].bool,
|
|
378
|
+
securityTitle: _propTypes["default"].string,
|
|
379
|
+
securityText: _propTypes["default"].string,
|
|
380
|
+
externalFieldErrors: _propTypes["default"].object
|
|
319
381
|
};
|
|
320
382
|
Form.defaultProps = {
|
|
321
383
|
onValidateForm: undefined,
|
|
@@ -324,7 +386,11 @@ Form.defaultProps = {
|
|
|
324
386
|
handlerReset: undefined,
|
|
325
387
|
handlerValidates: undefined,
|
|
326
388
|
customClass: '',
|
|
327
|
-
onDataChange: undefined
|
|
389
|
+
onDataChange: undefined,
|
|
390
|
+
securityBeforeUnload: false,
|
|
391
|
+
securityTitle: null,
|
|
392
|
+
securityText: null,
|
|
393
|
+
externalFieldErrors: {}
|
|
328
394
|
};
|
|
329
395
|
var _default = Form;
|
|
330
396
|
exports["default"] = _default;
|
package/lib/form/withFieldHOC.js
CHANGED
|
@@ -151,6 +151,7 @@ function withFieldHOC(WrappedComponent) {
|
|
|
151
151
|
handlerFieldValidade = _ref.handlerFieldValidade,
|
|
152
152
|
data = _ref.data,
|
|
153
153
|
fieldErrors = _ref.fieldErrors,
|
|
154
|
+
externalFieldErrors = _ref.externalFieldErrors,
|
|
154
155
|
handlerStoreValidators = _ref.handlerStoreValidators,
|
|
155
156
|
handlerRemoveValidators = _ref.handlerRemoveValidators;
|
|
156
157
|
return /*#__PURE__*/_react["default"].createElement(FieldHOC, _extends({}, props, {
|
|
@@ -160,6 +161,7 @@ function withFieldHOC(WrappedComponent) {
|
|
|
160
161
|
handlerRemoveValidators: handlerRemoveValidators,
|
|
161
162
|
data: data,
|
|
162
163
|
fieldErrors: fieldErrors,
|
|
164
|
+
externalFieldErrors: externalFieldErrors,
|
|
163
165
|
forwardedRef: ref
|
|
164
166
|
}));
|
|
165
167
|
});
|