linear-react-components-ui 0.4.77-beta.27 → 0.4.77-beta.28
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.json +3 -76
- package/.husky/pre-commit +4 -0
- package/.vscode/settings.json +2 -2
- package/jest.config.js +3 -3
- package/lib/alerts/AlertContainer.js +19 -14
- package/lib/alerts/AlertProvider.js +9 -4
- package/lib/alerts/BaseAlert.js +8 -5
- package/lib/alerts/Message.js +40 -31
- package/lib/alerts/alert.spec.js +133 -0
- package/lib/alerts/helpers.js +5 -2
- package/lib/alerts/withAlert.js +2 -2
- package/lib/assets/styles/commons.scss +10 -0
- package/lib/assets/styles/dropdown.scss +36 -2
- package/lib/assets/styles/effects.scss +11 -0
- package/lib/assets/styles/list.scss +8 -0
- package/lib/assets/styles/table.scss +2 -7
- package/lib/avatar/avatar.spec.js +190 -0
- package/lib/avatar/index.js +58 -13
- package/lib/badge/badge.spec.js +127 -0
- package/lib/badge/index.js +22 -6
- package/lib/buttons/ActivateButton.js +3 -3
- package/lib/buttons/AddButton.js +1 -1
- package/lib/buttons/Button.js +11 -19
- package/lib/buttons/ButtonGroups.js +5 -0
- package/lib/buttons/CancelButton.js +3 -16
- package/lib/buttons/DangerButton.js +19 -14
- package/lib/buttons/DefaultButton.js +127 -65
- package/lib/buttons/DestroyButton.js +3 -12
- package/lib/buttons/EditButton.js +3 -3
- package/lib/buttons/InactivateButton.js +3 -3
- package/lib/buttons/InfoButton.js +19 -14
- package/lib/buttons/PrimaryButton.js +19 -14
- package/lib/buttons/RestoreButton.js +3 -3
- package/lib/buttons/SaveButton.js +2 -15
- package/lib/buttons/SpinnerLoading.js +230 -0
- package/lib/buttons/SuccessButton.js +18 -13
- package/lib/buttons/WarningButton.js +18 -13
- package/lib/buttons/button_container/index.js +18 -5
- package/lib/buttons/buttons.spec.js +504 -0
- package/lib/buttons/index.js +28 -28
- package/lib/buttons/split_button/index.js +30 -13
- package/lib/calendar/DangerCalendar.js +2 -11
- package/lib/calendar/InfoCalendar.js +2 -11
- package/lib/calendar/PrimaryCalendar.js +2 -11
- package/lib/calendar/SuccessCalendar.js +2 -11
- package/lib/calendar/WarningCalendar.js +2 -11
- package/lib/calendar/base/Day.js +8 -2
- package/lib/calendar/base/Month.js +5 -0
- package/lib/calendar/base/Week.js +6 -0
- package/lib/calendar/base/helpers.js +9 -9
- package/lib/calendar/base/index.js +36 -33
- package/lib/calendar/calendar.spec.js +171 -0
- package/lib/calendar/index.js +10 -10
- package/lib/checkbox/Label.js +12 -2
- package/lib/checkbox/checkbox.spec.js +215 -0
- package/lib/checkbox/index.js +79 -42
- package/lib/dialog/Alert.js +8 -3
- package/lib/dialog/Custom.js +25 -17
- package/lib/dialog/Error.js +6 -1
- package/lib/dialog/Information.js +6 -1
- package/lib/dialog/Question.js +17 -6
- package/lib/dialog/Warning.js +6 -1
- package/lib/dialog/base/Content.js +9 -0
- package/lib/dialog/base/Footer.js +8 -2
- package/lib/dialog/base/Header.js +22 -8
- package/lib/dialog/base/index.js +28 -6
- package/lib/dialog/dialog.spec.js +488 -0
- package/lib/dialog/form/index.js +32 -22
- package/lib/dialog/index.js +6 -6
- package/lib/drawer/Content.js +10 -1
- package/lib/drawer/Drawer.js +50 -29
- package/lib/drawer/Drawer.spec.js +258 -0
- package/lib/drawer/Header.js +31 -12
- package/lib/drawer/helpers.js +1 -1
- package/lib/drawer/index.js +4 -4
- package/lib/dropdown/Popup.js +16 -32
- package/lib/dropdown/dropdown.spec.js +169 -0
- package/lib/dropdown/helper.js +2 -2
- package/lib/dropdown/withDropdown.js +43 -18
- package/lib/fieldset/fieldset.spec.js +329 -0
- package/lib/fieldset/index.js +43 -12
- package/lib/form/Field.js +41 -14
- package/lib/form/FieldArray.js +50 -20
- package/lib/form/FieldNumber.js +44 -12
- package/lib/form/FieldPeriod.js +41 -19
- package/lib/form/form.spec.js +293 -0
- package/lib/form/helpers.js +16 -10
- package/lib/form/index.js +92 -57
- package/lib/form/withFieldHOC.js +120 -40
- package/lib/form/withFormSecurity.js +38 -17
- package/lib/gridlayout/GridCol.js +18 -3
- package/lib/gridlayout/GridRow.js +24 -4
- package/lib/gridlayout/gridLayout.spec.js +169 -0
- package/lib/icons/helper.js +571 -560
- package/lib/icons/icons.spec.js +86 -0
- package/lib/icons/index.js +40 -23
- package/lib/index.js +12 -12
- package/lib/inputs/base/InputTextBase.js +149 -40
- package/lib/inputs/base/base.spec.js +690 -0
- package/lib/inputs/base/helpers.js +4 -4
- package/lib/inputs/base/index.js +1 -0
- package/lib/inputs/color/color_input.spec.js +174 -0
- package/lib/inputs/color/index.js +29 -31
- package/lib/inputs/date/Dialog.js +8 -1
- package/lib/inputs/date/Dropdown.js +70 -18
- package/lib/inputs/date/date.spec.js +354 -0
- package/lib/inputs/date/helpers.js +1 -1
- package/lib/inputs/date/index.js +411 -255
- package/lib/inputs/inputHOC.js +96 -44
- package/lib/inputs/mask/BaseMask.js +45 -16
- package/lib/inputs/mask/Cnpj.js +19 -12
- package/lib/inputs/mask/Cpf.js +22 -14
- package/lib/inputs/mask/Phone.js +9 -1
- package/lib/inputs/mask/ZipCode.js +1 -1
- package/lib/inputs/mask/helpers.js +36 -21
- package/lib/inputs/mask/imaskHOC.js +255 -186
- package/lib/inputs/mask/index.js +4 -4
- package/lib/inputs/mask/input_mask.spec.js +607 -0
- package/lib/inputs/multiSelect/ActionButtons.js +14 -2
- package/lib/inputs/multiSelect/Dropdown.js +70 -43
- package/lib/inputs/multiSelect/index.js +80 -60
- package/lib/inputs/number/BaseNumber.js +62 -27
- package/lib/inputs/number/Currency.js +14 -4
- package/lib/inputs/number/format_number.js +1 -1
- package/lib/inputs/number/index.js +15 -9
- package/lib/inputs/number/numberfield.spec.js +215 -0
- package/lib/inputs/period/Dialog.js +8 -1
- package/lib/inputs/period/Dropdown.js +70 -16
- package/lib/inputs/period/PeriodList.js +19 -6
- package/lib/inputs/period/helper.js +71 -30
- package/lib/inputs/period/index.js +160 -112
- package/lib/inputs/search/index.js +261 -129
- package/lib/inputs/search/search_input.spec.js +209 -0
- package/lib/inputs/select/ActionButtons.js +20 -14
- package/lib/inputs/select/Dropdown.js +63 -30
- package/lib/inputs/select/helper.js +16 -18
- package/lib/inputs/select/index.js +13 -14
- package/lib/inputs/select/multiple/Selecteds.js +13 -5
- package/lib/inputs/select/multiple/index.js +414 -289
- package/lib/inputs/select/select.spec.js +395 -0
- package/lib/inputs/select/simple/index.js +461 -322
- package/lib/inputs/text/index.js +0 -1
- package/lib/inputs/text/textfield.spec.js +215 -0
- package/lib/inputs/textarea/index.js +15 -5
- package/lib/inputs/textarea/textarea.spec.js +59 -0
- package/lib/internals/constants.js +1 -1
- package/lib/internals/withTooltip.js +34 -26
- package/lib/labelMessages/index.js +45 -27
- package/lib/labelMessages/labelMessages.spec.js +176 -0
- package/lib/labels/DangerLabel.js +4 -13
- package/lib/labels/DefaultLabel.js +57 -25
- package/lib/labels/InfoLabel.js +4 -13
- package/lib/labels/PrimaryLabel.js +4 -13
- package/lib/labels/SuccessLabel.js +4 -13
- package/lib/labels/WarningLabel.js +4 -13
- package/lib/labels/index.js +10 -10
- package/lib/labels/label.spec.js +162 -0
- package/lib/labels/label_container/index.js +12 -2
- package/lib/list/Header.js +13 -0
- package/lib/list/Item.js +65 -27
- package/lib/list/helpers.js +2 -2
- package/lib/list/index.js +51 -31
- package/lib/list/list.spec.js +769 -0
- package/lib/menus/float/MenuItem.js +42 -10
- package/lib/menus/float/SubMenuContainer.js +95 -0
- package/lib/menus/float/float-menu.spec.js +221 -0
- package/lib/menus/float/helpers.js +1 -1
- package/lib/menus/float/index.js +39 -9
- package/lib/menus/sidenav/ExpandMenu.js +13 -1
- package/lib/menus/sidenav/MenuLink.js +14 -0
- package/lib/menus/sidenav/NavMenuGroup.js +12 -1
- package/lib/menus/sidenav/NavMenuItem.js +45 -19
- package/lib/menus/sidenav/NavSubMenuItem.js +15 -4
- package/lib/menus/sidenav/helpers.js +3 -3
- package/lib/menus/sidenav/index.js +60 -30
- package/lib/menus/sidenav/popup_menu_search/EmptyList.js +11 -2
- package/lib/menus/sidenav/popup_menu_search/index.js +11 -14
- package/lib/menus/sidenav/sidenav.spec.js +379 -0
- package/lib/panel/Content.js +18 -6
- package/lib/panel/DangerPanel.js +1 -1
- package/lib/panel/Default.js +45 -18
- package/lib/panel/Header.js +29 -7
- package/lib/panel/InfoPanel.js +1 -1
- package/lib/panel/PrimaryPanel.js +1 -1
- package/lib/panel/SuccessPanel.js +1 -1
- package/lib/panel/ToolBar.js +5 -0
- package/lib/panel/WarningPanel.js +1 -1
- package/lib/panel/helpers.js +3 -7
- package/lib/panel/index.js +14 -14
- package/lib/panel/panel.spec.js +216 -0
- package/lib/permissionValidations.js +12 -14
- package/lib/popover/PopoverText.js +5 -0
- package/lib/popover/PopoverTitle.js +5 -0
- package/lib/popover/index.js +40 -26
- package/lib/popover/popover.spec.js +146 -0
- package/lib/progress/Bar.js +47 -37
- package/lib/progress/index.js +18 -8
- package/lib/progress/progress.spec.js +94 -0
- package/lib/radio/index.js +46 -22
- package/lib/radio/radio.spec.js +189 -0
- package/lib/skeleton/SkeletonContainer.js +13 -0
- package/lib/skeleton/index.js +26 -7
- package/lib/spinner/SpinnerLoading.js +12 -4
- package/lib/spinner/index.js +29 -24
- package/lib/spinner/spinner.spec.js +152 -0
- package/lib/split/Split.js +62 -45
- package/lib/split/SplitSide.js +21 -1
- package/lib/split/helpers.js +1 -1
- package/lib/split/split.spec.js +163 -0
- package/lib/table/Body.js +16 -9
- package/lib/table/Header.js +19 -40
- package/lib/table/HeaderColumn.js +20 -6
- package/lib/table/Row.js +28 -7
- package/lib/table/RowColumn.js +30 -12
- package/lib/table/helpers.js +3 -3
- package/lib/table/index.js +53 -15
- package/lib/table/table.spec.js +352 -0
- package/lib/tabs/DropdownItems.js +53 -39
- package/lib/tabs/Menu.js +20 -16
- package/lib/tabs/MenuItems.js +39 -25
- package/lib/tabs/Panel.js +51 -18
- package/lib/tabs/index.js +75 -81
- package/lib/tabs/tabHelpers.js +8 -10
- package/lib/tabs/tabs.spec.js +321 -0
- package/lib/toolbar/ButtonBar.js +13 -32
- package/lib/toolbar/LabelBar.js +18 -31
- package/lib/toolbar/ToolBarGroup.js +12 -6
- package/lib/toolbar/helpers.js +1 -1
- package/lib/toolbar/index.js +33 -25
- package/lib/toolbar/toolbar.spec.js +394 -0
- package/lib/tooltip/index.js +34 -25
- package/lib/tooltip/tooltip.spec.js +215 -0
- package/lib/treeview/Header.js +12 -0
- package/lib/treeview/Node.js +387 -261
- package/lib/treeview/constants.js +2 -1
- package/lib/treeview/index.js +548 -363
- package/lib/treeview/treeview.spec.js +279 -0
- package/lib/treeview_old/Node.js +6 -6
- package/lib/uitour/helpers.js +1 -1
- package/lib/uitour/index.js +32 -15
- package/lib/uitour/uitour.spec.js +176 -0
- package/package.json +16 -40
- package/.husky/pre-push +0 -4
- package/babel.config.json +0 -11
- package/tsconfig.json +0 -32
- package/tsup.config.ts +0 -10
package/lib/tabs/Panel.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -9,7 +9,9 @@ exports.default = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _tabHelpers = require("./tabHelpers");
|
|
13
15
|
|
|
14
16
|
var _permissionValidations = require("../permissionValidations");
|
|
15
17
|
|
|
@@ -29,23 +31,21 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
29
31
|
|
|
30
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; }
|
|
31
33
|
|
|
32
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr
|
|
34
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr && (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
35
|
|
|
34
36
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
37
|
|
|
36
38
|
var observer = null;
|
|
37
39
|
|
|
38
|
-
var Panel = function Panel(
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
var _useContext = (0, _react.useContext)(_tabHelpers.default),
|
|
40
|
+
var Panel = function Panel(props) {
|
|
41
|
+
var children = props.children,
|
|
42
|
+
customClass = props.customClass,
|
|
43
|
+
id = props.id,
|
|
44
|
+
onEndReached = props.onEndReached,
|
|
45
|
+
onEndReachedThreshold = props.onEndReachedThreshold,
|
|
46
|
+
permissionAttr = props.permissionAttr;
|
|
47
|
+
|
|
48
|
+
var _useContext = (0, _react.useContext)(_tabHelpers.TabContext),
|
|
49
49
|
selectedTabId = _useContext.selectedTabId,
|
|
50
50
|
contentHeight = _useContext.contentHeight;
|
|
51
51
|
|
|
@@ -57,7 +57,7 @@ var Panel = function Panel(_ref) {
|
|
|
57
57
|
|
|
58
58
|
var onEndReachedRef = (0, _react.useRef)(onEndReached);
|
|
59
59
|
|
|
60
|
-
var _useState = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(_tabHelpers.onDeniedOptions
|
|
60
|
+
var _useState = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(permissionAttr, _tabHelpers.onDeniedOptions)),
|
|
61
61
|
_useState2 = _slicedToArray(_useState, 1),
|
|
62
62
|
onDenied = _useState2[0];
|
|
63
63
|
|
|
@@ -74,9 +74,7 @@ var Panel = function Panel(_ref) {
|
|
|
74
74
|
observer = new IntersectionObserver(function (entries) {
|
|
75
75
|
entries.forEach(function (en) {
|
|
76
76
|
if (en.intersectionRatio > 0) {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
(_onEndReachedRef$curr = onEndReachedRef.current) === null || _onEndReachedRef$curr === void 0 ? void 0 : _onEndReachedRef$curr.call(onEndReachedRef);
|
|
77
|
+
onEndReachedRef.current();
|
|
80
78
|
}
|
|
81
79
|
}, options);
|
|
82
80
|
});
|
|
@@ -103,5 +101,40 @@ var Panel = function Panel(_ref) {
|
|
|
103
101
|
}) : /*#__PURE__*/_react.default.createElement("noscript", null));
|
|
104
102
|
};
|
|
105
103
|
|
|
104
|
+
Panel.defaultProps = {
|
|
105
|
+
title: '',
|
|
106
|
+
closable: false,
|
|
107
|
+
hidden: false,
|
|
108
|
+
iconName: null,
|
|
109
|
+
icon: null,
|
|
110
|
+
iconAlign: 'left',
|
|
111
|
+
customClass: '',
|
|
112
|
+
children: undefined,
|
|
113
|
+
tooltipPosition: 'bottom',
|
|
114
|
+
tooltipWidth: 'auto',
|
|
115
|
+
onEndReached: undefined,
|
|
116
|
+
onEndReachedThreshold: 0.1,
|
|
117
|
+
permissionAttr: undefined
|
|
118
|
+
};
|
|
119
|
+
Panel.propTypes = {
|
|
120
|
+
children: _propTypes.default.any,
|
|
121
|
+
id: _propTypes.default.string.isRequired,
|
|
122
|
+
customClass: _propTypes.default.string,
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Properties are used inside Menu.jsx to build the tabMenus
|
|
126
|
+
*/
|
|
127
|
+
title: _propTypes.default.string,
|
|
128
|
+
closable: _propTypes.default.bool,
|
|
129
|
+
hidden: _propTypes.default.bool,
|
|
130
|
+
icon: _propTypes.default.instanceOf(Object),
|
|
131
|
+
iconName: _propTypes.default.string,
|
|
132
|
+
iconAlign: _propTypes.default.string,
|
|
133
|
+
tooltipPosition: _propTypes.default.string,
|
|
134
|
+
tooltipWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
135
|
+
onEndReached: _propTypes.default.func,
|
|
136
|
+
onEndReachedThreshold: _tabHelpers.numberAroundZeroAndOne,
|
|
137
|
+
permissionAttr: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.object)])
|
|
138
|
+
};
|
|
106
139
|
var _default = Panel;
|
|
107
140
|
exports.default = _default;
|
package/lib/tabs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -15,23 +15,23 @@ exports.default = void 0;
|
|
|
15
15
|
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
+
|
|
18
20
|
var _Menu = _interopRequireDefault(require("./Menu"));
|
|
19
21
|
|
|
20
22
|
var _Panel = _interopRequireDefault(require("./Panel"));
|
|
21
23
|
|
|
22
|
-
var _tabHelpers =
|
|
24
|
+
var _tabHelpers = require("./tabHelpers");
|
|
23
25
|
|
|
24
26
|
require("../assets/styles/tabs.scss");
|
|
25
27
|
|
|
26
|
-
var _excluded = ["toolbar", "children", "selectedTab", "firstTabIdent", "handlerTabClick", "handlerCloseTab", "style", "tabMenuSize", "tabMenuAlign", "tabMenuPosition", "customClassForToolBar", "tabsWidthOnExceedCount"];
|
|
27
|
-
|
|
28
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
29
|
|
|
30
30
|
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); }
|
|
31
31
|
|
|
32
32
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
33
|
|
|
34
|
-
function _extends() { _extends = Object.assign
|
|
34
|
+
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); }
|
|
35
35
|
|
|
36
36
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
37
37
|
|
|
@@ -49,38 +49,21 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
49
49
|
|
|
50
50
|
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; }
|
|
51
51
|
|
|
52
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr
|
|
52
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr && (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; }
|
|
53
53
|
|
|
54
54
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
55
55
|
|
|
56
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
57
|
-
|
|
58
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
59
|
-
|
|
60
56
|
var DROPDOWN_WIDTH = 26;
|
|
61
57
|
|
|
62
|
-
var Tabs = function Tabs(
|
|
63
|
-
var
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
_ref$style = _ref.style,
|
|
72
|
-
style = _ref$style === void 0 ? {} : _ref$style,
|
|
73
|
-
_ref$tabMenuSize = _ref.tabMenuSize,
|
|
74
|
-
tabMenuSize = _ref$tabMenuSize === void 0 ? 'default' : _ref$tabMenuSize,
|
|
75
|
-
_ref$tabMenuAlign = _ref.tabMenuAlign,
|
|
76
|
-
tabMenuAlign = _ref$tabMenuAlign === void 0 ? 'left' : _ref$tabMenuAlign,
|
|
77
|
-
_ref$tabMenuPosition = _ref.tabMenuPosition,
|
|
78
|
-
tabMenuPosition = _ref$tabMenuPosition === void 0 ? 'top' : _ref$tabMenuPosition,
|
|
79
|
-
_ref$customClassForTo = _ref.customClassForToolBar,
|
|
80
|
-
customClassForToolBar = _ref$customClassForTo === void 0 ? '' : _ref$customClassForTo,
|
|
81
|
-
_ref$tabsWidthOnExcee = _ref.tabsWidthOnExceedCount,
|
|
82
|
-
tabsWidthOnExceedCount = _ref$tabsWidthOnExcee === void 0 ? 0 : _ref$tabsWidthOnExcee,
|
|
83
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
58
|
+
var Tabs = function Tabs(props) {
|
|
59
|
+
var handlerTabClick = props.handlerTabClick,
|
|
60
|
+
children = props.children,
|
|
61
|
+
handlerCloseTab = props.handlerCloseTab,
|
|
62
|
+
tabMenuPosition = props.tabMenuPosition,
|
|
63
|
+
style = props.style,
|
|
64
|
+
selectedTab = props.selectedTab,
|
|
65
|
+
toolbar = props.toolbar,
|
|
66
|
+
tabsWidthOnExceedCount = props.tabsWidthOnExceedCount;
|
|
84
67
|
|
|
85
68
|
var _useState = (0, _react.useState)((0, _tabHelpers.buildPanels)(children) || []),
|
|
86
69
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -97,7 +80,7 @@ var Tabs = function Tabs(_ref) {
|
|
|
97
80
|
dropdownPanels = _useState6[0],
|
|
98
81
|
setDropdownPanels = _useState6[1];
|
|
99
82
|
|
|
100
|
-
var _useState7 = (0, _react.useState)(selectedTab ||
|
|
83
|
+
var _useState7 = (0, _react.useState)(selectedTab || panels[0].props.id),
|
|
101
84
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
102
85
|
selectedTabId = _useState8[0],
|
|
103
86
|
setSelectedTabId = _useState8[1];
|
|
@@ -106,7 +89,7 @@ var Tabs = function Tabs(_ref) {
|
|
|
106
89
|
_useState10 = _slicedToArray(_useState9, 1),
|
|
107
90
|
customClass = _useState10[0];
|
|
108
91
|
|
|
109
|
-
var _useState11 = (0, _react.useState)(
|
|
92
|
+
var _useState11 = (0, _react.useState)(undefined),
|
|
110
93
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
111
94
|
contentHeight = _useState12[0],
|
|
112
95
|
setContentHeight = _useState12[1];
|
|
@@ -133,10 +116,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
133
116
|
var _toolBarRef = (0, _react.useRef)(null);
|
|
134
117
|
|
|
135
118
|
var getTabListWidth = function getTabListWidth() {
|
|
136
|
-
var _menuRef
|
|
119
|
+
var tabMenu = _menuRef.current.children[0];
|
|
120
|
+
|
|
121
|
+
var tabList = _toConsumableArray(tabMenu.children);
|
|
137
122
|
|
|
138
|
-
var tabMenu = (_menuRef$current = _menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.children[0];
|
|
139
|
-
var tabList = Array.from(tabMenu === null || tabMenu === void 0 ? void 0 : tabMenu.childNodes);
|
|
140
123
|
var tabsListWidth = tabList.reduce(function (total, tab) {
|
|
141
124
|
return total + tab.clientWidth;
|
|
142
125
|
}, 0);
|
|
@@ -144,11 +127,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
144
127
|
};
|
|
145
128
|
|
|
146
129
|
var getMenuAttributes = function getMenuAttributes() {
|
|
147
|
-
var _menuRef
|
|
148
|
-
|
|
149
|
-
var menuSize = (_menuRef$current2 = _menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.clientWidth;
|
|
130
|
+
var menuSize = _menuRef.current.clientWidth;
|
|
150
131
|
var toolbarSize = toolbar && _toolBarRef.current ? _toolBarRef.current.clientWidth : 0;
|
|
151
|
-
var contentWidth =
|
|
132
|
+
var contentWidth = (toolbar ? menuSize - toolbarSize : menuSize) - DROPDOWN_WIDTH;
|
|
152
133
|
setTabsContentWidth(contentWidth);
|
|
153
134
|
};
|
|
154
135
|
|
|
@@ -161,12 +142,10 @@ var Tabs = function Tabs(_ref) {
|
|
|
161
142
|
|
|
162
143
|
if (newDropdownPanels.length) {
|
|
163
144
|
var newDropdownPanelsIds = newDropdownPanels.map(function (dd) {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
return dd === null || dd === void 0 ? void 0 : (_dd$props = dd.props) === null || _dd$props === void 0 ? void 0 : _dd$props.id;
|
|
145
|
+
return dd.props.id;
|
|
167
146
|
});
|
|
168
147
|
newCurrentPanels = newCurrentPanels.filter(function (tab) {
|
|
169
|
-
return !newDropdownPanelsIds.includes(tab
|
|
148
|
+
return !newDropdownPanelsIds.includes(tab.props.id);
|
|
170
149
|
});
|
|
171
150
|
}
|
|
172
151
|
|
|
@@ -186,19 +165,15 @@ var Tabs = function Tabs(_ref) {
|
|
|
186
165
|
|
|
187
166
|
var onMenuClick = function onMenuClick(tabId) {
|
|
188
167
|
var includedInDropdown = dropdownPanels.filter(function (item) {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
return (item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.id) === tabId;
|
|
168
|
+
return item.props.id === tabId;
|
|
192
169
|
});
|
|
193
170
|
|
|
194
171
|
if (includedInDropdown.length > 0 && getTabListWidth() > 0) {
|
|
195
172
|
var newDropdownPanels = dropdownPanels.filter(function (item) {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
return (item === null || item === void 0 ? void 0 : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.id) !== tabId;
|
|
173
|
+
return item.props.id !== tabId;
|
|
199
174
|
});
|
|
200
175
|
var newPanels = panels.filter(function (item) {
|
|
201
|
-
return
|
|
176
|
+
return item.props.id !== tabId;
|
|
202
177
|
});
|
|
203
178
|
var newCurrentPanels = currentPanels.slice(0, -1);
|
|
204
179
|
newDropdownPanels.push(currentPanels.pop());
|
|
@@ -213,30 +188,25 @@ var Tabs = function Tabs(_ref) {
|
|
|
213
188
|
setSelectedTabId(tabId);
|
|
214
189
|
};
|
|
215
190
|
|
|
216
|
-
var onRemovePanel = function onRemovePanel(closedPanelId) {
|
|
217
|
-
var panelIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
191
|
+
var onRemovePanel = function onRemovePanel(closedPanelId, panelIndex) {
|
|
218
192
|
var fromDropdownPanels = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
219
193
|
var newSelectedTabId = selectedTabId;
|
|
220
194
|
var remainPanels;
|
|
221
195
|
|
|
222
196
|
if (!fromDropdownPanels) {
|
|
223
|
-
var _remainPanels;
|
|
224
|
-
|
|
225
197
|
remainPanels = panels.filter(function (panel) {
|
|
226
|
-
return
|
|
198
|
+
return panel.props.id !== closedPanelId;
|
|
227
199
|
});
|
|
228
|
-
newSelectedTabId = selectedTabId === closedPanelId ?
|
|
200
|
+
newSelectedTabId = selectedTabId === closedPanelId ? remainPanels[panelIndex - (panelIndex === 0 ? 0 : 1)].props.id : selectedTabId;
|
|
229
201
|
setSelectedTabId(newSelectedTabId);
|
|
230
202
|
} else {
|
|
231
203
|
remainPanels = dropdownPanels.filter(function (panel) {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
return (panel === null || panel === void 0 ? void 0 : (_panel$props = panel.props) === null || _panel$props === void 0 ? void 0 : _panel$props.id) !== closedPanelId;
|
|
204
|
+
return panel.props.id !== closedPanelId;
|
|
235
205
|
});
|
|
236
206
|
setDropdownPanels(remainPanels);
|
|
237
207
|
}
|
|
238
208
|
|
|
239
|
-
if (handlerCloseTab
|
|
209
|
+
if (handlerCloseTab) handlerCloseTab(closedPanelId, newSelectedTabId);
|
|
240
210
|
};
|
|
241
211
|
|
|
242
212
|
var onResize = function onResize() {
|
|
@@ -252,24 +222,19 @@ var Tabs = function Tabs(_ref) {
|
|
|
252
222
|
|
|
253
223
|
var renderContent = function renderContent() {
|
|
254
224
|
var menu = /*#__PURE__*/_react.default.createElement(_Menu.default, _extends({}, props, {
|
|
255
|
-
toolbar: toolbar,
|
|
256
225
|
tabWidth: tabWidth,
|
|
257
|
-
customClass: customClass,
|
|
258
|
-
tabMenuSize: tabMenuSize,
|
|
259
|
-
handlerClick: onMenuClick,
|
|
260
|
-
tabMenuAlign: tabMenuAlign,
|
|
261
|
-
firstTabIdent: firstTabIdent,
|
|
262
|
-
currentPanels: currentPanels,
|
|
263
|
-
selectedTabId: selectedTabId,
|
|
264
|
-
dropdownPanels: dropdownPanels,
|
|
265
|
-
handlerRemovePanel: onRemovePanel,
|
|
266
|
-
customClassForToolBar: customClassForToolBar,
|
|
267
226
|
menuRef: function menuRef(ref) {
|
|
268
227
|
_menuRef.current = ref;
|
|
269
228
|
},
|
|
270
229
|
toolBarRef: function toolBarRef(ref) {
|
|
271
230
|
_toolBarRef.current = ref;
|
|
272
|
-
}
|
|
231
|
+
},
|
|
232
|
+
customClass: customClass,
|
|
233
|
+
currentPanels: currentPanels,
|
|
234
|
+
dropdownPanels: dropdownPanels,
|
|
235
|
+
selectedTabId: selectedTabId,
|
|
236
|
+
handlerClick: onMenuClick,
|
|
237
|
+
handlerRemovePanel: onRemovePanel
|
|
273
238
|
}));
|
|
274
239
|
/*
|
|
275
240
|
Change the order of elements depending of menus position
|
|
@@ -297,20 +262,49 @@ var Tabs = function Tabs(_ref) {
|
|
|
297
262
|
(0, _react.useEffect)(function () {
|
|
298
263
|
getTabsList();
|
|
299
264
|
}, [panels.length, currentPanels.length, tabsContentWidth]);
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
265
|
+
|
|
266
|
+
var getContextValues = function getContextValues() {
|
|
267
|
+
return {
|
|
268
|
+
selectedTabId: selectedTabId,
|
|
269
|
+
contentHeight: contentHeight
|
|
270
|
+
};
|
|
303
271
|
};
|
|
304
|
-
|
|
305
|
-
|
|
272
|
+
|
|
273
|
+
return /*#__PURE__*/_react.default.createElement(_tabHelpers.TabContext.Provider, {
|
|
274
|
+
value: getContextValues()
|
|
306
275
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
307
|
-
ref: function ref(
|
|
308
|
-
componentRef.current =
|
|
276
|
+
ref: function ref(_ref) {
|
|
277
|
+
componentRef.current = _ref;
|
|
309
278
|
},
|
|
310
279
|
className: (0, _tabHelpers.tabsClass)(tabMenuPosition),
|
|
311
280
|
style: style
|
|
312
281
|
}, renderContent()));
|
|
313
282
|
};
|
|
314
283
|
|
|
284
|
+
Tabs.propTypes = {
|
|
285
|
+
selectedTab: _propTypes.default.string,
|
|
286
|
+
tabMenuAlign: _propTypes.default.oneOf(['left', 'center', 'right', 'top', 'bottom']),
|
|
287
|
+
tabMenuPosition: _propTypes.default.oneOf(['top', 'left', 'bottom', 'right']),
|
|
288
|
+
tabMenuSize: _propTypes.default.string,
|
|
289
|
+
handlerTabClick: _propTypes.default.func,
|
|
290
|
+
handlerCloseTab: _propTypes.default.func,
|
|
291
|
+
children: _propTypes.default.any.isRequired,
|
|
292
|
+
toolbar: _propTypes.default.object,
|
|
293
|
+
customClassForToolBar: _propTypes.default.string,
|
|
294
|
+
style: _propTypes.default.object,
|
|
295
|
+
tabsWidthOnExceedCount: _propTypes.default.number
|
|
296
|
+
};
|
|
297
|
+
Tabs.defaultProps = {
|
|
298
|
+
selectedTab: null,
|
|
299
|
+
tabMenuAlign: 'left',
|
|
300
|
+
tabMenuPosition: 'top',
|
|
301
|
+
tabMenuSize: 'default',
|
|
302
|
+
handlerTabClick: null,
|
|
303
|
+
handlerCloseTab: null,
|
|
304
|
+
toolbar: undefined,
|
|
305
|
+
customClassForToolBar: '',
|
|
306
|
+
style: {},
|
|
307
|
+
tabsWidthOnExceedCount: 0
|
|
308
|
+
};
|
|
315
309
|
var _default = Tabs;
|
|
316
310
|
exports.default = _default;
|
package/lib/tabs/tabHelpers.js
CHANGED
|
@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.buildPanels = buildPanels;
|
|
7
|
-
exports.
|
|
7
|
+
exports.tabsClass = tabsClass;
|
|
8
8
|
exports.menuStyles = menuStyles;
|
|
9
9
|
exports.numberAroundZeroAndOne = numberAroundZeroAndOne;
|
|
10
|
-
exports.onDeniedOptions = void 0;
|
|
11
|
-
exports.tabsClass = tabsClass;
|
|
10
|
+
exports.TabContext = exports.onDeniedOptions = void 0;
|
|
12
11
|
|
|
13
|
-
var _react = require("react");
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
14
13
|
|
|
15
14
|
var _Panel = _interopRequireDefault(require("./Panel"));
|
|
16
15
|
|
|
@@ -27,9 +26,7 @@ function buildPanels(children) {
|
|
|
27
26
|
if (!Array.isArray(children)) return new Array(children);
|
|
28
27
|
children.forEach(function (child) {
|
|
29
28
|
if (child.type === _Panel.default) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
if (!((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.hidden)) {
|
|
29
|
+
if (!child.props.hidden) {
|
|
33
30
|
panels.push(child);
|
|
34
31
|
}
|
|
35
32
|
} else if (Array.isArray(child)) {
|
|
@@ -88,6 +85,7 @@ function numberAroundZeroAndOne(props, propName, componentName) {
|
|
|
88
85
|
|
|
89
86
|
var onDeniedOptions = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
|
|
90
87
|
exports.onDeniedOptions = onDeniedOptions;
|
|
91
|
-
|
|
92
|
-
var
|
|
93
|
-
|
|
88
|
+
|
|
89
|
+
var TabContext = /*#__PURE__*/_react.default.createContext();
|
|
90
|
+
|
|
91
|
+
exports.TabContext = TabContext;
|