@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
54 lines (53 loc) • 3.41 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Avatar = exports.avatarStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const BaseAvatar_1 = require("./BaseAvatar");
exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseAvatar_1.baseAvatarStencil,
parts: {
avatarImage: 'avatar-image',
avatarName: 'avatar-name',
},
base: { name: "2r5gr6", styles: "box-sizing:border-box;" },
modifiers: {
imageLoaded: {
false: { name: "3qz05s", styles: "[data-part=\"avatar-image\"]{display:none;}" },
true: { name: "18suww", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
},
objectFit: {
contain: { name: "22yzn2", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
cover: { name: "3djq7l", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
fill: { name: "2a361m", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
none: { name: "2pjhdo", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
['scale-down']: { name: "2f6u1p", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
initial: { name: "10ko0p", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
inherit: { name: "3wol81", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
unset: { name: "29ek0n", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
['-moz-initial']: { name: "12ehzm", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
['revert']: { name: "2qm2g4", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
}
}
}, "avatar-620ed0");
/**
* JSDoc for Avatar. Will be part of the Component API docs
*/
exports.Avatar = (0, common_1.createComponent)('div')({
displayName: 'Avatar',
Component: ({ url, name, variant, objectFit = 'contain', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
const [imageLoaded, setImageLoaded] = react_1.default.useState(false);
const handleImageLoad = () => {
if (!imageLoaded) {
setImageLoaded(true);
}
};
return ((0, jsx_runtime_1.jsxs)(BaseAvatar_1.BaseAvatar, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarStencil)({ variant, size, imageLoaded, objectFit })), children: [url && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BaseAvatar_1.BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...exports.avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && ((0, jsx_runtime_1.jsx)(BaseAvatar_1.BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...exports.avatarStencil.parts.avatarName }))] }));
},
});