@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
138 lines (137 loc) • 9.38 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.Avatar = exports.avatarStencil = exports.AvatarVariant = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const layout_1 = require("@workday/canvas-kit-react/layout");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const icon_1 = require("@workday/canvas-kit-react/icon");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
/**
* @deprecated ⚠️ `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
*/
var AvatarVariant;
(function (AvatarVariant) {
AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
})(AvatarVariant = exports.AvatarVariant || (exports.AvatarVariant = {}));
/**
* @deprecated `avatarStencil` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
*/
exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
size: '',
},
parts: {
icon: 'avatar-icon',
image: 'avatar-image',
},
base: { name: "1z9bsu", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-a7d274);height:var(--size-avatar-a7d274);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-8fcab8:calc(var(--size-avatar-a7d274) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
modifiers: {
variant: {
light: { name: "265dpl", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-default);}" },
dark: { name: "17cxmz", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);}" }
},
size: {
extraSmall: { name: "3c9rx1", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
small: { name: "1rn9b7", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
medium: { name: "1tcnw8", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
large: { name: "15pjoi", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
extraLarge: { name: "1bf51m", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
extraExtraLarge: { name: "fuqbn", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
},
objectFit: {
contain: { name: "2xiqh6", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
fill: { name: "4d4adl", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
cover: { name: "lu4nf", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
['scale-down']: { name: "39vrno", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
none: { name: "2vh3dr", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
['-moz-initial']: { name: "3hdihf", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
['initial']: { name: "6y52u", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
['inherit']: { name: "46o0uh", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
['revert']: { name: "1uqb0k", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
['unset']: { name: "2lfl58", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
},
isImageLoaded: {
true: { name: "1ahu5u", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" }
}
},
defaultModifiers: {
variant: 'light',
objectFit: 'contain',
}
}, "avatar-a7d274");
/**
* @deprecated ⚠️ `Avatar` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
*/
exports.Avatar = (0, common_1.createComponent)('button')({
displayName: 'Avatar',
Component: ({ variant, size = 'medium', altText, url, objectFit, ...elemProps }, ref, Element) => {
const [imageLoaded, setImageLoaded] = (0, react_1.useState)(false);
const loadImage = () => {
if (!imageLoaded) {
setImageLoaded(true);
}
};
react_1.default.useLayoutEffect(() => {
setImageLoaded(false);
}, [url]);
// TODO: Remove this warning for a hard breaking change in v13
if (process.env.NODE_ENV === 'development') {
if (typeof variant === 'number') {
console.warn('Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light" or "dark"');
}
if (typeof size === 'number') {
console.warn("Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})");
}
}
return ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, "aria-label": Element === 'button' ? altText : undefined, ...(0, layout_1.mergeStyles)(elemProps, [
(0, exports.avatarStencil)({
variant: variant === AvatarVariant.Light
? 'light'
: variant === AvatarVariant.Dark
? 'dark'
: variant,
size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : size,
objectFit,
isImageLoaded: imageLoaded,
}),
]), children: [(0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.avatarStencil.parts.icon, icon: canvas_system_icons_web_1.userIcon }), url && (0, jsx_runtime_1.jsx)("img", { ...exports.avatarStencil.parts.image, src: url, alt: altText, onLoad: loadImage })] }));
},
subComponents: {
/**
* @deprecated ⚠️ `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
*/
Variant: AvatarVariant,
/**
* @deprecated ⚠️ `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
*/
Size: icon_1.SystemIconCircleSize,
},
});