@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Alert/Alert.tsx

@@ -1,33 +1,41 @@
-import * as React from 'react';
-import Tappable from '../Tappable/Tappable';
-import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { transitionEvent } from '../../lib/supportEvents';
-import { ANDROID, VKCOM, IOS } from '../../lib/platform';
-import { HasPlatform } from '../../types';
-import { withPlatform } from '../../hoc/withPlatform';
-import { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';
-import Button, { ButtonProps } from '../Button/Button';
-import { hasReactNode } from '../../lib/utils';
-import Headline from '../Typography/Headline/Headline';
-import Title from '../Typography/Title/Title';
-import Caption from '../Typography/Caption/Caption';
-import ModalDismissButton from '../ModalDismissButton/ModalDismissButton';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import './Alert.css';
-
-export type AlertActionInterface = AlertProps['actions'][0] & React.AnchorHTMLAttributes<HTMLElement>;
-
-export interface AlertAction extends Pick<ButtonProps, 'Component' | 'href'> {
+import * as React from "react";
+import Tappable from "../Tappable/Tappable";
+import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { transitionEvent } from "../../lib/supportEvents";
+import { ANDROID, VKCOM, IOS } from "../../lib/platform";
+import { HasPlatform } from "../../types";
+import { withPlatform } from "../../hoc/withPlatform";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  ViewWidth,
+} from "../../hoc/withAdaptivity";
+import Button, { ButtonProps } from "../Button/Button";
+import { hasReactNode } from "../../lib/utils";
+import Headline from "../Typography/Headline/Headline";
+import Title from "../Typography/Title/Title";
+import Caption from "../Typography/Caption/Caption";
+import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import "./Alert.css";
+
+export type AlertActionInterface = AlertProps["actions"][0] &
+  React.AnchorHTMLAttributes<HTMLElement>;
+
+export interface AlertAction extends Pick<ButtonProps, "Component" | "href"> {
   title: string;
   action?: VoidFunction;
   autoclose?: boolean;
-  mode: 'cancel' | 'destructive' | 'default';
+  mode: "cancel" | "destructive" | "default";
 }
 
-export interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {
-  actionsLayout?: 'vertical' | 'horizontal';
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasPlatform,
+    AdaptivityProps {
+  actionsLayout?: "vertical" | "horizontal";
   actions?: AlertAction[];
   header?: React.ReactNode;
   text?: React.ReactNode;
@@ -56,12 +64,14 @@ class Alert extends React.Component<AlertProps, AlertState> {
   private transitionFinishTimeout: ReturnType<typeof setTimeout>;
 
   static defaultProps: AlertProps = {
-    actionsLayout: 'horizontal',
+    actionsLayout: "horizontal",
     actions: [],
   };
 
   private get timeout(): number {
-    return this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300;
+    return this.props.platform === ANDROID || this.props.platform === VKCOM
+      ? 200
+      : 300;
   }
 
   onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {
@@ -70,7 +80,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
     if (autoclose) {
       this.setState({ closing: true });
       this.waitTransitionFinish((e?: TransitionEvent) => {
-        if (!e || e.propertyName === 'opacity') {
+        if (!e || e.propertyName === "opacity") {
           autoclose && this.props.onClose();
           action && action();
         }
@@ -83,7 +93,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
   onClose: VoidFunction = () => {
     this.setState({ closing: true });
     this.waitTransitionFinish((e?: TransitionEvent) => {
-      if (!e || e.propertyName === 'opacity') {
+      if (!e || e.propertyName === "opacity") {
         this.props.onClose();
       }
     });
@@ -95,33 +105,63 @@ class Alert extends React.Component<AlertProps, AlertState> {
 
   waitTransitionFinish(eventHandler: TransitionEndHandler) {
     if (transitionEvent.supported) {
-      this.element.current.removeEventListener(transitionEvent.name, eventHandler);
+      this.element.current.removeEventListener(
+        transitionEvent.name,
+        eventHandler
+      );
       this.element.current.addEventListener(transitionEvent.name, eventHandler);
     } else {
       clearTimeout(this.transitionFinishTimeout);
-      this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.timeout);
+      this.transitionFinishTimeout = setTimeout(
+        eventHandler.bind(this),
+        this.timeout
+      );
     }
   }
 
   renderHeader(header: React.ReactNode) {
     switch (this.props.platform) {
       case VKCOM:
-        return <Headline vkuiClass="Alert__header" weight="medium">{header}</Headline>;
+        return (
+          <Headline vkuiClass="Alert__header" weight="medium">
+            {header}
+          </Headline>
+        );
       case IOS:
-        return <Title vkuiClass="Alert__header" weight="semibold" level="3">{header}</Title>;
+        return (
+          <Title vkuiClass="Alert__header" weight="semibold" level="3">
+            {header}
+          </Title>
+        );
       case ANDROID:
-        return <Title vkuiClass="Alert__header" weight="medium" level="2">{header}</Title>;
+        return (
+          <Title vkuiClass="Alert__header" weight="medium" level="2">
+            {header}
+          </Title>
+        );
     }
   }
 
   renderText(text: React.ReactNode) {
     switch (this.props.platform) {
       case VKCOM:
-        return <Caption vkuiClass="Alert__text" level="1" weight="regular">{text}</Caption>;
+        return (
+          <Caption vkuiClass="Alert__text" level="1" weight="regular">
+            {text}
+          </Caption>
+        );
       case IOS:
-        return <Caption vkuiClass="Alert__text" level="2" weight="regular">{text}</Caption>;
+        return (
+          <Caption vkuiClass="Alert__text" level="2" weight="regular">
+            {text}
+          </Caption>
+        );
       case ANDROID:
-        return <Headline vkuiClass="Alert__text" weight="regular">{text}</Headline>;
+        return (
+          <Headline vkuiClass="Alert__text" weight="regular">
+            {text}
+          </Headline>
+        );
     }
   }
 
@@ -129,11 +169,14 @@ class Alert extends React.Component<AlertProps, AlertState> {
     const { platform } = this.props;
 
     if (platform === IOS) {
-      const { Component = 'button' } = action;
+      const { Component = "button" } = action;
       return (
         <Tappable
-          Component={action.href ? 'a' : Component}
-          vkuiClass={classNames('Alert__action', `Alert__action--${action.mode}`)}
+          Component={action.href ? "a" : Component}
+          vkuiClass={classNames(
+            "Alert__action",
+            `Alert__action--${action.mode}`
+          )}
           onClick={this.onItemClick(action)}
           href={action.href}
           key={`alert-action-${i}`}
@@ -144,19 +187,23 @@ class Alert extends React.Component<AlertProps, AlertState> {
       );
     }
 
-    let mode: ButtonProps['mode'] = action.mode === 'cancel' ? 'secondary' : 'primary';
+    let mode: ButtonProps["mode"] =
+      action.mode === "cancel" ? "secondary" : "primary";
 
     if (platform === ANDROID) {
-      mode = 'tertiary';
+      mode = "tertiary";
 
-      if (this.props.viewWidth === ViewWidth.DESKTOP && action.mode === 'destructive') {
-        mode = 'destructive';
+      if (
+        this.props.viewWidth === ViewWidth.DESKTOP &&
+        action.mode === "destructive"
+      ) {
+        mode = "destructive";
       }
     }
 
     return (
       <Button
-        vkuiClass={classNames('Alert__button', `Alert__button--${action.mode}`)}
+        vkuiClass={classNames("Alert__button", `Alert__button--${action.mode}`)}
         mode={mode}
         size="m"
         onClick={this.onItemClick(action)}
@@ -171,11 +218,25 @@ class Alert extends React.Component<AlertProps, AlertState> {
   };
 
   render() {
-    const { actions, actionsLayout, children, className, style, platform, viewWidth, text, header, ...restProps } = this.props;
+    const {
+      actions,
+      actionsLayout,
+      children,
+      className,
+      style,
+      platform,
+      viewWidth,
+      text,
+      header,
+      ...restProps
+    } = this.props;
     const { closing } = this.state;
 
-    const resolvedActionsLayout: AlertProps['actionsLayout'] = platform === VKCOM ? 'horizontal' : actionsLayout;
-    const canShowCloseButton = platform === VKCOM || platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET;
+    const resolvedActionsLayout: AlertProps["actionsLayout"] =
+      platform === VKCOM ? "horizontal" : actionsLayout;
+    const canShowCloseButton =
+      platform === VKCOM ||
+      (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);
     const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
 
     return (
@@ -191,11 +252,11 @@ class Alert extends React.Component<AlertProps, AlertState> {
           onClick={this.stopPropagation}
           onClose={this.onClose}
           timeout={this.timeout}
-          vkuiClass={classNames(getClassName('Alert', platform), {
-            'Alert--v': resolvedActionsLayout === 'vertical',
-            'Alert--h': resolvedActionsLayout === 'horizontal',
-            'Alert--closing': closing,
-            'Alert--desktop': isDesktop,
+          vkuiClass={classNames(getClassName("Alert", platform), {
+            "Alert--v": resolvedActionsLayout === "vertical",
+            "Alert--h": resolvedActionsLayout === "horizontal",
+            "Alert--closing": closing,
+            "Alert--desktop": isDesktop,
           })}
         >
           {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}
@@ -213,6 +274,8 @@ class Alert extends React.Component<AlertProps, AlertState> {
   }
 }
 
-export default withPlatform(withAdaptivity(Alert, {
-  viewWidth: true,
-}));
+export default withPlatform(
+  withAdaptivity(Alert, {
+    viewWidth: true,
+  })
+);

package/src/components/Alert/Readme.md

@@ -15,12 +15,12 @@
 Кнопки могут быть ссылками (передайте `href`) или другим компонентом (передайте `Component`).
 
 > **Важно:**
-> 
+>
 > 1. Кнопка со стилем `cancel` должна быть одна на алерт.
 > 2. Кнопку со стилем `cancel` нужно располагать либо слева, либо снизу, в зависимости от выбранного `actionsLayout`.
 > 3. В Android версии игнорируется стили `cancel` и `destructive`, и жирность всех кнопок одинаковая.
 > 4. В VKCOM версии возможно только горизонтальное расположение кнопок.
-> 5.  Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
+> 5. Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
 class Example extends React.Component {
@@ -39,7 +39,7 @@ class Example extends React.Component {
   }
 
   componentDidMount() {
-    this.openDeleteion()
+    this.openDeleteion();
   }
 
   addActionLogItem(value) {
@@ -48,49 +48,60 @@ class Example extends React.Component {
     });
   }
 
-  openAction () {
-    this.setState({ popout:
-      <Alert
-        actions={[{
-          title: 'Лишить права',
-          mode: 'destructive',
-          autoclose: true,
-          action: () => this.addActionLogItem('Право на модерацию контента убрано.'),
-        }, {
-          title: 'Отмена',
-          autoclose: true,
-          mode: 'cancel'
-        }]}
-        actionsLayout="vertical"
-        onClose={this.closePopout}
-        header="Подтвердите действие"
-        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
-      />
+  openAction() {
+    this.setState({
+      popout: (
+        <Alert
+          actions={[
+            {
+              title: "Лишить права",
+              mode: "destructive",
+              autoclose: true,
+              action: () =>
+                this.addActionLogItem("Право на модерацию контента убрано."),
+            },
+            {
+              title: "Отмена",
+              autoclose: true,
+              mode: "cancel",
+            },
+          ]}
+          actionsLayout="vertical"
+          onClose={this.closePopout}
+          header="Подтвердите действие"
+          text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+        />
+      ),
     });
   }
 
-  openDeleteion () {
-    this.setState({ popout:
-      <Alert
-        actions={[{
-          title: 'Отмена',
-          autoclose: true,
-          mode: 'cancel'
-        }, {
-          title: 'Удалить',
-          autoclose: true,
-          mode: 'destructive',
-          action: () => this.addActionLogItem('Документ удален.'),
-        }]}
-        actionsLayout="horizontal"
-        onClose={this.closePopout}
-        header="Удаление документа"
-        text="Вы уверены, что хотите удалить этот документ?"
-      />
+  openDeleteion() {
+    this.setState({
+      popout: (
+        <Alert
+          actions={[
+            {
+              title: "Отмена",
+              autoclose: true,
+              mode: "cancel",
+            },
+            {
+              title: "Удалить",
+              autoclose: true,
+              mode: "destructive",
+              action: () => this.addActionLogItem("Документ удален."),
+            },
+          ]}
+          actionsLayout="horizontal"
+          onClose={this.closePopout}
+          header="Удаление документа"
+          text="Вы уверены, что хотите удалить этот документ?"
+        />
+      ),
     });
   }
 
-  closePopout () {
+  closePopout() {
     this.setState({ popout: null });
   }
 
@@ -98,21 +109,25 @@ class Example extends React.Component {
     return (
       <SplitLayout popout={this.state.popout}>
         <SplitCol>
-        <View activePanel="alert">
-          <Panel id="alert">
-            <PanelHeader>Alert</PanelHeader>
-            <Group>
-              <CellButton onClick={this.openAction}>Лишить права</CellButton>
-              <CellButton onClick={this.openDeleteion}>Удалить документ</CellButton>
-              {this.state.actionsLog.map((value, i) => <Div key={i}>{value}</Div>)}
-            </Group>
-          </Panel>
-        </View>
+          <View activePanel="alert">
+            <Panel id="alert">
+              <PanelHeader>Alert</PanelHeader>
+              <Group>
+                <CellButton onClick={this.openAction}>Лишить права</CellButton>
+                <CellButton onClick={this.openDeleteion}>
+                  Удалить документ
+                </CellButton>
+                {this.state.actionsLog.map((value, i) => (
+                  <Div key={i}>{value}</Div>
+                ))}
+              </Group>
+            </Panel>
+          </View>
         </SplitCol>
       </SplitLayout>
-    )
+    );
   }
 }
 
-<Example />
+<Example />;
 ```