@qoretechnologies/reqraft 0.8.9 → 0.8.10
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":";AAQA,OAAmB,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAC7F,OAAO,EAAE,uBAAuB,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAM9E,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,CAAC;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GAAG,uBAAuB,CAAC,CAAC;AAChG,MAAM,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;AAE9C,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,aAAa,CAAC;IAEjC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,uBAAuB,KAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":";AAQA,OAAmB,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAC7F,OAAO,EAAE,uBAAuB,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAM9E,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,CAAC;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GAAG,uBAAuB,CAAC,CAAC;AAChG,MAAM,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;AAE9C,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,aAAa,CAAC;IAEjC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,uBAAuB,KAAe,CAAC;AAcpD,eAAO,MAAM,eAAe,kDAKzB,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,aAAa,CAAA;CAAE,4CAyD3F,CAAC;AAEF,eAAO,MAAM,WAAW,0LAerB,iBAAiB,4CA2KnB,CAAC"}
|
|
@@ -38,6 +38,10 @@ var react_1 = require("react");
|
|
|
38
38
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
39
39
|
var useStorage_1 = require("../../hooks/useStorage/useStorage");
|
|
40
40
|
exports.ReqraftMenuItemsSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
41
|
+
var StyledMenuBottomShadow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 48px;\n margin-top: -48px;\n flex-shrink: 0;\n pointer-events: none;\n position: relative;\n z-index: 1;\n box-shadow: inset 0 -32px 28px -16px rgba(0, 0, 0, 0.95);\n opacity: ", ";\n transition: opacity 0.15s ease;\n"], ["\n height: 48px;\n margin-top: -48px;\n flex-shrink: 0;\n pointer-events: none;\n position: relative;\n z-index: 1;\n box-shadow: inset 0 -32px 28px -16px rgba(0, 0, 0, 0.95);\n opacity: ", ";\n transition: opacity 0.15s ease;\n"])), function (_a) {
|
|
42
|
+
var $visible = _a.$visible;
|
|
43
|
+
return ($visible ? 1 : 0);
|
|
44
|
+
});
|
|
41
45
|
var ReqraftMenuItem = function (_a) {
|
|
42
46
|
var path = _a.path, isCollapsed = _a.isCollapsed, _b = _a.activeIntent, activeIntent = _b === void 0 ? 'info' : _b, props = __rest(_a, ["path", "isCollapsed", "activeIntent"]);
|
|
43
47
|
if ('divider' in props) {
|
|
@@ -67,8 +71,10 @@ exports.ReqraftMenuItem = ReqraftMenuItem;
|
|
|
67
71
|
var ReqraftMenu = function (_a) {
|
|
68
72
|
var defaultQuery = _a.defaultQuery, _b = _a.defaultWidth, defaultWidth = _b === void 0 ? 250 : _b, _c = _a.inputFocusShortcut, inputFocusShortcut = _c === void 0 ? '/' : _c, hidden = _a.hidden, menu = _a.menu, onQueryChange = _a.onQueryChange, onResizeChange = _a.onResizeChange, onHideClick = _a.onHideClick, resizable = _a.resizable, path = _a.path, activeItemIntent = _a.activeItemIntent, topChildren = _a.topChildren, bottomChildren = _a.bottomChildren, rest = __rest(_a, ["defaultQuery", "defaultWidth", "inputFocusShortcut", "hidden", "menu", "onQueryChange", "onResizeChange", "onHideClick", "resizable", "path", "activeItemIntent", "topChildren", "bottomChildren"]);
|
|
69
73
|
var _d = (0, react_1.useState)(defaultQuery), query = _d[0], setQuery = _d[1];
|
|
70
|
-
var
|
|
71
|
-
var
|
|
74
|
+
var scrollRef = (0, react_1.useRef)(null);
|
|
75
|
+
var _f = (0, react_1.useState)(false), canScrollDown = _f[0], setCanScrollDown = _f[1];
|
|
76
|
+
var _g = (0, useStorage_1.useReqraftStorage)('sidebar-open', true, false), isSidebarOpen = _g[0], update = _g[1];
|
|
77
|
+
var _h = (0, useStorage_1.useReqraftStorage)('sidebar-size', defaultWidth, false), sidebarSize = _h[0], updateSidebarSize = _h[1];
|
|
72
78
|
(0, react_1.useEffect)(function () {
|
|
73
79
|
if (defaultQuery) {
|
|
74
80
|
setQuery(defaultQuery);
|
|
@@ -78,6 +84,28 @@ var ReqraftMenu = function (_a) {
|
|
|
78
84
|
setQuery(newQuery);
|
|
79
85
|
onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(newQuery);
|
|
80
86
|
};
|
|
87
|
+
var updateScrollState = (0, react_1.useCallback)(function () {
|
|
88
|
+
var el = scrollRef.current;
|
|
89
|
+
if (!el) {
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
setCanScrollDown(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
|
|
93
|
+
}, []);
|
|
94
|
+
(0, react_1.useEffect)(function () {
|
|
95
|
+
var el = scrollRef.current;
|
|
96
|
+
if (!el) {
|
|
97
|
+
return undefined;
|
|
98
|
+
}
|
|
99
|
+
updateScrollState();
|
|
100
|
+
el.addEventListener('scroll', updateScrollState, { passive: true });
|
|
101
|
+
var resizeObserver = new ResizeObserver(updateScrollState);
|
|
102
|
+
resizeObserver.observe(el);
|
|
103
|
+
Array.from(el.children).forEach(function (child) { return resizeObserver.observe(child); });
|
|
104
|
+
return function () {
|
|
105
|
+
el.removeEventListener('scroll', updateScrollState);
|
|
106
|
+
resizeObserver.disconnect();
|
|
107
|
+
};
|
|
108
|
+
}, [updateScrollState, query]);
|
|
81
109
|
var handleWidthChange = function (newWidth) {
|
|
82
110
|
updateSidebarSize(newWidth);
|
|
83
111
|
onResizeChange === null || onResizeChange === void 0 ? void 0 : onResizeChange(newWidth);
|
|
@@ -129,8 +157,8 @@ var ReqraftMenu = function (_a) {
|
|
|
129
157
|
} }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { icon: 'SideBarLine', fixed: true, minimal: false, onClick: function () {
|
|
130
158
|
update(!isSidebarOpen);
|
|
131
159
|
onHideClick === null || onHideClick === void 0 ? void 0 : onHideClick();
|
|
132
|
-
} })] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, style: { overflowY: 'auto', overflowX: 'hidden', flex: '1 auto' }, children: (0, lodash_1.map)(filteredMenu, function (menuData, menuId) { return ((0, jsx_runtime_1.jsx)(exports.ReqraftMenuItem, __assign({}, menuData, { path: path, isCollapsed: !query && !!menuData.submenu, activeIntent: activeItemIntent }), menuId)); }) }), bottomChildren] })));
|
|
160
|
+
} })] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, ref: scrollRef, style: { overflowY: 'auto', overflowX: 'hidden', flex: '1 auto', minHeight: 0 }, children: (0, lodash_1.map)(filteredMenu, function (menuData, menuId) { return ((0, jsx_runtime_1.jsx)(exports.ReqraftMenuItem, __assign({}, menuData, { path: path, isCollapsed: !query && !!menuData.submenu, activeIntent: activeItemIntent }), menuId)); }) }), bottomChildren && (0, jsx_runtime_1.jsx)(StyledMenuBottomShadow, { "$visible": canScrollDown }), bottomChildren] })));
|
|
133
161
|
};
|
|
134
162
|
exports.ReqraftMenu = ReqraftMenu;
|
|
135
|
-
var templateObject_1;
|
|
163
|
+
var templateObject_1, templateObject_2;
|
|
136
164
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAOkC;AAClC,uFAA6F;AAI7F,iCAA2C;AAC3C,+
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qoretechnologies/reqraft",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.10",
|
|
4
4
|
"description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@babel/preset-typescript": "^7.12.7",
|
|
55
55
|
"@chromatic-com/storybook": "^2.0.2",
|
|
56
56
|
"@netsells/storybook-mockdate": "^0.3.3",
|
|
57
|
-
"@qoretechnologies/reqore": "^0.
|
|
57
|
+
"@qoretechnologies/reqore": "^0.64.3",
|
|
58
58
|
"@storybook/addon-actions": "^8.3.5",
|
|
59
59
|
"@storybook/addon-essentials": "^8.3.5",
|
|
60
60
|
"@storybook/addon-interactions": "^8.3.5",
|
|
@@ -11,7 +11,7 @@ import { IReqoreMenuDividerProps } from '@qoretechnologies/reqore/dist/component
|
|
|
11
11
|
import { IReqoreMenuItemProps } from '@qoretechnologies/reqore/dist/components/Menu/item';
|
|
12
12
|
import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
|
|
13
13
|
import { map, reduce, size } from 'lodash';
|
|
14
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
14
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
15
15
|
import styled from 'styled-components';
|
|
16
16
|
import { useReqraftStorage } from '../../hooks/useStorage/useStorage';
|
|
17
17
|
|
|
@@ -47,6 +47,18 @@ export interface IReqraftMenuProps extends Partial<Omit<IReqoreMenuProps, 'resiz
|
|
|
47
47
|
|
|
48
48
|
export const ReqraftMenuItemsSection = styled.div``;
|
|
49
49
|
|
|
50
|
+
const StyledMenuBottomShadow = styled.div<{ $visible: boolean }>`
|
|
51
|
+
height: 48px;
|
|
52
|
+
margin-top: -48px;
|
|
53
|
+
flex-shrink: 0;
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
position: relative;
|
|
56
|
+
z-index: 1;
|
|
57
|
+
box-shadow: inset 0 -32px 28px -16px rgba(0, 0, 0, 0.95);
|
|
58
|
+
opacity: ${({ $visible }) => ($visible ? 1 : 0)};
|
|
59
|
+
transition: opacity 0.15s ease;
|
|
60
|
+
`;
|
|
61
|
+
|
|
50
62
|
export const ReqraftMenuItem = ({
|
|
51
63
|
path,
|
|
52
64
|
isCollapsed,
|
|
@@ -128,6 +140,8 @@ export const ReqraftMenu = ({
|
|
|
128
140
|
...rest
|
|
129
141
|
}: IReqraftMenuProps) => {
|
|
130
142
|
const [query, setQuery] = useState<string>(defaultQuery);
|
|
143
|
+
const scrollRef = useRef<HTMLDivElement | null>(null);
|
|
144
|
+
const [canScrollDown, setCanScrollDown] = useState<boolean>(false);
|
|
131
145
|
|
|
132
146
|
const [isSidebarOpen, update] = useReqraftStorage<boolean>('sidebar-open', true, false);
|
|
133
147
|
const [sidebarSize, updateSidebarSize] = useReqraftStorage<number>(
|
|
@@ -147,6 +161,33 @@ export const ReqraftMenu = ({
|
|
|
147
161
|
onQueryChange?.(newQuery);
|
|
148
162
|
};
|
|
149
163
|
|
|
164
|
+
const updateScrollState = useCallback(() => {
|
|
165
|
+
const el = scrollRef.current;
|
|
166
|
+
if (!el) {
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
setCanScrollDown(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
|
|
170
|
+
}, []);
|
|
171
|
+
|
|
172
|
+
useEffect(() => {
|
|
173
|
+
const el = scrollRef.current;
|
|
174
|
+
if (!el) {
|
|
175
|
+
return undefined;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
updateScrollState();
|
|
179
|
+
el.addEventListener('scroll', updateScrollState, { passive: true });
|
|
180
|
+
|
|
181
|
+
const resizeObserver = new ResizeObserver(updateScrollState);
|
|
182
|
+
resizeObserver.observe(el);
|
|
183
|
+
Array.from(el.children).forEach((child) => resizeObserver.observe(child));
|
|
184
|
+
|
|
185
|
+
return () => {
|
|
186
|
+
el.removeEventListener('scroll', updateScrollState);
|
|
187
|
+
resizeObserver.disconnect();
|
|
188
|
+
};
|
|
189
|
+
}, [updateScrollState, query]);
|
|
190
|
+
|
|
150
191
|
const handleWidthChange = (newWidth: number) => {
|
|
151
192
|
updateSidebarSize(newWidth);
|
|
152
193
|
onResizeChange?.(newWidth);
|
|
@@ -251,7 +292,8 @@ export const ReqraftMenu = ({
|
|
|
251
292
|
</ReqoreControlGroup>
|
|
252
293
|
<ReqoreControlGroup
|
|
253
294
|
vertical
|
|
254
|
-
|
|
295
|
+
ref={scrollRef}
|
|
296
|
+
style={{ overflowY: 'auto', overflowX: 'hidden', flex: '1 auto', minHeight: 0 }}
|
|
255
297
|
>
|
|
256
298
|
{map(filteredMenu, (menuData, menuId) => (
|
|
257
299
|
<ReqraftMenuItem
|
|
@@ -263,6 +305,7 @@ export const ReqraftMenu = ({
|
|
|
263
305
|
/>
|
|
264
306
|
))}
|
|
265
307
|
</ReqoreControlGroup>
|
|
308
|
+
{bottomChildren && <StyledMenuBottomShadow $visible={canScrollDown} />}
|
|
266
309
|
{bottomChildren}
|
|
267
310
|
</ReqoreMenu>
|
|
268
311
|
);
|