@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
69 lines (68 loc) • 3.83 kB
JavaScript
import * as React from 'react';
import { Card } from '@workday/canvas-kit-react/card';
import { space } from '@workday/canvas-kit-react/tokens';
import { createSubcomponent, getTransformOrigin, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { getTransformFromPlacement } from './getTransformFromPlacement';
import { usePopupCard, usePopupModel } from './hooks';
import { createStencil, createVars, cssVar, keyframes } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const translateVars = createVars({ id: "696a04", args: ["positionX", "positionY"] });
/**
* Keyframe for the dots loading animation.
*/
const fadeIn = keyframes({ name: "d5h4y", styles: "0%{opacity:1;transform:translate(var(--positionX-696a04), var(--positionY-696a04));}100%{opacity:1;transform:translate(0);}" });
function getSpace(value) {
if (value && value in space) {
return space[value];
}
else {
return value;
}
}
function getMaxHeight(margin) {
// set the default margin offset to space.xl
let marginOffset = cssVar(system.space.x10);
if (margin) {
// parse the margin prop
if (typeof margin === 'string') {
const marginValues = margin.split(' ');
const marginTop = getSpace(marginValues[0]);
// If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
const marginBottom = getSpace(marginValues[2]) || marginTop;
marginOffset = `(${marginTop} + ${marginBottom})`;
}
else {
// if margin is a number, double it to get the offset
marginOffset = `${margin * 2}px`;
}
}
return `calc(100vh - ${marginOffset})`;
}
export const popupCardStencil = createStencil({
vars: {
maxHeight: '',
transformOriginHorizontal: '',
transformOriginVertical: '',
},
base: { name: "d5h4z", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;position:relative;max-width:calc(100vw - var(--cnvs-sys-space-x8));flex-direction:column;box-shadow:var(--cnvs-sys-depth-5);min-height:var(--cnvs-sys-space-zero);padding:var(--cnvs-sys-space-x6);max-height:var(--maxHeight-popup-card-36628b);overflow-y:auto;animation-name:animation-d5h4y;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-36628b) var(--transformOriginHorizontal-popup-card-36628b);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;}" }
}, "popup-card-36628b");
export const PopupCard = createSubcomponent('div')({
displayName: 'Popup.Card',
modelHook: usePopupModel,
elemPropsHook: usePopupCard,
})(({ children, ref, ...elemProps }, Element, model) => {
const transformOrigin = React.useMemo(() => {
return getTransformFromPlacement(model.state.placement || 'bottom');
}, [model.state.placement]);
const translate = getTransformOrigin(transformOrigin, cssVar(system.space.x2));
const cardMaxHeight = getMaxHeight(elemProps.margin);
return (React.createElement(Card, { as: Element, ref: ref, ...mergeStyles(elemProps, [
popupCardStencil({
transformOriginHorizontal: transformOrigin.horizontal,
transformOriginVertical: transformOrigin.vertical,
maxHeight: cardMaxHeight,
}),
translateVars({ positionX: translate.x, positionY: translate.y }),
]) }, children));
});