linear-react-components-ui 0.4.75-beta.9 → 0.4.76-rc.1
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/.eslintrc.js +2 -5
- package/.tool-versions +1 -0
- package/.vscode/settings.json +8 -9
- package/README.md +23 -0
- package/config/jest/cssTransform.js +14 -0
- package/config/jest/fileTransform.js +12 -0
- package/config/jest/storageMock.js +40 -0
- package/jest.config.js +18 -0
- package/lib/alerts/AlertProvider.js +1 -1
- package/lib/alerts/BaseAlert.js +1 -1
- package/lib/alerts/alert.spec.js +133 -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/popover.scss +9 -11
- 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 +77 -43
- package/lib/avatar/avatar.spec.js +190 -0
- package/lib/avatar/index.js +6 -2
- package/lib/badge/badge.spec.js +127 -0
- package/lib/badge/index.js +3 -5
- package/lib/buttons/DefaultButton.js +1 -1
- package/lib/buttons/buttons.spec.js +504 -0
- package/lib/buttons/index.js +28 -28
- package/lib/calendar/base/helpers.js +6 -6
- package/lib/calendar/base/index.js +1 -1
- package/lib/calendar/calendar.spec.js +171 -0
- package/lib/calendar/index.js +10 -10
- package/lib/checkbox/checkbox.spec.js +215 -0
- package/lib/checkbox/index.js +2 -1
- package/lib/dialog/Custom.js +7 -1
- package/lib/dialog/base/index.js +18 -6
- package/lib/dialog/dialog.spec.js +488 -0
- package/lib/dialog/form/index.js +23 -4
- package/lib/dialog/index.js +6 -6
- package/lib/drawer/Drawer.js +4 -1
- package/lib/drawer/Drawer.spec.js +258 -0
- package/lib/drawer/Header.js +4 -1
- package/lib/drawer/index.js +8 -5
- package/lib/dropdown/Popup.js +1 -0
- package/lib/dropdown/dropdown.spec.js +168 -0
- package/lib/dropdown/withDropdown.js +12 -6
- package/lib/fieldset/fieldset.spec.js +329 -0
- package/lib/fieldset/index.js +1 -1
- package/lib/form/Field.js +3 -1
- package/lib/form/FieldNumber.js +10 -2
- package/lib/form/FieldPeriod.js +100 -0
- package/lib/form/form.spec.js +285 -0
- package/lib/form/helpers.js +9 -1
- package/lib/form/index.js +79 -15
- package/lib/form/withFieldHOC.js +3 -1
- package/lib/form/withFormSecurity.js +106 -0
- package/lib/gridlayout/GridRow.js +1 -1
- package/lib/gridlayout/gridLayout.spec.js +169 -0
- package/lib/icons/helper.js +16 -0
- package/lib/icons/icons.spec.js +86 -0
- package/lib/icons/index.js +2 -0
- package/lib/index.js +12 -12
- package/lib/inputs/base/InputTextBase.js +16 -6
- package/lib/inputs/base/base.spec.js +690 -0
- package/lib/inputs/base/helpers.js +1 -1
- package/lib/inputs/color/color_input.spec.js +174 -0
- package/lib/inputs/color/index.js +3 -3
- package/lib/inputs/date/Dropdown.js +1 -1
- package/lib/inputs/date/date.spec.js +344 -0
- package/lib/inputs/date/index.js +8 -7
- package/lib/inputs/inputHOC.js +1 -1
- package/lib/inputs/mask/Cnpj.js +1 -1
- package/lib/inputs/mask/Cpf.js +10 -10
- package/lib/inputs/mask/helpers.js +2 -2
- package/lib/inputs/mask/imaskHOC.js +1 -1
- package/lib/inputs/mask/index.js +4 -4
- package/lib/inputs/mask/input_mask.spec.js +590 -0
- 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/format_number.js +1 -1
- package/lib/inputs/number/index.js +7 -5
- package/lib/inputs/number/numberfield.spec.js +215 -0
- 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/search/index.js +1 -1
- package/lib/inputs/search/search_input.spec.js +209 -0
- package/lib/inputs/select/Dropdown.js +5 -5
- package/lib/inputs/select/helper.js +1 -1
- package/lib/inputs/select/index.js +26 -3
- package/lib/inputs/select/multiple/index.js +10 -8
- package/lib/inputs/select/select.spec.js +391 -0
- package/lib/inputs/select/simple/index.js +31 -19
- package/lib/inputs/text/textfield.spec.js +215 -0
- package/lib/inputs/textarea/textarea.spec.js +59 -0
- package/lib/internals/constants.js +1 -1
- package/lib/internals/withTooltip.js +84 -83
- package/lib/labelMessages/index.js +4 -3
- package/lib/labelMessages/labelMessages.spec.js +176 -0
- package/lib/labels/DefaultLabel.js +1 -1
- package/lib/labels/index.js +10 -10
- package/lib/labels/label.spec.js +162 -0
- package/lib/list/Item.js +4 -4
- package/lib/list/index.js +22 -11
- package/lib/list/list.spec.js +611 -0
- package/lib/menus/float/MenuItem.js +25 -8
- package/lib/menus/float/float-menu.spec.js +221 -0
- package/lib/menus/sidenav/NavMenuItem.js +1 -1
- package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +16 -12
- package/lib/menus/sidenav/popup_menu_search/index.js +2 -2
- package/lib/menus/sidenav/sidenav.spec.js +312 -0
- package/lib/noPermission/index.js +2 -1
- package/lib/panel/Default.js +1 -1
- package/lib/panel/helpers.js +1 -1
- package/lib/panel/index.js +14 -14
- package/lib/panel/panel.spec.js +216 -0
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/index.js +2 -1
- package/lib/popover/popover.spec.js +146 -0
- package/lib/progress/Bar.js +40 -9
- package/lib/progress/index.js +12 -4
- package/lib/progress/progress.spec.js +86 -0
- package/lib/radio/index.js +1 -1
- package/lib/radio/radio.spec.js +189 -0
- package/lib/spinner/SpinnerLoading.js +14 -24
- package/lib/spinner/index.js +7 -2
- package/lib/spinner/spinner.spec.js +152 -0
- package/lib/split/Split.js +11 -13
- package/lib/split/split.spec.js +151 -0
- package/lib/table/Header.js +3 -1
- package/lib/table/Row.js +2 -5
- package/lib/table/helpers.js +1 -1
- package/lib/table/index.js +10 -13
- package/lib/table/table.spec.js +352 -0
- 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 +2 -4
- package/lib/tabs/index.js +127 -18
- package/lib/tabs/tabHelpers.js +3 -2
- package/lib/tabs/tabs.spec.js +346 -0
- package/lib/toolbar/index.js +16 -12
- package/lib/toolbar/toolbar.spec.js +394 -0
- package/lib/tooltip/index.js +13 -0
- package/lib/tooltip/tooltip.spec.js +203 -0
- package/lib/treeview/Node.js +32 -28
- package/lib/treeview/index.js +27 -4
- package/lib/treeview/treeview.spec.js +261 -0
- package/lib/treeview_old/Node.js +1 -1
- package/package.json +19 -9
- package/.DS_Store +0 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
5
|
+
var _react2 = require("@testing-library/react");
|
|
6
|
+
|
|
7
|
+
require("@testing-library/jest-dom/extend-expect");
|
|
8
|
+
|
|
9
|
+
var _index = _interopRequireDefault(require("./index"));
|
|
10
|
+
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
|
|
13
|
+
describe('TextArea', function () {
|
|
14
|
+
var textArea = function textArea(textAreaProps) {
|
|
15
|
+
return /*#__PURE__*/_react["default"].createElement(_index["default"], textAreaProps);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
it('should render correctly', function () {
|
|
19
|
+
var _render = (0, _react2.render)(textArea()),
|
|
20
|
+
container = _render.container;
|
|
21
|
+
|
|
22
|
+
var textAreaHTML = container.querySelector('textarea.textinput');
|
|
23
|
+
expect(container.firstChild).toHaveClass('textarea-container');
|
|
24
|
+
expect(textAreaHTML).toBeInTheDocument();
|
|
25
|
+
expect(textAreaHTML.type).toBe('textarea');
|
|
26
|
+
});
|
|
27
|
+
it('should apply customClass', function () {
|
|
28
|
+
var customClass = 'teste-textarea';
|
|
29
|
+
|
|
30
|
+
var _render2 = (0, _react2.render)(textArea({
|
|
31
|
+
customClass: customClass
|
|
32
|
+
})),
|
|
33
|
+
container = _render2.container;
|
|
34
|
+
|
|
35
|
+
expect(container.firstChild).toHaveClass(customClass);
|
|
36
|
+
});
|
|
37
|
+
it('should apply rows', function () {
|
|
38
|
+
var rows = '12';
|
|
39
|
+
|
|
40
|
+
var _render3 = (0, _react2.render)(textArea({
|
|
41
|
+
rows: rows
|
|
42
|
+
})),
|
|
43
|
+
container = _render3.container;
|
|
44
|
+
|
|
45
|
+
var textAreaHTML = container.querySelector('textarea.textinput');
|
|
46
|
+
expect(textAreaHTML.rows).toBe(parseInt(rows, 10));
|
|
47
|
+
});
|
|
48
|
+
it('should apply cols', function () {
|
|
49
|
+
var cols = '12';
|
|
50
|
+
|
|
51
|
+
var _render4 = (0, _react2.render)(textArea({
|
|
52
|
+
cols: cols
|
|
53
|
+
})),
|
|
54
|
+
container = _render4.container;
|
|
55
|
+
|
|
56
|
+
var textAreaHTML = container.querySelector('textarea.textinput');
|
|
57
|
+
expect(textAreaHTML.cols).toBe(parseInt(cols, 10));
|
|
58
|
+
});
|
|
59
|
+
});
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.keyCodes = exports.PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = void 0;
|
|
7
7
|
var keyCodes = {
|
|
8
8
|
TAB: 9,
|
|
9
9
|
ENTER: 13,
|
|
@@ -29,10 +29,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
29
29
|
|
|
30
30
|
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; }
|
|
31
31
|
|
|
32
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr
|
|
32
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
33
33
|
|
|
34
34
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
35
|
|
|
36
|
+
var TOOLTIP_INITIAL_HEIGHT = 40;
|
|
37
|
+
|
|
36
38
|
var hasTooltip = function hasTooltip(_ref) {
|
|
37
39
|
var tooltip = _ref.tooltip;
|
|
38
40
|
return tooltip;
|
|
@@ -45,38 +47,36 @@ var getDisplayName = function getDisplayName(WrappedComponent) {
|
|
|
45
47
|
var withTooltip = function withTooltip(WrappedComponent) {
|
|
46
48
|
var EnhancedComponent = function EnhancedComponent(props) {
|
|
47
49
|
var tooltip = props.tooltip,
|
|
48
|
-
tooltipPosition = props.tooltipPosition,
|
|
49
50
|
tooltipWidth = props.tooltipWidth,
|
|
50
51
|
space = props.space;
|
|
51
52
|
|
|
52
|
-
var _useState = (0, _react.useState)(
|
|
53
|
+
var _useState = (0, _react.useState)(props.tooltipPosition),
|
|
53
54
|
_useState2 = _slicedToArray(_useState, 2),
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
tooltipPosition = _useState2[0],
|
|
56
|
+
setTooltipPosition = _useState2[1];
|
|
56
57
|
|
|
57
|
-
var _useState3 = (0, _react.useState)(
|
|
58
|
-
width: tooltipWidth,
|
|
59
|
-
height: undefined
|
|
60
|
-
}),
|
|
58
|
+
var _useState3 = (0, _react.useState)(''),
|
|
61
59
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
tooltipStyle = _useState4[0],
|
|
61
|
+
setTooltipStyle = _useState4[1];
|
|
64
62
|
|
|
65
|
-
var _useState5 = (0, _react.useState)(
|
|
63
|
+
var _useState5 = (0, _react.useState)(false),
|
|
66
64
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
showTooltip = _useState6[0],
|
|
66
|
+
setShowTooltip = _useState6[1];
|
|
69
67
|
|
|
70
|
-
var _useState7 = (0, _react.useState)(
|
|
68
|
+
var _useState7 = (0, _react.useState)({
|
|
69
|
+
width: tooltipWidth,
|
|
70
|
+
height: TOOLTIP_INITIAL_HEIGHT
|
|
71
|
+
}),
|
|
71
72
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
tooltipDimensions = _useState8[0],
|
|
74
|
+
setTooltipDimensions = _useState8[1];
|
|
74
75
|
|
|
75
|
-
var scrollableParent = (0, _react.useRef)();
|
|
76
76
|
var targetElement = (0, _react.useRef)();
|
|
77
77
|
|
|
78
78
|
var onMouseOver = function onMouseOver(e) {
|
|
79
|
-
if (targetElement.current
|
|
79
|
+
if (targetElement.current.contains(e.target)) {
|
|
80
80
|
setShowTooltip(true);
|
|
81
81
|
} else setShowTooltip(false);
|
|
82
82
|
};
|
|
@@ -85,58 +85,24 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
85
85
|
setShowTooltip(false);
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
-
var
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
if (targetElement.current && dimensionsTargetElement !== currentDimensions) {
|
|
92
|
-
return setDimensionsTargetElement(currentDimensions);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
return null;
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
var getScrollableParent = function getScrollableParent(node) {
|
|
99
|
-
if (node === null || node.nodeName === '#document') {
|
|
100
|
-
return setFindScrollableParent(false);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
var _window$getComputedSt = window.getComputedStyle(node),
|
|
104
|
-
overflowY = _window$getComputedSt.overflowY;
|
|
105
|
-
|
|
106
|
-
var isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
|
|
107
|
-
|
|
108
|
-
if (isScrollable && node.scrollHeight > node.clientHeight) {
|
|
109
|
-
scrollableParent.current = node;
|
|
110
|
-
return setFindScrollableParent(false);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
return getScrollableParent(node.parentNode);
|
|
88
|
+
var onAnyScroll = function onAnyScroll() {
|
|
89
|
+
setShowTooltip(false);
|
|
114
90
|
};
|
|
115
91
|
|
|
116
92
|
(0, _react.useEffect)(function () {
|
|
117
93
|
if (hasTooltip(props)) {
|
|
118
94
|
document.addEventListener('mouseover', onMouseOver);
|
|
95
|
+
document.addEventListener('scroll', onAnyScroll, true);
|
|
119
96
|
|
|
120
97
|
if (targetElement && targetElement.current) {
|
|
121
98
|
targetElement.current.addEventListener('mouseout', onMouseOut);
|
|
122
99
|
}
|
|
123
|
-
|
|
124
|
-
if (targetElement && targetElement.current && findScrollableParent) {
|
|
125
|
-
getScrollableParent(targetElement.current);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
if (scrollableParent && scrollableParent.current) {
|
|
129
|
-
scrollableParent.current.addEventListener('scroll', onParentScroll);
|
|
130
|
-
}
|
|
131
100
|
}
|
|
132
101
|
|
|
133
102
|
return function () {
|
|
134
103
|
if (hasTooltip(props)) {
|
|
135
104
|
document.removeEventListener('mouseover', onMouseOver);
|
|
136
|
-
|
|
137
|
-
if (scrollableParent && scrollableParent.current) {
|
|
138
|
-
scrollableParent.current.removeEventListener('scroll', onParentScroll);
|
|
139
|
-
}
|
|
105
|
+
document.removeEventListener('scroll', onAnyScroll, true);
|
|
140
106
|
|
|
141
107
|
if (targetElement && targetElement.current) {
|
|
142
108
|
targetElement.current.removeEventListener('mouseout', onMouseOut);
|
|
@@ -144,39 +110,74 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
144
110
|
}
|
|
145
111
|
};
|
|
146
112
|
}, []);
|
|
113
|
+
(0, _react.useEffect)(function () {
|
|
114
|
+
if (targetElement.current) {
|
|
115
|
+
var width = tooltipDimensions.width,
|
|
116
|
+
height = tooltipDimensions.height;
|
|
117
|
+
var targetDimensions = targetElement.current.getBoundingClientRect();
|
|
118
|
+
var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
119
|
+
var style = "width: ".concat(width, "px");
|
|
120
|
+
var left = targetDimensions.left + targetDimensions.width / 2 - width / 2;
|
|
121
|
+
left = Math.min(left, document.body.clientWidth - width - space);
|
|
122
|
+
style += "; left: ".concat(Math.max(space, left), "px");
|
|
123
|
+
|
|
124
|
+
switch (tooltipPosition) {
|
|
125
|
+
case 'top':
|
|
126
|
+
if (targetDimensions.top < height) {
|
|
127
|
+
setTooltipPosition('bottom');
|
|
128
|
+
} else {
|
|
129
|
+
style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
break;
|
|
133
|
+
|
|
134
|
+
case 'bottom':
|
|
135
|
+
if (window.innerHeight - targetDimensions.bottom < height) {
|
|
136
|
+
setTooltipPosition('top');
|
|
137
|
+
} else {
|
|
138
|
+
style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
break;
|
|
142
|
+
|
|
143
|
+
case 'left':
|
|
144
|
+
if (targetDimensions.left < width) {
|
|
145
|
+
setTooltipPosition('right');
|
|
146
|
+
} else {
|
|
147
|
+
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
148
|
+
style += "; left: ".concat(targetDimensions.left - width - 6, "px");
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
break;
|
|
152
|
+
|
|
153
|
+
case 'right':
|
|
154
|
+
if (window.innerWidth - targetDimensions.right < width) {
|
|
155
|
+
setTooltipPosition('left');
|
|
156
|
+
} else {
|
|
157
|
+
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
158
|
+
style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
break;
|
|
162
|
+
|
|
163
|
+
default:
|
|
164
|
+
style += '';
|
|
165
|
+
}
|
|
147
166
|
|
|
148
|
-
|
|
149
|
-
// where on the screen is the target
|
|
150
|
-
var width = tooltipDimensions.width,
|
|
151
|
-
height = tooltipDimensions.height;
|
|
152
|
-
var targetDimensions = dimensionsTargetElement || targetElement.current.getBoundingClientRect();
|
|
153
|
-
var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
154
|
-
var style = "width: ".concat(width + 2, "px");
|
|
155
|
-
var left = targetDimensions.left + targetDimensions.width / 2 - width / 2;
|
|
156
|
-
left = Math.min(left, document.body.clientWidth - width - space);
|
|
157
|
-
style += "; left: ".concat(Math.max(space, left), "px"); // when the position is informed
|
|
158
|
-
|
|
159
|
-
if (tooltipPosition === 'top') {
|
|
160
|
-
style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
|
|
161
|
-
} else if (tooltipPosition === 'bottom') {
|
|
162
|
-
style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
|
|
163
|
-
} else if (tooltipPosition === 'left') {
|
|
164
|
-
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
165
|
-
style += "; left: ".concat(targetDimensions.left - width - 6, "px");
|
|
166
|
-
} else if (tooltipPosition === 'right') {
|
|
167
|
-
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
168
|
-
style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
|
|
167
|
+
setTooltipStyle(style);
|
|
169
168
|
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
169
|
+
}, [tooltipDimensions, targetElement.current, tooltipPosition]);
|
|
170
|
+
(0, _react.useEffect)(function () {
|
|
171
|
+
setTooltipPosition(props.tooltipPosition);
|
|
172
|
+
}, [window.scrollY, window.scrollX, window.innerWidth]);
|
|
173
173
|
|
|
174
174
|
var getTooltip = function getTooltip() {
|
|
175
175
|
if (tooltip) {
|
|
176
176
|
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
|
|
177
177
|
text: tooltip,
|
|
178
|
-
style:
|
|
178
|
+
style: tooltipStyle,
|
|
179
179
|
className: tooltipPosition,
|
|
180
|
+
tooltipDimensions: tooltipDimensions,
|
|
180
181
|
handlerSetDimensions: setTooltipDimensions
|
|
181
182
|
});
|
|
182
183
|
}
|
|
@@ -201,7 +202,7 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
201
202
|
tooltipPosition: _propTypes["default"].string
|
|
202
203
|
};
|
|
203
204
|
EnhancedComponent.defaultProps = {
|
|
204
|
-
tooltipWidth:
|
|
205
|
+
tooltipWidth: undefined,
|
|
205
206
|
space: 20,
|
|
206
207
|
tooltip: '',
|
|
207
208
|
tooltipPosition: 'bottom'
|
|
@@ -29,7 +29,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
29
29
|
|
|
30
30
|
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; }
|
|
31
31
|
|
|
32
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr
|
|
32
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
33
33
|
|
|
34
34
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
35
|
|
|
@@ -48,7 +48,8 @@ var LabelMessages = function LabelMessages(props) {
|
|
|
48
48
|
showCloseButton = props.showCloseButton,
|
|
49
49
|
type = props.type,
|
|
50
50
|
flat = props.flat,
|
|
51
|
-
square = props.square
|
|
51
|
+
square = props.square,
|
|
52
|
+
visible = props.visible;
|
|
52
53
|
|
|
53
54
|
var getClass = function getClass() {
|
|
54
55
|
return "labelmessages-component -".concat(type, " ").concat(customClass, "\n ").concat(square && '-square', " ").concat(flat && '-flat');
|
|
@@ -69,7 +70,7 @@ var LabelMessages = function LabelMessages(props) {
|
|
|
69
70
|
return null;
|
|
70
71
|
};
|
|
71
72
|
|
|
72
|
-
if (closed) return
|
|
73
|
+
if (closed || !visible) return null;
|
|
73
74
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
74
75
|
className: "".concat(getClass(), " ").concat(customClass),
|
|
75
76
|
style: style
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
5
|
+
var _react2 = require("@testing-library/react");
|
|
6
|
+
|
|
7
|
+
require("@testing-library/jest-dom/extend-expect");
|
|
8
|
+
|
|
9
|
+
require("babel-polyfill");
|
|
10
|
+
|
|
11
|
+
var _index = _interopRequireDefault(require("./index"));
|
|
12
|
+
|
|
13
|
+
var _icons = _interopRequireDefault(require("../icons"));
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
16
|
+
|
|
17
|
+
describe('LabelMessages', function () {
|
|
18
|
+
describe('Default', function () {
|
|
19
|
+
var Default = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
20
|
+
icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
|
|
21
|
+
name: "user"
|
|
22
|
+
})
|
|
23
|
+
}, "Teste");
|
|
24
|
+
|
|
25
|
+
it('should render correctly', function () {
|
|
26
|
+
var _render = (0, _react2.render)(Default),
|
|
27
|
+
container = _render.container;
|
|
28
|
+
|
|
29
|
+
expect(container.firstChild).toHaveTextContent('Teste');
|
|
30
|
+
});
|
|
31
|
+
it('should render icon', function () {
|
|
32
|
+
var _render2 = (0, _react2.render)(Default),
|
|
33
|
+
getByTestId = _render2.getByTestId;
|
|
34
|
+
|
|
35
|
+
expect(getByTestId('icon')).toBeTruthy();
|
|
36
|
+
});
|
|
37
|
+
it('should render icon when use iconName', function () {
|
|
38
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
39
|
+
iconName: "user"
|
|
40
|
+
}, "Teste")),
|
|
41
|
+
getByTestId = _render3.getByTestId;
|
|
42
|
+
|
|
43
|
+
expect(getByTestId('icon')).toBeTruthy();
|
|
44
|
+
});
|
|
45
|
+
it('should render close button', function () {
|
|
46
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
47
|
+
showCloseButton: true
|
|
48
|
+
}, "Teste")),
|
|
49
|
+
getByRole = _render4.getByRole;
|
|
50
|
+
|
|
51
|
+
expect(getByRole('presentation')).toBeTruthy();
|
|
52
|
+
});
|
|
53
|
+
it('should execute function when clicking the close button', function () {
|
|
54
|
+
var mockHandlerClosed = jest.fn();
|
|
55
|
+
|
|
56
|
+
var mockLabelMessage = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
57
|
+
showCloseButton: true,
|
|
58
|
+
handlerClosed: mockHandlerClosed
|
|
59
|
+
}, "Teste");
|
|
60
|
+
|
|
61
|
+
(0, _react2.render)(mockLabelMessage);
|
|
62
|
+
|
|
63
|
+
_react2.fireEvent.click(_react2.screen.getByRole('presentation'));
|
|
64
|
+
|
|
65
|
+
expect(mockHandlerClosed).toHaveBeenCalled();
|
|
66
|
+
});
|
|
67
|
+
it('should close labelMessage', function () {
|
|
68
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
69
|
+
showCloseButton: true
|
|
70
|
+
}, "Teste")),
|
|
71
|
+
container = _render5.container;
|
|
72
|
+
|
|
73
|
+
_react2.fireEvent.click(_react2.screen.getByRole('presentation'));
|
|
74
|
+
|
|
75
|
+
expect(container.firstChild).not.toBeInTheDocument();
|
|
76
|
+
});
|
|
77
|
+
it('should apply customClass', function () {
|
|
78
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
79
|
+
customClass: "customClass"
|
|
80
|
+
}, "Teste")),
|
|
81
|
+
container = _render6.container;
|
|
82
|
+
|
|
83
|
+
expect(container.firstChild).toHaveClass('customClass');
|
|
84
|
+
});
|
|
85
|
+
it('should apply inline style', function () {
|
|
86
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
87
|
+
style: {
|
|
88
|
+
borderWidth: 10
|
|
89
|
+
}
|
|
90
|
+
}, "Teste")),
|
|
91
|
+
container = _render7.container;
|
|
92
|
+
|
|
93
|
+
expect(container.firstChild).toHaveStyle('border-width: 10px');
|
|
94
|
+
});
|
|
95
|
+
it('should hide labelMessage when visible is false', function () {
|
|
96
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
97
|
+
visible: false
|
|
98
|
+
}, "Teste")),
|
|
99
|
+
container = _render8.container;
|
|
100
|
+
|
|
101
|
+
expect(container.firstChild).not.toBeTruthy();
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
describe('Danger', function () {
|
|
105
|
+
var dangerLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
106
|
+
type: "danger"
|
|
107
|
+
}, "Teste");
|
|
108
|
+
|
|
109
|
+
it('should apply type danger', function () {
|
|
110
|
+
var _render9 = (0, _react2.render)(dangerLabelMessages),
|
|
111
|
+
container = _render9.container;
|
|
112
|
+
|
|
113
|
+
expect(container.firstChild).toHaveClass('-danger');
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
describe('Info', function () {
|
|
117
|
+
var infoLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
118
|
+
type: "info"
|
|
119
|
+
}, "Teste");
|
|
120
|
+
|
|
121
|
+
it('should apply type info', function () {
|
|
122
|
+
var _render10 = (0, _react2.render)(infoLabelMessages),
|
|
123
|
+
container = _render10.container;
|
|
124
|
+
|
|
125
|
+
expect(container.firstChild).toHaveClass('-info');
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
describe('Warning', function () {
|
|
129
|
+
var warningLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
130
|
+
type: "warning"
|
|
131
|
+
}, "Teste");
|
|
132
|
+
|
|
133
|
+
it('should apply type warning', function () {
|
|
134
|
+
var _render11 = (0, _react2.render)(warningLabelMessages),
|
|
135
|
+
container = _render11.container;
|
|
136
|
+
|
|
137
|
+
expect(container.firstChild).toHaveClass('-warning');
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
describe('Success', function () {
|
|
141
|
+
var successLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
142
|
+
type: "success"
|
|
143
|
+
}, "Teste");
|
|
144
|
+
|
|
145
|
+
it('should apply type success', function () {
|
|
146
|
+
var _render12 = (0, _react2.render)(successLabelMessages),
|
|
147
|
+
container = _render12.container;
|
|
148
|
+
|
|
149
|
+
expect(container.firstChild).toHaveClass('-success');
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
describe('Flat', function () {
|
|
153
|
+
var flatLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
154
|
+
flat: true
|
|
155
|
+
}, "Teste");
|
|
156
|
+
|
|
157
|
+
it('should apply rounded border', function () {
|
|
158
|
+
var _render13 = (0, _react2.render)(flatLabelMessages),
|
|
159
|
+
container = _render13.container;
|
|
160
|
+
|
|
161
|
+
expect(container.firstChild).toHaveClass('-flat');
|
|
162
|
+
});
|
|
163
|
+
});
|
|
164
|
+
describe('Square', function () {
|
|
165
|
+
var squareLabelMessages = /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
166
|
+
square: true
|
|
167
|
+
}, "Teste");
|
|
168
|
+
|
|
169
|
+
it('should apply rounded borderless', function () {
|
|
170
|
+
var _render14 = (0, _react2.render)(squareLabelMessages),
|
|
171
|
+
container = _render14.container;
|
|
172
|
+
|
|
173
|
+
expect(container.firstChild).toHaveClass('-square');
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
});
|
|
@@ -31,7 +31,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
31
31
|
|
|
32
32
|
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; }
|
|
33
33
|
|
|
34
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr
|
|
34
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
35
35
|
|
|
36
36
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
37
37
|
|
package/lib/labels/index.js
CHANGED
|
@@ -3,28 +3,28 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "DangerLabel", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _DangerLabel["default"];
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "
|
|
12
|
+
Object.defineProperty(exports, "InfoLabel", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function get() {
|
|
15
|
-
return
|
|
15
|
+
return _InfoLabel["default"];
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
Object.defineProperty(exports, "
|
|
18
|
+
Object.defineProperty(exports, "LabelContainer", {
|
|
19
19
|
enumerable: true,
|
|
20
20
|
get: function get() {
|
|
21
|
-
return
|
|
21
|
+
return _label_container["default"];
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
Object.defineProperty(exports, "
|
|
24
|
+
Object.defineProperty(exports, "PrimaryLabel", {
|
|
25
25
|
enumerable: true,
|
|
26
26
|
get: function get() {
|
|
27
|
-
return
|
|
27
|
+
return _PrimaryLabel["default"];
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
Object.defineProperty(exports, "SuccessLabel", {
|
|
@@ -33,10 +33,10 @@ Object.defineProperty(exports, "SuccessLabel", {
|
|
|
33
33
|
return _SuccessLabel["default"];
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
-
Object.defineProperty(exports, "
|
|
36
|
+
Object.defineProperty(exports, "WarningLabel", {
|
|
37
37
|
enumerable: true,
|
|
38
38
|
get: function get() {
|
|
39
|
-
return
|
|
39
|
+
return _WarningLabel["default"];
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
exports["default"] = void 0;
|