@laerdal/life-react-components 2.3.1-dev.12 → 2.3.1-dev.13
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/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +6 -65
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +6 -65
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs +19 -102
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.d.ts +1 -4
- package/dist/GlobalNavigationBar/desktop/SubMenu.js +19 -102
- package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.cjs +2 -4
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.js +2 -4
- package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/SideMenu/types.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs +3 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.js +3 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -1
- package/dist/Table/Table.cjs +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +1 -0
- package/dist/Tabs/TabLink.cjs +53 -50
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.d.ts +14 -13
- package/dist/Tabs/TabLink.js +53 -50
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Toggles/TogglerTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipOverflow.cjs +1 -1
- package/dist/Tooltips/TooltipOverflow.cjs.map +1 -1
- package/dist/Tooltips/TooltipOverflow.js +1 -1
- package/dist/Tooltips/TooltipOverflow.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/assets/index.cjs.map +1 -1
- package/dist/assets/index.js.map +1 -1
- package/dist/common/ActionWithin.cjs +1 -1
- package/dist/common/ActionWithin.js +1 -1
- package/dist/common/FocusVisible.cjs +1 -1
- package/dist/common/FocusVisible.js +1 -1
- package/dist/icons/systemicons/LoadingMedium.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingMedium.js.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.js.map +1 -1
- package/package.json +5 -6
|
@@ -22,7 +22,7 @@ export var SubMenuWrapper = styled.div(_templateObject || (_templateObject = _ta
|
|
|
22
22
|
}, function (props) {
|
|
23
23
|
return !props.visible ? 'display: none;' : '';
|
|
24
24
|
});
|
|
25
|
-
export var SubMenu =
|
|
25
|
+
export var SubMenu = function SubMenu(_ref) {
|
|
26
26
|
var item = _ref.item,
|
|
27
27
|
index = _ref.index,
|
|
28
28
|
topLevel = _ref.topLevel,
|
|
@@ -30,33 +30,11 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
30
30
|
onSubMenuHidden = _ref.onSubMenuHidden,
|
|
31
31
|
onSubMenuOpened = _ref.onSubMenuOpened,
|
|
32
32
|
onItemStateChanged = _ref.onItemStateChanged,
|
|
33
|
-
focusedItemId = _ref.focusedItemId,
|
|
34
33
|
activeItemId = _ref.activeItemId,
|
|
35
|
-
nestPath = _ref.nestPath
|
|
36
|
-
ariaLabelledBy = _ref.ariaLabelledBy,
|
|
37
|
-
onItemFocused = _ref.onItemFocused;
|
|
34
|
+
nestPath = _ref.nestPath;
|
|
38
35
|
var _React$useState = React.useState({}),
|
|
39
36
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
40
37
|
forceUpdate = _React$useState2[1];
|
|
41
|
-
var focusedRef = React.useRef({
|
|
42
|
-
index: -1
|
|
43
|
-
});
|
|
44
|
-
var _React$useState3 = React.useState([]),
|
|
45
|
-
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
46
|
-
allRefs = _React$useState4[0],
|
|
47
|
-
setAllRefs = _React$useState4[1];
|
|
48
|
-
var _React$useState5 = React.useState([]),
|
|
49
|
-
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
50
|
-
subMenuRefs = _React$useState6[0],
|
|
51
|
-
setAllSubMenuRefs = _React$useState6[1];
|
|
52
|
-
React.useEffect(function () {
|
|
53
|
-
setAllRefs(item.items.map(function (x) {
|
|
54
|
-
return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : /*#__PURE__*/React.createRef();
|
|
55
|
-
}));
|
|
56
|
-
setAllSubMenuRefs(item.items.map(function (x) {
|
|
57
|
-
return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
|
|
58
|
-
}));
|
|
59
|
-
}, [item]);
|
|
60
38
|
var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
|
|
61
39
|
return x == item.id;
|
|
62
40
|
});
|
|
@@ -81,77 +59,30 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
81
59
|
forceUpdate({});
|
|
82
60
|
}
|
|
83
61
|
};
|
|
84
|
-
var _onKeyDown = function onKeyDown(
|
|
85
|
-
if (
|
|
86
|
-
|
|
87
|
-
e.preventDefault();
|
|
88
|
-
if (focusedRef.current.index > 0) {
|
|
89
|
-
setNewFocusedElement(focusedRef.current.index - 1);
|
|
90
|
-
}
|
|
91
|
-
} else if (e.key === 'ArrowDown' || e.key === 'Down') {
|
|
92
|
-
e.stopPropagation();
|
|
93
|
-
e.preventDefault();
|
|
94
|
-
if (focusedRef.current.index < allRefs.length - 1) setNewFocusedElement(focusedRef.current.index + 1);
|
|
95
|
-
} else if (e.key == 'Enter' || e.code == 'Space') {
|
|
96
|
-
e.stopPropagation();
|
|
97
|
-
if (focusedRef.current.index < 0) return;
|
|
98
|
-
var focusedItem = item.items[focusedRef.current.index];
|
|
99
|
-
if (focusedItem.type == 'desktopgroup') {
|
|
100
|
-
dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [focusedItem.id]);
|
|
101
|
-
forceUpdate({});
|
|
102
|
-
} else {
|
|
103
|
-
var _allRefs$focusedRef$c;
|
|
104
|
-
(_allRefs$focusedRef$c = allRefs[focusedRef.current.index].current) === null || _allRefs$focusedRef$c === void 0 ? void 0 : _allRefs$focusedRef$c.click();
|
|
105
|
-
forceUpdate({});
|
|
106
|
-
}
|
|
107
|
-
|
|
62
|
+
var _onKeyDown = function onKeyDown(event, entryId) {
|
|
63
|
+
if (event.key == 'Enter' || event.code == 'Space') {
|
|
64
|
+
dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [entryId]);
|
|
108
65
|
//just trigger rerendering
|
|
66
|
+
forceUpdate({});
|
|
109
67
|
}
|
|
110
68
|
};
|
|
111
|
-
|
|
112
|
-
var setNewFocusedElement = function setNewFocusedElement(index) {
|
|
113
|
-
var _oldFocusedElement$cu;
|
|
114
|
-
var newFocusedElement = index >= 0 ? allRefs[index] : null;
|
|
115
|
-
var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
|
|
116
|
-
focusedRef.current.index = index;
|
|
117
|
-
if (oldFocusedElement) oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
|
|
118
|
-
if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
|
|
119
|
-
var _newFocusedElement$cu, _item$items$index$id;
|
|
120
|
-
(_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
|
|
121
|
-
console.log(item.items[index].id);
|
|
122
|
-
onItemFocused && onItemFocused((_item$items$index$id = item.items[index].id) !== null && _item$items$index$id !== void 0 ? _item$items$index$id : '');
|
|
123
|
-
} else if (onItemFocused) onItemFocused('');
|
|
124
|
-
};
|
|
125
69
|
var onFocus = function onFocus(event) {
|
|
126
|
-
event.stopPropagation();
|
|
127
70
|
dropdownMenusOpenedArray.current = _toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []);
|
|
128
|
-
setNewFocusedElement(0);
|
|
129
71
|
forceUpdate({});
|
|
130
72
|
};
|
|
131
|
-
var onBlur = function onBlur(event) {
|
|
132
|
-
event.stopPropagation();
|
|
133
|
-
setNewFocusedElement(-1);
|
|
134
|
-
};
|
|
135
73
|
return /*#__PURE__*/_jsx(SubMenuWrapper, {
|
|
136
74
|
id: item.id,
|
|
137
75
|
className: existingRef ? 'open' : '',
|
|
138
76
|
topLevel: topLevel,
|
|
139
77
|
visible: Boolean(existingRef),
|
|
140
78
|
children: /*#__PURE__*/_jsx(Menu, {
|
|
141
|
-
role: "
|
|
142
|
-
|
|
143
|
-
"aria-labelledby": ariaLabelledBy,
|
|
144
|
-
onBlur: onBlur,
|
|
145
|
-
onFocus: onFocus,
|
|
146
|
-
onKeyDown: function onKeyDown(event) {
|
|
147
|
-
return _onKeyDown(event);
|
|
148
|
-
},
|
|
149
|
-
tabIndex: 0,
|
|
79
|
+
role: "menu",
|
|
80
|
+
"aria-labelledby": "UserMenuButton",
|
|
150
81
|
children: /*#__PURE__*/_jsx(MenuSection, {
|
|
151
82
|
children: /*#__PURE__*/_jsx(MenuSectionList, {
|
|
152
83
|
children: /*#__PURE__*/_jsx(Tabs, {
|
|
153
84
|
size: Size.Medium,
|
|
154
|
-
children: item.items.map(function (entry
|
|
85
|
+
children: item.items.map(function (entry) {
|
|
155
86
|
var _entry$label2;
|
|
156
87
|
var isGroup = entry.type == 'desktopgroup';
|
|
157
88
|
var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
|
|
@@ -159,7 +90,7 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
159
90
|
return x == entry.id;
|
|
160
91
|
}));
|
|
161
92
|
if (isGroup) {
|
|
162
|
-
var _entry$
|
|
93
|
+
var _entry$label;
|
|
163
94
|
return /*#__PURE__*/_jsxs("div", {
|
|
164
95
|
style: {
|
|
165
96
|
position: 'relative'
|
|
@@ -171,17 +102,12 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
171
102
|
return _onMouseLeave(event, entry.id);
|
|
172
103
|
},
|
|
173
104
|
children: [/*#__PURE__*/_jsx(MenuItem, {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
return
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
ref: allRefs[index],
|
|
181
|
-
"aria-controls": entry.id,
|
|
182
|
-
role: "group"
|
|
183
|
-
//id={entry.id} removing this can break something
|
|
184
|
-
,
|
|
105
|
+
tabIndex: 0,
|
|
106
|
+
onFocus: onFocus,
|
|
107
|
+
onKeyDown: function onKeyDown(event) {
|
|
108
|
+
return _onKeyDown(event, entry.id);
|
|
109
|
+
},
|
|
110
|
+
id: entry.id,
|
|
185
111
|
item: {
|
|
186
112
|
value: (_entry$label = entry.label) !== null && _entry$label !== void 0 ? _entry$label : ''
|
|
187
113
|
},
|
|
@@ -191,10 +117,6 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
191
117
|
active: SubItemOpened || Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId),
|
|
192
118
|
onClickHandler: function onClickHandler() {}
|
|
193
119
|
}), /*#__PURE__*/_jsx(SubMenu, {
|
|
194
|
-
ariaLabelledBy: entry.id + '_parentOption',
|
|
195
|
-
onItemFocused: onItemFocused,
|
|
196
|
-
focusedItemId: focusedItemId,
|
|
197
|
-
ref: subMenuRefs[index],
|
|
198
120
|
nestPath: [].concat(_toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []), [entry.id]),
|
|
199
121
|
onItemStateChanged: onItemStateChanged,
|
|
200
122
|
activeItemId: activeItemId,
|
|
@@ -207,10 +129,8 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
207
129
|
}
|
|
208
130
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
209
131
|
children: /*#__PURE__*/_jsx(TabLink, {
|
|
210
|
-
id: entry.id,
|
|
211
|
-
tabIndex: -1,
|
|
212
132
|
to: isGroup ? '' : key,
|
|
213
|
-
|
|
133
|
+
onFocus: onFocus,
|
|
214
134
|
onActiveStateChanged: function onActiveStateChanged(state) {
|
|
215
135
|
return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
|
|
216
136
|
},
|
|
@@ -233,17 +153,14 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
233
153
|
})
|
|
234
154
|
})
|
|
235
155
|
});
|
|
236
|
-
}
|
|
156
|
+
};
|
|
237
157
|
SubMenu.propTypes = {
|
|
238
158
|
index: _pt.number.isRequired,
|
|
239
159
|
topLevel: _pt.bool.isRequired,
|
|
240
160
|
onSubMenuOpened: _pt.func,
|
|
241
161
|
onSubMenuHidden: _pt.func,
|
|
242
162
|
onItemStateChanged: _pt.func,
|
|
243
|
-
onItemFocused: _pt.func,
|
|
244
|
-
focusedItemId: _pt.string,
|
|
245
163
|
activeItemId: _pt.string,
|
|
246
|
-
nestPath: _pt.arrayOf(_pt.string)
|
|
247
|
-
ariaLabelledBy: _pt.string
|
|
164
|
+
nestPath: _pt.arrayOf(_pt.string)
|
|
248
165
|
};
|
|
249
166
|
//# sourceMappingURL=SubMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubMenu.js","names":["React","styled","Menu","MenuSection","MenuSectionList","Size","SystemIcons","checkIfContainsItem","Tabs","TabLink","MenuItem","SubMenuWrapper","div","props","topLevel","visible","SubMenu","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","focusedItemId","activeItemId","nestPath","ariaLabelledBy","onItemFocused","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","onMouseEnter","existingRefForId","onKeyDown","e","key","stopPropagation","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","console","log","onFocus","onBlur","Boolean","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../../NavItem';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport ExtendedMainMenu, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n item: MenuNavigationItemTypeDesktopGroup;\n index: number;\n topLevel: boolean;\n dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n onSubMenuOpened?: (item: string) => void;\n onSubMenuHidden?: (item: string) => void;\n onItemStateChanged?: (item: string, state: boolean) => void;\n onItemFocused?: (item: string) => void;\n focusedItemId?: string;\n activeItemId?: string;\n nestPath?: string[];\n ariaLabelledBy?: string;\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n ${Menu} {\n top: ${(props) => (props.topLevel ? '100%' : '0px')};\n left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n }\n\n ${(props) => (!props.visible ? 'display: none;' : '')}\n\n button {\n padding-left: 0px;\n }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n item,\n index,\n topLevel,\n dropdownMenusOpenedArray,\n onSubMenuHidden,\n onSubMenuOpened,\n onItemStateChanged,\n focusedItemId,\n activeItemId,\n nestPath,\n ariaLabelledBy,\n onItemFocused\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n const [, forceUpdate] = React.useState({});\n const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n React.useEffect(() => {\n setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n }, [item]);\n\n const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n const onMouseLeave = (event: any, id: string) => {\n dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n //just trigger rerendering\n onSubMenuHidden && onSubMenuHidden(id);\n forceUpdate({});\n };\n let containActiveItem = false;\n if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n const onMouseEnter = (event: any, id: string) => {\n const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n if (existingRefForId == null) {\n dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n //just trigger rerendering\n onSubMenuOpened && onSubMenuOpened(id);\n forceUpdate({});\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n \n if (e.key === 'ArrowUp' || e.key === 'Up') {\n e.stopPropagation();\n e.preventDefault();\n if (focusedRef.current.index > 0) {\n setNewFocusedElement(focusedRef.current.index - 1);\n }\n } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n e.stopPropagation();\n e.preventDefault();\n if(focusedRef.current.index < allRefs.length - 1)\n setNewFocusedElement(focusedRef.current.index + 1);\n } \n else\n if (e.key == 'Enter' || e.code == 'Space') {\n e.stopPropagation();\n if(focusedRef.current.index < 0)\n return;\n \n const focusedItem = item.items[focusedRef.current.index];\n if(focusedItem.type == 'desktopgroup')\n {\n dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n forceUpdate({});\n }\n else\n {\n allRefs[focusedRef.current.index].current?.click();\n forceUpdate({});\n }\n\n //just trigger rerendering\n \n }\n };\n\n const setNewFocusedElement = (index: number) => {\n const newFocusedElement = index >= 0 ? allRefs[index] : null;\n const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n focusedRef.current.index = index;\n\n if(oldFocusedElement)\n oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n newFocusedElement.current?.classList.add('dropdown-hover');\n console.log(item.items[index].id);\n onItemFocused && onItemFocused(item.items[index].id ?? '');\n }\n else if(onItemFocused)\n onItemFocused('');\n };\n\n const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n event.stopPropagation();\n dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n setNewFocusedElement(0);\n forceUpdate({});\n \n };\n\n const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n event.stopPropagation();\n setNewFocusedElement(-1);\n };\n\n return (\n <SubMenuWrapper id={item.id} className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n <Menu role=\"group\" ref={ref} aria-labelledby={ariaLabelledBy} onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n <MenuSection>\n <MenuSectionList>\n <Tabs size={Size.Medium}>\n {item.items.map((entry, index) => {\n const isGroup = entry.type == 'desktopgroup';\n const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n if (isGroup) {\n return (\n <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n <MenuItem\n id={entry.id + '_parentOption'}\n aria-expanded={Boolean(SubItemOpened)}\n aria-activedescendant={entry.items.find(x => x.id == focusedItemId)?.id ?? ''}\n tabIndex={-1}\n ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n \n aria-controls={entry.id}\n role=\"group\"\n //id={entry.id} removing this can break something\n item={{\n value: entry.label ?? '',\n }}\n iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n onClickHandler={() => {}}\n />\n <SubMenu\n ariaLabelledBy={entry.id + '_parentOption'}\n onItemFocused={onItemFocused}\n focusedItemId={focusedItemId}\n ref={subMenuRefs[index]}\n nestPath={[...(nestPath ?? []), entry.id]}\n onItemStateChanged={onItemStateChanged}\n activeItemId={activeItemId}\n dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n item={entry as MenuNavigationItemTypeDesktopGroup}\n index={index + 1}\n topLevel={false}\n />\n </div>\n );\n }\n return (\n <>\n <TabLink\n id={entry.id}\n tabIndex={-1}\n key={key}\n to={isGroup ? '' : key}\n ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n forceDeactivate={isGroup}\n requiredLine={entry.label ?? ''}\n optionalLine={''}\n endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n OptionalLineIcon={''}\n disabled={entry.disabled}\n showNotificationDot={false}\n size={Size.Medium}\n variant=\"positive\"\n />\n </>\n );\n })}\n </Tabs>\n </MenuSectionList>\n </MenuSection>\n </Menu>\n </SubMenuWrapper>\n );\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SubMenu.js","names":["React","styled","Menu","MenuSection","MenuSectionList","Size","SystemIcons","checkIfContainsItem","Tabs","TabLink","MenuItem","SubMenuWrapper","div","props","topLevel","visible","SubMenu","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","existingRef","current","find","x","id","onMouseLeave","event","filter","containActiveItem","type","onMouseEnter","existingRefForId","onKeyDown","entryId","key","code","onFocus","Boolean","Medium","items","map","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../../NavItem';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport ExtendedMainMenu, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n item: MenuNavigationItemTypeDesktopGroup;\n index: number;\n topLevel: boolean;\n dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n onSubMenuOpened?: (item: string) => void;\n onSubMenuHidden?: (item: string) => void;\n onItemStateChanged?: (item: string, state: boolean) => void;\n activeItemId?: string;\n nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean, visible: boolean }>`\n ${Menu} {\n top: ${(props) => (props.topLevel ? '100%' : '0px')};\n left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n }\n\n ${props => !props.visible ? 'display: none;' : ''}\n\n button {\n padding-left: 0px;\n }\n`;\n\nexport const SubMenu = ({ item, index, topLevel, dropdownMenusOpenedArray, onSubMenuHidden, onSubMenuOpened, onItemStateChanged, activeItemId, nestPath }: SubMenuProps): React.ReactElement<SubMenuProps> => {\n const [, forceUpdate] = React.useState({});\n\n const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n const onMouseLeave = (event: any, id: string) => {\n dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n //just trigger rerendering\n onSubMenuHidden && onSubMenuHidden(id);\n forceUpdate({});\n };\n let containActiveItem = false;\n if(item.type == 'desktopgroup' && activeItemId)\n containActiveItem = checkIfContainsItem(item, activeItemId);\n\n const onMouseEnter = (event: any, id: string) => {\n const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n if (existingRefForId == null) {\n dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n //just trigger rerendering\n onSubMenuOpened && onSubMenuOpened(id);\n forceUpdate({});\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, entryId: string) => {\n if(event.key == 'Enter' || event.code == 'Space')\n {\n dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, entryId];\n //just trigger rerendering\n forceUpdate({});\n }\n };\n\n const onFocus = (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n forceUpdate({});\n }\n\n return <SubMenuWrapper id={item.id} className={existingRef ? 'open' : ''} topLevel={topLevel} visible={Boolean(existingRef)}>\n <Menu role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MenuSection>\n <MenuSectionList>\n <Tabs size={Size.Medium}>\n {item.items.map((entry) => {\n const isGroup = entry.type == 'desktopgroup';\n const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n if (isGroup) {\n return (\n <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n <MenuItem\n tabIndex={0}\n onFocus={onFocus}\n onKeyDown={(event) => onKeyDown(event, entry.id)}\n id={entry.id}\n item={{\n value: entry.label ?? '',\n }}\n iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n onClickHandler={() => {}}\n />\n <SubMenu nestPath={[...(nestPath ?? []), entry.id]} onItemStateChanged={onItemStateChanged} activeItemId={activeItemId} dropdownMenusOpenedArray={dropdownMenusOpenedArray} item={entry as MenuNavigationItemTypeDesktopGroup} index={index + 1} topLevel={false} />\n </div>\n );\n }\n return (\n <>\n <TabLink\n key={key}\n to={isGroup ? '' : key}\n onFocus={onFocus}\n onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n forceDeactivate={isGroup}\n requiredLine={entry.label ?? ''}\n optionalLine={''}\n endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n OptionalLineIcon={''}\n disabled={entry.disabled}\n showNotificationDot={false}\n size={Size.Medium}\n variant=\"positive\"\n />\n </>\n );\n })}\n </Tabs>\n </MenuSectionList>\n </MenuSection>\n </Menu>\n </SubMenuWrapper>;\n};\n"],"mappings":"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"}
|
|
@@ -52,8 +52,7 @@ var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
52
52
|
children: [!yearPickerMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
53
53
|
className: "react-datepicker__navigation react-datepicker__navigation--previous",
|
|
54
54
|
onClick: handleDecreaseMonth,
|
|
55
|
-
disabled: prevMonthButtonDisabled
|
|
56
|
-
children: "Prevoius month"
|
|
55
|
+
disabled: prevMonthButtonDisabled
|
|
57
56
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderLabelContainer, {
|
|
58
57
|
onClick: function onClick() {
|
|
59
58
|
return setYearPickerMode(!yearPickerMode);
|
|
@@ -69,8 +68,7 @@ var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
69
68
|
}), !yearPickerMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
70
69
|
className: "react-datepicker__navigation react-datepicker__navigation--next",
|
|
71
70
|
onClick: handleIncreaseMonth,
|
|
72
|
-
disabled: nextMonthButtonDisabled
|
|
73
|
-
children: "Next month"
|
|
71
|
+
disabled: nextMonthButtonDisabled
|
|
74
72
|
})]
|
|
75
73
|
})
|
|
76
74
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n
|
|
1
|
+
{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n </button>\n )}\n <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n </HeaderLabelContainer>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n </button>\n )}\n </div>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAoBnC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,giBAc1BC,cAAM,CAACC,WAAW,EAG3BC,gCAAwB,EAIbF,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,EAMlBH,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,CAGhC;AAEM,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDa,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACZ,cAAc,iBACd;QAAQ,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN;MAAwB,EAEzJ,eACD,sBAAC,oBAAoB;QAAC,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAc,CAAC;QAAA,CAAC;QAAA,wBACtE;UAAK,SAAS,EAAC,iCAAiC;UAAA,oBAAKE,MAAM,CAACR,IAAI,CAACW,QAAQ,EAAE,CAAC,cAAIX,IAAI,CAACmB,WAAW,EAAE;QAAA,EAAS,EAC1Gb,cAAc,gBAAG,qBAAC,kBAAW,CAAC,WAAW;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,qBAAC,kBAAW,CAAC,aAAa;UAAC,IAAI,EAAC;QAAM,EAAG;MAAA,EAChF,EACtB,CAACA,cAAc,iBACd;QAAQ,SAAS,EAAC,iEAAiE;QAAC,OAAO,EAAEO,mBAAoB;QAAC,QAAQ,EAAET;MAAwB,EAErJ;IAAA;EACG,EACL;AAEP,CAAC;AAAC;AAAA;EA1GAJ,IAAI;EAGJoB,iBAAiB;EAGjBjB,uBAAuB;EACvBC,uBAAuB;EAGvBiB,sBAAsB;EACtBC,sBAAsB;EACtBhB,cAAc;AAAA"}
|
|
@@ -47,8 +47,7 @@ export var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
47
47
|
children: [!yearPickerMode && /*#__PURE__*/_jsx("button", {
|
|
48
48
|
className: "react-datepicker__navigation react-datepicker__navigation--previous",
|
|
49
49
|
onClick: handleDecreaseMonth,
|
|
50
|
-
disabled: prevMonthButtonDisabled
|
|
51
|
-
children: "Prevoius month"
|
|
50
|
+
disabled: prevMonthButtonDisabled
|
|
52
51
|
}), /*#__PURE__*/_jsxs(HeaderLabelContainer, {
|
|
53
52
|
onClick: function onClick() {
|
|
54
53
|
return setYearPickerMode(!yearPickerMode);
|
|
@@ -64,8 +63,7 @@ export var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
64
63
|
}), !yearPickerMode && /*#__PURE__*/_jsx("button", {
|
|
65
64
|
className: "react-datepicker__navigation react-datepicker__navigation--next",
|
|
66
65
|
onClick: handleIncreaseMonth,
|
|
67
|
-
disabled: nextMonthButtonDisabled
|
|
68
|
-
children: "Next month"
|
|
66
|
+
disabled: nextMonthButtonDisabled
|
|
69
67
|
})]
|
|
70
68
|
})
|
|
71
69
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n
|
|
1
|
+
{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n </button>\n )}\n <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n </HeaderLabelContainer>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n </button>\n )}\n </div>\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.cjs","names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Paginator.cjs","names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
package/dist/SideMenu/types.d.ts
CHANGED
|
@@ -38,4 +38,7 @@ var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
40
|
exports.MobileCustomMenuContent = MobileCustomMenuContent;
|
|
41
|
+
MobileCustomMenuContent.propTypes = {
|
|
42
|
+
children: _propTypes.default.node
|
|
43
|
+
};
|
|
41
44
|
//# sourceMappingURL=MobileCustomMenuContent.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileCustomMenuContent.cjs","names":["MobileCustomMenuContent","children","header","action","useScrollableContainer","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n header?: MenuGroupHeader;\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AAA4F;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"MobileCustomMenuContent.cjs","names":["MobileCustomMenuContent","children","header","action","useScrollableContainer","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n header?: MenuGroupHeader;\n action?: MenuButton;\n children?: React.ReactNode;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AAA4F;AAAA;AAAA;AAQrF,IAAMA,uBAA8E,GAAG,SAAjFA,uBAA8E,OAAqC;EAAA,IAA/BC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;EACvH,4BAAyC,IAAAC,2CAAsB,EAAC,CAACH,QAAQ,CAAC,CAAC;IAAA;IAApEI,kBAAkB;IAAEC,UAAU;EAErC,oBACE,sBAAC,+BAAiB;IAAA,wBAChB,sBAAC,iCAAmB;MAAC,GAAG,EAAED,kBAA0B;MAAC,SAAS,EAAEC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,WAC5F,CAAC,CAACJ,MAAM,iBACP,sBAAC,mCAAqB;QAAA,wBACpB,qBAAC,8BAAgB;UAAA,UAAEA,MAAM,CAACA;QAAM,EAAoB,EACnDA,MAAM,CAACK,IAAI,iBAAI,qBAAC,8BAAgB;UAAA,UAAEL,MAAM,CAACK;QAAI,EAAoB;MAAA,EAErE,EACAN,QAAQ;IAAA,EACW,EACrBE,MAAM,iBAAI,qBAAC,4CAAqB,oBAAKA,MAAM,EAAI;EAAA,EAC9B;AAExB,CAAC;AAAC;AAAA;EApBAF,QAAQ;AAAA"}
|
|
@@ -3,6 +3,7 @@ import { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';
|
|
|
3
3
|
interface MobileCustomMenuContentProps {
|
|
4
4
|
header?: MenuGroupHeader;
|
|
5
5
|
action?: MenuButton;
|
|
6
|
+
children?: React.ReactNode;
|
|
6
7
|
}
|
|
7
8
|
export declare const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps>;
|
|
8
9
|
export {};
|
|
@@ -31,4 +31,7 @@ export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
|
31
31
|
}), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
|
|
32
32
|
});
|
|
33
33
|
};
|
|
34
|
+
MobileCustomMenuContent.propTypes = {
|
|
35
|
+
children: _pt.node
|
|
36
|
+
};
|
|
34
37
|
//# sourceMappingURL=MobileCustomMenuContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileCustomMenuContent.js","names":["React","useScrollableContainer","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","children","header","action","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n header?: MenuGroupHeader;\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,+BAA+B;AAEtE,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,4CAA4C;AAC9J,SAASC,qBAAqB,QAAQ,qDAAqD;AAAC;AAAA;
|
|
1
|
+
{"version":3,"file":"MobileCustomMenuContent.js","names":["React","useScrollableContainer","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","children","header","action","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n header?: MenuGroupHeader;\n action?: MenuButton;\n children?: React.ReactNode;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,+BAA+B;AAEtE,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,4CAA4C;AAC9J,SAASC,qBAAqB,QAAQ,qDAAqD;AAAC;AAAA;AAQ5F,OAAO,IAAMC,uBAA8E,GAAG,SAAjFA,uBAA8E,OAAqC;EAAA,IAA/BC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;EACvH,4BAAyCV,sBAAsB,CAAC,CAACQ,QAAQ,CAAC,CAAC;IAAA;IAApEG,kBAAkB;IAAEC,UAAU;EAErC,oBACE,MAAC,iBAAiB;IAAA,wBAChB,MAAC,mBAAmB;MAAC,GAAG,EAAED,kBAA0B;MAAC,SAAS,EAAEC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,WAC5F,CAAC,CAACH,MAAM,iBACP,MAAC,qBAAqB;QAAA,wBACpB,KAAC,gBAAgB;UAAA,UAAEA,MAAM,CAACA;QAAM,EAAoB,EACnDA,MAAM,CAACI,IAAI,iBAAI,KAAC,gBAAgB;UAAA,UAAEJ,MAAM,CAACI;QAAI,EAAoB;MAAA,EAErE,EACAL,QAAQ;IAAA,EACW,EACrBE,MAAM,iBAAI,KAAC,qBAAqB,oBAAKA,MAAM,EAAI;EAAA,EAC9B;AAExB,CAAC;AAAC;EApBAF,QAAQ;AAAA"}
|
package/dist/Table/Table.cjs
CHANGED
|
@@ -23,7 +23,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
23
23
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
24
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
25
25
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
26
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
26
|
+
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; }
|
|
27
27
|
var Table = function Table(props) {
|
|
28
28
|
var onPreviousPageClick = props.onPreviousPageClick,
|
|
29
29
|
onNextPageClick = props.onNextPageClick,
|
package/dist/Table/Table.js
CHANGED
|
@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
7
7
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
8
|
+
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; }
|
|
9
9
|
/**
|
|
10
10
|
* Import React libraries.
|
|
11
11
|
*/
|