@kwiz/fluentui 1.0.75 → 1.0.76
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/controls/menu.d.ts +3 -1
- package/dist/controls/menu.js +44 -26
- package/dist/controls/menu.js.map +1 -1
- package/dist/controls/search.js.map +1 -1
- package/dist/helpers/hooks.d.ts +3 -1
- package/dist/helpers/hooks.js +18 -0
- package/dist/helpers/hooks.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/menu.tsx +54 -32
- package/src/controls/search.tsx +1 -1
- package/src/helpers/hooks.tsx +22 -1
package/dist/controls/menu.d.ts
CHANGED
|
@@ -16,7 +16,9 @@ interface iMenuItemEXSeparator {
|
|
|
16
16
|
interface iMenuItemEXGroup {
|
|
17
17
|
type: "group";
|
|
18
18
|
title: string;
|
|
19
|
-
items: iMenuItemEX
|
|
19
|
+
items: (iMenuItemEX & {
|
|
20
|
+
type?: "separator" | "item";
|
|
21
|
+
})[];
|
|
20
22
|
}
|
|
21
23
|
export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
|
|
22
24
|
interface IProps {
|
package/dist/controls/menu.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, menuPopoverClassNames, MenuTrigger } from '@fluentui/react-components';
|
|
3
|
-
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
4
3
|
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
|
|
5
4
|
import React from 'react';
|
|
6
|
-
import { useStateEX } from '../helpers';
|
|
5
|
+
import { useClickableDiv, useStateEX } from '../helpers';
|
|
7
6
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
8
7
|
import { ButtonEX } from './button';
|
|
8
|
+
import { DividerEX } from './divider';
|
|
9
9
|
import { Horizontal } from './horizontal';
|
|
10
10
|
import { Search } from './search';
|
|
11
|
-
import { Section } from './section';
|
|
12
11
|
export const MenuEx = (props) => {
|
|
13
12
|
const ctx = useKWIZFluentContext();
|
|
14
13
|
const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX({});
|
|
@@ -18,6 +17,7 @@ export const MenuEx = (props) => {
|
|
|
18
17
|
//when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
|
|
19
18
|
const [keepOpen, setKeepOpen] = useStateEX({});
|
|
20
19
|
const [opened, setOpened] = useStateEX({});
|
|
20
|
+
const clickableDiv = useClickableDiv();
|
|
21
21
|
React.useEffect(() => {
|
|
22
22
|
window.setTimeout(() => {
|
|
23
23
|
var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
|
|
@@ -32,15 +32,31 @@ export const MenuEx = (props) => {
|
|
|
32
32
|
}, [opened]);
|
|
33
33
|
function renderItems(items, level) {
|
|
34
34
|
const myLevelFilter = filterPerLevel[level];
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
const showItem = (i) => {
|
|
36
|
+
//get rid of empty/null items
|
|
37
|
+
let show = !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString(i.title));
|
|
38
|
+
if (show && isNotEmptyString(myLevelFilter)) {
|
|
39
|
+
if (i.type === "separator")
|
|
40
|
+
show = false;
|
|
41
|
+
else if (i.type === "group") {
|
|
42
|
+
//only show group if 1 or more results are in it
|
|
43
|
+
return i.items.filter(sub => showItem(sub)).length > 0;
|
|
44
|
+
}
|
|
45
|
+
else
|
|
46
|
+
show = i.title.toLowerCase().indexOf(myLevelFilter) >= 0;
|
|
47
|
+
}
|
|
48
|
+
return show;
|
|
49
|
+
};
|
|
50
|
+
//inject group items into this level - so we share the filter/next functionality. it looks wierd if filter/paging is done per group if they are displayed inline.
|
|
51
|
+
items = items.map(i => i.type === "group" && isNotEmptyArray(i.items) ? [i, ...i.items] : i)
|
|
52
|
+
.flat()
|
|
53
|
+
//filter empty item or based on text filter
|
|
54
|
+
.filter(i => showItem(i));
|
|
40
55
|
let menuItems = items.map((item, index) => {
|
|
41
56
|
switch (item.type) {
|
|
42
57
|
case "group":
|
|
43
|
-
|
|
58
|
+
//todo: technically group items should be nested inside the group for better screen reder support
|
|
59
|
+
return _jsx(MenuGroup, { children: _jsx(MenuGroupHeader, { children: item.title }) }, index);
|
|
44
60
|
case "separator":
|
|
45
61
|
return _jsx(MenuDivider, {}, index);
|
|
46
62
|
case "item":
|
|
@@ -63,31 +79,33 @@ export const MenuEx = (props) => {
|
|
|
63
79
|
});
|
|
64
80
|
const paged = menuItems.length > pageSize;
|
|
65
81
|
const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
|
|
66
|
-
const filterControl = filtered && _jsx(Search, { defaultValue: myLevelFilter || "", onChangeDeferred: (newValue) => {
|
|
67
|
-
const s = jsonClone(filterPerLevel);
|
|
68
|
-
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
69
|
-
setFilterPerLevel(s);
|
|
70
|
-
} });
|
|
71
82
|
if (paged) {
|
|
72
83
|
let start = startIndexPerLevel[level];
|
|
73
84
|
if (isNullOrUndefined(start))
|
|
74
85
|
start = 0;
|
|
75
86
|
let hasMore = menuItems.length > start + pageSize;
|
|
76
87
|
menuItems = menuItems.slice(start, start + pageSize);
|
|
77
|
-
if (start > 0
|
|
78
|
-
menuItems.splice(0, 0,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
88
|
+
if (start > 0) {
|
|
89
|
+
menuItems.splice(0, 0, _jsx(DividerEX, Object.assign({ title: 'Previous' }, clickableDiv, { onClick: () => {
|
|
90
|
+
const s = jsonClone(startIndexPerLevel);
|
|
91
|
+
s[level] = start - pageSize;
|
|
92
|
+
setStartIndexPerLevel(s);
|
|
93
|
+
}, children: "previous" }), "$prev"));
|
|
94
|
+
}
|
|
95
|
+
if (hasMore)
|
|
96
|
+
menuItems.push(_jsx(DividerEX, Object.assign({ title: 'Next' }, clickableDiv, { onClick: () => {
|
|
97
|
+
const s = jsonClone(startIndexPerLevel);
|
|
98
|
+
s[level] = start + pageSize;
|
|
99
|
+
setStartIndexPerLevel(s);
|
|
100
|
+
}, children: "next" }), "$next"));
|
|
87
101
|
}
|
|
88
|
-
|
|
102
|
+
if (filtered) {
|
|
89
103
|
//just filter - no paging
|
|
90
|
-
menuItems.splice(0, 0, _jsx(Horizontal, { children:
|
|
104
|
+
menuItems.splice(0, 0, _jsx(Horizontal, { children: _jsx(Search, { defaultValue: myLevelFilter || "", onChangeDeferred: (newValue) => {
|
|
105
|
+
const s = jsonClone(filterPerLevel);
|
|
106
|
+
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
107
|
+
setFilterPerLevel(s);
|
|
108
|
+
} }) }, '$search'));
|
|
91
109
|
}
|
|
92
110
|
return menuItems;
|
|
93
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAiB,WAAW,EAAE,qBAAqB,EAA+B,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC5M,OAAO,
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAEnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,EAAE,EACL;IACD,UAAU,EAAE,EACX;CACJ,CAAC,
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":"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"}
|
package/dist/helpers/hooks.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MutableRefObject, SetStateAction } from "react";
|
|
1
|
+
import { HTMLAttributes, MutableRefObject, SetStateAction } from "react";
|
|
2
2
|
/** Empty array ensures that effect is only run on mount */
|
|
3
3
|
export declare const useEffectOnlyOnMount: any[];
|
|
4
4
|
type stateExOptions<ValueType> = {
|
|
@@ -21,4 +21,6 @@ export declare function useRefWithState<T>(initialValue?: T, stateOptions?: stat
|
|
|
21
21
|
/** for setting on element: ref={e.set} */
|
|
22
22
|
set: (newValue: T) => void;
|
|
23
23
|
};
|
|
24
|
+
/** return props to make div appear as clickable, and accept enter key as click */
|
|
25
|
+
export declare function useClickableDiv(): HTMLAttributes<HTMLDivElement>;
|
|
24
26
|
export {};
|
package/dist/helpers/hooks.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
1
2
|
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
|
2
3
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
4
|
import { GetLogger } from "../_modules/config";
|
|
5
|
+
import { mixins } from "../styles/styles";
|
|
4
6
|
/** Empty array ensures that effect is only run on mount */
|
|
5
7
|
export const useEffectOnlyOnMount = [];
|
|
6
8
|
function extractStringValue(e) {
|
|
@@ -123,4 +125,20 @@ export function useRefWithState(initialValue, stateOptions = { skipUpdateIfSame:
|
|
|
123
125
|
set: setRef
|
|
124
126
|
};
|
|
125
127
|
}
|
|
128
|
+
const useStyles = makeStyles({
|
|
129
|
+
clickable: mixins.clickable,
|
|
130
|
+
});
|
|
131
|
+
/** return props to make div appear as clickable, and accept enter key as click */
|
|
132
|
+
export function useClickableDiv() {
|
|
133
|
+
const cssNames = useStyles();
|
|
134
|
+
const props = {
|
|
135
|
+
className: cssNames.clickable,
|
|
136
|
+
tabIndex: 0,
|
|
137
|
+
onKeyDown: e => {
|
|
138
|
+
if (e.key === "Enter")
|
|
139
|
+
e.target.click();
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
return props;
|
|
143
|
+
}
|
|
126
144
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACrK,OAAO,
|
|
1
|
+
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/controls/menu.tsx
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
|
|
2
|
-
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
3
2
|
import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
|
|
4
3
|
import React from 'react';
|
|
5
|
-
import { useStateEX } from '../helpers';
|
|
4
|
+
import { useClickableDiv, useStateEX } from '../helpers';
|
|
6
5
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
7
6
|
import { ButtonEX, ButtonEXProps } from './button';
|
|
7
|
+
import { DividerEX } from './divider';
|
|
8
8
|
import { Horizontal } from './horizontal';
|
|
9
9
|
import { Search } from './search';
|
|
10
|
-
import { Section } from './section';
|
|
11
10
|
|
|
12
11
|
interface iMenuItemEXItem {
|
|
13
12
|
type?: "item";
|
|
@@ -24,7 +23,8 @@ interface iMenuItemEXSeparator {
|
|
|
24
23
|
interface iMenuItemEXGroup {
|
|
25
24
|
type: "group";
|
|
26
25
|
title: string;
|
|
27
|
-
|
|
26
|
+
//can't nest groups
|
|
27
|
+
items: (iMenuItemEX & { type?: "separator" | "item" })[];
|
|
28
28
|
}
|
|
29
29
|
export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
|
|
30
30
|
|
|
@@ -50,6 +50,8 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
50
50
|
const [keepOpen, setKeepOpen] = useStateEX<IDictionary<boolean>>({});
|
|
51
51
|
const [opened, setOpened] = useStateEX<IDictionary<boolean>>({});
|
|
52
52
|
|
|
53
|
+
const clickableDiv = useClickableDiv();
|
|
54
|
+
|
|
53
55
|
React.useEffect(() => {
|
|
54
56
|
window.setTimeout(() => {
|
|
55
57
|
var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
|
|
@@ -65,18 +67,34 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
65
67
|
|
|
66
68
|
function renderItems(items: iMenuItemEX[], level: number) {
|
|
67
69
|
const myLevelFilter = filterPerLevel[level];
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
|
|
71
|
+
const showItem = (i: iMenuItemEX) => {
|
|
72
|
+
//get rid of empty/null items
|
|
73
|
+
let show = !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString((i as iMenuItemEXItem).title));
|
|
74
|
+
if (show && isNotEmptyString(myLevelFilter)) {
|
|
75
|
+
if (i.type === "separator") show = false;
|
|
76
|
+
else if (i.type === "group") {
|
|
77
|
+
//only show group if 1 or more results are in it
|
|
78
|
+
return i.items.filter(sub => showItem(sub)).length > 0;
|
|
79
|
+
}
|
|
80
|
+
else
|
|
81
|
+
show = i.title.toLowerCase().indexOf(myLevelFilter) >= 0;
|
|
82
|
+
}
|
|
83
|
+
return show;
|
|
72
84
|
}
|
|
73
85
|
|
|
86
|
+
//inject group items into this level - so we share the filter/next functionality. it looks wierd if filter/paging is done per group if they are displayed inline.
|
|
87
|
+
items = items.map(i => i.type === "group" && isNotEmptyArray(i.items) ? [i, ...i.items] : i)
|
|
88
|
+
.flat()
|
|
89
|
+
//filter empty item or based on text filter
|
|
90
|
+
.filter(i => showItem(i));
|
|
91
|
+
|
|
74
92
|
let menuItems = items.map((item, index) => {
|
|
75
93
|
switch (item.type) {
|
|
76
94
|
case "group":
|
|
95
|
+
//todo: technically group items should be nested inside the group for better screen reder support
|
|
77
96
|
return <MenuGroup key={index}>
|
|
78
97
|
<MenuGroupHeader>{item.title}</MenuGroupHeader>
|
|
79
|
-
{renderItems(item.items, level + 1)}
|
|
80
98
|
</MenuGroup>;
|
|
81
99
|
case "separator":
|
|
82
100
|
return <MenuDivider key={index} />;
|
|
@@ -113,36 +131,40 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
113
131
|
|
|
114
132
|
const paged = menuItems.length > pageSize;
|
|
115
133
|
const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
|
|
116
|
-
|
|
117
|
-
const s = jsonClone(filterPerLevel);
|
|
118
|
-
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
119
|
-
setFilterPerLevel(s);
|
|
120
|
-
}} />;
|
|
134
|
+
|
|
121
135
|
if (paged) {
|
|
122
136
|
let start = startIndexPerLevel[level];
|
|
123
137
|
if (isNullOrUndefined(start)) start = 0;
|
|
124
138
|
let hasMore = menuItems.length > start + pageSize;
|
|
125
139
|
menuItems = menuItems.slice(start, start + pageSize);
|
|
126
|
-
if (start > 0
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
140
|
+
if (start > 0) {
|
|
141
|
+
menuItems.splice(0, 0, <DividerEX key="$prev" title='Previous'
|
|
142
|
+
{...clickableDiv}
|
|
143
|
+
onClick={() => {
|
|
144
|
+
const s = jsonClone(startIndexPerLevel);
|
|
145
|
+
s[level] = start - pageSize;
|
|
146
|
+
setStartIndexPerLevel(s);
|
|
147
|
+
}}
|
|
148
|
+
>previous</DividerEX>);
|
|
149
|
+
}
|
|
150
|
+
if (hasMore)
|
|
151
|
+
menuItems.push(<DividerEX key="$next" title='Next'
|
|
152
|
+
{...clickableDiv}
|
|
153
|
+
onClick={() => {
|
|
154
|
+
const s = jsonClone(startIndexPerLevel);
|
|
155
|
+
s[level] = start + pageSize;
|
|
156
|
+
setStartIndexPerLevel(s);
|
|
157
|
+
}}
|
|
158
|
+
>next</DividerEX>);
|
|
141
159
|
}
|
|
142
|
-
|
|
160
|
+
if (filtered) {
|
|
143
161
|
//just filter - no paging
|
|
144
|
-
menuItems.splice(0, 0, <Horizontal key='$
|
|
145
|
-
{
|
|
162
|
+
menuItems.splice(0, 0, <Horizontal key='$search'>
|
|
163
|
+
<Search defaultValue={myLevelFilter || ""} onChangeDeferred={(newValue) => {
|
|
164
|
+
const s = jsonClone(filterPerLevel);
|
|
165
|
+
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
166
|
+
setFilterPerLevel(s);
|
|
167
|
+
}} />
|
|
146
168
|
</Horizontal>);
|
|
147
169
|
}
|
|
148
170
|
return menuItems;
|
package/src/controls/search.tsx
CHANGED
package/src/helpers/hooks.tsx
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
1
2
|
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
|
2
|
-
import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
+
import { HTMLAttributes, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
|
|
3
4
|
import { GetLogger } from "../_modules/config";
|
|
5
|
+
import { mixins } from "../styles/styles";
|
|
4
6
|
|
|
5
7
|
/** Empty array ensures that effect is only run on mount */
|
|
6
8
|
export const useEffectOnlyOnMount = [];
|
|
@@ -139,4 +141,23 @@ export function useRefWithState<T>(initialValue?: T, stateOptions: stateExOption
|
|
|
139
141
|
/** for setting on element: ref={e.set} */
|
|
140
142
|
set: setRef
|
|
141
143
|
};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const useStyles = makeStyles({
|
|
147
|
+
clickable: mixins.clickable,
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
/** return props to make div appear as clickable, and accept enter key as click */
|
|
151
|
+
export function useClickableDiv() {
|
|
152
|
+
const cssNames = useStyles();
|
|
153
|
+
|
|
154
|
+
const props: HTMLAttributes<HTMLDivElement> = {
|
|
155
|
+
className: cssNames.clickable,
|
|
156
|
+
tabIndex: 0,
|
|
157
|
+
onKeyDown: e => {
|
|
158
|
+
if (e.key === "Enter") (e.target as HTMLDivElement).click();
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
return props;
|
|
142
163
|
}
|