@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
108 lines (107 loc) • 6.11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopupCard = exports.popupCardStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const card_1 = require("@workday/canvas-kit-react/card");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const getTransformFromPlacement_1 = require("./getTransformFromPlacement");
const hooks_1 = require("./hooks");
const translateVars = (0, canvas_kit_styling_1.createVars)({ id: "77342a", args: ["positionX", "positionY"] });
/**
* Keyframe for the dots loading animation.
*/
const fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "23at2h", styles: "0%{opacity:1;transform:translate(var(--positionX-77342a), var(--positionY-77342a));}100%{opacity:1;transform:translate(0);}" });
function getSpace(value) {
// TODO (deprecated tokens): Revisit tokens after removal of style props
const spaceMap = {
zero: canvas_tokens_web_1.system.legacy.gap.none,
xxxs: canvas_tokens_web_1.system.legacy.gap.xs,
xxs: canvas_tokens_web_1.system.legacy.gap.sm,
xs: (0, canvas_kit_styling_1.px2rem)(12),
s: canvas_tokens_web_1.system.legacy.gap.md,
m: canvas_tokens_web_1.system.legacy.gap.lg,
l: canvas_tokens_web_1.system.legacy.gap.xl,
xl: (0, canvas_kit_styling_1.px2rem)(40),
xxl: canvas_tokens_web_1.system.legacy.gap.xxl,
xxxl: (0, canvas_kit_styling_1.px2rem)(80),
};
if (value && value in spaceMap) {
return spaceMap[value];
}
else {
return value;
}
}
function getMaxHeight(margin) {
// set the default margin offset to 40px
let marginOffset = canvas_tokens_web_1.base.legacy.size500;
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(100dvh - ${marginOffset})`;
}
exports.popupCardStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
maxHeight: '',
transformOriginHorizontal: '',
transformOriginVertical: '',
},
base: { name: "2ts81p", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);position:relative;max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));gap:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));box-shadow:var(--cnvs-sys-depth-4);min-height:0;padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);max-height:var(--maxHeight-popup-card-b9f0ce);overflow-y:auto;animation-name:animation-23at2h;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-b9f0ce) var(--transformOriginHorizontal-popup-card-b9f0ce);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;padding:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));}" }
}, "popup-card-b9f0ce");
exports.PopupCard = (0, common_1.createSubcomponent)('div')({
displayName: 'Popup.Card',
modelHook: hooks_1.usePopupModel,
elemPropsHook: hooks_1.usePopupCard,
})(({ children, ref, variant, ...elemProps }, Element, model) => {
const transformOrigin = React.useMemo(() => {
return (0, getTransformFromPlacement_1.getTransformFromPlacement)(model.state.placement || 'bottom');
}, [model.state.placement]);
const translate = (0, common_1.getTransformOrigin)(transformOrigin, canvas_tokens_web_1.system.legacy.gap.sm);
const cardMaxHeight = getMaxHeight(elemProps.margin);
return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: Element, ref: ref, variant: variant, ...(0, layout_1.mergeStyles)(elemProps, [
(0, exports.popupCardStencil)({
transformOriginHorizontal: transformOrigin.horizontal,
transformOriginVertical: transformOrigin.vertical,
maxHeight: cardMaxHeight,
}),
translateVars({ positionX: translate.x, positionY: translate.y }),
]), children: children }));
});