@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { classNames } from '../../lib/classNames';
+import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
+import './InitialsAvatar.css';
+
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;
+export type InitialsAvatarTextGradients =
+  | 'red'
+  | 'pink'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'l-blue'
+  | 'blue'
+  | 'violet';
+
+export interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`
+   *
+   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+   *
+   * 1: 'red'
+   *
+   * 2: 'orange'
+   *
+   * 3: 'yellow'
+   *
+   * 4: 'green'
+   *
+   * 5: 'l-blue'
+   *
+   * 6: 'violet'
+   */
+  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;
+  size?: number;
+  shadow?: boolean;
+}
+
+const COLORS_NUMBER_TO_TEXT_MAP: Record<InitialsAvatarNumberGradients, InitialsAvatarTextGradients> = {
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet',
+};
+
+function getInitialsFontSize(avatarSize: number) {
+  const calculatedFontSize = Math.ceil(avatarSize * 0.36);
+  const evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}
+
+export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  children,
+  gradientColor,
+  style,
+  ...restProps
+}: InitialsAvatarProps) => {
+  const gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+
+  return (
+    <Avatar
+      {...restProps}
+      style={{
+        ...style,
+        fontSize: getInitialsFontSize(size),
+      }}
+      shadow={shadow}
+      size={size}
+      vkuiClass={classNames(
+        'InitialsAvatar',
+        `InitialsAvatar--color-${gradientName}`,
+      )}
+    >
+      <span aria-hidden="true" vkuiClass="InitialsAvatar__text">
+        {children}
+      </span>
+    </Avatar>
+  );
+};

package/src/components/InitialsAvatar/Readme.md

@@ -0,0 +1,14 @@
+Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения). 
+Для лучшего отображения, рекомендуется использовать длину текста <b>не более 2 символов</b>.<br />
+ВКонтакте использует формулу `user_id % 6 + 1` для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+  {[16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96].map((size) => {
+    const user = getRandomUser();
+    return (
+      <InitialsAvatar size={size} gradientColor={user.id % 6 + 1}>{user.initials}</InitialsAvatar>
+    )
+  })}
+</div>
+```

package/src/components/Link/Link.tsx

@@ -4,7 +4,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import Tappable, { TappableProps } from '../Tappable/Tappable';
 import './Link.css';
 
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLElement>, TappableProps {}
+export type LinkProps = TappableProps;
 
 const Link: React.FC<LinkProps> = ({
   children,

package/src/components/MiniInfoCell/Readme.md

@@ -1,4 +1,4 @@
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 function MiniInfoCellExample() {
   const platform = usePlatform();
   const [activeModal, setActiveModal] = React.useState(null);
@@ -72,67 +72,71 @@ function MiniInfoCellExample() {
   );
 
   return (
-    <View activePanel="information_cell" modal={modal}>
-      <Panel id="information_cell">
-        <PanelHeader>
-          Ячейка информации
-        </PanelHeader>
-    
-        <Group>
-          <MiniInfoCell
-            before={<Icon20ArticleOutline />}
-            textWrap="short"
-          >
-            ВКонтакте начинался как сайт для выпускников вузов, а сейчас это огромная экосистема с безграничными возможностями и миллионами пользователей.
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20FollowersOutline />}
-            after={
-              <UsersStack
-                photos={[
-                  getAvatarUrl('user_mm'),
-                  getAvatarUrl('user_arthurstam'),
-                  getAvatarUrl('user_xyz'),
-                ]}
-              />
-            }
-          >
-            514,7K подписчиков · 77 друзей
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20GlobeOutline />}
-          >
-            <Link href="https://vk.com/team">vk.com/team</Link>
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20WorkOutline />}
-            after={<Avatar size={24} src="https://sun9-29.userapi.com/c623616/v623616034/1c184/MnbEYczHxSY.jpg?ava=1" />}
-          >
-            Место работы: Команда ВКонтакте
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20WorkOutline />}
-            mode="add"
-            onClick={() => console.log('Указать место учёбы')}
-          >
-            Укажите место учёбы
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20Info />}
-            mode="more"
-            onClick={handleExtendedInfoClick}
-          >
-            Подробная информация
-          </MiniInfoCell>
-    
-        </Group>
-      </Panel>
-    </View>
+    <SplitLayout modal={modal}>
+      <SplitCol>
+      <View activePanel="information_cell">
+        <Panel id="information_cell">
+          <PanelHeader>
+            Ячейка информации
+          </PanelHeader>
+      
+          <Group>
+            <MiniInfoCell
+              before={<Icon20ArticleOutline />}
+              textWrap="short"
+            >
+              ВКонтакте начинался как сайт для выпускников вузов, а сейчас это огромная экосистема с безграничными возможностями и миллионами пользователей.
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20FollowersOutline />}
+              after={
+                <UsersStack
+                  photos={[
+                    getAvatarUrl('user_mm'),
+                    getAvatarUrl('user_arthurstam'),
+                    getAvatarUrl('user_xyz'),
+                  ]}
+                />
+              }
+            >
+              514,7K подписчиков · 77 друзей
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20GlobeOutline />}
+            >
+              <Link href="https://vk.com/team">vk.com/team</Link>
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20WorkOutline />}
+              after={<Avatar size={24} src="https://sun9-29.userapi.com/c623616/v623616034/1c184/MnbEYczHxSY.jpg?ava=1" />}
+            >
+              Место работы: Команда ВКонтакте
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20WorkOutline />}
+              mode="add"
+              onClick={() => console.log('Указать место учёбы')}
+            >
+              Укажите место учёбы
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20Info />}
+              mode="more"
+              onClick={handleExtendedInfoClick}
+            >
+              Подробная информация
+            </MiniInfoCell>
+      
+          </Group>
+        </Panel>
+      </View>
+      </SplitCol>
+    </SplitLayout>
   );
 }
 

package/src/components/ModalDismissButton/Readme.md

@@ -1,8 +1,7 @@
 Кнопка для закрытия модальных окон на широком экране.
 Для правильной отрисовки нужно расположить в контейнере с `position: "relative"` и отображать при достаточной ширине экрана (от `ViewWidth.SMALL_TABLET`)
 
-```jsx
-
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const CustomPopout = withAdaptivity(({ onClose, viewWidth }) => {
   return (
     <PopoutWrapper onClick={onClose}>
@@ -29,14 +28,18 @@ const Example = () => {
   );
 
   return (
-    <View popout={popout} activePanel="popout">
-      <Panel id="popout">
-        <PanelHeader>ModalDismissButton</PanelHeader>
-        <Group>
-          <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
-        </Group>
-      </Panel>
-    </View>
+    <SplitLayout popout={popout}>
+      <SplitCol>
+      <View activePanel="popout">
+        <Panel id="popout">
+          <PanelHeader>ModalDismissButton</PanelHeader>
+          <Group>
+            <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
+          </Group>
+        </Panel>
+      </View>
+      </SplitCol>
+    </SplitLayout>
   );
 }