@kwiz/fluentui 1.0.34 → 1.0.36
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -19,6 +19,9 @@ const useStyles = makeStyles({
|
|
|
19
19
|
root: {
|
|
20
20
|
maxHeight: "100%"
|
|
21
21
|
},
|
|
22
|
+
rootFill: {
|
|
23
|
+
minHeight: "100%"
|
|
24
|
+
},
|
|
22
25
|
body: {
|
|
23
26
|
overflow: "auto",
|
|
24
27
|
},
|
|
@@ -29,6 +32,6 @@ const useStyles = makeStyles({
|
|
|
29
32
|
export const AccordionEX = (props) => {
|
|
30
33
|
const classes = useStyles();
|
|
31
34
|
const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
|
|
32
|
-
return (_jsx(Vertical, { main: true, css: [classes.root, KnownClassNames.accordion], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsx(ButtonEX, { className: `${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`, icon: _jsx(ChevronRightRegular, { className: opened === group.key ? classes.opened : '' }), title: group.title, showTitleWithIcon: true, dontCenterText: true, onClick: () => setOpened(group.key) }), _jsx(DividerEX, {}), group.key === opened && _jsxs(_Fragment, { children: [_jsxs(Horizontal, { main: true, css: [classes.body, KnownClassNames.accordionBodyWrapper], children: [_jsx(Section, { css: [classes.indent, KnownClassNames.accordionBodyIndent] }), _jsx(Vertical, { main: true, css: [KnownClassNames.accordionBody], children: group.content })] }), _jsx(DividerEX, {})] })] }, group.key)) }));
|
|
35
|
+
return (_jsx(Vertical, { main: true, css: [classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsx(ButtonEX, { className: `${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`, icon: _jsx(ChevronRightRegular, { className: opened === group.key ? classes.opened : '' }), title: group.title, showTitleWithIcon: true, dontCenterText: true, onClick: () => setOpened(group.key) }), _jsx(DividerEX, {}), group.key === opened && _jsxs(_Fragment, { children: [_jsxs(Horizontal, { main: true, css: [classes.body, KnownClassNames.accordionBodyWrapper], children: [_jsx(Section, { css: [classes.indent, KnownClassNames.accordionBodyIndent] }), _jsx(Vertical, { main: true, css: [KnownClassNames.accordionBody], children: group.content })] }), _jsx(DividerEX, {})] })] }, group.key)) }));
|
|
33
36
|
};
|
|
34
37
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,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,WAAW,EAAE,CAAC;KACjB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC,kBAAkB;KACnC;CACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,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,WAAW,EAAE,CAAC;KACjB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,QAAQ,EAAE;QACN,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC,kBAAkB;KACnC;CACJ,CAAC,CAAC;AAaH,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,EAAE,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,QAAQ,EAAE,eAAe,CAAC,SAAS,CAAC,YACtG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,MAAC,KAAK,CAAC,QAAQ,eACtC,KAAC,QAAQ,IAAC,SAAS,EAAE,GAAG,OAAO,CAAC,MAAM,IAAI,eAAe,CAAC,eAAe,IAAI,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EACnI,IAAI,EAAE,KAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAI,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,iBAAiB,QAAC,cAAc,QACpD,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GACrC,EACF,KAAC,SAAS,KAAG,EACZ,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,8BACrB,MAAC,UAAU,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,eAAe,CAAC,oBAAoB,CAAC,aACtE,KAAC,OAAO,IAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,eAAe,CAAC,mBAAmB,CAAC,GAAY,EAC/E,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,YAC9C,KAAK,CAAC,OAAO,GACP,IACF,EACb,KAAC,SAAS,KAAG,IACd,KAfyC,KAAK,CAAC,GAAG,CAgBxC,CAAC,GACX,CACV,CAAC;AACN,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -19,6 +19,9 @@ const useStyles = makeStyles({
|
|
|
19
19
|
root: {
|
|
20
20
|
maxHeight: "100%"
|
|
21
21
|
},
|
|
22
|
+
rootFill: {
|
|
23
|
+
minHeight: "100%"
|
|
24
|
+
},
|
|
22
25
|
body: {
|
|
23
26
|
overflow: "auto",
|
|
24
27
|
},
|
|
@@ -30,6 +33,7 @@ const useStyles = makeStyles({
|
|
|
30
33
|
interface iProps {
|
|
31
34
|
/** optional: send the key for the group you want to open by default */
|
|
32
35
|
opened?: string;
|
|
36
|
+
fillHeight?: boolean;
|
|
33
37
|
groups: {
|
|
34
38
|
key: string;
|
|
35
39
|
title: string;
|
|
@@ -40,7 +44,7 @@ interface iProps {
|
|
|
40
44
|
export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
|
|
41
45
|
const classes = useStyles();
|
|
42
46
|
const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
|
|
43
|
-
return (<Vertical main css={[classes.root, KnownClassNames.accordion]}>
|
|
47
|
+
return (<Vertical main css={[classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion]}>
|
|
44
48
|
{props.groups.map(group => <React.Fragment key={group.key}>
|
|
45
49
|
<ButtonEX className={`${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`}
|
|
46
50
|
icon={<ChevronRightRegular className={opened === group.key ? classes.opened : ''} />}
|