@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/PanelHeaderContext/PanelHeaderContext.css

@@ -1,143 +0,0 @@
-.PanelHeaderContext--opened,
-.PanelHeaderContext--closing {
-  width: 100%;
-  height: 100%;
-}
-
-.PanelHeaderContext--desktop.PanelHeaderContext--opened,
-.PanelHeaderContext--desktop.PanelHeaderContext--closing {
-  height: auto;
-}
-
-.PanelHeaderContext__in {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  z-index: 2;
-}
-
-.PanelHeaderContext__fade {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  background: rgba(0, 0, 0, 0.4);
-}
-
-.PanelHeaderContext--opened .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-in 0.2s ease;
-}
-
-.PanelHeaderContext--closing .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
-}
-
-/*
- iOS
- */
-
-.PanelHeaderContext--ios.PanelHeaderContext--opened .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
-}
-
-.PanelHeaderContext--ios.PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
-}
-
-.PanelHeaderContext--ios .List {
-  background: var(--header_background);
-}
-
-/*
- Android
- */
-.PanelHeaderContext--android .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom .PanelHeaderContext__in {
-  padding: 8px;
-  box-sizing: border-box;
-}
-
-.PanelHeaderContext--android.PanelHeaderContext--opened .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom.PanelHeaderContext--opened .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
-}
-
-.PanelHeaderContext--android.PanelHeaderContext--closing
-  .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom.PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
-}
-
-.PanelHeaderContext--android .List,
-.PanelHeaderContext--vkcom .List,
-.PanelHeaderContext--desktop.PanelHeaderContext--ios .List {
-  overflow: hidden;
-  border-radius: 12px;
-  padding: 8px 0;
-  background: var(--header_background);
-}
-
-/*
- Desktop
- */
-
-.PanelHeaderContext--desktop .PanelHeaderContext__in {
-  padding: 12px 8px;
-  box-sizing: border-box;
-}
-
-.PanelHeaderContext--desktop .PanelHeaderContext__content {
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--header_background);
-}
-
-.PanelHeaderContext--desktop .PanelHeaderContext__content {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
-}
-
-/*
-  Animations
- */
-
-@keyframes vkui-animation-panelheadercontext-translate-in {
-  from {
-    transform: translateY(-100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes vkui-animation-panelheadercontext-translate-out {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes vkui-animation-panelheadercontext-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes vkui-animation-panelheadercontext-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -1,85 +0,0 @@
-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> {
-  opened: boolean;
-  onClose: VoidFunction;
-}
-
-export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
-  children,
-  onClose,
-  opened = false,
-  ...restProps
-}) => {
-  const { document } = useDOM();
-  const platform = usePlatform();
-  const [visible, setVisible] = React.useState(opened);
-  const closing = visible && !opened;
-  const { viewWidth } = useAdaptivity();
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  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();
-        }
-      })
-  );
-
-  // fallback onAnimationEnd when animationend not supported
-  const onAnimationEnd = () => setVisible(false);
-  const animationFallback = useTimeout(onAnimationEnd, 200);
-  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 : undefined}
-      >
-        <div vkuiClass="PanelHeaderContext__content">{visible && children}</div>
-      </div>
-      {!isDesktop && visible && (
-        <div onClick={onClose} vkuiClass="PanelHeaderContext__fade" />
-      )}
-    </FixedLayout>
-  );
-};

package/src/components/PanelHeaderContext/Readme.md

@@ -1,110 +0,0 @@
-```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);
-      }
-
-      toggleContext() {
-        this.setState({ contextOpened: !this.state.contextOpened });
-      }
-
-      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;
-
-        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"
-                      >
-                        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 />;
-```

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -1,49 +0,0 @@
-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 {
-  /**
-   * Включен ли режим редактирования
-   */
-  isActive?: boolean;
-  /**
-   * iOS only. Текст кнопки, когда режим редактирования не активен
-   */
-  editLabel?: string;
-  /**
-   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него
-   */
-  doneLabel?: string;
-}
-
-const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
-  isActive,
-  editLabel,
-  doneLabel,
-  ...restProps
-}: PanelHeaderEditProps) => {
-  const iOSText = isActive ? doneLabel : editLabel;
-  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;
-  const platform = usePlatform();
-
-  return (
-    <PanelHeaderButton aria-label={iOSText} {...restProps}>
-      {platform === ANDROID || platform === VKCOM ? <AndroidIcon /> : iOSText}
-    </PanelHeaderButton>
-  );
-};
-
-PanelHeaderEdit.defaultProps = {
-  isActive: false,
-  editLabel: "Редактировать",
-  doneLabel: "Готово",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderEdit;

package/src/components/PanelHeaderEdit/Readme.md

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

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -1,37 +0,0 @@
-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,
-  ...restProps
-}: PanelHeaderButtonProps) => {
-  const platform = usePlatform();
-
-  return (
-    <PanelHeaderButton
-      aria-label={getTitleFromChildren(children)}
-      primary
-      {...restProps}
-    >
-      {platform === ANDROID || platform === VKCOM ? (
-        <Icon28DoneOutline />
-      ) : (
-        children
-      )}
-    </PanelHeaderButton>
-  );
-};
-
-PanelHeaderSubmit.defaultProps = {
-  children: "Готово",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PanelHeaderSubmit;

package/src/components/PanelHeaderSubmit/Readme.md

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

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -1,21 +0,0 @@
-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 }} />;
-};
-
-PanelSpinner.defaultProps = {
-  height: 96,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(PanelSpinner);

package/src/components/PanelSpinner/Readme.md

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

package/src/components/Placeholder/Placeholder.css

@@ -1,50 +0,0 @@
-.Placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.Placeholder--stretched {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  padding-top: inherit;
-  padding-bottom: inherit;
-}
-
-.Placeholder__in {
-  max-width: 100%;
-  text-align: center;
-  box-sizing: border-box;
-  padding: 48px 32px;
-}
-
-.Placeholder__icon {
-  margin-bottom: 12px;
-  display: inline-block;
-  vertical-align: top;
-  color: var(--placeholder_icon_foreground_secondary);
-}
-
-.Placeholder__header {
-  color: var(--text_primary);
-}
-
-.Placeholder__text {
-  color: var(--text_placeholder);
-}
-
-.Placeholder__header + .Placeholder__text {
-  margin-top: 8px;
-}
-
-.Placeholder__action:not(:first-child) {
-  margin-top: 24px;
-}
-
-.Placeholder__action .Button--lvl-tertiary {
-  top: -8px;
-}

package/src/components/Placeholder/Placeholder.tsx

@@ -1,70 +0,0 @@
-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> {
-  /**
-   * Иконка
-   */
-  icon?: React.ReactNode;
-  /**
-   * Заголовок плейсхолдера
-   */
-  header?: React.ReactNode;
-  /**
-   * Кнопка действия
-   */
-  action?: React.ReactNode;
-  /**
-   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
-   */
-  stretched?: boolean;
-}
-
-const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
-  const {
-    icon,
-    header,
-    action,
-    children,
-    stretched,
-    getRootRef,
-    ...restProps
-  } = props;
-
-  return (
-    <div
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={classNames("Placeholder", {
-        "Placeholder--stretched": stretched,
-      })}
-    >
-      <div vkuiClass="Placeholder__in">
-        {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
-        {hasReactNode(header) && (
-          <Title level="2" weight="2" 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;