@qoretechnologies/reqraft 0.7.7 → 0.7.8
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/components/menu/Menu.d.ts +5 -1
- package/dist/components/menu/Menu.d.ts.map +1 -1
- package/dist/components/menu/Menu.js +11 -4
- package/dist/components/menu/Menu.js.map +1 -1
- package/package.json +2 -2
- package/src/components/menu/Menu.stories.tsx +19 -5
- package/src/components/menu/Menu.tsx +22 -9
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { IReqoreMenuProps } from '@qoretechnologies/reqore/dist/components/Menu';
|
|
2
3
|
import { IReqoreMenuDividerProps } from '@qoretechnologies/reqore/dist/components/Menu/divider';
|
|
3
4
|
import { IReqoreMenuItemProps } from '@qoretechnologies/reqore/dist/components/Menu/item';
|
|
@@ -24,11 +25,14 @@ export interface IReqraftMenuProps extends Partial<Omit<IReqoreMenuProps, 'resiz
|
|
|
24
25
|
onResizeChange?: (width: number) => void;
|
|
25
26
|
defaultWidth?: number;
|
|
26
27
|
activeItemIntent?: TReqoreIntent;
|
|
28
|
+
topChildren?: React.ReactNode;
|
|
29
|
+
bottomChildren?: React.ReactNode;
|
|
27
30
|
}
|
|
31
|
+
export declare const ReqraftMenuItemsSection: any;
|
|
28
32
|
export declare const ReqraftMenuItem: ({ path, isCollapsed, activeIntent, ...props }: TReqraftMenuItem & {
|
|
29
33
|
path?: string;
|
|
30
34
|
isCollapsed?: boolean;
|
|
31
35
|
activeIntent?: TReqoreIntent;
|
|
32
36
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
export declare const ReqraftMenu: ({ defaultQuery, defaultWidth, inputFocusShortcut, hidden, menu, onQueryChange, onResizeChange, onHideClick, resizable, path, activeItemIntent, ...rest }: IReqraftMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare const ReqraftMenu: ({ defaultQuery, defaultWidth, inputFocusShortcut, hidden, menu, onQueryChange, onResizeChange, onHideClick, resizable, path, activeItemIntent, topChildren, bottomChildren, ...rest }: IReqraftMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
34
38
|
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -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;
|
|
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;AAEpD,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,4CA0InB,CAAC"}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -25,13 +29,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
29
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
30
|
};
|
|
27
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.ReqraftMenu = exports.ReqraftMenuItem = void 0;
|
|
32
|
+
exports.ReqraftMenu = exports.ReqraftMenuItem = exports.ReqraftMenuItemsSection = void 0;
|
|
29
33
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
30
34
|
var reqore_1 = require("@qoretechnologies/reqore");
|
|
31
35
|
var Menu_1 = __importDefault(require("@qoretechnologies/reqore/dist/components/Menu"));
|
|
32
36
|
var lodash_1 = require("lodash");
|
|
33
37
|
var react_1 = require("react");
|
|
38
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
34
39
|
var useStorage_1 = require("../../hooks/useStorage/useStorage");
|
|
40
|
+
exports.ReqraftMenuItemsSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
35
41
|
var ReqraftMenuItem = function (_a) {
|
|
36
42
|
var path = _a.path, isCollapsed = _a.isCollapsed, _b = _a.activeIntent, activeIntent = _b === void 0 ? 'info' : _b, props = __rest(_a, ["path", "isCollapsed", "activeIntent"]);
|
|
37
43
|
if ('divider' in props) {
|
|
@@ -59,7 +65,7 @@ var ReqraftMenuItem = function (_a) {
|
|
|
59
65
|
};
|
|
60
66
|
exports.ReqraftMenuItem = ReqraftMenuItem;
|
|
61
67
|
var ReqraftMenu = function (_a) {
|
|
62
|
-
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, rest = __rest(_a, ["defaultQuery", "defaultWidth", "inputFocusShortcut", "hidden", "menu", "onQueryChange", "onResizeChange", "onHideClick", "resizable", "path", "activeItemIntent"]);
|
|
68
|
+
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"]);
|
|
63
69
|
var _d = (0, react_1.useState)(defaultQuery), query = _d[0], setQuery = _d[1];
|
|
64
70
|
var _f = (0, useStorage_1.useReqraftStorage)('sidebar-open', true, false), isSidebarOpen = _f[0], update = _f[1];
|
|
65
71
|
var _g = (0, useStorage_1.useReqraftStorage)('sidebar-size', defaultWidth, false), sidebarSize = _g[0], updateSidebarSize = _g[1];
|
|
@@ -116,7 +122,7 @@ var ReqraftMenu = function (_a) {
|
|
|
116
122
|
width: "".concat(sidebarSize, "px"),
|
|
117
123
|
height: '100%',
|
|
118
124
|
},
|
|
119
|
-
}, rounded: false, customTheme: { main: '#181818' } }, rest, { children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreInput, { icon: 'Search2Line', minimal: false, flat: false, placeholder: "Filter menu \"".concat(inputFocusShortcut, "\""), intent: query ? 'info' : undefined, leftIconProps: { size: 'small' }, iconColor: query ? 'info' : 'muted', pill: true, value: query, onClearClick: function () { return handleQueryChange(''); }, onChange: function (e) { return handleQueryChange(e.target.value); }, focusRules: {
|
|
125
|
+
}, rounded: false, customTheme: { main: '#181818' }, style: { overflowY: 'hidden' } }, rest, { children: [topChildren, (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreInput, { icon: 'Search2Line', minimal: false, flat: false, placeholder: "Filter menu \"".concat(inputFocusShortcut, "\""), intent: query ? 'info' : undefined, leftIconProps: { size: 'small' }, iconColor: query ? 'info' : 'muted', pill: true, value: query, onClearClick: function () { return handleQueryChange(''); }, onChange: function (e) { return handleQueryChange(e.target.value); }, focusRules: {
|
|
120
126
|
shortcut: inputFocusShortcut,
|
|
121
127
|
type: 'keypress',
|
|
122
128
|
clearOnFocus: true,
|
|
@@ -124,7 +130,8 @@ var ReqraftMenu = function (_a) {
|
|
|
124
130
|
} }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { icon: 'SideBarLine', fixed: true, minimal: false, onClick: function () {
|
|
125
131
|
update(!isSidebarOpen);
|
|
126
132
|
onHideClick === null || onHideClick === void 0 ? void 0 : onHideClick();
|
|
127
|
-
} })] }), (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)); })] })));
|
|
133
|
+
} })] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, style: { overflowY: 'auto', 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] })));
|
|
128
134
|
};
|
|
129
135
|
exports.ReqraftMenu = ReqraftMenu;
|
|
136
|
+
var templateObject_1;
|
|
130
137
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"
|
|
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.7.
|
|
3
|
+
"version": "0.7.8",
|
|
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.55.2",
|
|
58
58
|
"@storybook/addon-actions": "^8.3.5",
|
|
59
59
|
"@storybook/addon-essentials": "^8.3.5",
|
|
60
60
|
"@storybook/addon-interactions": "^8.3.5",
|
|
@@ -25,7 +25,7 @@ export const Basic: Story = {
|
|
|
25
25
|
menu: typedMenu,
|
|
26
26
|
},
|
|
27
27
|
play: async () => {
|
|
28
|
-
await testsWaitForText('
|
|
28
|
+
await testsWaitForText('Interfaces & More');
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
export const ActivePath: Story = {
|
|
@@ -34,7 +34,7 @@ export const ActivePath: Story = {
|
|
|
34
34
|
menu: typedMenu,
|
|
35
35
|
},
|
|
36
36
|
play: async () => {
|
|
37
|
-
await testsWaitForText('
|
|
37
|
+
await testsWaitForText('Interfaces & More');
|
|
38
38
|
},
|
|
39
39
|
};
|
|
40
40
|
|
|
@@ -45,7 +45,7 @@ export const ActiveMenuItemIntent: Story = {
|
|
|
45
45
|
activeItemIntent: 'success',
|
|
46
46
|
},
|
|
47
47
|
play: async () => {
|
|
48
|
-
await testsWaitForText('
|
|
48
|
+
await testsWaitForText('Interfaces & More');
|
|
49
49
|
},
|
|
50
50
|
};
|
|
51
51
|
|
|
@@ -55,7 +55,7 @@ export const WithDefaultQuery: Story = {
|
|
|
55
55
|
defaultQuery: 'mapper',
|
|
56
56
|
},
|
|
57
57
|
play: async () => {
|
|
58
|
-
await testsWaitForText('
|
|
58
|
+
await testsWaitForText('Interfaces & More');
|
|
59
59
|
await expect(document.querySelector('.reqore-input')).toHaveValue('mapper');
|
|
60
60
|
await expect(document.querySelectorAll('.reqore-menu-item')).toHaveLength(2);
|
|
61
61
|
},
|
|
@@ -67,7 +67,7 @@ export const Filtered: Story = {
|
|
|
67
67
|
onQueryChange: fn(),
|
|
68
68
|
},
|
|
69
69
|
play: async () => {
|
|
70
|
-
await testsWaitForText('
|
|
70
|
+
await testsWaitForText('Interfaces & More');
|
|
71
71
|
await fireEvent.change(document.querySelector('.reqore-input'), { target: { value: 'step' } });
|
|
72
72
|
|
|
73
73
|
await waitFor(() => expect(document.querySelectorAll('.reqore-menu-item')).toHaveLength(2), {
|
|
@@ -82,3 +82,17 @@ export const WidthFromStorage: Story = {
|
|
|
82
82
|
mockData: [...storiesStorageMock],
|
|
83
83
|
},
|
|
84
84
|
};
|
|
85
|
+
|
|
86
|
+
export const WithCustomChildren: Story = {
|
|
87
|
+
...ActivePath,
|
|
88
|
+
args: {
|
|
89
|
+
...ActivePath.args,
|
|
90
|
+
topChildren: <div style={{ padding: 10 }}>Top Custom Child</div>,
|
|
91
|
+
bottomChildren: <div style={{ padding: 10 }}>Bottom Custom Child</div>,
|
|
92
|
+
},
|
|
93
|
+
play: async () => {
|
|
94
|
+
await testsWaitForText('Interfaces & More');
|
|
95
|
+
await testsWaitForText('Top Custom Child');
|
|
96
|
+
await testsWaitForText('Bottom Custom Child');
|
|
97
|
+
},
|
|
98
|
+
};
|
|
@@ -12,6 +12,7 @@ import { IReqoreMenuItemProps } from '@qoretechnologies/reqore/dist/components/M
|
|
|
12
12
|
import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
|
|
13
13
|
import { map, reduce, size } from 'lodash';
|
|
14
14
|
import { useEffect, useMemo, useState } from 'react';
|
|
15
|
+
import styled from 'styled-components';
|
|
15
16
|
import { useReqraftStorage } from '../../hooks/useStorage/useStorage';
|
|
16
17
|
|
|
17
18
|
export interface IReqraftMenuItem extends IReqoreMenuItemProps {
|
|
@@ -39,8 +40,13 @@ export interface IReqraftMenuProps extends Partial<Omit<IReqoreMenuProps, 'resiz
|
|
|
39
40
|
onResizeChange?: (width: number) => void;
|
|
40
41
|
defaultWidth?: number;
|
|
41
42
|
activeItemIntent?: TReqoreIntent;
|
|
43
|
+
|
|
44
|
+
topChildren?: React.ReactNode;
|
|
45
|
+
bottomChildren?: React.ReactNode;
|
|
42
46
|
}
|
|
43
47
|
|
|
48
|
+
export const ReqraftMenuItemsSection = styled.div``;
|
|
49
|
+
|
|
44
50
|
export const ReqraftMenuItem = ({
|
|
45
51
|
path,
|
|
46
52
|
isCollapsed,
|
|
@@ -117,6 +123,8 @@ export const ReqraftMenu = ({
|
|
|
117
123
|
resizable,
|
|
118
124
|
path,
|
|
119
125
|
activeItemIntent,
|
|
126
|
+
topChildren,
|
|
127
|
+
bottomChildren,
|
|
120
128
|
...rest
|
|
121
129
|
}: IReqraftMenuProps) => {
|
|
122
130
|
const [query, setQuery] = useState<string>(defaultQuery);
|
|
@@ -208,8 +216,10 @@ export const ReqraftMenu = ({
|
|
|
208
216
|
}}
|
|
209
217
|
rounded={false}
|
|
210
218
|
customTheme={{ main: '#181818' }}
|
|
219
|
+
style={{ overflowY: 'hidden' }}
|
|
211
220
|
{...rest}
|
|
212
221
|
>
|
|
222
|
+
{topChildren}
|
|
213
223
|
<ReqoreControlGroup>
|
|
214
224
|
<ReqoreInput
|
|
215
225
|
icon='Search2Line'
|
|
@@ -240,15 +250,18 @@ export const ReqraftMenu = ({
|
|
|
240
250
|
}}
|
|
241
251
|
/>
|
|
242
252
|
</ReqoreControlGroup>
|
|
243
|
-
{
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
253
|
+
<ReqoreControlGroup vertical style={{ overflowY: 'auto', flex: '1 auto' }}>
|
|
254
|
+
{map(filteredMenu, (menuData, menuId) => (
|
|
255
|
+
<ReqraftMenuItem
|
|
256
|
+
key={menuId}
|
|
257
|
+
{...menuData}
|
|
258
|
+
path={path}
|
|
259
|
+
isCollapsed={!query && !!(menuData as IReqraftMenuItem).submenu}
|
|
260
|
+
activeIntent={activeItemIntent}
|
|
261
|
+
/>
|
|
262
|
+
))}
|
|
263
|
+
</ReqoreControlGroup>
|
|
264
|
+
{bottomChildren}
|
|
252
265
|
</ReqoreMenu>
|
|
253
266
|
);
|
|
254
267
|
};
|