@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
95 lines (94 loc) • 5.24 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 React = __importStar(require("react"));
const card_1 = require("@workday/canvas-kit-react/card");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const getTransformFromPlacement_1 = require("./getTransformFromPlacement");
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 translateVars = (0, canvas_kit_styling_1.createVars)({ id: "696a04", args: ["positionX", "positionY"] });
/**
* Keyframe for the dots loading animation.
*/
const fadeIn = (0, canvas_kit_styling_1.keyframes)({ name: "ojxay", 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 tokens_1.space) {
return tokens_1.space[value];
}
else {
return value;
}
}
function getMaxHeight(margin) {
// set the default margin offset to space.xl
let marginOffset = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.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})`;
}
exports.popupCardStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
maxHeight: '',
transformOriginHorizontal: '',
transformOriginVertical: '',
},
base: { name: "ojxaz", 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-ojxay;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");
exports.PopupCard = (0, common_1.createSubcomponent)('div')({
displayName: 'Popup.Card',
modelHook: hooks_1.usePopupModel,
elemPropsHook: hooks_1.usePopupCard,
})(({ children, ref, ...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, (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x2));
const cardMaxHeight = getMaxHeight(elemProps.margin);
return (React.createElement(card_1.Card, { as: Element, ref: ref, ...(0, layout_1.mergeStyles)(elemProps, [
(0, exports.popupCardStencil)({
transformOriginHorizontal: transformOrigin.horizontal,
transformOriginVertical: transformOrigin.vertical,
maxHeight: cardMaxHeight,
}),
translateVars({ positionX: translate.x, positionY: translate.y }),
]) }, children));
});