@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
50 lines (49 loc) • 2.88 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import { createSubcomponent, createElemPropsHook, useWindowSize, useForkRef, } from '@workday/canvas-kit-react/common';
import { usePopupModel, usePopupStack } from '@workday/canvas-kit-react/popup';
import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
import { useModalModel } from './hooks';
import { createStencil, cssVar, keyframes } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const fadeIn = keyframes({ name: "d5h456", styles: "0%{background:none;}100%{background:var(--cnvs-sys-color-bg-overlay);}" });
export const modalOverlayContainerStencil = createStencil({
vars: {
containerCenter: '',
},
base: { name: "d5h457", 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-d5h456;.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");
export const useModalOverlay = createElemPropsHook(usePopupModel)(({ state }, ref) => {
const elementRef = useForkRef(ref, state.stackRef);
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 = createSubcomponent('div')({
displayName: 'Modal.OpenOverlay',
modelHook: useModalModel,
elemPropsHook: useModalOverlay,
})((elemProps, Element, model) => {
const windowSize = useWindowSize();
const containerCenter = windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw';
const content = (React.createElement(Box, { ...mergeStyles(elemProps, modalOverlayContainerStencil({ containerCenter })) },
React.createElement(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 ReactDOM.createPortal(content, model.state.stackRef.current);
}
else {
return null;
}
});
export const ModalOverlay = createSubcomponent('div')({
displayName: 'Modal.Overlay',
modelHook: useModalModel,
})((elemProps, Element, model) => {
return model.state.visibility !== 'hidden' ? (React.createElement(OpenModalOverlay, { as: Element, model: model, ...elemProps })) : null;
});