@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
110 lines (109 loc) • 7.71 kB
JavaScript
import React, { useState } from 'react';
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
import { createStencil, calc, px2rem } from '@workday/canvas-kit-styling';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { borderRadius } from '@workday/canvas-kit-react/tokens';
import { SystemIcon, SystemIconCircleSize, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { userIcon } from '@workday/canvas-system-icons-web';
import { system } from '@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`.
*/
export var AvatarVariant;
(function (AvatarVariant) {
AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
})(AvatarVariant || (AvatarVariant = {}));
export const avatarStencil = createStencil({
vars: {
size: '',
},
parts: {
icon: 'avatar-icon',
image: 'avatar-image',
},
base: { name: "d5h42y", 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: "d5h42z", 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: "d5h430", 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: "d5h431", 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: "d5h432", 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: "d5h433", 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: "d5h434", 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: "d5h435", 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: "d5h436", 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: "d5h437", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
fill: { name: "d5h438", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
cover: { name: "d5h439", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
['scale-down']: { name: "d5h43a", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
none: { name: "d5h43b", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
['-moz-initial']: { name: "d5h43c", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
['initial']: { name: "d5h43d", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
['inherit']: { name: "d5h43e", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
['revert']: { name: "d5h43f", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" },
['unset']: { name: "d5h43g", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" }
},
isImageLoaded: {
true: { name: "d5h43h", styles: "[data-part=\"avatar-icon\"]{opacity:0;}[data-part=\"avatar-image\"]{opacity:1;}" },
false: { name: "d5h43i", styles: "[data-part=\"avatar-icon\"]{opacity:1;}[data-part=\"avatar-image\"]{opacity:0;}" }
}
},
defaultModifiers: {
variant: 'light',
size: 'medium',
isImageLoaded: 'false',
objectFit: 'contain',
}
}, "avatar-69cee0");
export const Avatar = createComponent('button')({
displayName: 'Avatar',
Component: ({ variant, size, altText = 'Avatar', url, objectFit, ...elemProps }, ref, Element) => {
const [imageLoaded, setImageLoaded] = useState(false);
const loadImage = () => {
if (!imageLoaded) {
setImageLoaded(true);
}
};
React.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.createElement(Element, { ref: ref, "aria-label": altText, role: Element === 'button' ? 'button' : 'img', ...mergeStyles(elemProps, [
avatarStencil({
variant: variant === AvatarVariant.Light
? 'light'
: variant === AvatarVariant.Dark
? 'dark'
: variant,
size: typeof size === 'number' ? px2rem(size) : size,
objectFit,
isImageLoaded: imageLoaded,
}),
]) },
React.createElement(SystemIcon, { ...avatarStencil.parts.icon, icon: userIcon }),
url && React.createElement("img", { ...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: SystemIconCircleSize,
},
});