@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import {
-  Icon28ChevronBack,
-  Icon28ChevronLeftOutline,
-  Icon28ArrowLeftOutline,
-} from "@vkontakte/icons";
-import {
-  PanelHeaderButton,
-  PanelHeaderButtonProps,
-} from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, VKCOM, IOS } from "../../lib/platform";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  withAdaptivity,
-  SizeType,
-  AdaptivityProps,
-} from "../../hoc/withAdaptivity";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import "./PanelHeaderBack.css";
-
-export type PanelHeaderBackProps = PanelHeaderButtonProps &
-  AdaptivityProps & {
-    "aria-label"?: string;
-  };
-
-const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
-  label,
-  sizeX,
-  ...restProps
-}: PanelHeaderButtonProps & AdaptivityProps) => {
-  const platform = usePlatform();
-  const showLabel =
-    platform === VKCOM || (platform === IOS && sizeX === SizeType.REGULAR);
-
-  return (
-    <PanelHeaderButton
-      {...restProps}
-      vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
-        "PanelHeaderBack--has-label": showLabel && !!label,
-      })}
-      label={showLabel && label}
-    >
-      {platform === ANDROID && <Icon28ArrowLeftOutline />}
-      {platform === VKCOM && <Icon28ChevronLeftOutline />}
-      {platform === IOS && <Icon28ChevronBack />}
-    </PanelHeaderButton>
-  );
-};
-
-PanelHeaderBack.defaultProps = {
-  "aria-label": "Назад",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(
-  withAdaptivity(PanelHeaderBack, {
-    sizeX: true,
-  })
-);

package/src/components/PanelHeaderBack/Readme.md

@@ -1,9 +0,0 @@
-Этот компонент используется для показа кнопки назад в панелях в рамках одного `View`. Внутри инкапсулирована логика показа нужной иконки для платформы.
-
-```jsx static
-import { PanelHeaderBack } from "@vkontakte/vkui";
-
-<PanelHeader left={<PanelHeaderBack onClick={this.props.onBackClick} />}>
-  Заголовок панели
-</PanelHeader>;
-```

package/src/components/PanelHeaderButton/PanelHeaderButton.css

@@ -1,102 +0,0 @@
-.PanelHeaderButton {
-  appearance: none;
-  background: none;
-  border: none;
-  box-shadow: none;
-  display: block;
-  color: currentColor;
-  padding: 0;
-  margin: 0;
-  position: relative;
-}
-
-.PanelHeaderButton[disabled] {
-  opacity: 0.6;
-}
-
-.PanelHeaderButton .Counter {
-  position: absolute;
-  padding: 0;
-  top: 8px;
-  right: 2px;
-}
-
-/*
- * iOS
- */
-
-.PanelHeaderButton--ios {
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-size: 17px;
-}
-
-.PanelHeaderButton--ios.PanelHeaderButton--primitive {
-  height: 44px;
-  line-height: 44px;
-  padding: 0 12px;
-}
-
-.PanelHeaderButton--ios .Icon--24 {
-  padding: 10px;
-}
-
-.PanelHeaderButton--ios .Icon--28 {
-  padding: 8px;
-}
-
-/*
- * Android
- */
-
-.PanelHeaderButton--android {
-  border-radius: 50%;
-}
-
-.PanelHeaderButton--android.PanelHeaderButton--primitive {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 12px;
-}
-
-.PanelHeaderButton--android .Icon--24 {
-  padding: 12px;
-}
-
-.PanelHeaderButton--android .Icon--28 {
-  padding: 10px;
-}
-
-/**
-* VKCOM
-*/
-.PanelHeaderButton--vkcom {
-  color: var(--header_text_secondary);
-}
-
-.PanelHeaderButton--vkcom > :not(.Counter) {
-  transition: opacity 0.3s;
-  opacity: 0.7;
-}
-
-.PanelHeaderButton--vkcom.PanelHeaderButton--hover > :not(.Counter),
-.PanelHeaderButton--vkcom.PanelHeaderButton--active > :not(.Counter) {
-  opacity: 1;
-}
-
-.PanelHeaderButton--vkcom {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-}
-
-.PanelHeaderButton--vkcom.PanelHeaderButton--primitive {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 10px;
-}
-
-.PanelHeaderButton--vkcom.PanelHeaderButton--notPrimitive {
-  border-radius: 50%;
-}

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -1,109 +0,0 @@
-import * as React from "react";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { warnOnce } from "../../lib/warnOnce";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
-import { IOS, VKCOM, ANDROID } from "../../lib/platform";
-import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
-import "./PanelHeaderButton.css";
-
-export interface PanelHeaderButtonProps extends Omit<TappableProps, "label"> {
-  primary?: boolean;
-  label?: React.ReactNode;
-}
-
-interface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {
-  primary?: PanelHeaderButtonProps["primary"];
-}
-
-const ButtonTypography: React.FC<ButtonTypographyProps> = ({
-  primary,
-  children,
-}: ButtonTypographyProps) => {
-  const platform = usePlatform();
-
-  if (platform === IOS) {
-    return (
-      <Title Component="span" level="3" weight={primary ? "1" : "3"}>
-        {children}
-      </Title>
-    );
-  }
-
-  return (
-    <Text weight={platform === VKCOM ? "regular" : "medium"}>{children}</Text>
-  );
-};
-
-const warn = warnOnce("PanelHeaderButton");
-export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
-  children,
-  primary = false,
-  label,
-  ...restProps
-}: PanelHeaderButtonProps) => {
-  const isPrimitive = isPrimitiveReactNode(children);
-  const isPrimitiveLabel = isPrimitiveReactNode(label);
-  const platform = usePlatform();
-
-  let hoverMode;
-  let activeMode;
-
-  switch (platform) {
-    case ANDROID:
-      hoverMode = "background";
-      activeMode = "background";
-      break;
-    case IOS:
-      hoverMode = "background";
-      activeMode = "opacity";
-      break;
-    case VKCOM:
-      hoverMode = "PanelHeaderButton--hover";
-      activeMode = "PanelHeaderButton--active";
-  }
-
-  if (process.env.NODE_ENV === "development") {
-    const hasAccessibleName = Boolean(
-      getTitleFromChildren(children) ||
-        getTitleFromChildren(label) ||
-        restProps["aria-label"] ||
-        restProps["aria-labelledby"]
-    );
-
-    if (!hasAccessibleName) {
-      warn(
-        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label."
-      );
-    }
-  }
-
-  return (
-    <Tappable
-      {...restProps}
-      hoverMode={hoverMode}
-      Component={restProps.href ? "a" : "button"}
-      activeEffectDelay={200}
-      activeMode={activeMode}
-      vkuiClass={classNames(getClassName("PanelHeaderButton", platform), {
-        "PanelHeaderButton--primary": primary,
-        "PanelHeaderButton--primitive": isPrimitive,
-        "PanelHeaderButton--notPrimitive": !isPrimitive && !isPrimitiveLabel,
-      })}
-    >
-      {isPrimitive ? (
-        <ButtonTypography primary={primary}>{children}</ButtonTypography>
-      ) : (
-        children
-      )}
-      {isPrimitiveLabel ? (
-        <ButtonTypography primary={primary}>{label}</ButtonTypography>
-      ) : (
-        label
-      )}
-    </Tappable>
-  );
-};

package/src/components/PanelHeaderButton/Readme.md

@@ -1,47 +0,0 @@
-Компонент для отрисовки кнопок в шапке панели. Внутрь компонента передается либо [иконка](https://vkcom.github.io/icons/),
-либо текст. Текстовые кнопки чаще всего используются в iOS, но есть исключения для Android.
-
-Кнопки могут быть переданы в `left` или `right` компонента `PanelHeader`:
-
-```jsx static
-import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";
-import { Icon28Notifications, Icon28SettingsOutline } from "@vkontakte/icons";
-
-<PanelHeader
-  left={
-    <PanelHeaderButton>
-      <Icon28Notifications />
-    </PanelHeaderButton>
-  }
-  right={
-    <PanelHeaderButton>
-      <Icon28SettingsOutline />
-    </PanelHeaderButton>
-  }
-/>;
-```
-
-Если нужно несколько кнопок справа или слева, то используем `React.Fragment`:
-
-```jsx static
-import { PanelHeader, PanelHeaderButton } from "@vkontakte/vkui";
-import { Icon28SettingsOutline, Icon28Notifications } from "@vkontakte/icons";
-
-<PanelHeader
-  right={
-    <React.Fragment>
-      <PanelHeaderButton>
-        <Icon28SettingsOutline />
-      </PanelHeaderButton>
-      <PanelHeaderButton>
-        <Icon28Notifications />
-      </PanelHeaderButton>
-    </React.Fragment>
-  }
-/>;
-```
-
-**VK Mini Apps**
-
-Если вы разрабатываете приложение на платформе [VK Mini Apps](https://vk.com/vkappsdev), то вам будут недоступны
-кнопки справа, так как на их месте отображаются нативные кнопки для управления приложением.

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { Icon28CancelOutline } from "@vkontakte/icons";
-import {
-  PanelHeaderButton,
-  PanelHeaderButtonProps,
-} from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, VKCOM } from "../../lib/platform";
-import { getTitleFromChildren } from "../../lib/utils";
-import { usePlatform } from "../../hooks/usePlatform";
-
-const PanelHeaderClose: React.FunctionComponent<PanelHeaderButtonProps> = ({
-  children,
-  ...restProps
-}: PanelHeaderButtonProps) => {
-  const platform = usePlatform();
-  return (
-    <PanelHeaderButton
-      aria-label={getTitleFromChildren(children)}
-      {...restProps}
-    >
-      {platform === ANDROID || platform === VKCOM ? (
-        <Icon28CancelOutline />
-      ) : (
-        children
-      )}
-    </PanelHeaderButton>
-  );
-};
-
-PanelHeaderClose.defaultProps = {
-  children: "Отмена",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderClose;

package/src/components/PanelHeaderClose/Readme.md

@@ -1,9 +0,0 @@
-Этот компонент используется для показа кнопки "Отмена" в модальных окнах для закрытия текущего `View` в рамках `Root`. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28CancelOutline />`:
-
-```jsx static
-import { PanelHeaderClose } from "@vkontakte/vkui";
-
-<PanelHeader left={<PanelHeaderClose onClick={this.props.onCloseClick} />}>
-  Заголовок модального окна
-</PanelHeader>;
-```

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -1,107 +0,0 @@
-.PanelHeaderContent {
-  line-height: initial;
-  height: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  font-family: var(--font-common);
-}
-
-.PanelHeaderContent__before {
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.PanelHeaderContent__in {
-  flex-grow: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  height: 100%;
-}
-
-.PanelHeaderContent__status,
-.PanelHeaderContent__children-in,
-.PanelHeaderContent__children .Headline {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.PanelHeaderContent__status {
-  order: 1;
-  margin-top: 1px;
-  max-width: 100%;
-  color: var(--header_text_secondary);
-}
-
-.PanelHeaderContent__children {
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.PanelHeaderContent__children-in {
-  flex-grow: 0;
-  min-width: 0;
-}
-
-.PanelHeaderContent__aside {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-left: 2px;
-  color: var(--header_tint);
-}
-
-.PanelHeaderContent__width {
-  width: 1000px;
-}
-
-/**
- * iOS
- */
-
-.PanelHeaderContent--ios .PanelHeaderContent__before ~ .PanelHeaderContent__in {
-  align-items: flex-start;
-}
-
-.PanelHeaderContent--ios .PanelHeaderContent__in {
-  align-items: center;
-}
-
-.PanelHeaderContent--ios .PanelHeaderContent__children-in {
-  font-size: 21px;
-  font-family: var(--font-display);
-  font-weight: 500;
-  line-height: var(--panelheader_height_ios);
-}
-
-/**
- * Android
- */
-
-.PanelHeaderContent--android .PanelHeaderContent__children-in {
-  font-size: 23px;
-  font-family: var(--font-display);
-  font-weight: 500;
-  line-height: var(--panelheader_height_android);
-}
-
-/**
- * VKCOM
- */
-
-.PanelHeaderContent--vkcom
-  .PanelHeaderContent__before
-  ~ .PanelHeaderContent__in {
-  align-items: flex-start;
-}
-
-.PanelHeaderContent--vkcom .PanelHeaderContent__in {
-  align-items: center;
-}

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -1,111 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import Tappable from "../Tappable/Tappable";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
-import Headline from "../Typography/Headline/Headline";
-import { IOS, Platform } from "../../lib/platform";
-import Text from "../Typography/Text/Text";
-import { HasPlatform } from "../../types";
-import "./PanelHeaderContent.css";
-
-export interface PanelHeaderContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  aside?: React.ReactNode;
-  before?: React.ReactNode;
-  status?: React.ReactNode;
-}
-
-interface PanelHeaderChildrenProps extends HasPlatform {
-  hasStatus: boolean;
-  hasBefore: boolean;
-}
-
-const PanelHeaderChildren: React.FC<PanelHeaderChildrenProps> = ({
-  platform,
-  hasStatus,
-  hasBefore,
-  children,
-}) => {
-  if (platform === Platform.VKCOM) {
-    return (
-      <Text Component="div" weight="medium">
-        {children}
-      </Text>
-    );
-  }
-
-  return hasStatus || hasBefore ? (
-    <Headline Component="div" weight="medium">
-      {children}
-    </Headline>
-  ) : (
-    <div vkuiClass="PanelHeaderContent__children-in">{children}</div>
-  );
-};
-
-const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
-  className,
-  style,
-  aside,
-  status,
-  before,
-  children,
-  onClick,
-  ...restProps
-}: PanelHeaderContentProps) => {
-  const InComponent = onClick ? Tappable : "div";
-  const rootProps = onClick ? {} : restProps;
-  const platform = usePlatform();
-  const inProps = onClick
-    ? {
-        ...restProps,
-        onClick,
-        activeEffectDelay: 200,
-        hasActive: platform === IOS,
-        activeMode: "opacity",
-      }
-    : {};
-  const baseClassNames = getClassName("PanelHeaderContent", platform);
-
-  return (
-    <div
-      {...rootProps}
-      vkuiClass={baseClassNames}
-      style={style}
-      className={className}
-    >
-      {hasReactNode(before) && (
-        <div vkuiClass="PanelHeaderContent__before">{before}</div>
-      )}
-      <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
-        {hasReactNode(status) && (
-          <Caption
-            level="1"
-            weight="regular"
-            vkuiClass="PanelHeaderContent__status"
-          >
-            {status}
-          </Caption>
-        )}
-        <div vkuiClass="PanelHeaderContent__children">
-          <PanelHeaderChildren
-            platform={platform}
-            hasStatus={hasReactNode(status)}
-            hasBefore={hasReactNode(before)}
-          >
-            {children}
-          </PanelHeaderChildren>
-          {hasReactNode(aside) && (
-            <div vkuiClass="PanelHeaderContent__aside">{aside}</div>
-          )}
-        </div>
-        {hasReactNode(before) && <div vkuiClass="PanelHeaderContent__width" />}
-      </InComponent>
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderContent;

package/src/components/PanelHeaderContent/Readme.md

@@ -1,33 +0,0 @@
-Компонент для отрисовки "сложного" содержимого шапки.
-
-```jsx
-const Example = () => {
-  const platform = usePlatform();
-  return (
-    <View activePanel="brand">
-      <Panel id="brand">
-        <PanelHeader
-          left={<PanelHeaderBack label="Назад" />}
-          right={
-            <PanelHeaderButton>
-              <Icon28MessageOutline
-                width={platform === VKCOM ? 24 : 28}
-                height={platform === VKCOM ? 24 : 28}
-              />
-            </PanelHeaderButton>
-          }
-        >
-          <PanelHeaderContent
-            status="был в сети сегодня, в 18:46"
-            before={<Avatar size={36} src={getAvatarUrl("user_va")} />}
-          >
-            Влад Анесов
-          </PanelHeaderContent>
-        </PanelHeader>
-      </Panel>
-    </View>
-  );
-};
-
-<Example />;
-```