@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -0,0 +1,182 @@
+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 vkuiClass="ActionSheetItem__subtitle">{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

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

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,138 @@
+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

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

package/src/components/Alert/Alert.css

@@ -0,0 +1,297 @@
+.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);
+  }
+}