@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
65 lines • 3.04 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { makeStaticStyles, makeStyles } from "@fluentui/react-components";
import { useEffect, useState } from "react";
import { GetLogger } from "../_modules/config";
import { KnownClassNames } from "../styles";
import { KWIZFluentContext } from "./context-const";
import { DragDropContextProvider } from "./drag-drop";
const logger = GetLogger("KWIZFluentContextProvider");
const useContextStyles = makeStyles({
root: {
"& *": {
scrollbarWidth: "thin",
//if we can make sure this applies only to fui-FluentProvider, do this too, since public forms might take over the entire page we don't want to to affect other sites:
//maybe make KWIZFluentProvider automatically wrap in a root and apply to it
//scrollbarColor: `${tokens.colorBrandForeground2} ${tokens.colorBrandBackground2}`
},
[`& .${KnownClassNames.printShow}`]: {
'@media print': {
display: 'unset',
}
},
[`& .${KnownClassNames.printHide}`]: {
'@media print': {
display: 'none !important'
}
},
},
});
export const useStaticStyles = makeStaticStyles({
[`.${KnownClassNames.printShow}`]: {
display: 'none'
},
[`body.${KnownClassNames.print} .${KnownClassNames.printHide}`]: {
display: "none !important"
},
[`body.${KnownClassNames.print} .${KnownClassNames.printShow}`]: {
display: "unset"
}
});
/** @deprecated - use KWIZFluentProvider instead of using this + DragDropContextProvider */
export function useKWIZFluentContextProvider(options) {
useStaticStyles();
const classes = useContextStyles();
let v = options && options.ctx || {};
const [kwizFluentContext, setKwizFluentContext] = useState(v);
useEffect(() => {
var _a, _b, _c;
if ((_a = options.root) === null || _a === void 0 ? void 0 : _a.current)
logger.warn('Sending a root node is not recommended, if you have set up your packages correctly to mark react and fluent UI as external dialogs should open correctly.');
let styleRoot = ((_b = options.root) === null || _b === void 0 ? void 0 : _b.current) || document.body;
styleRoot.classList.add(...classes.root.split(' '));
// ref only updates in useEffect, not in useMemo or anything else.
// we need to set it into state so it will trigger a ui update
setKwizFluentContext(Object.assign(Object.assign({}, v), { mountNode: (_c = options.root) === null || _c === void 0 ? void 0 : _c.current }));
}, [options.root]);
return {
KWIZFluentContext,
value: kwizFluentContext
};
}
export const KWIZFluentProvider = (props) => {
const cp = useKWIZFluentContextProvider({ ctx: props.ctx });
return _jsx(cp.KWIZFluentContext.Provider, { value: cp.value, children: _jsx(DragDropContextProvider, { children: props.children }) });
};
//# sourceMappingURL=context-export.js.map