@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
55 lines (54 loc) • 3.38 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalOverlay = exports.useModalOverlay = exports.modalOverlayContainerStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_dom_1 = __importDefault(require("react-dom"));
const common_1 = require("@workday/canvas-kit-react/common");
const popup_1 = require("@workday/canvas-kit-react/popup");
const layout_1 = require("@workday/canvas-kit-react/layout");
const hooks_1 = require("./hooks");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "3be0hk", styles: "0%{background:none;}100%{background:var(--cnvs-sys-color-bg-overlay);}" });
exports.modalOverlayContainerStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
containerCenter: '',
},
base: { name: "28mwat", styles: "box-sizing:border-box;position:fixed;top:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);width:100vw;height:100vh;background:var(--cnvs-sys-color-bg-overlay);animation-duration:0.3s;animation-name:animation-3be0hk;.wd-no-animation &{animation:none;}& > div{max-height:100%;display:flex;position:absolute;left:var(--cnvs-sys-space-zero);top:var(--cnvs-sys-space-zero);justify-content:center;align-items:center;height:100%;width:var(--containerCenter-modal-overlay-container-bd009b);}@media screen and (max-width: 768px){height:100%;& > div{align-items:end;}}" }
}, "modal-overlay-container-bd009b");
exports.useModalOverlay = (0, common_1.createElemPropsHook)(popup_1.usePopupModel)(({ state }, ref) => {
const elementRef = (0, common_1.useForkRef)(ref, state.stackRef);
(0, popup_1.usePopupStack)(elementRef);
return {
// The ref should not be applied to an element. The passed ref will apply to the stackRef instead
ref: undefined,
};
});
const OpenModalOverlay = (0, common_1.createSubcomponent)('div')({
displayName: 'Modal.OpenOverlay',
modelHook: hooks_1.useModalModel,
elemPropsHook: exports.useModalOverlay,
})((elemProps, Element, model) => {
const windowSize = (0, common_1.useWindowSize)();
const containerCenter = windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw';
const content = ((0, jsx_runtime_1.jsx)(layout_1.Box, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.modalOverlayContainerStencil)({ containerCenter })), children: (0, jsx_runtime_1.jsx)(layout_1.Box
// make sure the centering container is an even number of pixels to avoid sub-pixel
// inaccuracies due to centering
, { children: elemProps.children }) }));
// only render something on the client
if (typeof window !== 'undefined') {
return react_dom_1.default.createPortal(content, model.state.stackRef.current);
}
else {
return null;
}
});
exports.ModalOverlay = (0, common_1.createSubcomponent)('div')({
displayName: 'Modal.Overlay',
modelHook: hooks_1.useModalModel,
})((elemProps, Element, model) => {
return model.state.visibility !== 'hidden' ? ((0, jsx_runtime_1.jsx)(OpenModalOverlay, { as: Element, model: model, ...elemProps })) : null;
});