VKUI
VKUI copied to clipboard
[Breaking changes][Feature] Создать `ImageBase` как основу для `Avatar` и `Image`
Что нужно сделать?
Следует вынести код 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"
}
- blocked by https://github.com/VKCOM/VKUI/issues/2507
- closed by #3124