@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/InputLike/InputLike.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { callMultiple } from "../../lib/callMultiple";
+import { stopPropagation } from "../../lib/utils";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import "./InputLike.css";
+
+export interface InputLikeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    HasRootRef<HTMLSpanElement> {
+  length: number;
+  index: number;
+  value?: string;
+  onElementSelect?(index: number): void;
+}
+
+const MASK_SYMBOL = String.fromCharCode(0x2007);
+
+function getMaskElements(length: number) {
+  const result = [];
+  for (let index = 0; index < length; index += 1) {
+    result.push(
+      <span key={index} vkuiClass="InputLike__mask">
+        {MASK_SYMBOL}
+      </span>
+    );
+  }
+  return result;
+}
+
+export const InputLike: React.FC<InputLikeProps> = ({
+  value,
+  length,
+  index,
+  onElementSelect,
+  onClick,
+  onFocus,
+  getRootRef,
+  ...props
+}) => {
+  const handleElementSelect = React.useCallback(
+    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      stopPropagation(event);
+      onElementSelect?.(index);
+    },
+    [index, onElementSelect]
+  );
+
+  return (
+    <span
+      vkuiClass={classNames(
+        "InputLike",
+        value?.length === length && `InputLike--full`
+      )}
+      tabIndex={0}
+      ref={getRootRef}
+      onClick={callMultiple(onClick, handleElementSelect)}
+      onFocus={callMultiple(stopPropagation, onFocus)}
+      {...props}
+    >
+      {value?.slice(0, length - 1)}
+      {value?.slice(length - 1) && (
+        <span key={index} vkuiClass="InputLike__last_character">
+          {value.slice(length - 1)}
+        </span>
+      )}
+      {getMaskElements(length - (value?.length ?? 0))}
+    </span>
+  );
+};
+
+InputLike.displayName = "InputLike";

package/src/components/InputLike/InputLikeDivider.css

@@ -0,0 +1,4 @@
+.InputLikeDivider {
+  color: var(--vkui--color_text_secondary);
+  letter-spacing: 1px;
+}

package/src/components/InputLike/InputLikeDivider.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import "./InputLikeDivider.css";
+
+export const InputLikeDivider: React.FC<
+  React.InputHTMLAttributes<HTMLSpanElement>
+> = ({ children, ...props }) => {
+  return (
+    <span vkuiClass="InputLikeDivider" {...props}>
+      {children}
+    </span>
+  );
+};

package/src/components/Link/Link.css

@@ -0,0 +1,18 @@
+.Link {
+  color: var(--accent);
+  text-decoration: none;
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  font-size: inherit;
+  display: inline;
+  border-radius: 0;
+}
+
+.Link .Icon {
+  margin-left: 4px;
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/components/Link/Link.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import "./Link.css";
+
+export type LinkProps = TappableProps;
+
+const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
+  const platform = usePlatform();
+
+  return (
+    <Tappable
+      Component={restProps.href ? "a" : "button"}
+      {...restProps}
+      vkuiClass={getClassName("Link", platform)}
+      hasActive={false}
+      hoverMode="opacity"
+      focusVisibleMode="outside"
+    >
+      {children}
+    </Tappable>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Link;

package/src/components/Link/Readme.md

@@ -0,0 +1,8 @@
+Надстройка над `<a />`. Компонент принимает все валидные для этого элемента свойства.
+
+```jsx static
+import { Link } from '@vkontakte/vkui';
+
+<Link href="https://google.com" target="_blank">Google</Link>
+<Link href="/profile">Profile</Link>
+```

package/src/components/List/List.css

@@ -0,0 +1,2 @@
+.List {
+}

package/src/components/List/List.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { ListContext } from "./ListContext";
+import "./List.css";
+
+const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  ...restProps
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const platform = usePlatform();
+  const [isDragging, toggleDrag] = React.useState(false);
+
+  return (
+    <div
+      role="list"
+      {...restProps}
+      vkuiClass={classNames(getClassName("List", platform), {
+        "List--dragging": isDragging,
+      })}
+    >
+      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>
+        {children}
+      </ListContext.Provider>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default List;

package/src/components/List/ListContext.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { noop } from "../../lib/utils";
+
+export const ListContext = React.createContext({
+  toggleDrag: noop as (value: boolean) => void,
+});

package/src/components/List/Readme.md

@@ -0,0 +1,22 @@
+Контейнер для однородных [Cell](#!/Cell).
+
+```jsx
+<View activePanel="list">
+  <Panel id="list">
+    <PanelHeader>List</PanelHeader>
+    <Group>
+      <List>
+        <Cell expandable before={<Icon28UserOutline />}>
+          Учетная запись
+        </Cell>
+        <Cell expandable before={<Icon28SettingsOutline />}>
+          Основные
+        </Cell>
+        <Cell expandable before={<Icon28PrivacyOutline />}>
+          Приватность
+        </Cell>
+      </List>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/LocaleProviderContext/LocaleProviderContext.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export const LocaleProviderContext = React.createContext<string | undefined>(
+  undefined
+);

package/src/components/MiniInfoCell/MiniInfoCell.css

@@ -0,0 +1,67 @@
+.MiniInfoCell {
+  display: flex;
+  padding: 6px 12px;
+}
+
+.MiniInfoCell--lvl-primary {
+  color: var(--text_primary);
+}
+
+.MiniInfoCell--lvl-secondary {
+  color: var(--text_subhead);
+}
+
+.MiniInfoCell__icon {
+  margin-right: 12px;
+  color: var(--icon_outline_secondary);
+}
+
+.MiniInfoCell__content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.MiniInfoCell--wr-short .MiniInfoCell__content {
+  white-space: initial;
+  display: -webkit-box;
+  max-height: 60px;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.MiniInfoCell--wr-full .MiniInfoCell__content {
+  overflow: inherit;
+  white-space: initial;
+}
+
+.MiniInfoCell__after {
+  margin-left: 12px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.MiniInfoCell--md-add,
+.MiniInfoCell--md-add .MiniInfoCell__icon {
+  color: var(--accent);
+}
+
+.MiniInfoCell--md-more,
+.MiniInfoCell--md-more .MiniInfoCell__icon {
+  color: var(--link_alternate);
+}
+
+.MiniInfoCell--md-more {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/**
+ * ANDROID
+ */
+.MiniInfoCell--android {
+  padding-left: 16px;
+  padding-right: 16px;
+}

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Text from "../Typography/Text/Text";
+import Tappable from "../../components/Tappable/Tappable";
+import { hasReactNode } from "../../lib/utils";
+import "./MiniInfoCell.css";
+
+export interface MiniInfoCellProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Иконка слева.<br />
+   * Рекомендуется использовать иконки размера 20.
+   */
+  before: React.ReactNode;
+
+  /**
+   * Содержимое справа.<br />
+   * `<UsersStack size="s" />` или `<Avatar size={24} />`
+   */
+  after?: React.ReactNode;
+
+  /**
+   * Тип ячейки:
+   *
+   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />
+   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.
+   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
+   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
+   */
+  mode?: "base" | "add" | "more";
+
+  /**
+   * Тип отображения текста:
+   *
+   * - `nowrap` – в одну строку, текст не переносится и обрезается.
+   * - `short` – максимально отображается 3 строки, остальное обрезается.
+   * - `full` – текст отображается полностью.
+   */
+  textWrap?: "nowrap" | "short" | "full";
+
+  /**
+   * Стиль текста:
+   *
+   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества
+   * - `secondary` – стиль по-умолчанию.
+   */
+  textLevel?: "primary" | "secondary";
+}
+
+export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
+  props: MiniInfoCellProps
+) => {
+  const platform = usePlatform();
+  const { before, after, mode, textWrap, textLevel, children, ...restProps } =
+    props;
+
+  const isClickable = !!restProps.onClick;
+
+  return (
+    <Tappable
+      Component="div"
+      disabled={!isClickable}
+      role={isClickable ? "button" : undefined}
+      {...restProps}
+      vkuiClass={classNames(
+        getClassName("MiniInfoCell", platform),
+        {
+          [`MiniInfoCell--md-${mode}`]: mode !== "base",
+          [`MiniInfoCell--wr-${textWrap}`]: textWrap !== "nowrap",
+        },
+        `MiniInfoCell--lvl-${textLevel}`
+      )}
+    >
+      <span vkuiClass="MiniInfoCell__icon">{before}</span>
+      <Text
+        vkuiClass="MiniInfoCell__content"
+        weight={mode === "more" ? "medium" : "regular"}
+      >
+        {children}
+      </Text>
+      {hasReactNode(after) && (
+        <span vkuiClass="MiniInfoCell__after">{after}</span>
+      )}
+    </Tappable>
+  );
+};
+
+MiniInfoCell.defaultProps = {
+  mode: "base",
+  textWrap: "nowrap",
+  textLevel: "secondary",
+};

package/src/components/MiniInfoCell/Readme.md

@@ -0,0 +1,150 @@
+```jsx { "props": { "layout": false, "adaptivity": true } }
+function MiniInfoCellExample() {
+  const platform = usePlatform();
+  const [activeModal, setActiveModal] = React.useState(null);
+
+  const handleExtendedInfoClick = () => {
+    setActiveModal("extended_info");
+  };
+
+  const closeModal = () => {
+    setActiveModal(null);
+  };
+
+  const modal = (
+    <ModalRoot activeModal={activeModal} onClose={closeModal}>
+      <ModalPage
+        header={
+          <ModalPageHeader
+            left={
+              (platform === ANDROID || platform === VKCOM) && (
+                <PanelHeaderButton onClick={closeModal}>
+                  <Icon24Cancel />
+                </PanelHeaderButton>
+              )
+            }
+            right={
+              platform === IOS && (
+                <PanelHeaderButton onClick={closeModal}>
+                  <Icon24Dismiss />
+                </PanelHeaderButton>
+              )
+            }
+            noShadow
+          >
+            Подробнее
+          </ModalPageHeader>
+        }
+        id="extended_info"
+      >
+        <Separator style={{ marginBottom: 12 }} />
+
+        <MiniInfoCell
+          before={<Icon20CommunityName />}
+          textWrap="full"
+          textLevel="primary"
+        >
+          Команда вконтакте
+        </MiniInfoCell>
+
+        <MiniInfoCell
+          before={<Icon20MessageOutline />}
+          textWrap="full"
+          textLevel="primary"
+        >
+          Официальная страница Команды ВКонтакте.
+        </MiniInfoCell>
+
+        <MiniInfoCell
+          before={<Icon20ArticleOutline />}
+          textWrap="full"
+          textLevel="primary"
+        >
+          ВКонтакте начинался как сайт для выпускников вузов, а сейчас это
+          огромная экосистема с безграничными возможностями и миллионами
+          пользователей.
+        </MiniInfoCell>
+
+        <Separator style={{ marginTop: 12, marginBottom: 12 }} />
+
+        <MiniInfoCell before={<Icon20PlaceOutline />}>
+          Санкт-Петербург, Россия
+        </MiniInfoCell>
+
+        <MiniInfoCell before={<Icon20MentionOutline />}>team</MiniInfoCell>
+
+        <div style={{ height: 24 }} />
+      </ModalPage>
+    </ModalRoot>
+  );
+
+  return (
+    <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>
+  );
+}
+
+<MiniInfoCellExample />;
+```

package/src/components/ModalCard/ModalCard.css

@@ -0,0 +1,77 @@
+.ModalCard {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  z-index: 1;
+}
+
+.ModalCard__in {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8px;
+  transform: translateY(100%);
+}
+
+.ModalCard__dismiss {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 48px;
+  height: 48px;
+  color: var(--placeholder_icon_foreground_primary);
+  justify-content: center;
+}
+
+/**
+ * iOS
+ */
+
+.ModalCard--ios .ModalCard__in {
+  transition: transform 340ms var(--ios-easing);
+  max-width: 414px;
+}
+
+/**
+ * Android + vkcom
+ */
+
+.ModalCard--android .ModalCard__in,
+.ModalCard--vkcom .ModalCard__in {
+  transition: transform 340ms var(--android-easing);
+}
+
+.ModalCard--android .ModalCard__in {
+  max-width: 440px;
+}
+
+.ModalCard--vkcom .ModalCard__in {
+  max-width: 400px;
+}
+
+/**
+ * Desktop
+ */
+
+.ModalCard--desktop {
+  align-items: center;
+}
+
+.ModalCard--desktop .ModalCard__in {
+  transform: unset;
+  opacity: 0;
+  transition: opacity 340ms var(--android-easing);
+}
+
+/**
+ * Common
+ */
+
+.ModalRoot--touched .ModalCard__in {
+  transition: none;
+}