feat(AvatarBadge): fix rtl view

VKCOM · Dec 20, 2024 · c93cf62 · c93cf62
1 parent 446b1cd
commit c93cf62
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadge.module.css b/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadge.module.css
@@ -16,6 +16,11 @@
   transform: translate(50%, 50%);
 }
 
+.rtl.presetOnline,
+.rtl.presetOnlineMobile {
+  transform: translate(-50%, 50%);
+}
+
 /**
  * Перебиваем свойства `ImageBaseBadge` для этих кейсов
  */

diff --git a/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx b/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx
@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useDirection } from '../../../hooks/useDirection';
+import { useExternRef } from '../../../hooks/useExternRef';
 import {
   getBadgeIconSizeByImageBaseSize,
   ImageBase,
@@ -24,8 +26,12 @@ export interface AvatarBadgeWithPresetProps
 export const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({
   preset = 'online',
   className,
+  getRootRef,
   ...restProps
 }: AvatarBadgeWithPresetProps) => {
+  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();
+  const isRtl = textDirection === 'rtl';
+  const rootRef = useExternRef(getRootRef, directionRef);
   const { size } = React.useContext(ImageBaseContext);
   const badgeSize = getBadgeIconSizeByImageBaseSize(size);
   const isOnlinePreset = preset === 'online';
@@ -35,7 +41,8 @@ export const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({
   return (
     <ImageBase.Badge
       background="stroke"
-      className={classNames(styles.host, presetClassName, className)}
+      className={classNames(styles.host, isRtl && styles.rtl, presetClassName, className)}
+      getRootRef={rootRef}
       {...restProps}
     >
       <Icon width={badgeSize} height={badgeSize} />