@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -1,188 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import Tappable from "../Tappable/Tappable";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode, noop } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
-import Title from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
-import { ANDROID, VKCOM } from "../../lib/platform";
-import { Icon16Done, Icon24Done } from "@vkontakte/icons";
-import {
-  ActionSheetContext,
-  ActionSheetContextType,
-} from "../ActionSheet/ActionSheetContext";
-import Caption from "../Typography/Caption/Caption";
-import Headline from "../Typography/Headline/Headline";
-import {
-  withAdaptivity,
-  AdaptivityProps,
-  SizeType,
-} from "../../hoc/withAdaptivity";
-import "./ActionSheetItem.css";
-
-export interface ActionSheetItemProps
-  extends React.HTMLAttributes<HTMLElement>,
-    React.AnchorHTMLAttributes<HTMLElement>,
-    Pick<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      "name" | "checked" | "value"
-    >,
-    AdaptivityProps {
-  mode?: "default" | "destructive" | "cancel";
-  before?: React.ReactNode;
-  meta?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  autoclose?: boolean;
-  selectable?: boolean;
-  disabled?: boolean;
-  /**
-   * Если autoclose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.
-   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
-   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.
-   */
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  onImmediateClick?: React.MouseEventHandler<HTMLElement>;
-}
-
-const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
-  children,
-  autoclose,
-  mode = "default",
-  meta,
-  subtitle,
-  before,
-  selectable,
-  value,
-  name,
-  checked,
-  defaultChecked,
-  onChange,
-  onClick,
-  sizeY,
-  onImmediateClick,
-  ...restProps
-}: ActionSheetItemProps) => {
-  const platform = usePlatform();
-  const { onItemClick = () => noop, isDesktop } =
-    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);
-
-  let Component: React.ElementType = restProps.href ? "a" : "div";
-
-  if (selectable) {
-    Component = "label";
-  }
-
-  const isCompact = hasReactNode(subtitle) || hasReactNode(meta) || selectable;
-
-  return (
-    <Tappable
-      {...restProps}
-      onClick={
-        selectable
-          ? onClick
-          : onItemClick(onClick, onImmediateClick, Boolean(autoclose))
-      }
-      activeMode="ActionSheetItem--active"
-      vkuiClass={classNames(
-        getClassName("ActionSheetItem", platform),
-        `ActionSheetItem--${mode}`,
-        `ActionSheetItem--sizeY-${sizeY}`,
-        {
-          "ActionSheetItem--compact": isCompact,
-          "ActionSheetItem--desktop": isDesktop,
-          "ActionSheetItem--withSubtitle": hasReactNode(subtitle),
-        }
-      )}
-      Component={Component}
-    >
-      {hasReactNode(before) && (
-        <div vkuiClass="ActionSheetItem__before">{before}</div>
-      )}
-      <div vkuiClass="ActionSheetItem__container">
-        <div vkuiClass="ActionSheetItem__content">
-          {sizeY === SizeType.COMPACT ? (
-            <React.Fragment>
-              <Text
-                weight={mode === "cancel" ? "medium" : "regular"}
-                vkuiClass="ActionSheetItem__children"
-              >
-                {children}
-              </Text>
-              {hasReactNode(meta) && (
-                <Text weight="regular" vkuiClass="ActionSheetItem__meta">
-                  {meta}
-                </Text>
-              )}
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              {platform === ANDROID ? (
-                <Headline weight={mode === "cancel" ? "medium" : "regular"}>
-                  {children}
-                </Headline>
-              ) : (
-                <Title
-                  weight={mode === "cancel" ? "2" : "3"}
-                  level={isCompact || hasReactNode(before) ? "3" : "2"}
-                  vkuiClass="ActionSheetItem__children"
-                >
-                  {children}
-                </Title>
-              )}
-              {hasReactNode(meta) &&
-                (platform === ANDROID ? (
-                  <Headline weight={mode === "cancel" ? "medium" : "regular"}>
-                    {children}
-                  </Headline>
-                ) : (
-                  <Title
-                    weight="3"
-                    level={isCompact || hasReactNode(before) ? "3" : "2"}
-                    vkuiClass="ActionSheetItem__meta"
-                  >
-                    {meta}
-                  </Title>
-                ))}
-            </React.Fragment>
-          )}
-        </div>
-        {hasReactNode(subtitle) &&
-          (sizeY === SizeType.COMPACT ? (
-            <Caption
-              weight="regular"
-              vkuiClass="ActionSheetItem__subtitle"
-              level="1"
-            >
-              {subtitle}
-            </Caption>
-          ) : (
-            <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
-          ))}
-      </div>
-      {selectable && (
-        <div vkuiClass="ActionSheetItem__after">
-          <input
-            type="radio"
-            vkuiClass="ActionSheetItem__radio"
-            name={name}
-            value={value}
-            onChange={onChange}
-            onClick={onItemClick(noop, noop, Boolean(autoclose))}
-            defaultChecked={defaultChecked}
-            checked={checked}
-            disabled={restProps.disabled}
-          />
-          <div vkuiClass="ActionSheetItem__marker">
-            {platform === VKCOM ? <Icon24Done /> : <Icon16Done />}
-          </div>
-        </div>
-      )}
-    </Tappable>
-  );
-};
-
-export const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {
-  sizeY: true,
-});

package/src/components/ActionSheetItem/Readme.md

@@ -1,2 +0,0 @@
-Элемент списка `ActionSheet`. Если в `ActionSheetItem` передать `autoclose={true}`, то `ActionSheet` сам вызовет
-переданный в него `onClose`.

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import { hasHover, hasMouse } from "@vkontakte/vkjs";
-
-export enum SizeType {
-  COMPACT = "compact",
-  REGULAR = "regular",
-}
-
-export enum ViewWidth {
-  SMALL_MOBILE = 1,
-  MOBILE,
-  SMALL_TABLET,
-  TABLET,
-  DESKTOP,
-}
-
-export enum ViewHeight {
-  EXTRA_SMALL = 1,
-  SMALL,
-  MEDIUM,
-}
-
-export interface SizeProps {
-  sizeX?: SizeType;
-  sizeY?: SizeType;
-}
-
-export interface AdaptivityProps extends SizeProps {
-  /**
-   * @ignore
-   */
-  viewWidth?: ViewWidth;
-  /**
-   * @ignore
-   */
-  viewHeight?: ViewHeight;
-  /**
-   * @ignore
-   */
-  hasMouse?: boolean;
-  /**
-   * @ignore
-   */
-  deviceHasHover?: boolean;
-}
-
-export interface AdaptivityContextInterface extends SizeProps {
-  viewWidth: ViewWidth;
-  viewHeight: ViewHeight;
-  hasMouse: boolean;
-  deviceHasHover: boolean;
-}
-
-export const AdaptivityContext =
-  React.createContext<AdaptivityContextInterface>({
-    sizeX: SizeType.COMPACT,
-    sizeY: SizeType.REGULAR,
-    hasMouse,
-    deviceHasHover: hasHover,
-    viewWidth: 0,
-    viewHeight: 0,
-  });

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -1,138 +0,0 @@
-import * as React from "react";
-import { hasMouse as _hasMouse, hasHover as _hasHover } from "@vkontakte/vkjs";
-import {
-  AdaptivityContext,
-  AdaptivityProps,
-  SizeType,
-  ViewHeight,
-  ViewWidth,
-} from "./AdaptivityContext";
-import { useDOM } from "../../lib/dom";
-
-export const DESKTOP_SIZE = 1280;
-export const TABLET_SIZE = 1024;
-export const SMALL_TABLET_SIZE = 768;
-export const MOBILE_SIZE = 320;
-
-export const MOBILE_LANDSCAPE_HEIGHT = 414;
-export const MEDIUM_HEIGHT = 720;
-
-const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
-  const adaptivityRef = React.useRef<ReturnType<
-    typeof calculateAdaptivity
-  > | null>(null);
-  const [, updateAdaptivity] = React.useState({});
-
-  const { window } = useDOM();
-
-  if (!adaptivityRef.current) {
-    adaptivityRef.current = calculateAdaptivity(
-      window ? window.innerWidth : 0,
-      window ? window.innerHeight : 0,
-      props
-    );
-  }
-
-  React.useEffect(() => {
-    function onResize() {
-      if (adaptivityRef.current === null) {
-        return;
-      }
-      const calculated = calculateAdaptivity(
-        window!.innerWidth,
-        window!.innerHeight,
-        props
-      );
-      const { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover } =
-        adaptivityRef.current;
-
-      if (
-        viewWidth !== calculated.viewWidth ||
-        viewHeight !== calculated.viewHeight ||
-        sizeX !== calculated.sizeX ||
-        sizeY !== calculated.sizeY ||
-        hasMouse !== calculated.hasMouse ||
-        deviceHasHover !== calculated.deviceHasHover
-      ) {
-        adaptivityRef.current = calculated;
-        updateAdaptivity({});
-      }
-    }
-
-    onResize();
-    window!.addEventListener("resize", onResize, false);
-
-    return () => {
-      window!.removeEventListener("resize", onResize, false);
-    };
-  }, [
-    props.viewWidth,
-    props.viewHeight,
-    props.sizeX,
-    props.sizeY,
-    props.hasMouse,
-    props.deviceHasHover,
-    window,
-    props,
-  ]);
-
-  return (
-    <AdaptivityContext.Provider value={adaptivityRef.current}>
-      {props.children}
-    </AdaptivityContext.Provider>
-  );
-};
-
-function calculateAdaptivity(
-  windowWidth: number,
-  windowHeight: number,
-  props: AdaptivityProps
-) {
-  let viewWidth = ViewWidth.SMALL_MOBILE;
-  let viewHeight = ViewHeight.SMALL;
-  let sizeY = SizeType.REGULAR;
-  let sizeX = SizeType.REGULAR;
-  let hasMouse = props.hasMouse ?? _hasMouse;
-  let deviceHasHover = props.deviceHasHover ?? _hasHover;
-
-  if (windowWidth >= DESKTOP_SIZE) {
-    viewWidth = ViewWidth.DESKTOP;
-  } else if (windowWidth >= TABLET_SIZE) {
-    viewWidth = ViewWidth.TABLET;
-  } else if (windowWidth >= SMALL_TABLET_SIZE) {
-    viewWidth = ViewWidth.SMALL_TABLET;
-  } else if (windowWidth >= MOBILE_SIZE) {
-    viewWidth = ViewWidth.MOBILE;
-  } else {
-    viewWidth = ViewWidth.SMALL_MOBILE;
-  }
-
-  if (windowHeight >= MEDIUM_HEIGHT) {
-    viewHeight = ViewHeight.MEDIUM;
-  } else if (windowHeight > MOBILE_LANDSCAPE_HEIGHT) {
-    viewHeight = ViewHeight.SMALL;
-  } else {
-    viewHeight = ViewHeight.EXTRA_SMALL;
-  }
-
-  props.viewWidth && (viewWidth = props.viewWidth);
-  props.viewHeight && (viewHeight = props.viewHeight);
-
-  if (viewWidth <= ViewWidth.MOBILE) {
-    sizeX = SizeType.COMPACT;
-  }
-
-  if (
-    (viewWidth >= ViewWidth.SMALL_TABLET && hasMouse) ||
-    viewHeight <= ViewHeight.EXTRA_SMALL
-  ) {
-    sizeY = SizeType.COMPACT;
-  }
-
-  props.sizeX && (sizeX = props.sizeX);
-  props.sizeY && (sizeY = props.sizeY);
-
-  return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
-}
-
-export { AdaptivityProvider };

package/src/components/AdaptivityProvider/Readme.md

@@ -1,3 +0,0 @@
-Компонент, прокидывающий вниз данные об [адаптивности](#!/Adaptivity). Все параметры, которые можно прокинуть через
-props, компонент по умолчанию вычисляет самостоятельно. Передавать их с помощью props стоит в тех случаях, когда
-вы точно уверены, что ваш сайт, например, будет открываться только на мобильных устройствах.

package/src/components/Alert/Alert.css

@@ -1,297 +0,0 @@
-.Alert {
-  user-select: none;
-  color: var(--text_primary);
-  position: relative;
-  max-width: 416px;
-}
-
-.Alert::before {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--modal_card_background);
-  z-index: 1;
-  content: "";
-  border-radius: inherit;
-}
-
-.Alert__content {
-  position: relative;
-  z-index: 2;
-}
-
-.Alert__action {
-  white-space: nowrap;
-  background: transparent;
-}
-
-.Alert__actions {
-  display: flex;
-  max-width: 100%;
-  position: relative;
-  z-index: 2;
-}
-
-/**
- * iOS version
- */
-.Alert--ios {
-  width: 270px;
-  border-radius: 12px;
-  overflow: hidden;
-  animation: vkui-animation-ios-alert-intro 0.3s var(--ios-easing);
-}
-
-.Alert--ios.Alert--closing {
-  opacity: 0;
-  transition: opacity 0.3s var(--ios-easing);
-}
-
-.Alert--ios .Alert__content {
-  padding: 19px 16px 20px;
-  text-align: center;
-}
-
-.Alert--ios .Alert__header:not(:last-child) {
-  margin-bottom: 7px;
-}
-
-.Alert--ios .Alert__content::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  height: 1px;
-  right: 0;
-  left: 0;
-  background: var(--action_sheet_separator);
-  transform-origin: center bottom;
-}
-
-.Alert--ios.Alert--v .Alert__actions {
-  flex-direction: column;
-}
-
-.Alert--ios .Alert__action {
-  position: relative;
-  font-size: 17px;
-  line-height: 44px;
-  color: var(--accent);
-  border: 0;
-  padding: 0 6px;
-  margin: 0;
-  height: 44px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-radius: 0;
-}
-
-.Alert--ios .Alert__action:active {
-  z-index: 1;
-}
-
-.Alert--ios .Alert__action::after {
-  content: "";
-  position: absolute;
-  background: var(--action_sheet_separator);
-}
-
-.Alert--ios.Alert--h .Alert__action::after {
-  top: 0;
-  right: 0;
-  width: 1px;
-  height: 100%;
-  transform-origin: right center;
-}
-
-.Alert--ios.Alert--h .Alert__action:last-child::after {
-  content: none;
-}
-
-.Alert--ios.Alert--h .Alert__action {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0;
-}
-
-.Alert--ios.Alert--h .Alert__action:first-child {
-  border-bottom-left-radius: 12px;
-}
-
-.Alert--ios.Alert--h .Alert__action:last-child {
-  border-bottom-right-radius: 12px;
-}
-
-.Alert--ios.Alert--v .Alert__action::after {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 1px;
-  transform-origin: center bottom;
-}
-
-.Alert--ios.Alert--v .Alert__action:last-child::after {
-  content: none;
-}
-
-.Alert--ios.Alert--v .Alert__action:last-child {
-  border-radius: 0 0 12px 12px;
-}
-
-@media (min-resolution: 2dppx) {
-  .Alert--ios .Alert__content::after,
-  .Alert--ios.Alert--v .Alert__action::after {
-    transform: scaleY(0.5);
-  }
-
-  .Alert--ios.Alert--h .Alert__action::after {
-    transform: scaleX(0.5);
-  }
-}
-
-@media (min-resolution: 3dppx) {
-  .Alert--ios .Alert__content::after,
-  .Alert--ios.Alert--v .Alert__action::after {
-    transform: scaleY(0.33);
-  }
-
-  .Alert--ios.Alert--h .Alert__action::after {
-    transform: scaleX(0.33);
-  }
-}
-
-.Alert--ios .Alert__action--cancel {
-  font-weight: 600;
-}
-
-.Alert--ios .Alert__action--destructive {
-  color: var(--destructive);
-}
-
-/**
- * Android & VKCOM
- */
-.Alert--android {
-  min-width: 280px;
-  margin: auto 24px;
-  box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.3), 0 0 35px 0 rgba(0, 0, 0, 0.22);
-  border-radius: 12px;
-  animation: vkui-animation-android-alert-intro 0.2s ease;
-}
-
-.Alert--desktop.Alert--android {
-  width: 416px;
-}
-
-.Alert--android.Alert--closing,
-.Alert--vkcom.Alert--closing {
-  transform: scale(0.95);
-  opacity: 0;
-  transition: transform 0.2s var(--android-easing),
-    opacity 0.2s var(--android-easing);
-}
-
-.Alert--android .Alert__content {
-  padding: 24px 24px 20px;
-}
-
-.Alert--android .Alert__header,
-.Alert--vkcom .Alert__header {
-  margin-bottom: 8px;
-}
-
-.Alert--android .Alert__text,
-.Alert--vkcom .Alert__text {
-  color: var(--text_secondary);
-}
-
-.Alert--android .Alert__actions {
-  padding: 0 16px 16px;
-}
-
-.Alert--android.Alert--h .Alert__actions,
-.Alert--vkcom.Alert--h .Alert__actions {
-  justify-content: flex-end;
-}
-
-.Alert--android.Alert--v .Alert__actions {
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.Alert--android.Alert--v .Alert__button {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.Alert--android.Alert--v .Alert__button:first-child {
-  margin-top: 0;
-}
-
-.Alert--android.Alert--v .Alert__button:last-child {
-  margin-bottom: 0;
-}
-
-.Alert--android.Alert--h .Alert__button,
-.Alert--vkcom.Alert--h .Alert__button {
-  margin-left: 8px;
-}
-
-/**
- * VKCOM
- */
-
-.Alert--vkcom {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
-  width: 400px;
-  margin: auto 24px;
-  animation: vkui-animation-android-alert-intro 0.2s ease;
-}
-
-.Alert--vkcom .Alert__content {
-  padding: 24px;
-}
-
-.Alert--vkcom .Alert__actions {
-  padding: 0 24px 16px;
-}
-
-.Alert--vkcom .Alert__button {
-  order: 2;
-}
-
-.Alert--vkcom .Alert__button--cancel {
-  order: 1;
-}
-
-/**
- * Animations
- */
-@keyframes vkui-animation-ios-alert-intro {
-  from {
-    opacity: 0;
-    transform: scale(1.05);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes vkui-animation-android-alert-intro {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}