@vkontakte/vkui 4.28.0 → 4.29.1

package/src/components/Avatar/Avatar.css

@@ -0,0 +1,192 @@
+.Avatar {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  color: var(--placeholder_icon_background);
+  background: currentColor;
+  background-size: cover;
+  position: relative;
+}
+
+.Avatar--failed .Avatar__img {
+  visibility: hidden;
+}
+
+.Avatar__img {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: inherit;
+}
+
+.Avatar__children,
+.Avatar--shadow::after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.Avatar--shadow::after {
+  content: "";
+  box-shadow: inset 0 0 0 var(--thin-border) var(--image_border);
+}
+
+.Avatar__overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.3s;
+  border: none;
+}
+
+.Avatar__overlay--light {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+.Avatar__overlay--dark {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.Avatar__overlay--visible {
+  opacity: 1;
+}
+
+.Avatar__overlay--focus-visible {
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+.Avatar__children {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--icon_secondary);
+}
+
+.Avatar__badge {
+  position: absolute;
+  z-index: 1;
+  bottom: calc(14% - 1px);
+  right: calc(14% - 1px);
+  transform: translate(50%, 50%);
+}
+
+.Avatar__badge--large {
+  bottom: 14%;
+  right: 14%;
+}
+
+.Avatar__badge--shadow {
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.04))
+    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
+}
+
+.Avatar__badge-online {
+  color: #4bb34b;
+  background-color: var(--background_content);
+  border-radius: 50%;
+}
+
+.Avatar__badge-online-mobile {
+  color: #4bb34b;
+  background-color: var(--background_content);
+  border-radius: 3px;
+  padding: 2px;
+}
+
+/**
+ * .CellButton
+ */
+.CellButton > .Avatar {
+  color: var(--button_muted_background);
+}
+
+.CellButton > .Avatar .Icon {
+  color: var(--accent);
+}
+
+.CellButton--danger > .Avatar .Icon {
+  color: var(--destructive);
+}
+
+/**
+ * .PanelHeader
+ */
+.PanelHeader__left .Avatar {
+  margin-left: 8px;
+}
+
+.PanelHeader__right .Avatar {
+  margin-right: 8px;
+}
+
+/**
+ * .RichCell
+ */
+.RichCell > .Avatar {
+  margin-right: 12px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.RichCell > .Avatar--sz-48 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+/**
+ * .SimpleCell
+ */
+.SimpleCell > .Avatar {
+  margin-right: 12px;
+}
+
+.SimpleCell > .Avatar--sz-28,
+.SimpleCell > .Avatar--sz-32 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.SimpleCell > .Avatar--sz-40 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.SimpleCell > .Avatar--sz-48,
+.SimpleCell > .Avatar--sz-72 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+.SimpleCell--ios > .Avatar--sz-28,
+.SimpleCell--ios > .Avatar--sz-32 {
+  margin-left: 4px;
+}
+
+.SimpleCell--sizeY-compact > .Avatar--sz-28,
+.SimpleCell--sizeY-compact > .Avatar--sz-32 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.SimpleCell--sizeY-compact > .Avatar--sz-40 {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.SimpleCell--sizeY-compact > .Avatar--sz-48 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { Icon12Circle, Icon12OnlineMobile } from "@vkontakte/icons";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import Tappable from "../Tappable/Tappable";
+import { HasRef, HasRootRef } from "../../types";
+import "./Avatar.css";
+
+export interface AvatarProps
+  extends React.ImgHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLImageElement> {
+  /**
+   * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24
+   */
+  size?: number;
+  mode?: "default" | "image" | "app";
+  shadow?: boolean;
+  badge?: "online" | "online-mobile" | JSX.Element;
+  overlayIcon?: JSX.Element;
+  overlayMode?: "dark" | "light";
+  /**
+   * Поведение показа overlay: "hover" - при наведении, "always" - всегда
+   */
+  overlayAction?: "hover" | "always";
+}
+
+export const AVATAR_DEFAULT_SIZE = 48;
+export const AVATAR_DEFAULT_SHADOW = true;
+
+const Avatar: React.FC<AvatarProps> = ({
+  alt,
+  crossOrigin,
+  decoding,
+  height,
+  loading,
+  referrerPolicy,
+  sizes,
+  src,
+  srcSet,
+  useMap,
+  width,
+  getRef,
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  mode = "default",
+  className,
+  children,
+  getRootRef,
+  style,
+  "aria-label": ariaLabel,
+  badge,
+  overlayIcon,
+  overlayMode = "light",
+  overlayAction: passedOverlayAction,
+  onClick,
+  ...restProps
+}: AvatarProps) => {
+  const platform = usePlatform();
+  const { hasMouse } = useAdaptivity();
+  const [failedImage, setFailedImage] = React.useState(false);
+
+  const overlayAction = passedOverlayAction ?? (hasMouse ? "hover" : "always");
+
+  const onImageError = () => {
+    setFailedImage(true);
+  };
+
+  const onImageLoad = () => {
+    setFailedImage(false);
+  };
+
+  let borderRadius: string | number = "50%";
+
+  switch (mode) {
+    case "image":
+      size < 64 && (borderRadius = 4);
+      size >= 64 && size < 96 && (borderRadius = 6);
+      size >= 96 && (borderRadius = 8);
+      break;
+    case "app":
+      size <= 40 && (borderRadius = 8);
+      size > 40 && size < 56 && (borderRadius = 10);
+      size >= 56 && size < 64 && (borderRadius = 12);
+      size >= 64 && size < 84 && (borderRadius = 16);
+      size >= 84 && (borderRadius = 18);
+      break;
+    default:
+      break;
+  }
+
+  const hasSrc = src || srcSet;
+
+  return (
+    <div
+      {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      vkuiClass={classNames(
+        getClassName("Avatar", platform),
+        `Avatar--type-${mode}`,
+        `Avatar--sz-${size}`,
+        {
+          "Avatar--shadow": shadow,
+          "Avatar--failed": failedImage,
+        }
+      )}
+      className={className}
+      ref={getRootRef}
+      role={hasSrc ? "img" : "presentation"}
+      aria-label={alt || ariaLabel}
+      onClick={!overlayIcon ? onClick : undefined}
+      style={{ ...style, width: size, height: size, borderRadius }}
+    >
+      {hasSrc && (
+        <img
+          crossOrigin={crossOrigin}
+          decoding={decoding}
+          height={height}
+          loading={loading}
+          referrerPolicy={referrerPolicy}
+          sizes={sizes}
+          src={src}
+          srcSet={srcSet}
+          useMap={useMap}
+          width={width}
+          ref={getRef}
+          onError={onImageError}
+          onLoad={onImageLoad}
+          vkuiClass="Avatar__img"
+          alt=""
+        />
+      )}
+      {children && <div vkuiClass="Avatar__children">{children}</div>}
+      {overlayIcon && (
+        <Tappable
+          Component="button"
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
+          vkuiClass={classNames("Avatar__overlay", {
+            "Avatar__overlay--visible": overlayAction === "always",
+            "Avatar__overlay--light": overlayMode === "light",
+            "Avatar__overlay--dark": overlayMode === "dark",
+          })}
+          hoverMode="Avatar__overlay--visible"
+          focusVisibleMode="Avatar__overlay--focus-visible"
+          hasActive={false}
+          onClick={onClick}
+        >
+          {overlayIcon}
+        </Tappable>
+      )}
+      {badge && (
+        <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
+          vkuiClass={classNames("Avatar__badge", {
+            "Avatar__badge--large": size >= 96,
+            "Avatar__badge--shadow":
+              badge !== "online" && badge !== "online-mobile",
+          })}
+        >
+          {badge === "online" ? (
+            <div vkuiClass="Avatar__badge-online">
+              <Icon12Circle
+                width={size >= 72 ? 15 : 12}
+                height={size >= 72 ? 15 : 12}
+              />
+            </div>
+          ) : badge === "online-mobile" ? (
+            <div vkuiClass="Avatar__badge-online-mobile">
+              <Icon12OnlineMobile
+                width={size >= 72 ? 9 : 8}
+                height={size >= 72 ? 15 : 12}
+              />
+            </div>
+          ) : (
+            badge
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Avatar;