@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
136 lines (135 loc) • 9.07 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 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 = {}));
exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
size: '',
},
parts: {
icon: 'avatar-icon',
image: 'avatar-image',
},
base: { name: "ojxa2y", 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;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-69cee0);height:var(--size-avatar-69cee0);&:focus-visible:not([disabled]), &.focus:not([disabled]){outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;}& > [data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-69cee0) * 0.625);}& > [data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
modifiers: {
variant: {
light: { name: "ojxa2z", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-212f69:var(--cnvs-sys-color-fg-default);}" },
dark: { name: "ojxa30", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-212f69:var(--cnvs-sys-color-fg-inverse);}" }
},
size: {
extraSmall: { name: "ojxa31", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
small: { name: "ojxa32", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
medium: { name: "ojxa33", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
large: { name: "ojxa34", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
extraLarge: { name: "ojxa35", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
extraExtraLarge: { name: "ojxa36", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
},
objectFit: {
contain: { name: "ojxa37", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
fill: { name: "ojxa38", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
cover: { name: "ojxa39", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
['scale-down']: { name: "ojxa3a", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
none: { name: "ojxa3b", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
['-moz-initial']: { name: "ojxa3c", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
['initial']: { name: "ojxa3d", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
['inherit']: { name: "ojxa3e", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
['revert']: { name: "ojxa3f", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
['unset']: { name: "ojxa3g", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
},
isImageLoaded: {
true: { name: "ojxa3h", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" },
false: { name: "ojxa3i", styles: "[data-part=\"avatar-icon\"]{opacity:1;}[data-part=\"avatar-image\"]{opacity:0;}" }
}
},
defaultModifiers: {
variant: 'light',
size: 'medium',
isImageLoaded: 'false',
objectFit: 'contain',
}
}, "avatar-69cee0");
exports.Avatar = (0, common_1.createComponent)('button')({
displayName: 'Avatar',
Component: ({ variant, size, altText = 'Avatar', 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 (react_1.default.createElement(Element, { ref: ref, "aria-label": altText, role: Element === 'button' ? 'button' : 'img', ...(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,
}),
]) },
react_1.default.createElement(icon_1.SystemIcon, { ...exports.avatarStencil.parts.icon, icon: canvas_system_icons_web_1.userIcon }),
url && react_1.default.createElement("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,
},
});