@kwiz/fluentui 1.0.15 → 1.0.16
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/accordion.d.ts +13 -0
- package/dist/controls/accordion.js +27 -0
- package/dist/controls/accordion.js.map +1 -0
- package/dist/controls/error-boundary.d.ts +1 -1
- package/dist/controls/kwizoverflow.d.ts +1 -0
- package/dist/controls/kwizoverflow.js +1 -1
- package/dist/controls/kwizoverflow.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/accordion.tsx +48 -0
- package/src/controls/kwizoverflow.tsx +2 -1
- package/src/index.ts +1 -0
@@ -0,0 +1,13 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
interface iProps {
|
3
|
+
/** optional, send the key for the group you want to open by default */
|
4
|
+
opened?: string;
|
5
|
+
groups: {
|
6
|
+
key: string;
|
7
|
+
title: string;
|
8
|
+
icon?: JSX.Element;
|
9
|
+
content: JSX.Element;
|
10
|
+
}[];
|
11
|
+
}
|
12
|
+
export declare const AccordionEX: React.FunctionComponent<iProps>;
|
13
|
+
export {};
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Label, makeStyles } from "@fluentui/react-components";
|
3
|
+
import { ChevronRightRegular } from "@fluentui/react-icons";
|
4
|
+
import * as React from 'react';
|
5
|
+
import { Horizontal } from "./horizontal";
|
6
|
+
import { Vertical } from "./vertical";
|
7
|
+
const useStyles = makeStyles({
|
8
|
+
opened: {
|
9
|
+
transform: "rotate(90deg)",
|
10
|
+
transition: "transform 200ms ease-out"
|
11
|
+
},
|
12
|
+
header: {
|
13
|
+
cursor: "pointer"
|
14
|
+
},
|
15
|
+
root: {
|
16
|
+
maxHeight: "100%"
|
17
|
+
},
|
18
|
+
body: {
|
19
|
+
overflow: "auto"
|
20
|
+
}
|
21
|
+
});
|
22
|
+
export const AccordionEX = (props) => {
|
23
|
+
const classes = useStyles();
|
24
|
+
const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
|
25
|
+
return (_jsx(Vertical, { main: true, css: [classes.root], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsxs(Horizontal, { css: [classes.header], onClick: () => setOpened(group.key), children: [_jsx(ChevronRightRegular, { className: opened === group.key && classes.opened }), _jsx(Label, { children: group.title })] }), group.key === opened && _jsx(Vertical, { main: true, css: [classes.body], children: group.content })] }, group.key)) }));
|
26
|
+
};
|
27
|
+
//# sourceMappingURL=accordion.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,UAAU,EAAE,0BAA0B;KACzC;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,SAAS;KACpB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAYH,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,OAAO,CAAC,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACrC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,MAAC,KAAK,CAAC,QAAQ,eACtC,MAAC,UAAU,IAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,aAClE,KAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAI,EAC1E,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,IACnB,EACZ,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACtD,KAAK,CAAC,OAAO,GACP,KAPiC,KAAK,CAAC,GAAG,CAQxC,CAAC,GACX,CACV,CAAC;AACN,CAAC,CAAA"}
|
@@ -18,6 +18,6 @@ export declare class ErrorBoundary extends React.Component<React.PropsWithChildr
|
|
18
18
|
marker: string | number;
|
19
19
|
};
|
20
20
|
componentDidCatch(error: any, errorInfo: any): void;
|
21
|
-
render(): string | number | boolean | Iterable<React.ReactNode> | JSX.Element;
|
21
|
+
render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
|
22
22
|
}
|
23
23
|
export {};
|
@@ -1,4 +1,5 @@
|
|
1
1
|
interface IProps<ItemType> {
|
2
|
+
/** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
|
2
3
|
items: ItemType[];
|
3
4
|
getKey: (item: ItemType, index: number) => string;
|
4
5
|
getPriority?: (item: ItemType, index: number) => number;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem, useIsOverflowItemVisible, useOverflowMenu } from "@fluentui/react-components";
|
3
|
-
import { isNumber } from '@kwiz/common';
|
4
3
|
import { MoreHorizontalFilled } from "@fluentui/react-icons";
|
4
|
+
import { isNumber } from '@kwiz/common';
|
5
5
|
const OverflowMenu = (props) => {
|
6
6
|
const { ref, isOverflowing, overflowCount } = useOverflowMenu();
|
7
7
|
if (!isOverflowing) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"kwizoverflow.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EACtF,wBAAwB,EAAE,eAAe,EAC5C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"kwizoverflow.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,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,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,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,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,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,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
|
package/package.json
CHANGED
@@ -0,0 +1,48 @@
|
|
1
|
+
import { Label, makeStyles } from "@fluentui/react-components";
|
2
|
+
import { ChevronRightRegular } from "@fluentui/react-icons";
|
3
|
+
import * as React from 'react';
|
4
|
+
import { Horizontal } from "./horizontal";
|
5
|
+
import { Vertical } from "./vertical";
|
6
|
+
|
7
|
+
const useStyles = makeStyles({
|
8
|
+
opened: {
|
9
|
+
transform: "rotate(90deg)",
|
10
|
+
transition: "transform 200ms ease-out"
|
11
|
+
},
|
12
|
+
header: {
|
13
|
+
cursor: "pointer"
|
14
|
+
},
|
15
|
+
root: {
|
16
|
+
maxHeight: "100%"
|
17
|
+
},
|
18
|
+
body: {
|
19
|
+
overflow: "auto"
|
20
|
+
}
|
21
|
+
});
|
22
|
+
|
23
|
+
interface iProps {
|
24
|
+
/** optional, send the key for the group you want to open by default */
|
25
|
+
opened?: string;
|
26
|
+
groups: {
|
27
|
+
key: string;
|
28
|
+
title: string;
|
29
|
+
icon?: JSX.Element;
|
30
|
+
content: JSX.Element;
|
31
|
+
}[];
|
32
|
+
}
|
33
|
+
export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
|
34
|
+
const classes = useStyles();
|
35
|
+
const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
|
36
|
+
return (<Vertical main css={[classes.root]}>
|
37
|
+
{props.groups.map(group => <React.Fragment key={group.key}>
|
38
|
+
<Horizontal css={[classes.header]} onClick={() => setOpened(group.key)}>
|
39
|
+
<ChevronRightRegular className={opened === group.key && classes.opened} />
|
40
|
+
<Label>{group.title}</Label>
|
41
|
+
</Horizontal>
|
42
|
+
{group.key === opened && <Vertical main css={[classes.body]}>
|
43
|
+
{group.content}
|
44
|
+
</Vertical>}
|
45
|
+
</React.Fragment>)}
|
46
|
+
</Vertical>
|
47
|
+
);
|
48
|
+
}
|
@@ -2,10 +2,11 @@ import {
|
|
2
2
|
Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
|
3
3
|
useIsOverflowItemVisible, useOverflowMenu
|
4
4
|
} from "@fluentui/react-components";
|
5
|
-
import { isNumber } from '@kwiz/common';
|
6
5
|
import { MoreHorizontalFilled } from "@fluentui/react-icons";
|
6
|
+
import { isNumber } from '@kwiz/common';
|
7
7
|
|
8
8
|
interface IProps<ItemType> {
|
9
|
+
/** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
|
9
10
|
items: ItemType[];
|
10
11
|
getKey: (item: ItemType, index: number) => string;
|
11
12
|
getPriority?: (item: ItemType, index: number) => number;
|
package/src/index.ts
CHANGED