@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
56 lines (55 loc) • 3.39 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 react_1 = __importDefault(require("react"));
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: "ojxa56", styles: "0%{background:none;}100%{background:var(--cnvs-sys-color-bg-overlay);}" });
exports.modalOverlayContainerStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
containerCenter: '',
},
base: { name: "ojxa57", 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-ojxa56;.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-8b6518);}@media screen and (max-width: 768px){height:100%;& > div{align-items:end;}}" }
}, "modal-overlay-container-8b6518");
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 = (react_1.default.createElement(layout_1.Box, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.modalOverlayContainerStencil)({ containerCenter })) },
react_1.default.createElement(layout_1.Box
// make sure the centering container is an even number of pixels to avoid sub-pixel
// inaccuracies due to centering
, null, 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' ? (react_1.default.createElement(OpenModalOverlay, { as: Element, model: model, ...elemProps })) : null;
});