VKUI icon indicating copy to clipboard operation
VKUI copied to clipboard

[Breaking changes][Feature] Создать `ImageBase` как основу для `Avatar` и `Image`

Open inomdzhon opened this issue 3 years ago • 1 comments

Что нужно сделать?

Следует вынести код Avatar в ImageBase и на его основе переделать Avatar и создать компонент Image.

Что стоит пересмотреть?

Размер badge также зависит от size, но только в случаях когда это "online" или "online-mobile".

Я бы поправил типы в badge на

interface ImageBase {
  BadgeComponent: React.ComponentType<{ className?: string; width?: number; height?: number }>;
}

чтобы пользователь не думал о том, какого размера badge нужно передать относительно size

API

⚠️ Пока накинул так же, как сейчас. Но стоит пересмотреть именование и типизацию некоторых параметров.

interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
  /**
   * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24
   *
   * ❓ (1)  Может лучше забетонировать через TS эти значения?
   */
  size?: number;
  /**
   * Добавляет окантовку.
   *❓ (2) В дизайне не нашёл.
   */
  shadow?: boolean;
  /**
   * Добавляет иконку под компонента.
   */
  badge?: JSX.Element;
  /**
   * Накладывает кнопку поверх компонента.
   */
  overlayIcon?: JSX.Element;
  /**
   * Цвет фона накладываемой кнопки.
   */
  overlayMode?: "dark" | "light";
  /**
   * Поведение показа overlay: "hover" - при наведении, "always" - всегда
   */
  overlayAction?: "hover" | "always";
  /**
   * Плейсхолдер на случай, если картинка не прогрузилась.
   * `string` – в виду строки нужно передать `url`
   * `JSX.Element` – иконка
   * 
   * 📝  (3) недостающий сейчас параметр
   */
   placeholder?: string | JSX.Element;  
}
interface Avatar extends Omit<ImageBaseProps, "badge"> {
  /**
   *❓ (4)  Может пусть пользователь сам определяет эти иконки?
   */
  badge?: "online" | "online-mobile" | JSX.Element;
}

Попробовать отказаться от "online-mobile"

interface Image extends ImageBaseProps {
  borderRadius: "small" | "medium" | "large"
}

inomdzhon avatar Apr 06 '22 07:04 inomdzhon

  • blocked by https://github.com/VKCOM/VKUI/issues/2507

inomdzhon avatar May 24 '22 08:05 inomdzhon

  • closed by #3124

inomdzhon avatar Sep 06 '22 08:09 inomdzhon