@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/PanelHeaderContext/PanelHeaderContext.css

@@ -23,15 +23,15 @@
   left: 0;
   top: 0;
   z-index: 1;
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-in .2s ease;
+  animation: vkui-animation-panelheadercontext-fade-in 0.2s ease;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-out .2s ease;
+  animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
 }
 
 /*
@@ -39,11 +39,11 @@
  */
 
 .PanelHeaderContext--ios.PanelHeaderContext--opened .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-in .2s ease;
+  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
 }
 
 .PanelHeaderContext--ios.PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out .2s ease;
+  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
 }
 
 .PanelHeaderContext--ios .List {
@@ -61,12 +61,13 @@
 
 .PanelHeaderContext--android.PanelHeaderContext--opened .PanelHeaderContext__in,
 .PanelHeaderContext--vkcom.PanelHeaderContext--opened .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-in .2s ease;
+  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
 }
 
-.PanelHeaderContext--android.PanelHeaderContext--closing .PanelHeaderContext__in,
+.PanelHeaderContext--android.PanelHeaderContext--closing
+  .PanelHeaderContext__in,
 .PanelHeaderContext--vkcom.PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out .2s ease;
+  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
 }
 
 .PanelHeaderContext--android .List,
@@ -94,7 +95,7 @@
 }
 
 .PanelHeaderContext--desktop .PanelHeaderContext__content {
-  box-shadow: 0 0 4px rgba(0, 0, 0, .08), 0 8px 8px rgba(0, 0, 0, .16);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
 }
 
 /*
@@ -102,21 +103,41 @@
  */
 
 @keyframes vkui-animation-panelheadercontext-translate-in {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes vkui-animation-panelheadercontext-translate-out {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
 }
 
 @keyframes vkui-animation-panelheadercontext-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes vkui-animation-panelheadercontext-fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
 }

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -1,17 +1,18 @@
-import * as React from 'react';
-import FixedLayout from '../FixedLayout/FixedLayout';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { ViewWidth } from '../AdaptivityProvider/AdaptivityContext';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useDOM } from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useTimeout } from '../../hooks/useTimeout';
-import { usePlatform } from '../../hooks/usePlatform';
-import './PanelHeaderContext.css';
+import * as React from "react";
+import FixedLayout from "../FixedLayout/FixedLayout";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useDOM } from "../../lib/dom";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./PanelHeaderContext.css";
 
-export interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PanelHeaderContextProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   opened: boolean;
   onClose: VoidFunction;
 }
@@ -28,36 +29,57 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
   const closing = visible && !opened;
   const { viewWidth } = useAdaptivity();
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  const elementRef = React.useRef<HTMLDivElement>();
+  const elementRef = React.useRef<HTMLDivElement>(null);
 
   useIsomorphicLayoutEffect(() => {
     opened && setVisible(true);
   }, [opened]);
 
   // start closing on outer click
-  useGlobalEventListener(document, 'click', isDesktop && opened && !closing && ((event) => {
-    if (elementRef.current && !elementRef.current.contains(event.target as Node)) {
-      onClose();
-    }
-  }));
+  useGlobalEventListener(
+    document,
+    "click",
+    isDesktop &&
+      opened &&
+      !closing &&
+      ((event) => {
+        if (
+          elementRef.current &&
+          !elementRef.current.contains(event.target as Node)
+        ) {
+          onClose();
+        }
+      })
+  );
 
   // fallback onAnimationEnd when animationend not supported
   const onAnimationEnd = () => setVisible(false);
   const animationFallback = useTimeout(onAnimationEnd, 200);
-  React.useEffect(() => closing ? animationFallback.set() : animationFallback.clear(), [closing]);
+  React.useEffect(
+    () => (closing ? animationFallback.set() : animationFallback.clear()),
+    [animationFallback, closing]
+  );
 
   return (
-    <FixedLayout {...restProps} vkuiClass={classNames(getClassName('PanelHeaderContext', platform), {
-      'PanelHeaderContext--opened': opened,
-      'PanelHeaderContext--closing': closing,
-      'PanelHeaderContext--desktop': isDesktop,
-    })} vertical="top">
-      <div vkuiClass="PanelHeaderContext__in" ref={elementRef} onAnimationEnd={closing ? onAnimationEnd : null}>
-        <div vkuiClass="PanelHeaderContext__content">
-          {visible && children}
-        </div>
+    <FixedLayout
+      {...restProps}
+      vkuiClass={classNames(getClassName("PanelHeaderContext", platform), {
+        "PanelHeaderContext--opened": opened,
+        "PanelHeaderContext--closing": closing,
+        "PanelHeaderContext--desktop": isDesktop,
+      })}
+      vertical="top"
+    >
+      <div
+        vkuiClass="PanelHeaderContext__in"
+        ref={elementRef}
+        onAnimationEnd={closing ? onAnimationEnd : undefined}
+      >
+        <div vkuiClass="PanelHeaderContext__content">{visible && children}</div>
       </div>
-      {!isDesktop && visible && <div onClick={onClose} vkuiClass="PanelHeaderContext__fade" />}
+      {!isDesktop && visible && (
+        <div onClick={onClose} vkuiClass="PanelHeaderContext__fade" />
+      )}
     </FixedLayout>
   );
 };

package/src/components/PanelHeaderContext/Readme.md

@@ -1,83 +1,110 @@
 ```jsx
-const Example = withPlatform(withAdaptivity(
-class ExampleClass extends React.Component {
-  constructor () {
-    this.state = {
-      contextOpened: true,
-      mode: 'all'
-    }
-    this.toggleContext = this.toggleContext.bind(this);
-    this.select = this.select.bind(this);
-  }
+const Example = withPlatform(
+  withAdaptivity(
+    class ExampleClass extends React.Component {
+      constructor() {
+        this.state = {
+          contextOpened: true,
+          mode: "all",
+        };
+        this.toggleContext = this.toggleContext.bind(this);
+        this.select = this.select.bind(this);
+      }
 
-  toggleContext () {
-    this.setState({ contextOpened: !this.state.contextOpened });
-  }
+      toggleContext() {
+        this.setState({ contextOpened: !this.state.contextOpened });
+      }
 
-  select (e) {
-    const mode = e.currentTarget.dataset.mode;
-    this.setState({ mode });
-    requestAnimationFrame(this.toggleContext);
-  }
+      select(e) {
+        const mode = e.currentTarget.dataset.mode;
+        this.setState({ mode });
+        requestAnimationFrame(this.toggleContext);
+      }
 
-  render () {
-    const hasHeader = this.props.platform !== VKCOM;
-    const isDesktop = this.props.viewWidth >= ViewWidth.SMALL_TABLET;
+      render() {
+        const hasHeader = this.props.platform !== VKCOM;
+        const isDesktop = this.props.viewWidth >= ViewWidth.SMALL_TABLET;
 
-    return (
-      <SplitLayout
-        style={{ justifyContent: "center" }}
-        header={hasHeader && <PanelHeader separator={false} />}
-      >
-        <SplitCol
-          animate={!isDesktop}
-          spaced={isDesktop}
-          width={isDesktop ? '560px' : '100%'}
-          maxWidth={isDesktop ? '560px' : '100%'}
-        >
-          <View activePanel="context2">
-            <Panel id="context2">
-              <PanelHeader
-                left={<PanelHeaderBack />}
-                right={<PanelHeaderButton><Icon28AddOutline /></PanelHeaderButton>}
-              >
-                <PanelHeaderContent
-                  aside={<Icon16Dropdown style={{ transform: `rotate(${this.state.contextOpened ? '180deg' : '0'})` }} />}
-                  onClick={this.toggleContext}
-                >
-                  Communities
-                </PanelHeaderContent>
-              </PanelHeader>
-              <PanelHeaderContext opened={this.state.contextOpened} onClose={this.toggleContext}>
-                <List>
-                  <Cell
-                    before={<Icon28UsersOutline />}
-                    after={this.state.mode === 'all' ? <Icon24Done fill="var(--accent)" /> : null}
-                    onClick={this.select}
-                    data-mode="all"
+        return (
+          <SplitLayout
+            style={{ justifyContent: "center" }}
+            header={hasHeader && <PanelHeader separator={false} />}
+          >
+            <SplitCol
+              animate={!isDesktop}
+              spaced={isDesktop}
+              width={isDesktop ? "560px" : "100%"}
+              maxWidth={isDesktop ? "560px" : "100%"}
+            >
+              <View activePanel="context2">
+                <Panel id="context2">
+                  <PanelHeader
+                    left={<PanelHeaderBack />}
+                    right={
+                      <PanelHeaderButton>
+                        <Icon28AddOutline />
+                      </PanelHeaderButton>
+                    }
                   >
-                    Communities
-                  </Cell>
-                  <Cell
-                    before={<Icon28SettingsOutline />}
-                    after={this.state.mode === 'managed' ? <Icon24Done fill="var(--accent)" /> : null}
-                    onClick={this.select}
-                    data-mode="managed"
+                    <PanelHeaderContent
+                      aside={
+                        <Icon16Dropdown
+                          style={{
+                            transform: `rotate(${
+                              this.state.contextOpened ? "180deg" : "0"
+                            })`,
+                          }}
+                        />
+                      }
+                      onClick={this.toggleContext}
+                    >
+                      Communities
+                    </PanelHeaderContent>
+                  </PanelHeader>
+                  <PanelHeaderContext
+                    opened={this.state.contextOpened}
+                    onClose={this.toggleContext}
                   >
-                    Managed Communities
-                  </Cell>
-                </List>
-              </PanelHeaderContext>
-              <Group>
-                <div style={{ height: 300 }} />
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
-    )
-  }
-}, { viewWidth: true }));
+                    <List>
+                      <Cell
+                        before={<Icon28UsersOutline />}
+                        after={
+                          this.state.mode === "all" ? (
+                            <Icon24Done fill="var(--accent)" />
+                          ) : null
+                        }
+                        onClick={this.select}
+                        data-mode="all"
+                      >
+                        Communities
+                      </Cell>
+                      <Cell
+                        before={<Icon28SettingsOutline />}
+                        after={
+                          this.state.mode === "managed" ? (
+                            <Icon24Done fill="var(--accent)" />
+                          ) : null
+                        }
+                        onClick={this.select}
+                        data-mode="managed"
+                      >
+                        Managed Communities
+                      </Cell>
+                    </List>
+                  </PanelHeaderContext>
+                  <Group>
+                    <div style={{ height: 300 }} />
+                  </Group>
+                </Panel>
+              </View>
+            </SplitCol>
+          </SplitLayout>
+        );
+      }
+    },
+    { viewWidth: true }
+  )
+);
 
-<Example />
+<Example />;
 ```

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -1,8 +1,11 @@
-import * as React from 'react';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { Icon28EditOutline, Icon28DoneOutline } from '@vkontakte/icons';
-import { usePlatform } from '../../hooks/usePlatform';
+import * as React from "react";
+import {
+  PanelHeaderButton,
+  PanelHeaderButtonProps,
+} from "../PanelHeaderButton/PanelHeaderButton";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { Icon28EditOutline, Icon28DoneOutline } from "@vkontakte/icons";
+import { usePlatform } from "../../hooks/usePlatform";
 
 export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
   /**
@@ -31,18 +34,16 @@ const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
 
   return (
     <PanelHeaderButton aria-label={iOSText} {...restProps}>
-      {platform === ANDROID || platform === VKCOM
-        ? <AndroidIcon />
-        : iOSText
-      }
+      {platform === ANDROID || platform === VKCOM ? <AndroidIcon /> : iOSText}
     </PanelHeaderButton>
   );
 };
 
 PanelHeaderEdit.defaultProps = {
   isActive: false,
-  editLabel: 'Редактировать',
-  doneLabel: 'Готово',
+  editLabel: "Редактировать",
+  doneLabel: "Готово",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderEdit;

package/src/components/PanelHeaderEdit/Readme.md

@@ -1 +1 @@
-Компонент для отрисовки кнопки **Редактировать** в шапке. Принимает свойство `isActive`, которое определяет состояние кнопки (включен ли режим редактирования).
+Компонент для отрисовки кнопки **Редактировать** в шапке. Принимает свойство `isActive`, которое определяет состояние кнопки (включен ли режим редактирования).

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -1,9 +1,12 @@
-import * as React from 'react';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
-import { Icon28DoneOutline } from '@vkontakte/icons';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getTitleFromChildren } from '../../lib/utils';
+import * as React from "react";
+import {
+  PanelHeaderButton,
+  PanelHeaderButtonProps,
+} from "../PanelHeaderButton/PanelHeaderButton";
+import { Icon28DoneOutline } from "@vkontakte/icons";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getTitleFromChildren } from "../../lib/utils";
 
 const PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({
   children,
@@ -12,17 +15,23 @@ const PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({
   const platform = usePlatform();
 
   return (
-    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>
-      {platform === ANDROID || platform === VKCOM
-        ? <Icon28DoneOutline />
-        : children
-      }
+    <PanelHeaderButton
+      aria-label={getTitleFromChildren(children)}
+      primary
+      {...restProps}
+    >
+      {platform === ANDROID || platform === VKCOM ? (
+        <Icon28DoneOutline />
+      ) : (
+        children
+      )}
     </PanelHeaderButton>
   );
 };
 
 PanelHeaderSubmit.defaultProps = {
-  children: 'Готово',
+  children: "Готово",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PanelHeaderSubmit;

package/src/components/PanelHeaderSubmit/Readme.md

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

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -1,18 +1,21 @@
-import * as React from 'react';
-import Spinner, { SpinnerProps } from '../Spinner/Spinner';
+import * as React from "react";
+import Spinner, { SpinnerProps } from "../Spinner/Spinner";
 
 export interface PanelSpinnerProps extends SpinnerProps {
   height?: number;
 }
 
-const PanelSpinner: React.FunctionComponent<PanelSpinnerProps> = ({ height, style, ...restProps }: PanelSpinnerProps) => {
-  return (
-    <Spinner size="regular" {...restProps} style={{ height, ...style }} />
-  );
+const PanelSpinner: React.FunctionComponent<PanelSpinnerProps> = ({
+  height,
+  style,
+  ...restProps
+}: PanelSpinnerProps) => {
+  return <Spinner size="regular" {...restProps} style={{ height, ...style }} />;
 };
 
 PanelSpinner.defaultProps = {
   height: 96,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(PanelSpinner);

package/src/components/PanelSpinner/Readme.md

@@ -1,11 +1,15 @@
 Этот компонент - обёртка над `<Spinner />` с заданными отступами и размером. Удобно использовать его во время загрузки данных.
 
 ```jsx static
-import { PanelSpinner } from '@vkontakte/vkui';
+import { PanelSpinner } from "@vkontakte/vkui";
 
 <Panel>
   <PanelHeader left={<PanelHeaderBack />}>Заголовок панели</PanelHeader>
 
-  {loading ? <PanelSpinner /> : <Group header={<Header mode="secondary">Информация</Header>}>...</Group>}
-</Panel>
+  {loading ? (
+    <PanelSpinner />
+  ) : (
+    <Group header={<Header mode="secondary">Информация</Header>}>...</Group>
+  )}
+</Panel>;
 ```

package/src/components/Placeholder/Placeholder.tsx

@@ -1,12 +1,14 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { hasReactNode } from '../../lib/utils';
-import Title from '../Typography/Title/Title';
-import Headline from '../Typography/Headline/Headline';
-import { HasRootRef } from '../../types';
-import './Placeholder.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { hasReactNode } from "../../lib/utils";
+import Title from "../Typography/Title/Title";
+import Headline from "../Typography/Headline/Headline";
+import { HasRootRef } from "../../types";
+import "./Placeholder.css";
 
-export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+export interface PlaceholderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
   /**
    * Иконка
    */
@@ -40,18 +42,29 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
     <div
       {...restProps}
       ref={getRootRef}
-      vkuiClass={classNames('Placeholder', {
-        'Placeholder--stretched': stretched,
+      vkuiClass={classNames("Placeholder", {
+        "Placeholder--stretched": stretched,
       })}
     >
       <div vkuiClass="Placeholder__in">
         {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
-        {hasReactNode(header) && <Title level="2" weight="medium" vkuiClass="Placeholder__header">{header}</Title>}
-        {hasReactNode(children) && <Headline weight="regular" vkuiClass="Placeholder__text">{children}</Headline>}
-        {hasReactNode(action) && <div vkuiClass="Placeholder__action">{action}</div>}
+        {hasReactNode(header) && (
+          <Title level="2" weight="medium" vkuiClass="Placeholder__header">
+            {header}
+          </Title>
+        )}
+        {hasReactNode(children) && (
+          <Headline weight="regular" vkuiClass="Placeholder__text">
+            {children}
+          </Headline>
+        )}
+        {hasReactNode(action) && (
+          <div vkuiClass="Placeholder__action">{action}</div>
+        )}
       </div>
     </div>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Placeholder;