linear-react-components-ui 1.1.0-beta.6 → 1.1.0
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/babel.config.json +2 -2
- package/lib/alerts/AlertContainer.js +46 -54
- package/lib/alerts/AlertProvider.js +36 -53
- package/lib/alerts/BaseAlert.js +14 -20
- package/lib/alerts/Message.js +37 -46
- package/lib/alerts/helpers.js +3 -3
- package/lib/alerts/index.js +5 -5
- package/lib/alerts/withAlert.js +11 -11
- package/lib/assets/styles/checkbox.scss +0 -8
- package/lib/avatar/index.js +42 -41
- package/lib/badge/index.js +15 -16
- package/lib/buttons/ActivateButton.js +6 -8
- package/lib/buttons/AddButton.js +9 -11
- package/lib/buttons/Button.js +11 -11
- package/lib/buttons/ButtonGroups.js +8 -6
- package/lib/buttons/CancelButton.js +9 -7
- package/lib/buttons/DangerButton.js +9 -7
- package/lib/buttons/DefaultButton.js +66 -85
- package/lib/buttons/DestroyButton.js +10 -8
- package/lib/buttons/EditButton.js +6 -8
- package/lib/buttons/InactivateButton.js +6 -8
- package/lib/buttons/InfoButton.js +9 -7
- package/lib/buttons/PrimaryButton.js +9 -7
- package/lib/buttons/RestoreButton.js +6 -8
- package/lib/buttons/SaveButton.js +9 -7
- package/lib/buttons/SuccessButton.js +9 -7
- package/lib/buttons/WarningButton.js +9 -7
- package/lib/buttons/button_container/index.js +16 -19
- package/lib/buttons/index.js +31 -31
- package/lib/buttons/split_button/index.js +24 -26
- package/lib/calendar/DangerCalendar.js +9 -7
- package/lib/calendar/InfoCalendar.js +9 -7
- package/lib/calendar/PrimaryCalendar.js +9 -7
- package/lib/calendar/SuccessCalendar.js +9 -7
- package/lib/calendar/WarningCalendar.js +9 -7
- package/lib/calendar/base/Day.js +16 -14
- package/lib/calendar/base/Month.js +15 -19
- package/lib/calendar/base/Week.js +15 -19
- package/lib/calendar/base/helpers.js +17 -15
- package/lib/calendar/base/index.js +38 -51
- package/lib/calendar/index.js +13 -13
- package/lib/checkbox/Label.js +10 -8
- package/lib/checkbox/index.d.ts +1 -1
- package/lib/checkbox/index.js +75 -97
- package/lib/checkbox/types.d.ts +0 -1
- package/lib/dialog/Alert.js +7 -7
- package/lib/dialog/Custom.js +20 -23
- package/lib/dialog/Error.js +7 -7
- package/lib/dialog/Information.js +7 -7
- package/lib/dialog/Question.js +16 -16
- package/lib/dialog/Warning.js +7 -7
- package/lib/dialog/base/Content.js +9 -7
- package/lib/dialog/base/Footer.js +6 -8
- package/lib/dialog/base/Header.js +32 -34
- package/lib/dialog/base/index.js +64 -72
- package/lib/dialog/base/style.js +8 -10
- package/lib/dialog/form/index.js +35 -38
- package/lib/dialog/index.js +15 -15
- package/lib/drawer/Content.js +14 -12
- package/lib/drawer/Drawer.js +68 -82
- package/lib/drawer/Header.js +45 -48
- package/lib/drawer/helpers.js +4 -4
- package/lib/drawer/index.js +7 -7
- package/lib/dropdown/Popup.js +37 -40
- package/lib/dropdown/helper.js +6 -6
- package/lib/dropdown/withDropdown.js +44 -63
- package/lib/fieldset/index.js +49 -56
- package/lib/form/Field.js +73 -79
- package/lib/form/FieldArray.js +76 -85
- package/lib/form/FieldNumber.js +34 -42
- package/lib/form/FieldPeriod.js +54 -59
- package/lib/form/helpers.js +29 -28
- package/lib/form/index.js +121 -151
- package/lib/form/withFieldHOC.js +36 -42
- package/lib/form/withFormSecurity.js +27 -35
- package/lib/gridlayout/GridCol.js +16 -15
- package/lib/gridlayout/GridRow.js +11 -12
- package/lib/gridlayout/index.js +5 -5
- package/lib/hint/index.js +25 -29
- package/lib/icons/helper.js +2 -2
- package/lib/icons/index.js +37 -48
- package/lib/index.js +19 -19
- package/lib/inputs/base/InputTextBase.js +99 -109
- package/lib/inputs/base/helpers.js +29 -23
- package/lib/inputs/color/index.js +34 -44
- package/lib/inputs/date/Dialog.js +10 -8
- package/lib/inputs/date/Dropdown.js +14 -12
- package/lib/inputs/date/helpers.js +18 -14
- package/lib/inputs/date/index.js +96 -133
- package/lib/inputs/file/DefaultFile.js +50 -74
- package/lib/inputs/file/DragDropFile.js +119 -172
- package/lib/inputs/file/File.js +22 -28
- package/lib/inputs/file/FileButtonSettings.js +14 -16
- package/lib/inputs/file/helpers.js +6 -7
- package/lib/inputs/file/index.js +7 -7
- package/lib/inputs/inputHOC.js +23 -35
- package/lib/inputs/mask/BaseMask.js +33 -27
- package/lib/inputs/mask/Cnpj.js +19 -31
- package/lib/inputs/mask/Cpf.js +20 -35
- package/lib/inputs/mask/Phone.js +8 -6
- package/lib/inputs/mask/ZipCode.js +6 -8
- package/lib/inputs/mask/helpers.js +21 -26
- package/lib/inputs/mask/imaskHOC.js +102 -122
- package/lib/inputs/mask/index.js +11 -11
- package/lib/inputs/multiSelect/ActionButtons.js +18 -18
- package/lib/inputs/multiSelect/Dropdown.js +63 -75
- package/lib/inputs/multiSelect/helper.js +9 -7
- package/lib/inputs/multiSelect/index.js +85 -136
- package/lib/inputs/number/BaseNumber.js +23 -21
- package/lib/inputs/number/Currency.js +9 -8
- package/lib/inputs/number/Decimal.js +4 -6
- package/lib/inputs/number/format_number.js +9 -6
- package/lib/inputs/number/index.js +13 -13
- package/lib/inputs/period/Dialog.js +10 -8
- package/lib/inputs/period/Dropdown.js +12 -12
- package/lib/inputs/period/PeriodList.js +19 -17
- package/lib/inputs/period/helper.js +38 -37
- package/lib/inputs/period/index.js +147 -196
- package/lib/inputs/search/index.js +45 -67
- package/lib/inputs/select/ActionButtons.js +18 -18
- package/lib/inputs/select/Dropdown.js +51 -65
- package/lib/inputs/select/helper.js +55 -44
- package/lib/inputs/select/index.js +13 -11
- package/lib/inputs/select/multiple/Selecteds.js +20 -22
- package/lib/inputs/select/multiple/index.js +90 -143
- package/lib/inputs/select/simple/index.js +103 -156
- package/lib/inputs/text/index.js +4 -6
- package/lib/inputs/textarea/index.js +11 -10
- package/lib/internals/colorStyles.js +3 -3
- package/lib/internals/constants.js +2 -2
- package/lib/internals/withTooltip.js +54 -68
- package/lib/labelMessages/index.js +28 -47
- package/lib/labels/DangerLabel.js +9 -7
- package/lib/labels/DefaultLabel.js +29 -42
- package/lib/labels/InfoLabel.js +9 -7
- package/lib/labels/PrimaryLabel.js +9 -7
- package/lib/labels/SuccessLabel.js +9 -7
- package/lib/labels/WarningLabel.js +9 -7
- package/lib/labels/index.js +15 -15
- package/lib/labels/label_container/index.js +11 -10
- package/lib/list/Header.js +12 -10
- package/lib/list/Item.js +58 -72
- package/lib/list/Separator.js +6 -8
- package/lib/list/helpers.js +3 -3
- package/lib/list/index.js +81 -107
- package/lib/menus/float/MenuItem.js +27 -27
- package/lib/menus/float/SubMenuContainer.js +39 -44
- package/lib/menus/float/helpers.js +4 -4
- package/lib/menus/float/index.js +25 -25
- package/lib/menus/index.js +3 -3
- package/lib/menus/sidenav/ExpandMenu.js +12 -10
- package/lib/menus/sidenav/MenuLink.js +12 -10
- package/lib/menus/sidenav/NavMenuGroup.js +15 -13
- package/lib/menus/sidenav/NavMenuItem.js +56 -69
- package/lib/menus/sidenav/NavSubMenuItem.js +24 -28
- package/lib/menus/sidenav/helpers.js +7 -7
- package/lib/menus/sidenav/index.js +92 -119
- package/lib/menus/sidenav/popup_menu_search/EmptyList.js +12 -11
- package/lib/menus/sidenav/popup_menu_search/index.js +64 -84
- package/lib/noPermission/index.js +15 -17
- package/lib/panel/Content.js +46 -58
- package/lib/panel/DangerPanel.js +6 -8
- package/lib/panel/Default.js +45 -59
- package/lib/panel/Header.js +37 -34
- package/lib/panel/InfoPanel.js +6 -8
- package/lib/panel/PrimaryPanel.js +6 -8
- package/lib/panel/SuccessPanel.js +6 -8
- package/lib/panel/ToolBar.js +8 -6
- package/lib/panel/WarningPanel.js +6 -8
- package/lib/panel/helpers.js +13 -11
- package/lib/panel/index.js +17 -17
- package/lib/permissionValidations.js +26 -28
- package/lib/popover/PopoverText.js +8 -6
- package/lib/popover/PopoverTitle.js +8 -6
- package/lib/popover/index.js +21 -24
- package/lib/progress/Bar.js +34 -39
- package/lib/progress/index.js +19 -20
- package/lib/radio/index.js +37 -57
- package/lib/shortcuts/index.js +13 -11
- package/lib/skeleton/SkeletonContainer.js +12 -12
- package/lib/skeleton/index.js +27 -33
- package/lib/spinner/SpinnerLoading.js +46 -46
- package/lib/spinner/index.js +27 -40
- package/lib/split/Split.js +97 -113
- package/lib/split/SplitSide.js +22 -20
- package/lib/split/helpers.js +4 -4
- package/lib/split/index.js +5 -5
- package/lib/table/Body.js +47 -49
- package/lib/table/Header.js +39 -41
- package/lib/table/HeaderColumn.js +22 -22
- package/lib/table/Row.js +48 -50
- package/lib/table/RowColumn.js +37 -35
- package/lib/table/helpers.js +9 -12
- package/lib/table/index.js +89 -108
- package/lib/tabs/DropdownTabs.js +39 -43
- package/lib/tabs/Menu.js +20 -19
- package/lib/tabs/MenuTabs.js +48 -55
- package/lib/tabs/Panel.js +54 -73
- package/lib/tabs/context.js +62 -93
- package/lib/tabs/index.js +30 -35
- package/lib/tabs/tabHelpers.js +24 -21
- package/lib/toolbar/ButtonBar.js +49 -52
- package/lib/toolbar/LabelBar.js +38 -41
- package/lib/toolbar/Separator.js +6 -8
- package/lib/toolbar/ToolBarGroup.js +9 -8
- package/lib/toolbar/helpers.js +3 -3
- package/lib/toolbar/index.js +25 -26
- package/lib/tooltip/index.js +29 -33
- package/lib/treetable/Body.js +22 -33
- package/lib/treetable/Header.js +13 -15
- package/lib/treetable/Row.d.ts +1 -1
- package/lib/treetable/Row.js +107 -158
- package/lib/treetable/helpers.d.ts +1 -1
- package/lib/treetable/helpers.js +18 -24
- package/lib/treetable/index.d.ts +2 -2
- package/lib/treetable/index.js +11 -12
- package/lib/treeview/Header.js +11 -9
- package/lib/treeview/Node.js +109 -148
- package/lib/treeview/constants.js +2 -2
- package/lib/treeview/index.js +156 -221
- package/lib/uitour/helpers.js +3 -3
- package/lib/uitour/index.js +67 -106
- package/package.json +5 -14
- /package/lib/{types.d-BfM3lUbt.d.ts → types.d-DvJcBS8L.d.ts} +0 -0
|
@@ -3,19 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
position =
|
|
13
|
-
children
|
|
14
|
-
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const LabelContainer = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
customClass,
|
|
12
|
+
position = 'left',
|
|
13
|
+
children
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
15
16
|
className: "lbl-container ".concat(customClass),
|
|
16
17
|
style: {
|
|
17
|
-
|
|
18
|
+
float: position
|
|
18
19
|
}
|
|
19
20
|
}, children);
|
|
20
21
|
};
|
|
21
|
-
var _default = exports
|
|
22
|
+
var _default = exports.default = LabelContainer;
|
package/lib/list/Header.js
CHANGED
|
@@ -3,19 +3,21 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const Header = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
title,
|
|
12
|
+
children,
|
|
13
|
+
style,
|
|
14
|
+
customClass
|
|
15
|
+
} = _ref;
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement("li", {
|
|
15
17
|
className: "list-header ".concat(customClass),
|
|
16
18
|
style: style
|
|
17
|
-
}, /*#__PURE__*/_react
|
|
19
|
+
}, /*#__PURE__*/_react.default.createElement("h1", {
|
|
18
20
|
className: "title"
|
|
19
21
|
}, title), children);
|
|
20
22
|
};
|
|
21
|
-
var _default = exports
|
|
23
|
+
var _default = exports.default = Header;
|
package/lib/list/Item.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
8
|
var _reactRouterDom = require("react-router-dom");
|
|
10
9
|
var _icons = _interopRequireDefault(require("../icons"));
|
|
@@ -13,123 +12,110 @@ var _helpers = require("./helpers");
|
|
|
13
12
|
var _withDropdown = require("../dropdown/withDropdown");
|
|
14
13
|
var constants = _interopRequireWildcard(require("../internals/constants"));
|
|
15
14
|
var _permissionValidations = require("../permissionValidations");
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
17
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
18
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
18
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
var dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
|
|
59
|
-
var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
|
|
60
|
-
var _useState = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr)),
|
|
61
|
-
_useState2 = _slicedToArray(_useState, 1),
|
|
62
|
-
onDenied = _useState2[0];
|
|
63
|
-
var navigate = (0, _reactRouterDom.useNavigate)();
|
|
64
|
-
var shouldDisable = function shouldDisable() {
|
|
65
|
-
return disabled || onDenied.disabled;
|
|
66
|
-
};
|
|
67
|
-
var getClass = function getClass() {
|
|
68
|
-
return "item ".concat(customClass, " ").concat(separator && 'list-separator', " ").concat(shouldDisable() && 'disabled', "\n ").concat(displayCheckbox && 'list-checkbox');
|
|
69
|
-
};
|
|
70
|
-
var getIcon = function getIcon(iconName, icon) {
|
|
19
|
+
const Item = props => {
|
|
20
|
+
const {
|
|
21
|
+
onClick,
|
|
22
|
+
leftIconName,
|
|
23
|
+
leftIcon,
|
|
24
|
+
displayCheckbox,
|
|
25
|
+
url,
|
|
26
|
+
leftElement,
|
|
27
|
+
hovered = true,
|
|
28
|
+
customClass,
|
|
29
|
+
text,
|
|
30
|
+
subText,
|
|
31
|
+
rightIcon,
|
|
32
|
+
rightIconName,
|
|
33
|
+
itemId = '',
|
|
34
|
+
rightElement,
|
|
35
|
+
style,
|
|
36
|
+
children,
|
|
37
|
+
disabled,
|
|
38
|
+
separator = true,
|
|
39
|
+
visible = true,
|
|
40
|
+
permissionAttr,
|
|
41
|
+
skeletonize
|
|
42
|
+
} = props;
|
|
43
|
+
const {
|
|
44
|
+
handleSelectItem,
|
|
45
|
+
selectable,
|
|
46
|
+
selectedItemId,
|
|
47
|
+
selectedItemRef,
|
|
48
|
+
selectOnEnter
|
|
49
|
+
} = (0, _react.useContext)(_helpers.ListContext);
|
|
50
|
+
const dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
|
|
51
|
+
const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
|
|
52
|
+
const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
|
|
53
|
+
const navigate = (0, _reactRouterDom.useNavigate)();
|
|
54
|
+
const shouldDisable = () => disabled || onDenied.disabled;
|
|
55
|
+
const getClass = () => "item ".concat(customClass, " ").concat(separator && 'list-separator', " ").concat(shouldDisable() && 'disabled', "\n ").concat(displayCheckbox && 'list-checkbox');
|
|
56
|
+
const getIcon = (iconName, icon) => {
|
|
71
57
|
if (icon) {
|
|
72
58
|
return icon;
|
|
73
59
|
} else if (iconName) {
|
|
74
|
-
return /*#__PURE__*/_react
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
75
61
|
name: iconName
|
|
76
62
|
});
|
|
77
63
|
}
|
|
78
64
|
return null;
|
|
79
65
|
};
|
|
80
|
-
|
|
66
|
+
const handleOnSelectItem = e => {
|
|
81
67
|
if (onClick !== undefined) onClick(e, itemId);
|
|
82
68
|
if (dropdownContext && dropdownContext.handleDropdownClose) {
|
|
83
69
|
dropdownContext.handleDropdownClose();
|
|
84
70
|
}
|
|
85
71
|
if (selectable) handleSelectItem(itemId, onClick);
|
|
86
72
|
};
|
|
87
|
-
|
|
73
|
+
const onKeyDown = (0, _react.useCallback)(e => {
|
|
88
74
|
if ([constants.keyCodes.ENTER].includes(e.keyCode) && !skeletonize && itemId && selectedItemId === itemId) {
|
|
89
75
|
e.preventDefault();
|
|
90
76
|
handleOnSelectItem(e);
|
|
91
77
|
if (url) navigate(url);
|
|
92
78
|
}
|
|
93
79
|
}, [url, selectedItemId, itemId]);
|
|
94
|
-
|
|
80
|
+
const getProps = () => {
|
|
95
81
|
if (shouldDisable()) return undefined;
|
|
96
82
|
if (onClick === undefined && dropdownContext === undefined && !selectable) return null;
|
|
97
83
|
return {
|
|
98
|
-
onClick:
|
|
84
|
+
onClick: event => {
|
|
99
85
|
handleOnSelectItem(event);
|
|
100
86
|
},
|
|
101
87
|
role: 'button',
|
|
102
88
|
tabIndex: 0
|
|
103
89
|
};
|
|
104
90
|
};
|
|
105
|
-
(0, _react.useEffect)(
|
|
91
|
+
(0, _react.useEffect)(() => {
|
|
106
92
|
if (selectOnEnter) document.addEventListener('keydown', onKeyDown);
|
|
107
|
-
return
|
|
93
|
+
return () => {
|
|
108
94
|
document.removeEventListener('keydown', onKeyDown);
|
|
109
95
|
};
|
|
110
96
|
}, [url, selectedItemId, itemId]);
|
|
111
97
|
if (!visible || onDenied.unvisible) return null;
|
|
112
|
-
return /*#__PURE__*/_react
|
|
98
|
+
return /*#__PURE__*/_react.default.createElement("li", _extends({
|
|
113
99
|
ref: itemId && selectedItemId === itemId ? selectedItemRef : null,
|
|
114
100
|
style: style,
|
|
115
101
|
className: "item-container ".concat(hovered && 'hovered', "\n ").concat(itemId && selectedItemId === itemId ? '-activedlist' : '')
|
|
116
102
|
}, getProps(), {
|
|
117
103
|
key: itemId
|
|
118
|
-
}), url && !shouldDisable() && /*#__PURE__*/_react
|
|
104
|
+
}), url && !shouldDisable() && /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
|
|
119
105
|
className: "linkitem",
|
|
120
106
|
to: url
|
|
121
|
-
}), (displayCheckbox || leftElement || leftIconName || leftIcon) && /*#__PURE__*/_react
|
|
107
|
+
}), (displayCheckbox || leftElement || leftIconName || leftIcon) && /*#__PURE__*/_react.default.createElement("div", {
|
|
122
108
|
className: "".concat(getClass(), " -icon-left")
|
|
123
|
-
}, displayCheckbox && /*#__PURE__*/_react
|
|
109
|
+
}, displayCheckbox && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
124
110
|
name: "checkbox"
|
|
125
|
-
}), leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react
|
|
111
|
+
}), leftElement, getIcon(leftIconName, leftIcon)), (text || subText || children) && /*#__PURE__*/_react.default.createElement("div", {
|
|
126
112
|
className: "".concat(getClass())
|
|
127
|
-
}, /*#__PURE__*/_react
|
|
113
|
+
}, /*#__PURE__*/_react.default.createElement("p", {
|
|
128
114
|
className: "".concat(text && 'text')
|
|
129
|
-
}, text), /*#__PURE__*/_react
|
|
115
|
+
}, text), /*#__PURE__*/_react.default.createElement("p", {
|
|
130
116
|
className: "".concat(subText && 'subtext')
|
|
131
|
-
}, subText), children), (rightIconName || rightIcon || rightElement) && /*#__PURE__*/_react
|
|
117
|
+
}, subText), children), (rightIconName || rightIcon || rightElement) && /*#__PURE__*/_react.default.createElement("div", {
|
|
132
118
|
className: "".concat(getClass(), " -icon-right")
|
|
133
119
|
}, getIcon(rightIconName, rightIcon), rightElement));
|
|
134
120
|
};
|
|
135
|
-
var _default = exports
|
|
121
|
+
var _default = exports.default = Item;
|
package/lib/list/Separator.js
CHANGED
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
var _default = exports["default"] = Separator;
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const Separator = () => /*#__PURE__*/_react.default.createElement("li", {
|
|
10
|
+
className: "list-separator"
|
|
11
|
+
});
|
|
12
|
+
var _default = exports.default = Separator;
|
package/lib/list/helpers.js
CHANGED
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.ListContext = exports.LIST_ITEMS_TYPES = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const ListContext = exports.ListContext = /*#__PURE__*/_react.default.createContext({});
|
|
10
|
+
const LIST_ITEMS_TYPES = exports.LIST_ITEMS_TYPES = {
|
|
11
11
|
listHeader: 'Header',
|
|
12
12
|
listItem: 'Item',
|
|
13
13
|
listSeparator: 'Separator'
|
package/lib/list/index.js
CHANGED
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
Object.defineProperty(exports, "ListHeader", {
|
|
8
7
|
enumerable: true,
|
|
9
|
-
get: function
|
|
10
|
-
return _Header
|
|
8
|
+
get: function () {
|
|
9
|
+
return _Header.default;
|
|
11
10
|
}
|
|
12
11
|
});
|
|
13
12
|
Object.defineProperty(exports, "ListItem", {
|
|
14
13
|
enumerable: true,
|
|
15
|
-
get: function
|
|
16
|
-
return _Item
|
|
14
|
+
get: function () {
|
|
15
|
+
return _Item.default;
|
|
17
16
|
}
|
|
18
17
|
});
|
|
19
18
|
Object.defineProperty(exports, "ListSeparator", {
|
|
20
19
|
enumerable: true,
|
|
21
|
-
get: function
|
|
22
|
-
return _Separator
|
|
20
|
+
get: function () {
|
|
21
|
+
return _Separator.default;
|
|
23
22
|
}
|
|
24
23
|
});
|
|
25
|
-
exports
|
|
24
|
+
exports.default = void 0;
|
|
26
25
|
var _react = _interopRequireWildcard(require("react"));
|
|
27
26
|
var _Header = _interopRequireDefault(require("./Header"));
|
|
28
27
|
var _Item = _interopRequireDefault(require("./Item"));
|
|
@@ -31,115 +30,94 @@ var _Separator = _interopRequireDefault(require("./Separator"));
|
|
|
31
30
|
require("../assets/styles/list.scss");
|
|
32
31
|
var _helpers = require("./helpers");
|
|
33
32
|
var _skeleton = _interopRequireDefault(require("../skeleton"));
|
|
34
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
35
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
36
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
selectOnEnter
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
setSelectedItemId = _useState2[1];
|
|
65
|
-
var _useState3 = (0, _react.useState)([]),
|
|
66
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
67
|
-
itensId = _useState4[0],
|
|
68
|
-
setItensId = _useState4[1];
|
|
69
|
-
var _useState5 = (0, _react.useState)(children),
|
|
70
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
71
|
-
newChildren = _useState6[0],
|
|
72
|
-
setNewChildren = _useState6[1];
|
|
73
|
-
var contextValues = {
|
|
74
|
-
selectable: selectable,
|
|
75
|
-
selectOnEnter: selectOnEnter,
|
|
76
|
-
selectedItemId: selectedItemId,
|
|
77
|
-
selectedItemRef: selectedItemRef,
|
|
78
|
-
children: children,
|
|
79
|
-
skeletonize: skeletonize,
|
|
80
|
-
handleSelectItem: function handleSelectItem(itemId, onClick) {
|
|
33
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
34
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
35
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
36
|
+
const List = props => {
|
|
37
|
+
const {
|
|
38
|
+
children,
|
|
39
|
+
customClass,
|
|
40
|
+
condensed,
|
|
41
|
+
transparent,
|
|
42
|
+
style,
|
|
43
|
+
selectable,
|
|
44
|
+
onSelectItem,
|
|
45
|
+
skeletonize = false,
|
|
46
|
+
skeletonHeight = 48,
|
|
47
|
+
skeletonItens = 5,
|
|
48
|
+
selectOnEnter = false
|
|
49
|
+
} = props;
|
|
50
|
+
const selectedItemRef = (0, _react.useRef)(null);
|
|
51
|
+
const listRef = (0, _react.useRef)(null);
|
|
52
|
+
const [selectedItemId, setSelectedItemId] = (0, _react.useState)('');
|
|
53
|
+
const [itensId, setItensId] = (0, _react.useState)([]);
|
|
54
|
+
const [newChildren, setNewChildren] = (0, _react.useState)(children);
|
|
55
|
+
const contextValues = {
|
|
56
|
+
selectable,
|
|
57
|
+
selectOnEnter,
|
|
58
|
+
selectedItemId,
|
|
59
|
+
selectedItemRef,
|
|
60
|
+
children,
|
|
61
|
+
skeletonize,
|
|
62
|
+
handleSelectItem: (itemId, onClick) => {
|
|
81
63
|
if (!onSelectItem && onClick) setSelectedItemId(itemId);
|
|
82
64
|
if (onSelectItem) onSelectItem(itemId);
|
|
83
65
|
}
|
|
84
66
|
};
|
|
85
|
-
|
|
67
|
+
const onKeyDown = e => {
|
|
86
68
|
if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode) && !skeletonize) {
|
|
87
69
|
e.preventDefault();
|
|
88
70
|
if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
|
|
89
71
|
if (selectedItemId === itensId[itensId.length - 1]) {
|
|
90
72
|
setSelectedItemId(itensId[0]);
|
|
91
73
|
} else {
|
|
92
|
-
|
|
74
|
+
const index = itensId.indexOf(selectedItemId === '' ? '0' : selectedItemId);
|
|
93
75
|
setSelectedItemId(itensId[index + 1]);
|
|
94
76
|
}
|
|
95
77
|
} else if (e.keyCode === constants.keyCodes.ARROW_UP) {
|
|
96
78
|
if (selectedItemId === itensId[0]) {
|
|
97
79
|
setSelectedItemId(itensId[itensId.length - 1]);
|
|
98
80
|
} else {
|
|
99
|
-
|
|
100
|
-
setSelectedItemId(itensId[
|
|
81
|
+
const index = itensId.indexOf(selectedItemId);
|
|
82
|
+
setSelectedItemId(itensId[index - 1]);
|
|
101
83
|
}
|
|
102
84
|
}
|
|
103
85
|
return selectedItemRef.current && selectedItemRef.current.focus();
|
|
104
86
|
}
|
|
105
87
|
return null;
|
|
106
88
|
};
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
return /*#__PURE__*/_react
|
|
89
|
+
const getSkeleton = function () {
|
|
90
|
+
let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
91
|
+
const maxSkeletonsItensExceeded = 2;
|
|
92
|
+
const skeletonItensCount = length > skeletonItens ? maxSkeletonsItensExceeded : Math.floor(skeletonItens / length);
|
|
93
|
+
const skeletonItensList = Array.from(Array(skeletonItensCount).keys());
|
|
94
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
113
95
|
className: "skeleton-transparency"
|
|
114
|
-
}, skeletonItensList.map(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}));
|
|
127
|
-
}));
|
|
96
|
+
}, skeletonItensList.map(id => /*#__PURE__*/_react.default.createElement(_Item.default, {
|
|
97
|
+
key: id,
|
|
98
|
+
hovered: false,
|
|
99
|
+
style: {
|
|
100
|
+
pointerEvents: 'none'
|
|
101
|
+
}
|
|
102
|
+
}, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
|
|
103
|
+
height: skeletonHeight,
|
|
104
|
+
style: {
|
|
105
|
+
margin: '6px 0'
|
|
106
|
+
}
|
|
107
|
+
}))));
|
|
128
108
|
};
|
|
129
|
-
|
|
109
|
+
const getNewChildren = headersChildren => {
|
|
130
110
|
if (!headersChildren) return getSkeleton();
|
|
131
|
-
return Array.isArray(headersChildren) && headersChildren.length > 0 ? headersChildren.map(
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}, item, getSkeleton(headersChildren.length));
|
|
135
|
-
}) : /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, headersChildren, getSkeleton());
|
|
111
|
+
return Array.isArray(headersChildren) && headersChildren.length > 0 ? headersChildren.map(item => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
|
|
112
|
+
key: item.props.title
|
|
113
|
+
}, item, getSkeleton(headersChildren.length))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, headersChildren, getSkeleton());
|
|
136
114
|
};
|
|
137
|
-
(0, _react.useEffect)(
|
|
115
|
+
(0, _react.useEffect)(() => {
|
|
138
116
|
if (selectedItemRef.current && listRef.current && listRef.current.scroll) {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
117
|
+
const selectedItemRect = selectedItemRef.current.getBoundingClientRect();
|
|
118
|
+
const listRect = listRef.current.getBoundingClientRect();
|
|
119
|
+
const defaultScrollTop = 0;
|
|
120
|
+
const defaultBottomOffset = 100;
|
|
143
121
|
if (selectedItemRect.top - selectedItemRect.height > listRect.bottom) {
|
|
144
122
|
listRef.current.scroll({
|
|
145
123
|
top: selectedItemRect.top
|
|
@@ -159,34 +137,30 @@ var List = function List(props) {
|
|
|
159
137
|
}
|
|
160
138
|
}
|
|
161
139
|
}, [selectedItemRef.current]);
|
|
162
|
-
(0, _react.useEffect)(
|
|
140
|
+
(0, _react.useEffect)(() => {
|
|
163
141
|
if (!skeletonize) document.addEventListener('keydown', onKeyDown);
|
|
164
|
-
return
|
|
142
|
+
return () => {
|
|
165
143
|
document.removeEventListener('keydown', onKeyDown);
|
|
166
144
|
};
|
|
167
145
|
}, [skeletonize, selectedItemId, itensId]);
|
|
168
|
-
(0, _react.useEffect)(
|
|
146
|
+
(0, _react.useEffect)(() => {
|
|
169
147
|
if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
|
|
170
148
|
}, [props.selectedItemId]);
|
|
171
|
-
(0, _react.useEffect)(
|
|
149
|
+
(0, _react.useEffect)(() => {
|
|
172
150
|
if (Array.isArray(children) && children.length > 0) {
|
|
173
|
-
|
|
174
|
-
return item.props && item.props.itemId;
|
|
175
|
-
}).filter(Boolean);
|
|
151
|
+
const newItensIds = children.map(item => item.props && item.props.itemId).filter(Boolean);
|
|
176
152
|
setItensId(newItensIds);
|
|
177
153
|
} else if (!Array.isArray(children) && children.props) {
|
|
178
|
-
|
|
154
|
+
const childrenWithProps = children;
|
|
179
155
|
if (childrenWithProps.props.itemId) setItensId([childrenWithProps.props.itemId]);
|
|
180
156
|
}
|
|
181
157
|
}, [children]);
|
|
182
|
-
(0, _react.useEffect)(
|
|
158
|
+
(0, _react.useEffect)(() => {
|
|
183
159
|
if (skeletonize) {
|
|
184
|
-
|
|
160
|
+
let headersChildren = null;
|
|
185
161
|
if (Array.isArray(children) && children.length > 0) {
|
|
186
|
-
|
|
187
|
-
headersChildren = childrenWithType.filter(
|
|
188
|
-
return item.type && typeof item.type !== 'string' && item.type.name === _helpers.LIST_ITEMS_TYPES.listHeader;
|
|
189
|
-
});
|
|
162
|
+
const childrenWithType = children;
|
|
163
|
+
headersChildren = childrenWithType.filter(item => item.type && typeof item.type !== 'string' && item.type.name === _helpers.LIST_ITEMS_TYPES.listHeader);
|
|
190
164
|
} else if (!Array.isArray(children)) {
|
|
191
165
|
headersChildren = children.type && typeof children.type !== 'string' && children.type.name === _helpers.LIST_ITEMS_TYPES.listHeader ? children : null;
|
|
192
166
|
}
|
|
@@ -195,13 +169,13 @@ var List = function List(props) {
|
|
|
195
169
|
setNewChildren(children);
|
|
196
170
|
}
|
|
197
171
|
}, [skeletonize, children]);
|
|
198
|
-
return /*#__PURE__*/_react
|
|
172
|
+
return /*#__PURE__*/_react.default.createElement(_helpers.ListContext.Provider, {
|
|
199
173
|
value: contextValues
|
|
200
|
-
}, /*#__PURE__*/_react
|
|
174
|
+
}, /*#__PURE__*/_react.default.createElement("ul", {
|
|
201
175
|
"data-testid": "list-component",
|
|
202
176
|
style: style,
|
|
203
177
|
ref: listRef,
|
|
204
178
|
className: "list-component ".concat(condensed && '-condensed', "\n ").concat(customClass, " ").concat(!transparent && '-listbackground')
|
|
205
179
|
}, newChildren));
|
|
206
180
|
};
|
|
207
|
-
var _default = exports
|
|
181
|
+
var _default = exports.default = List;
|