@kwiz/fluentui 1.0.48 → 1.0.49
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/card-list.d.ts +9 -0
- package/dist/controls/card-list.js +17 -0
- package/dist/controls/card-list.js.map +1 -0
- package/dist/controls/card.d.ts +12 -0
- package/dist/controls/card.js +49 -0
- package/dist/controls/card.js.map +1 -0
- package/dist/controls/menu.js +7 -3
- package/dist/controls/menu.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/card-list.tsx +32 -0
- package/src/controls/card.tsx +78 -0
- package/src/controls/menu.tsx +7 -3
- package/src/index.ts +2 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { iCardProps } from './card';
|
|
3
|
+
interface iProps {
|
|
4
|
+
cards: iCardProps[];
|
|
5
|
+
/** centered back-fill control */
|
|
6
|
+
backfill?: JSX.Element;
|
|
7
|
+
}
|
|
8
|
+
export declare const CardList: React.FunctionComponent<React.PropsWithChildren<iProps>>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles } from '@fluentui/react-components';
|
|
3
|
+
import { CardEX } from './card';
|
|
4
|
+
import { Centered } from './centered';
|
|
5
|
+
import { Horizontal } from './horizontal';
|
|
6
|
+
const useStyles = makeStyles({
|
|
7
|
+
emptyList: {
|
|
8
|
+
position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
|
|
9
|
+
display: "flex",
|
|
10
|
+
zIndex: -1
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
export const CardList = (props) => {
|
|
14
|
+
const classes = useStyles();
|
|
15
|
+
return (_jsxs(Horizontal, { main: true, wrap: true, children: [props.backfill && _jsx("div", { className: classes.emptyList, children: _jsx(Centered, { children: props.backfill }) }), props.cards.map((card, idx) => _jsx(CardEX, Object.assign({}, card), `i${idx}`))] }));
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=card-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../src/controls/card-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,OAAO,EAAE,MAAM,EAAc,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAC1D,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,CAAC,CAAC;KACb;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,QAAQ,GAA6D,CAAC,KAAK,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,OAAO,CACH,MAAC,UAAU,IAAC,IAAI,QAAC,IAAI,mBAChB,KAAK,CAAC,QAAQ,IAAI,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAChD,KAAC,QAAQ,cACJ,KAAK,CAAC,QAAQ,GACR,GACT,EAEL,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAqB,IAAI,GAAnB,IAAI,GAAG,EAAE,CAAc,CAAC,IAC5D,CAChB,CAAC;AACN,CAAC,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FluentIcon } from '@fluentui/react-icons';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { iMenuItemEX } from './menu';
|
|
4
|
+
export interface iCardProps {
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
icon: FluentIcon;
|
|
8
|
+
menuItems?: iMenuItemEX[];
|
|
9
|
+
footer?: JSX.Element;
|
|
10
|
+
onClick: React.MouseEventHandler<HTMLDivElement>;
|
|
11
|
+
}
|
|
12
|
+
export declare const CardEX: React.FunctionComponent<React.PropsWithChildren<iCardProps>>;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, Label, makeStyles, tokens } from '@fluentui/react-components';
|
|
3
|
+
import { MoreVerticalRegular } from '@fluentui/react-icons';
|
|
4
|
+
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined } from '@kwiz/common';
|
|
5
|
+
import { MenuEx } from './menu';
|
|
6
|
+
const useStyles = makeStyles({
|
|
7
|
+
card: {
|
|
8
|
+
height: '225px',
|
|
9
|
+
width: '190px',
|
|
10
|
+
[`& .${cardFooterClassNames.root}>button`]: {
|
|
11
|
+
display: "none"
|
|
12
|
+
},
|
|
13
|
+
"&:hover": {
|
|
14
|
+
backgroundColor: tokens.colorNeutralBackground1Hover,
|
|
15
|
+
[`& .${cardFooterClassNames.root}>button`]: {
|
|
16
|
+
display: "block"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
previewContent: {
|
|
21
|
+
textAlign: "center",
|
|
22
|
+
backgroundColor: tokens.colorBrandBackground,
|
|
23
|
+
color: tokens.colorBrandBackground2
|
|
24
|
+
},
|
|
25
|
+
previewContentNoDescription: {
|
|
26
|
+
textAlign: "center",
|
|
27
|
+
color: tokens.colorBrandBackground,
|
|
28
|
+
paddingTop: '20%'
|
|
29
|
+
},
|
|
30
|
+
cardIcon: {
|
|
31
|
+
height: '120px',
|
|
32
|
+
width: '100px'
|
|
33
|
+
},
|
|
34
|
+
cardLabels: {
|
|
35
|
+
whiteSpace: "nowrap",
|
|
36
|
+
overflow: "hidden",
|
|
37
|
+
textOverflow: "ellipsis",
|
|
38
|
+
maxWidth: '166px'
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
export const CardEX = (props) => {
|
|
42
|
+
const classes = useStyles();
|
|
43
|
+
const hasDescription = isNotEmptyString(props.description);
|
|
44
|
+
const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
|
|
45
|
+
return (_jsxs(Card, { className: classes.card, onClick: props.onClick, children: [_jsx(CardPreview, { children: _jsxs("div", { className: hasDescription ? classes.previewContent : classes.previewContentNoDescription, children: [_jsx(props.icon, { className: classes.cardIcon }), !hasDescription && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(Label, { children: props.title })] })] }) }), hasDescription && _jsx(CardHeader, { header: _jsx(Label, { className: classes.cardLabels, children: props.title }), description: _jsx(Label, { className: classes.cardLabels, size: 'small', children: props.description }) }), hasActions && _jsx(CardFooter, { action: isNullOrEmptyArray(props.menuItems)
|
|
46
|
+
? undefined
|
|
47
|
+
: _jsx(MenuEx, { trigger: { title: 'more', icon: _jsx(MoreVerticalRegular, {}) }, items: props.menuItems }), children: props.footer })] }));
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/controls/card.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/menu.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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
3
|
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
4
|
-
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone } from '@kwiz/common';
|
|
4
|
+
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
7
7
|
import { useStateEX } from '../helpers/hooks';
|
|
@@ -97,9 +97,13 @@ export const MenuEx = (props) => {
|
|
|
97
97
|
else if (!keepOpen[0])
|
|
98
98
|
setOpened(Object.assign(Object.assign({}, opened), { 0: false }));
|
|
99
99
|
}, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: isString(props.trigger)
|
|
100
|
-
? _jsx(ButtonEX, { title: props.trigger
|
|
100
|
+
? _jsx(ButtonEX, { title: props.trigger, onClick: (e) => {
|
|
101
|
+
stopEvent(e);
|
|
102
|
+
} })
|
|
101
103
|
: isString(props.trigger.title)
|
|
102
|
-
? _jsx(ButtonEX, Object.assign({}, props.trigger)
|
|
104
|
+
? _jsx(ButtonEX, Object.assign({}, props.trigger, { onClick: (e) => {
|
|
105
|
+
stopEvent(e);
|
|
106
|
+
} }))
|
|
103
107
|
: props.trigger }), _jsx(MenuPopover, Object.assign({}, props.menuPopOverProps, { children: _jsx(MenuList, Object.assign({}, props.menuListProps, { children: renderItems(props.items, 0) })) }))] })));
|
|
104
108
|
};
|
|
105
109
|
//# sourceMappingURL=menu.js.map
|
|
@@ -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,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChF,OAAO,EAAe,eAAe,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export * from './controls/accordion';
|
|
2
2
|
export * from './controls/button';
|
|
3
3
|
export * from './controls/canvas/DrawPad';
|
|
4
|
+
export * from './controls/card';
|
|
5
|
+
export * from './controls/card-list';
|
|
4
6
|
export * from './controls/centered';
|
|
5
7
|
export * from './controls/ColorPickerDialog';
|
|
6
8
|
export * from './controls/date';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export * from './controls/accordion';
|
|
2
2
|
export * from './controls/button';
|
|
3
3
|
export * from './controls/canvas/DrawPad';
|
|
4
|
+
export * from './controls/card';
|
|
5
|
+
export * from './controls/card-list';
|
|
4
6
|
export * from './controls/centered';
|
|
5
7
|
export * from './controls/ColorPickerDialog';
|
|
6
8
|
export * from './controls/date';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { makeStyles } from '@fluentui/react-components';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { CardEX, iCardProps } from './card';
|
|
4
|
+
import { Centered } from './centered';
|
|
5
|
+
import { Horizontal } from './horizontal';
|
|
6
|
+
|
|
7
|
+
const useStyles = makeStyles({
|
|
8
|
+
emptyList: {
|
|
9
|
+
position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
|
|
10
|
+
display: "flex",
|
|
11
|
+
zIndex: -1
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
interface iProps {
|
|
15
|
+
cards: iCardProps[];
|
|
16
|
+
/** centered back-fill control */
|
|
17
|
+
backfill?: JSX.Element;
|
|
18
|
+
}
|
|
19
|
+
export const CardList: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
|
|
20
|
+
const classes = useStyles();
|
|
21
|
+
return (
|
|
22
|
+
<Horizontal main wrap>
|
|
23
|
+
{props.backfill && <div className={classes.emptyList}>
|
|
24
|
+
<Centered>
|
|
25
|
+
{props.backfill}
|
|
26
|
+
</Centered>
|
|
27
|
+
</div>}
|
|
28
|
+
|
|
29
|
+
{props.cards.map((card, idx) => <CardEX key={`i${idx}`} {...card} />)}
|
|
30
|
+
</Horizontal>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, Label, makeStyles, tokens } from '@fluentui/react-components';
|
|
2
|
+
import { FluentIcon, MoreVerticalRegular } from '@fluentui/react-icons';
|
|
3
|
+
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined } from '@kwiz/common';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { iMenuItemEX, MenuEx } from './menu';
|
|
6
|
+
|
|
7
|
+
const useStyles = makeStyles({
|
|
8
|
+
card: {
|
|
9
|
+
height: '225px',
|
|
10
|
+
width: '190px',
|
|
11
|
+
[`& .${cardFooterClassNames.root}>button`]: {
|
|
12
|
+
display: "none"
|
|
13
|
+
},
|
|
14
|
+
"&:hover": {
|
|
15
|
+
backgroundColor: tokens.colorNeutralBackground1Hover,
|
|
16
|
+
[`& .${cardFooterClassNames.root}>button`]: {
|
|
17
|
+
display: "block"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
previewContent: {
|
|
22
|
+
textAlign: "center",
|
|
23
|
+
backgroundColor: tokens.colorBrandBackground,
|
|
24
|
+
color: tokens.colorBrandBackground2
|
|
25
|
+
},
|
|
26
|
+
previewContentNoDescription: {
|
|
27
|
+
textAlign: "center",
|
|
28
|
+
color: tokens.colorBrandBackground,
|
|
29
|
+
paddingTop: '20%'
|
|
30
|
+
},
|
|
31
|
+
cardIcon: {
|
|
32
|
+
height: '120px',
|
|
33
|
+
width: '100px'
|
|
34
|
+
|
|
35
|
+
},
|
|
36
|
+
cardLabels: {
|
|
37
|
+
whiteSpace: "nowrap",
|
|
38
|
+
overflow: "hidden",
|
|
39
|
+
textOverflow: "ellipsis",
|
|
40
|
+
maxWidth: '166px'
|
|
41
|
+
},
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
export interface iCardProps {
|
|
45
|
+
title: string;
|
|
46
|
+
description?: string;
|
|
47
|
+
icon: FluentIcon;
|
|
48
|
+
menuItems?: iMenuItemEX[];
|
|
49
|
+
footer?: JSX.Element;
|
|
50
|
+
onClick: React.MouseEventHandler<HTMLDivElement>;
|
|
51
|
+
}
|
|
52
|
+
export const CardEX: React.FunctionComponent<React.PropsWithChildren<iCardProps>> = (props) => {
|
|
53
|
+
const classes = useStyles();
|
|
54
|
+
const hasDescription = isNotEmptyString(props.description);
|
|
55
|
+
const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
|
|
56
|
+
return (
|
|
57
|
+
<Card className={classes.card} onClick={props.onClick}>
|
|
58
|
+
<CardPreview>
|
|
59
|
+
<div className={hasDescription ? classes.previewContent : classes.previewContentNoDescription}>
|
|
60
|
+
<props.icon className={classes.cardIcon} />
|
|
61
|
+
{!hasDescription && <>
|
|
62
|
+
<br />
|
|
63
|
+
<Label>{props.title}</Label>
|
|
64
|
+
</>}
|
|
65
|
+
</div>
|
|
66
|
+
</CardPreview>
|
|
67
|
+
{hasDescription && <CardHeader
|
|
68
|
+
header={<Label className={classes.cardLabels}>{props.title}</Label>}
|
|
69
|
+
description={<Label className={classes.cardLabels} size='small'>{props.description}</Label>}
|
|
70
|
+
/>}
|
|
71
|
+
{hasActions && <CardFooter action={isNullOrEmptyArray(props.menuItems)
|
|
72
|
+
? undefined
|
|
73
|
+
: <MenuEx trigger={{ title: 'more', icon: <MoreVerticalRegular /> }}
|
|
74
|
+
items={props.menuItems} />}>
|
|
75
|
+
{props.footer}
|
|
76
|
+
</CardFooter>}
|
|
77
|
+
</Card>);
|
|
78
|
+
}
|
package/src/controls/menu.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
|
|
2
2
|
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
3
|
-
import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone } from '@kwiz/common';
|
|
3
|
+
import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
6
|
import { useStateEX } from '../helpers/hooks';
|
|
@@ -155,9 +155,13 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
155
155
|
}}>
|
|
156
156
|
<MenuTrigger disableButtonEnhancement>
|
|
157
157
|
{isString(props.trigger)
|
|
158
|
-
? <ButtonEX title={props.trigger}
|
|
158
|
+
? <ButtonEX title={props.trigger} onClick={(e) => {
|
|
159
|
+
stopEvent(e);
|
|
160
|
+
}} />
|
|
159
161
|
: isString((props.trigger as ButtonEXProps).title)
|
|
160
|
-
? <ButtonEX {...(props.trigger as ButtonEXProps)}
|
|
162
|
+
? <ButtonEX {...(props.trigger as ButtonEXProps)} onClick={(e) => {
|
|
163
|
+
stopEvent(e);
|
|
164
|
+
}} />
|
|
161
165
|
: props.trigger as JSX.Element}
|
|
162
166
|
</MenuTrigger>
|
|
163
167
|
<MenuPopover {...props.menuPopOverProps}>
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export * from './controls/accordion';
|
|
2
2
|
export * from './controls/button';
|
|
3
3
|
export * from './controls/canvas/DrawPad';
|
|
4
|
+
export * from './controls/card';
|
|
5
|
+
export * from './controls/card-list';
|
|
4
6
|
export * from './controls/centered';
|
|
5
7
|
export * from './controls/ColorPickerDialog';
|
|
6
8
|
export * from './controls/date';
|