linear-react-components-ui 1.1.20-beta.34 → 1.1.20-beta.35
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/alerts/BaseAlert.js +1 -1
- package/lib/alerts/Message.js +1 -1
- package/lib/avatar/index.js +8 -9
- package/lib/badge/index.js +4 -4
- package/lib/buttons/DangerButton.js +1 -1
- package/lib/buttons/DefaultButton.js +3 -22
- package/lib/buttons/InfoButton.js +1 -1
- package/lib/buttons/PrimaryButton.js +1 -1
- package/lib/buttons/SuccessButton.js +1 -1
- package/lib/buttons/WarningButton.js +1 -1
- package/lib/buttons/button_container/index.js +1 -1
- package/lib/buttons/split_button/index.js +1 -1
- package/lib/calendar/base/Day.js +1 -1
- package/lib/calendar/base/Month.js +1 -1
- package/lib/calendar/base/helpers.js +2 -2
- package/lib/calendar/base/index.js +1 -1
- package/lib/checkbox/Label.js +31 -0
- package/lib/checkbox/index.js +1 -1
- package/lib/dialog/Custom.js +1 -1
- package/lib/dialog/Question.js +4 -2
- package/lib/dialog/base/Content.js +1 -1
- package/lib/dialog/base/Header.js +2 -2
- package/lib/dialog/base/index.js +5 -8
- package/lib/dialog/form/index.js +2 -2
- package/lib/dialog/types.d.ts +0 -1
- package/lib/dialog/wizard/progressbar.js +1 -1
- package/lib/dialog/wizard/step.js +1 -1
- package/lib/drawer/Drawer.js +3 -3
- package/lib/drawer/Header.js +1 -1
- package/lib/dropdown/Popup.js +6 -6
- package/lib/dropdown/helper.js +1 -1
- package/lib/dropdown/withDropdown.js +2 -2
- package/lib/fieldset/index.js +7 -7
- package/lib/form/Field.js +14 -3
- package/lib/form/FieldArray.js +1 -1
- package/lib/form/FieldNumber.js +10 -7
- package/lib/form/FieldPeriod.js +2 -2
- package/lib/form/index.js +15 -20
- package/lib/gridlayout/GridCol.js +5 -5
- package/lib/gridlayout/GridRow.js +1 -4
- package/lib/hint/index.js +1 -7
- package/lib/icons/helper.d.ts +0 -4
- package/lib/icons/helper.js +0 -4
- package/lib/icons/index.js +27 -24
- package/lib/inputs/base/InputTextBase.js +8 -6
- package/lib/inputs/base/Label.js +1 -1
- package/lib/inputs/base/helpers.js +3 -7
- package/lib/inputs/date/helpers.js +1 -4
- package/lib/inputs/date/index.js +15 -9
- package/lib/inputs/errorMessage/index.js +1 -1
- package/lib/inputs/file/DefaultFile.js +6 -5
- package/lib/inputs/file/DragDropFile.js +17 -15
- package/lib/inputs/file/File.js +4 -3
- package/lib/inputs/mask/BaseMask.js +1 -4
- package/lib/inputs/mask/helpers.d.ts +1 -1
- package/lib/inputs/mask/imaskHOC.js +203 -0
- package/lib/inputs/multiSelect/Dropdown.js +10 -9
- package/lib/inputs/multiSelect/helper.js +2 -1
- package/lib/inputs/multiSelect/index.js +9 -7
- package/lib/inputs/number/index.js +2 -1
- package/lib/inputs/period/PeriodList.js +1 -1
- package/lib/inputs/period/helper.js +1 -3
- package/lib/inputs/period/index.js +14 -9
- package/lib/inputs/search/index.js +1 -1
- package/lib/inputs/select/Dropdown.js +1 -1
- package/lib/inputs/select/helper.js +13 -10
- package/lib/inputs/select/multiple/Selecteds.js +1 -1
- package/lib/inputs/select/multiple/index.js +14 -9
- package/lib/inputs/select/simple/index.js +17 -10
- package/lib/inputs/textarea/index.js +1 -1
- package/lib/internals/withTooltip.js +9 -9
- package/lib/labelMessages/index.js +3 -4
- package/lib/labels/DefaultLabel.js +1 -4
- package/lib/labels/label_container/index.js +1 -1
- package/lib/list/Header.js +1 -1
- package/lib/list/Item.js +11 -21
- package/lib/list/index.js +1 -2
- package/lib/list/types.d.ts +1 -2
- package/lib/menus/float/MenuItem.js +2 -2
- package/lib/menus/float/SubMenuContainer.js +1 -1
- package/lib/menus/float/index.js +1 -1
- package/lib/menus/sidenav/ExpandMenu.js +1 -1
- package/lib/menus/sidenav/NavMenuGroup.js +1 -1
- package/lib/menus/sidenav/NavMenuItem.js +25 -27
- package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +31 -39
- package/lib/menus/sidenav/popup_menu_help/index.js +85 -0
- package/lib/menus/sidenav/types.d.ts +0 -1
- package/lib/panel/Content.js +7 -5
- package/lib/panel/Default.js +2 -2
- package/lib/panel/Header.js +3 -3
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/index.js +1 -1
- package/lib/progress/Bar.js +6 -6
- package/lib/radio/index.js +2 -2
- package/lib/shortcuts/index.js +1 -1
- package/lib/skeleton/SkeletonContainer.js +1 -2
- package/lib/skeleton/index.js +1 -4
- package/lib/spinner/index.js +2 -2
- package/lib/split/Split.js +1 -1
- package/lib/split/SplitSide.js +3 -3
- package/lib/table/Body.js +3 -3
- package/lib/table/Header.js +11 -8
- package/lib/table/HeaderColumn.js +1 -1
- package/lib/table/Row.js +3 -3
- package/lib/table/RowColumn.js +1 -1
- package/lib/table/index.js +1 -6
- package/lib/tabs/DropdownItems.js +62 -0
- package/lib/tabs/DropdownTabs.js +1 -1
- package/lib/tabs/Menu.js +1 -1
- package/lib/tabs/MenuItems.js +70 -0
- package/lib/tabs/MenuTabs.js +2 -2
- package/lib/tabs/Panel.js +7 -5
- package/lib/tabs/context.js +6 -3
- package/lib/textContent/index.js +2 -4
- package/lib/toolbar/ButtonBar.js +1 -1
- package/lib/toolbar/index.js +1 -1
- package/lib/tooltip/index.js +7 -7
- package/lib/treetable/Body.js +1 -1
- package/lib/treetable/Header.js +2 -2
- package/lib/treetable/Row.js +8 -8
- package/lib/treeview/Header.js +1 -1
- package/lib/treeview/Node.js +5 -5
- package/lib/treeview/index.js +4 -4
- package/lib/treeview_old/Header.js +29 -0
- package/lib/treeview_old/Node.js +68 -0
- package/lib/treeview_old/index.js +43 -0
- package/lib/uitour/index.js +8 -6
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.returnDropdownDynamicStyles = exports.getFilteredSimpleDataCombo = exports.getFilteredMultipleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
|
|
7
|
-
const contentClass = props =>
|
|
7
|
+
const contentClass = props => "content ".concat(props.showClearButton ? '' : 'noclear');
|
|
8
8
|
exports.contentClass = contentClass;
|
|
9
9
|
const getDropdownItemCssClass = (selected, disabled, striped) => {
|
|
10
10
|
let className = 'item';
|
|
@@ -21,10 +21,12 @@ const getFilteredSimpleDataCombo = _ref => {
|
|
|
21
21
|
inputText
|
|
22
22
|
} = _ref;
|
|
23
23
|
return dataSource && dataSource.filter(item => {
|
|
24
|
+
var _descriptionKey;
|
|
24
25
|
if (typeof descriptionKey === 'string') {
|
|
25
|
-
|
|
26
|
+
var _item$descriptionKey;
|
|
27
|
+
return ((_item$descriptionKey = item[descriptionKey]) === null || _item$descriptionKey === void 0 ? void 0 : _item$descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
|
|
26
28
|
}
|
|
27
|
-
return descriptionKey(item)
|
|
29
|
+
return ((_descriptionKey = descriptionKey(item)) === null || _descriptionKey === void 0 ? void 0 : _descriptionKey.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1;
|
|
28
30
|
});
|
|
29
31
|
};
|
|
30
32
|
exports.getFilteredSimpleDataCombo = getFilteredSimpleDataCombo;
|
|
@@ -36,10 +38,11 @@ const getFilteredMultipleDataCombo = _ref2 => {
|
|
|
36
38
|
currents
|
|
37
39
|
} = _ref2;
|
|
38
40
|
return dataSource.filter(item => {
|
|
41
|
+
var _descriptionKey2;
|
|
39
42
|
if (typeof descriptionKey === 'string') {
|
|
40
|
-
return item[descriptionKey].toLowerCase().indexOf(inputText
|
|
43
|
+
return item[descriptionKey].toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase()) > -1 && !currents.includes(item);
|
|
41
44
|
}
|
|
42
|
-
return descriptionKey(item)
|
|
45
|
+
return ((_descriptionKey2 = descriptionKey(item)) === null || _descriptionKey2 === void 0 ? void 0 : _descriptionKey2.toLowerCase().indexOf(inputText === null || inputText === void 0 ? void 0 : inputText.toString().toLowerCase())) > -1 && !currents.includes(item);
|
|
43
46
|
});
|
|
44
47
|
};
|
|
45
48
|
exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
|
|
@@ -51,7 +54,7 @@ const returnDropdownPosition = function (_ref3) {
|
|
|
51
54
|
} = _ref3;
|
|
52
55
|
let aboveDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
53
56
|
const DEFAULT_MARGIN_BOTTOM = 10;
|
|
54
|
-
if (aboveDropdown && dropdownRef
|
|
57
|
+
if (aboveDropdown && dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current && dropdownRects !== null && dropdownRects !== void 0 && dropdownRects.height) {
|
|
55
58
|
return selectFieldRects.top + window.scrollY - (dropdownRef.current && dropdownRects.height) - DEFAULT_MARGIN_BOTTOM;
|
|
56
59
|
}
|
|
57
60
|
return selectFieldRects.top + window.scrollY + selectFieldRects.height;
|
|
@@ -62,10 +65,10 @@ const returnDropdownDynamicStyles = _ref4 => {
|
|
|
62
65
|
dropdownMaxHeight,
|
|
63
66
|
dropdownRef
|
|
64
67
|
} = _ref4;
|
|
65
|
-
const selectFieldRects = selectFieldRef
|
|
66
|
-
const dropdownRects = dropdownRef
|
|
67
|
-
const selectFieldRectsBottom = selectFieldRects ? selectFieldRects
|
|
68
|
-
const selectFieldRectsTop = selectFieldRects ? selectFieldRects
|
|
68
|
+
const selectFieldRects = selectFieldRef !== null && selectFieldRef !== void 0 && selectFieldRef.current ? selectFieldRef.current.getBoundingClientRect() : undefined;
|
|
69
|
+
const dropdownRects = dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current ? dropdownRef.current.getBoundingClientRect() : undefined;
|
|
70
|
+
const selectFieldRectsBottom = selectFieldRects ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.bottom : 0;
|
|
71
|
+
const selectFieldRectsTop = selectFieldRects ? selectFieldRects === null || selectFieldRects === void 0 ? void 0 : selectFieldRects.top : 0;
|
|
69
72
|
const dropdownBottomDistance = window.innerHeight - selectFieldRectsBottom;
|
|
70
73
|
const bottomOffset = 30;
|
|
71
74
|
let maxDropdownBottomDistance = 200;
|
|
@@ -15,7 +15,7 @@ const Selecteds = _ref => {
|
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
|
|
17
17
|
className: "selecteditem",
|
|
18
|
-
key:
|
|
18
|
+
key: "selected-".concat(selected[idKey])
|
|
19
19
|
}, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("button", {
|
|
20
20
|
className: "close",
|
|
21
21
|
tabIndex: -1,
|
|
@@ -40,7 +40,7 @@ const MultipleSelect = props => {
|
|
|
40
40
|
const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
|
|
41
41
|
const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
|
|
42
42
|
const [valueFromProps, setValueFromProps] = (0, _react.useState)([]);
|
|
43
|
-
const componentId =
|
|
43
|
+
const componentId = "select-component".concat(uuid.v1());
|
|
44
44
|
const componentRef = (0, _react.useRef)(null);
|
|
45
45
|
const dropdownRef = (0, _react.useRef)(null);
|
|
46
46
|
const selectWrapper = (0, _react.useRef)();
|
|
@@ -60,10 +60,11 @@ const MultipleSelect = props => {
|
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
const onMouseMove = event => {
|
|
63
|
+
var _dropdownRef$current, _dropdownRef$current$;
|
|
63
64
|
const target = event.target;
|
|
64
|
-
const idDropdown = dropdownRef.current
|
|
65
|
+
const idDropdown = ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : (_dropdownRef$current$ = _dropdownRef$current.parentElement) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.id) || '';
|
|
65
66
|
const dropdownElement = document.getElementById(idDropdown);
|
|
66
|
-
const keepDropdownOpen = Boolean(dropdownElement
|
|
67
|
+
const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
|
|
67
68
|
setInsideComponent(keepDropdownOpen);
|
|
68
69
|
};
|
|
69
70
|
const onClearClick = () => {
|
|
@@ -100,6 +101,7 @@ const MultipleSelect = props => {
|
|
|
100
101
|
setDropdownWidth(dropdownWidthFocus);
|
|
101
102
|
};
|
|
102
103
|
const onSelect = select => {
|
|
104
|
+
var _dropdownRef$current2;
|
|
103
105
|
if (select === null) return;
|
|
104
106
|
const currentsSelect = [...currents, select];
|
|
105
107
|
setCurrents(currentsSelect);
|
|
@@ -107,16 +109,17 @@ const MultipleSelect = props => {
|
|
|
107
109
|
setInputValue([]);
|
|
108
110
|
if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
|
|
109
111
|
if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
|
|
110
|
-
dropdownRef.current
|
|
112
|
+
(_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.focus();
|
|
111
113
|
};
|
|
112
114
|
const onUnselect = id => {
|
|
113
115
|
if (currents) {
|
|
116
|
+
var _dropdownRef$current3;
|
|
114
117
|
const result = currents.filter(item => item[idKey] !== id);
|
|
115
118
|
setCurrents(result);
|
|
116
119
|
if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
|
|
117
120
|
setOpened(false);
|
|
118
121
|
if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
|
|
119
|
-
dropdownRef.current
|
|
122
|
+
(_dropdownRef$current3 = dropdownRef.current) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.focus();
|
|
120
123
|
}
|
|
121
124
|
};
|
|
122
125
|
const onOpenClose = () => {
|
|
@@ -133,9 +136,11 @@ const MultipleSelect = props => {
|
|
|
133
136
|
const onInputKeyDown = e => {
|
|
134
137
|
if (e.keyCode) {
|
|
135
138
|
if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
|
|
136
|
-
|
|
139
|
+
var _e$preventDefault;
|
|
140
|
+
(_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
|
|
137
141
|
if (!currents.some(current => current[idKey] === selected[idKey])) {
|
|
138
|
-
|
|
142
|
+
var _e$preventDefault2;
|
|
143
|
+
(_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
|
|
139
144
|
onSelect(selected);
|
|
140
145
|
}
|
|
141
146
|
} else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
|
|
@@ -181,7 +186,7 @@ const MultipleSelect = props => {
|
|
|
181
186
|
}, []);
|
|
182
187
|
(0, _react.useEffect)(() => {
|
|
183
188
|
if (props.gridLayout) {
|
|
184
|
-
const gridEl = document.querySelector(
|
|
189
|
+
const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
|
|
185
190
|
if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;
|
|
186
191
|
}
|
|
187
192
|
}, []);
|
|
@@ -233,7 +238,7 @@ const MultipleSelect = props => {
|
|
|
233
238
|
},
|
|
234
239
|
onClick: onFocus,
|
|
235
240
|
onKeyDown: onInputKeyDown,
|
|
236
|
-
customClassForWrapper:
|
|
241
|
+
customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'),
|
|
237
242
|
customClassForInputContent: "multiselect",
|
|
238
243
|
inputBaseRef: r => {
|
|
239
244
|
selectWrapper.current = r;
|
|
@@ -51,7 +51,7 @@ const SimpleSelect = props => {
|
|
|
51
51
|
const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
|
|
52
52
|
const [isTyping, setIsTyping] = (0, _react.useState)(false);
|
|
53
53
|
const dropdownRef = (0, _react.useRef)(null);
|
|
54
|
-
const componentId =
|
|
54
|
+
const componentId = "select-component-".concat(name, "-").concat(uuid.v1());
|
|
55
55
|
const componentRef = (0, _react.useRef)(null);
|
|
56
56
|
const selectWrapper = (0, _react.useRef)();
|
|
57
57
|
const gridElement = (0, _react.useRef)();
|
|
@@ -60,18 +60,20 @@ const SimpleSelect = props => {
|
|
|
60
60
|
if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
|
|
61
61
|
};
|
|
62
62
|
const onClickOutside = event => {
|
|
63
|
+
var _selectWrapper$curren, _dropdownRef$current;
|
|
63
64
|
const {
|
|
64
65
|
target
|
|
65
66
|
} = event;
|
|
66
|
-
if (target !== selectWrapper.current && !selectWrapper.current
|
|
67
|
+
if (target !== selectWrapper.current && !((_selectWrapper$curren = selectWrapper.current) !== null && _selectWrapper$curren !== void 0 && _selectWrapper$curren.contains(target)) && !((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && _dropdownRef$current.contains(target))) {
|
|
67
68
|
setOpened(false);
|
|
68
69
|
}
|
|
69
70
|
};
|
|
70
71
|
const onMouseMove = event => {
|
|
72
|
+
var _dropdownRef$current2, _dropdownRef$current3;
|
|
71
73
|
const target = event.target;
|
|
72
|
-
const idDropdown = dropdownRef.current
|
|
74
|
+
const idDropdown = ((_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : (_dropdownRef$current3 = _dropdownRef$current2.parentElement) === null || _dropdownRef$current3 === void 0 ? void 0 : _dropdownRef$current3.id) || '';
|
|
73
75
|
const dropdownElement = document.getElementById(idDropdown);
|
|
74
|
-
const keepDropdownOpen = Boolean(dropdownElement
|
|
76
|
+
const keepDropdownOpen = Boolean(dropdownElement === null || dropdownElement === void 0 ? void 0 : dropdownElement.contains(target));
|
|
75
77
|
setInsideComponent(keepDropdownOpen);
|
|
76
78
|
};
|
|
77
79
|
const getSelectEvent = selectedEvent => ({
|
|
@@ -111,6 +113,7 @@ const SimpleSelect = props => {
|
|
|
111
113
|
}
|
|
112
114
|
};
|
|
113
115
|
const onSelect = selectedDropdown => {
|
|
116
|
+
var _dropdownRef$current4;
|
|
114
117
|
if (!selectedDropdown) return;
|
|
115
118
|
setSelected(selectedDropdown);
|
|
116
119
|
if (descriptionKeyIsString) setInputText(selectedDropdown[descriptionKey]);else setInputText(descriptionKey(selectedDropdown));
|
|
@@ -120,7 +123,7 @@ const SimpleSelect = props => {
|
|
|
120
123
|
if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();
|
|
121
124
|
setOpened(false);
|
|
122
125
|
});
|
|
123
|
-
dropdownRef.current
|
|
126
|
+
(_dropdownRef$current4 = dropdownRef.current) === null || _dropdownRef$current4 === void 0 ? void 0 : _dropdownRef$current4.focus();
|
|
124
127
|
};
|
|
125
128
|
const onOpenClose = () => {
|
|
126
129
|
setOpened(prevState => !prevState);
|
|
@@ -156,7 +159,8 @@ const SimpleSelect = props => {
|
|
|
156
159
|
const onInputKeyDown = e => {
|
|
157
160
|
if (e.keyCode) {
|
|
158
161
|
if (e.keyCode === constants.keyCodes.ENTER && selected && opened) {
|
|
159
|
-
|
|
162
|
+
var _e$preventDefault;
|
|
163
|
+
(_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
|
|
160
164
|
onSelect(selected);
|
|
161
165
|
} else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
|
|
162
166
|
if (!opened) setOpened(true);
|
|
@@ -164,7 +168,7 @@ const SimpleSelect = props => {
|
|
|
164
168
|
if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
|
|
165
169
|
index = dataCombo && index === dataCombo.length - 1 ? 0 : index + 1;
|
|
166
170
|
} else {
|
|
167
|
-
index = dataCombo && index === 0 ? dataCombo
|
|
171
|
+
index = dataCombo && index === 0 ? (dataCombo === null || dataCombo === void 0 ? void 0 : dataCombo.length) - 1 : index - 1;
|
|
168
172
|
}
|
|
169
173
|
setSelected(dataCombo[index]);
|
|
170
174
|
if (descriptionKeyIsString) setInputText(dataCombo[index][descriptionKey]);
|
|
@@ -201,7 +205,7 @@ const SimpleSelect = props => {
|
|
|
201
205
|
}, []);
|
|
202
206
|
(0, _react.useEffect)(() => {
|
|
203
207
|
if (gridLayout) {
|
|
204
|
-
const gridEl = document.querySelector(
|
|
208
|
+
const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
|
|
205
209
|
if (gridElement.current !== gridEl && gridEl) gridElement.current = gridEl;
|
|
206
210
|
}
|
|
207
211
|
}, [gridLayout]);
|
|
@@ -209,7 +213,10 @@ const SimpleSelect = props => {
|
|
|
209
213
|
if (dataSourceWithAllOptions.length > 0) {
|
|
210
214
|
let newCurrent = null;
|
|
211
215
|
if (value || value === 0) {
|
|
212
|
-
newCurrent = dataSourceWithAllOptions.find(i =>
|
|
216
|
+
newCurrent = dataSourceWithAllOptions.find(i => {
|
|
217
|
+
var _i$idKey;
|
|
218
|
+
return (value || value === 0) && ((_i$idKey = i[idKey]) === null || _i$idKey === void 0 ? void 0 : _i$idKey.toString().toLowerCase()) === (value === null || value === void 0 ? void 0 : value.toString().toLowerCase());
|
|
219
|
+
});
|
|
213
220
|
} else if (dataSourceWithAllOptions.length > 0 && selectFirstOnEnter) {
|
|
214
221
|
newCurrent = dataSourceWithAllOptions[0];
|
|
215
222
|
}
|
|
@@ -262,7 +269,7 @@ const SimpleSelect = props => {
|
|
|
262
269
|
},
|
|
263
270
|
onClick: onFocus,
|
|
264
271
|
onKeyDown: onInputKeyDown,
|
|
265
|
-
customClassForWrapper:
|
|
272
|
+
customClassForWrapper: "selectwrapper ".concat((undigitable || searchOnDropdown || shouldBeReadOnly()) && ' -undigitable'),
|
|
266
273
|
customClassForInputContent: "multiselect",
|
|
267
274
|
inputBaseRef: r => {
|
|
268
275
|
selectWrapper.current = r;
|
|
@@ -87,23 +87,23 @@ const withTooltip = WrappedComponent => {
|
|
|
87
87
|
const targetDimensions = targetElement.current.getBoundingClientRect();
|
|
88
88
|
const targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
89
89
|
const tooltipClientWidth = tooltipElement.current.clientWidth;
|
|
90
|
-
let style =
|
|
90
|
+
let style = "width: ".concat(typeof width === 'string' ? width : "".concat(width, "px"));
|
|
91
91
|
let left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
|
|
92
92
|
left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
|
|
93
|
-
style +=
|
|
93
|
+
style += "; left: ".concat(Math.max(space, left), "px");
|
|
94
94
|
switch (stateTooltipPosition) {
|
|
95
95
|
case 'top':
|
|
96
96
|
if (targetDimensions.top < height) {
|
|
97
97
|
setStateTooltipPosition('bottom');
|
|
98
98
|
} else {
|
|
99
|
-
style +=
|
|
99
|
+
style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
|
|
100
100
|
}
|
|
101
101
|
break;
|
|
102
102
|
case 'bottom':
|
|
103
103
|
if (window.innerHeight - targetDimensions.bottom < height) {
|
|
104
104
|
setStateTooltipPosition('top');
|
|
105
105
|
} else {
|
|
106
|
-
style +=
|
|
106
|
+
style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
|
|
107
107
|
}
|
|
108
108
|
break;
|
|
109
109
|
case 'left':
|
|
@@ -114,16 +114,16 @@ const withTooltip = WrappedComponent => {
|
|
|
114
114
|
setStateTooltipPosition('right');
|
|
115
115
|
}
|
|
116
116
|
} else {
|
|
117
|
-
style +=
|
|
118
|
-
style +=
|
|
117
|
+
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
118
|
+
style += "; left: ".concat(targetDimensions.left - tooltipClientWidth - 6, "px");
|
|
119
119
|
}
|
|
120
120
|
break;
|
|
121
121
|
case 'right':
|
|
122
122
|
if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
|
|
123
123
|
setStateTooltipPosition('left');
|
|
124
124
|
} else {
|
|
125
|
-
style +=
|
|
126
|
-
style +=
|
|
125
|
+
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
126
|
+
style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
|
|
127
127
|
}
|
|
128
128
|
break;
|
|
129
129
|
default:
|
|
@@ -166,7 +166,7 @@ const withTooltip = WrappedComponent => {
|
|
|
166
166
|
targetRef: getTarget
|
|
167
167
|
})), showTooltip && getTooltip());
|
|
168
168
|
};
|
|
169
|
-
EnhancedComponent.displayName =
|
|
169
|
+
EnhancedComponent.displayName = "withTooltip(".concat(getDisplayName(WrappedComponent), ")");
|
|
170
170
|
return EnhancedComponent;
|
|
171
171
|
};
|
|
172
172
|
var _default = exports.default = withTooltip;
|
|
@@ -25,8 +25,7 @@ const LabelMessages = _ref => {
|
|
|
25
25
|
showCloseButton = false
|
|
26
26
|
} = _ref;
|
|
27
27
|
const [closed, setClosed] = (0, _react.useState)(false);
|
|
28
|
-
const getClass = () =>
|
|
29
|
-
${square && '-square'} ${flat && '-flat'}`;
|
|
28
|
+
const getClass = () => "labelmessages-component -".concat(type, " ").concat(customClass, "\n ").concat(square && '-square', " ").concat(flat && '-flat');
|
|
30
29
|
const getIcon = () => {
|
|
31
30
|
if (icon) {
|
|
32
31
|
return icon;
|
|
@@ -35,14 +34,14 @@ const LabelMessages = _ref => {
|
|
|
35
34
|
name: iconName,
|
|
36
35
|
size: 16,
|
|
37
36
|
color: "#ffffff",
|
|
38
|
-
customClass:
|
|
37
|
+
customClass: "-".concat(type, "svg")
|
|
39
38
|
});
|
|
40
39
|
}
|
|
41
40
|
return null;
|
|
42
41
|
};
|
|
43
42
|
if (closed || !visible) return null;
|
|
44
43
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
45
|
-
className:
|
|
44
|
+
className: "".concat(getClass(), " ").concat(customClass),
|
|
46
45
|
style: style
|
|
47
46
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
48
47
|
className: "labelmessagesitem text"
|
|
@@ -30,10 +30,7 @@ const DefaultLabel = _ref => {
|
|
|
30
30
|
} = _ref;
|
|
31
31
|
const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
|
|
32
32
|
const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
|
|
33
|
-
const getClass = () =>
|
|
34
|
-
${skeletonize ? '-skeletonized' : ''}
|
|
35
|
-
${size ? `-${size}` : ''}
|
|
36
|
-
${iconAlign ? `icon-${iconAlign}` : ''}`;
|
|
33
|
+
const getClass = () => "label-component ".concat(className, " ").concat(customClass, " ").concat(bordered ? '-bordered' : '', " ").concat(disabled ? '-disabled' : '', "\n ").concat(skeletonize ? '-skeletonized' : '', "\n ").concat(size ? "-".concat(size) : '', "\n ").concat(iconAlign ? "icon-".concat(iconAlign) : '');
|
|
37
34
|
const getIcon = () => {
|
|
38
35
|
if (icon) {
|
|
39
36
|
return icon;
|
package/lib/list/Header.js
CHANGED
|
@@ -14,7 +14,7 @@ const Header = _ref => {
|
|
|
14
14
|
customClass
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
17
|
-
className:
|
|
17
|
+
className: "list-header ".concat(customClass),
|
|
18
18
|
style: style
|
|
19
19
|
}, /*#__PURE__*/_react.default.createElement("h1", {
|
|
20
20
|
className: "title"
|
package/lib/list/Item.js
CHANGED
|
@@ -41,7 +41,6 @@ const Item = props => {
|
|
|
41
41
|
permissionAttr,
|
|
42
42
|
skeletonize,
|
|
43
43
|
targetRef,
|
|
44
|
-
target,
|
|
45
44
|
onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
|
|
46
45
|
} = props;
|
|
47
46
|
const {
|
|
@@ -61,8 +60,7 @@ const Item = props => {
|
|
|
61
60
|
const disabledByPermission = onDenied.disabled;
|
|
62
61
|
const shouldDisable = () => disabled || onDenied.disabled;
|
|
63
62
|
const disabledIconColor = 'rgb(193, 193, 193)';
|
|
64
|
-
const getClass = () =>
|
|
65
|
-
${displayCheckbox && 'list-checkbox'}`;
|
|
63
|
+
const getClass = () => "item ".concat(customClass, " ").concat(separator && 'list-separator', " ").concat(shouldDisable() && 'disabled', "\n ").concat(displayCheckbox && 'list-checkbox');
|
|
66
64
|
const getIcon = (iconName, icon) => {
|
|
67
65
|
const noIconDisabledByPermission = !icon && !displayCheckbox && !leftElement && !leftIconName && !leftIcon && onDenied.disabled;
|
|
68
66
|
if (icon) {
|
|
@@ -91,13 +89,7 @@ const Item = props => {
|
|
|
91
89
|
if ([constants.keyCodes.ENTER].includes(e.keyCode) && !skeletonize && itemId && selectedItemId === itemId) {
|
|
92
90
|
e.preventDefault();
|
|
93
91
|
handleOnSelectItem(e);
|
|
94
|
-
if (url)
|
|
95
|
-
if (target === '_blank') {
|
|
96
|
-
window.open(url, '_blank')?.focus();
|
|
97
|
-
} else {
|
|
98
|
-
navigate(url);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
92
|
+
if (url) navigate(url);
|
|
101
93
|
}
|
|
102
94
|
}, [url, selectedItemId, itemId]);
|
|
103
95
|
const getProps = () => {
|
|
@@ -139,24 +131,22 @@ const Item = props => {
|
|
|
139
131
|
return itemId && selectedItemId === itemId ? selectedItemRef : null;
|
|
140
132
|
},
|
|
141
133
|
style: style,
|
|
142
|
-
className:
|
|
143
|
-
${itemId && selectedItemId === itemId ? '-activedlist' : ''}`
|
|
134
|
+
className: "item-container ".concat(hovered && 'hovered', "\n ").concat(itemId && selectedItemId === itemId ? '-activedlist' : '')
|
|
144
135
|
}, getProps(), {
|
|
145
136
|
key: itemId
|
|
146
137
|
}), url && !shouldDisable() && /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
|
|
147
138
|
className: "linkitem",
|
|
148
|
-
to: url
|
|
149
|
-
target: target
|
|
139
|
+
to: url
|
|
150
140
|
}), (displayCheckbox || leftElement || leftIconName || leftIcon) && /*#__PURE__*/_react.default.createElement("div", {
|
|
151
|
-
className:
|
|
141
|
+
className: "".concat(getClass(), " -icon-left")
|
|
152
142
|
}, renderCheckBox, leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react.default.createElement("div", {
|
|
153
|
-
className:
|
|
154
|
-
},
|
|
155
|
-
className:
|
|
156
|
-
}, text),
|
|
157
|
-
className:
|
|
143
|
+
className: "".concat(getClass())
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement("p", {
|
|
145
|
+
className: "".concat(text && 'text')
|
|
146
|
+
}, text), /*#__PURE__*/_react.default.createElement("p", {
|
|
147
|
+
className: "".concat(subText && 'subtext')
|
|
158
148
|
}, subText), children), (rightIconName || rightIcon || rightElement || disabledByPermission) && /*#__PURE__*/_react.default.createElement("div", {
|
|
159
|
-
className:
|
|
149
|
+
className: "".concat(getClass(), " -icon-right")
|
|
160
150
|
}, getIcon(rightIconName, rightIcon), rightElement));
|
|
161
151
|
};
|
|
162
152
|
var _default = exports.default = (0, _withTooltip.default)(Item);
|
package/lib/list/index.js
CHANGED
|
@@ -175,8 +175,7 @@ const List = props => {
|
|
|
175
175
|
"data-testid": "list-component",
|
|
176
176
|
style: style,
|
|
177
177
|
ref: listRef,
|
|
178
|
-
className:
|
|
179
|
-
${customClass} ${!transparent && '-listbackground'}`
|
|
178
|
+
className: "list-component ".concat(condensed && '-condensed', "\n ").concat(customClass, " ").concat(!transparent && '-listbackground')
|
|
180
179
|
}, newChildren));
|
|
181
180
|
};
|
|
182
181
|
var _default = exports.default = List;
|
package/lib/list/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode, ReactElement, CSSProperties,
|
|
1
|
+
import { ReactNode, ReactElement, CSSProperties, Ref } from 'react';
|
|
2
2
|
import { PermissionAttr } from '../@types/PermissionAttr.js';
|
|
3
3
|
import { IconNames } from '../@types/Icon.js';
|
|
4
4
|
import { Position } from '../@types/Position.js';
|
|
@@ -47,7 +47,6 @@ interface IListItemProps {
|
|
|
47
47
|
rightIconName?: IconNames;
|
|
48
48
|
customClass?: string;
|
|
49
49
|
url?: string;
|
|
50
|
-
target?: ComponentPropsWithoutRef<'a'>['target'];
|
|
51
50
|
visible?: boolean;
|
|
52
51
|
itemId?: string;
|
|
53
52
|
children?: ReactNode;
|
|
@@ -29,7 +29,7 @@ const MenuItem = _ref => {
|
|
|
29
29
|
const dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
|
|
30
30
|
const handleOnClick = () => {
|
|
31
31
|
if (onClick) {
|
|
32
|
-
onClick(dropdownContext
|
|
32
|
+
onClick(dropdownContext === null || dropdownContext === void 0 ? void 0 : dropdownContext.handleDropdownClose);
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
35
|
if (dropdownContext) dropdownContext.handleDropdownClose();
|
|
@@ -37,7 +37,7 @@ const MenuItem = _ref => {
|
|
|
37
37
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
38
38
|
className: "floatmenuitem"
|
|
39
39
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
-
className:
|
|
40
|
+
className: "".concat(customClassMenuItem, " -items")
|
|
41
41
|
}, !_lodash.default.isEmpty(dropdownMenu) && !onClick && /*#__PURE__*/_react.default.createElement(_buttons.default, {
|
|
42
42
|
customClass: "floatmenudropdown",
|
|
43
43
|
iconName: "more1",
|
|
@@ -46,7 +46,7 @@ const SubMenuContainer = _ref => {
|
|
|
46
46
|
handlerGoBack();
|
|
47
47
|
}, []);
|
|
48
48
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
49
|
-
className:
|
|
49
|
+
className: "floatsubmenu ".concat(customClass)
|
|
50
50
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
51
51
|
className: "submenuheader"
|
|
52
52
|
}, /*#__PURE__*/_react.default.createElement(_icons.default, {
|
package/lib/menus/float/index.js
CHANGED
|
@@ -47,7 +47,7 @@ const FloatMenu = props => {
|
|
|
47
47
|
return /*#__PURE__*/_react.default.createElement(_helpers.default.Provider, {
|
|
48
48
|
value: contextValues
|
|
49
49
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
50
|
-
className:
|
|
50
|
+
className: "floatmenu-component ".concat(customClass)
|
|
51
51
|
}, /*#__PURE__*/_react.default.createElement(_buttons.default, {
|
|
52
52
|
transparent: true,
|
|
53
53
|
key: "button-",
|
|
@@ -14,7 +14,7 @@ const ExpandMenu = _ref => {
|
|
|
14
14
|
iconName
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
17
|
-
className:
|
|
17
|
+
className: "openclosemenu ".concat(expandMenuCustomClass),
|
|
18
18
|
role: "button",
|
|
19
19
|
tabIndex: 0,
|
|
20
20
|
onClick: onExpandMenu,
|
|
@@ -20,7 +20,7 @@ const NavMenuGroup = _ref => {
|
|
|
20
20
|
} = (0, _react.useContext)(_helpers.SideNavContext);
|
|
21
21
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
22
22
|
style: style,
|
|
23
|
-
className:
|
|
23
|
+
className: "".concat(scrollable && 'customscroll', " ").concat((0, _helpers.default)(isExpanded, menuSize))
|
|
24
24
|
}, children);
|
|
25
25
|
};
|
|
26
26
|
var _default = exports.default = NavMenuGroup;
|