@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Root/Root.css

@@ -1,184 +0,0 @@
-.Root {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.Root--transition {
-  pointer-events: none;
-}
-
-.Root__view {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.Root--transition .Root__view {
-  position: fixed;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-}
-
-.Root__scrollCompensation {
-  width: 100%;
-  height: 100%;
-}
-
-.Root__view--show-back,
-.Root__view--hide-forward {
-  z-index: 1;
-}
-
-.Root__view--show-forward,
-.Root__view--hide-back {
-  z-index: 2;
-}
-
-.Root__popout {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 100;
-  width: 100%;
-  height: 100%;
-}
-
-.Root__modal {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 99;
-  width: 100%;
-  height: 100%;
-}
-
-.Root__modal:empty {
-  display: none;
-}
-
-/**
- * iOS
- */
-
-.Root--ios {
-}
-
-.Root--ios .Root__view--show-back::after,
-.Root--ios .Root__view--hide-forward::after {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  display: block;
-  content: "";
-  background-color: #000;
-  z-index: 6;
-}
-
-.Root--ios .Root__view--show-back::after {
-  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing);
-}
-
-.Root--ios .Root__view--hide-forward::after {
-  animation: vkui-root-ios-animation-hide-forward 0.6s var(--ios-easing);
-}
-
-.Root--ios .Root__view--show-forward {
-  animation: vkui-root-ios-animation-show-forward 0.6s var(--ios-easing);
-}
-
-.Root--ios .Root__view--hide-back {
-  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing);
-}
-
-@keyframes vkui-root-ios-animation-show-back {
-  from {
-    opacity: 0.3;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes vkui-root-ios-animation-hide-forward {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 0.3;
-  }
-}
-
-@keyframes vkui-root-ios-animation-hide-back {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes vkui-root-ios-animation-show-forward {
-  from {
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-/**
- * Android
- */
-
-.Root--android {
-}
-
-.Root--android .Root__view--show-forward,
-.Root--vkcom .Root__view--show-forward {
-  animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing);
-}
-
-.Root--android .Root__view--hide-back,
-.Root--vkcom .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing);
-}
-
-@keyframes vkui-root-android-animation-hide-back {
-  from {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  to {
-    transform: scale(1.05);
-    opacity: 0;
-  }
-}
-
-@keyframes vkui-root-android-animation-show-forward {
-  from {
-    transform: scale(1.05);
-    opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* iOS + Android */
-
-.Root--ios.Root--no-motion .Root__view,
-.Root--android.Root--no-motion .Root__view,
-.Root--vkcom.Root--no-motion .Root__view {
-  animation: none;
-}

package/src/components/Root/Root.tsx

@@ -1,209 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { IOS } from "../../lib/platform";
-import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
-import { SplitColContext } from "../SplitCol/SplitCol";
-import { AppRootPortal } from "../AppRoot/AppRootPortal";
-import { ScrollContext } from "../AppRoot/ScrollContext";
-import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
-import { getNavId, NavIdProps } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import { useDOM } from "../../lib/dom";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { useTimeout } from "../../hooks/useTimeout";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./Root.css";
-
-export interface RootProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    NavIdProps {
-  activeView: string;
-  onTransition?(params: { isBack: boolean; from: string; to: string }): void;
-  /**
-   * @deprecated будет удалено в 5.0.0. Используйте одноименное свойство у `SplitLayout`.
-   *
-   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
-   */
-  popout?: React.ReactNode;
-  /**
-   * @deprecated будет удалено в 5.0.0. Используйте одноименное свойство у `SplitLayout`.
-   *
-   * Свойство для отрисовки `ModalRoot`.
-   */
-  modal?: React.ReactNode;
-}
-
-export interface RootState {
-  activeView: string;
-  transition: boolean;
-  isBack?: boolean;
-  prevView?: string;
-}
-
-const warn = warnOnce("Root");
-const Root: React.FC<RootProps> = ({
-  popout = null,
-  modal,
-  children,
-  activeView: _activeView,
-  onTransition,
-  nav,
-  ...restProps
-}: RootProps) => {
-  const scroll = React.useContext(ScrollContext);
-  const platform = usePlatform();
-  const { document } = useDOM();
-  const scrolls = React.useRef<Record<string, number>>({}).current;
-  const viewNodes = React.useRef<Record<string, HTMLElement | null>>(
-    {}
-  ).current;
-
-  const { transitionMotionEnabled = true } = React.useContext(
-    ConfigProviderContext
-  );
-  const { animate } = React.useContext(SplitColContext);
-  const disableAnimation = !transitionMotionEnabled || !animate;
-
-  const views = React.Children.toArray(children) as React.ReactElement[];
-
-  const [{ prevView, activeView, transition, isBack }, _setState] =
-    React.useState<RootState>({
-      activeView: _activeView,
-      transition: false,
-    });
-  const transitionTo = (panel: string) => {
-    if (panel !== activeView) {
-      const viewIds = views.map((view) => getNavId(view.props, warn));
-      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);
-      scrolls[activeView] = scroll.getScroll().y;
-      _setState({
-        activeView: panel,
-        prevView: activeView,
-        transition: true,
-        isBack,
-      });
-    }
-  };
-  const finishTransition = React.useCallback(
-    () => _setState({ activeView, prevView, isBack, transition: false }),
-    [activeView, isBack, prevView]
-  );
-
-  useIsomorphicLayoutEffect(() => {
-    (document!.activeElement as HTMLElement).blur();
-  }, [!!popout, activeView]);
-
-  // Нужен переход
-  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);
-  useIsomorphicLayoutEffect(() => {
-    if (!transition && prevView) {
-      // Закончился переход
-      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);
-      onTransition &&
-        onTransition({
-          isBack: Boolean(isBack),
-          from: prevView,
-          to: activeView,
-        });
-    }
-  }, [transition]);
-
-  const fallbackTransition = useTimeout(
-    finishTransition,
-    platform === IOS ? 600 : 300
-  );
-  React.useEffect(() => {
-    if (!transition) {
-      fallbackTransition.clear();
-      return;
-    }
-    disableAnimation ? finishTransition() : fallbackTransition.set();
-  }, [disableAnimation, fallbackTransition, finishTransition, transition]);
-
-  const onAnimationEnd = (e: React.AnimationEvent) => {
-    if (
-      [
-        "vkui-root-android-animation-hide-back",
-        "vkui-root-android-animation-show-forward",
-        "vkui-root-ios-animation-hide-back",
-        "vkui-root-ios-animation-show-forward",
-      ].includes(e.animationName)
-    ) {
-      finishTransition();
-    }
-  };
-
-  if (process.env.NODE_ENV === "development") {
-    popout &&
-      warn(
-        "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
-      );
-    modal &&
-      warn(
-        "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
-      );
-  }
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(getClassName("Root", platform), {
-        "Root--transition": !disableAnimation && transition,
-        "Root--no-motion": disableAnimation,
-      })}
-    >
-      {views.map((view) => {
-        const viewId = getNavId(view.props, warn);
-        if (viewId !== activeView && !(transition && viewId === prevView)) {
-          return null;
-        }
-        const isTransitionTarget =
-          transition && viewId === (isBack ? prevView : activeView);
-        const compensateScroll =
-          transition &&
-          (viewId === prevView || (isBack && viewId === activeView));
-        return (
-          <div
-            key={viewId}
-            ref={(e) => viewId && (viewNodes[viewId] = e)}
-            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
-            vkuiClass={classNames("Root__view", {
-              "Root__view--hide-back":
-                transition && viewId === prevView && isBack,
-              "Root__view--hide-forward":
-                transition && viewId === prevView && !isBack,
-              "Root__view--show-back":
-                transition && viewId === activeView && isBack,
-              "Root__view--show-forward":
-                transition && viewId === activeView && !isBack,
-              "Root__view--active": !transition && viewId === activeView,
-            })}
-          >
-            <NavTransitionProvider
-              entering={transition && viewId === activeView}
-            >
-              <div
-                vkuiClass="Root__scrollCompensation"
-                style={{
-                  marginTop: compensateScroll
-                    ? viewId && -(scrolls[viewId] ?? 0)
-                    : undefined,
-                }}
-              >
-                {view}
-              </div>
-            </NavTransitionProvider>
-          </div>
-        );
-      })}
-      <AppRootPortal>
-        {!!popout && <div vkuiClass="Root__popout">{popout}</div>}
-        {!!modal && <div vkuiClass="Root__modal">{modal}</div>}
-      </AppRootPortal>
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Root;

package/src/components/ScreenSpinner/Readme.md

@@ -1,43 +0,0 @@
-Компонент-обертка над [Spinner](#!/Spinner).
-
-Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
-
-Рекомендуется использовать в случаях, когда требуется заблокировать интерфейс до завершения асинхронного процесса.
-
-```jsx { "props": { "layout": false, "adaptivity": true } }
-class Example extends React.Component {
-  constructor(props) {
-    this.state = {
-      popout: null,
-    };
-  }
-
-  onClick() {
-    this.setState({ popout: <ScreenSpinner /> });
-    setTimeout(() => {
-      this.setState({ popout: null });
-    }, 2000);
-  }
-
-  render() {
-    return (
-      <SplitLayout popout={this.state.popout}>
-        <SplitCol>
-          <View activePanel="spinner">
-            <Panel id="spinner">
-              <PanelHeader>ScreenSpinner</PanelHeader>
-              <Group>
-                <CellButton onClick={this.onClick.bind(this)}>
-                  Запустить долгий процесс
-                </CellButton>
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/ScreenSpinner/ScreenSpinner.css

@@ -1,31 +0,0 @@
-.ScreenSpinner {
-  animation: vkui-screen-spinner-intro 0.3s ease;
-}
-
-.ScreenSpinner__container {
-  width: 88px;
-  height: 88px;
-  background: var(--tabbar_background);
-  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
-}
-
-.ScreenSpinner--ios .ScreenSpinner__container {
-  background: var(--modal_card_background);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 0 96px 0 rgba(0, 0, 0, 0.16);
-  border-radius: 10px;
-}
-
-.ScreenSpinner--ios .ScreenSpinner__spinner {
-  color: var(--overlay_status_icon);
-}
-
-@keyframes vkui-screen-spinner-intro {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-import Spinner, { SpinnerProps } from "../Spinner/Spinner";
-import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./ScreenSpinner.css";
-
-export type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &
-  SpinnerProps;
-
-const ScreenSpinner: React.FC<ScreenSpinnerProps> = (
-  props: ScreenSpinnerProps
-) => {
-  const { style, className, ...restProps } = props;
-  const platform = usePlatform();
-
-  return (
-    <PopoutWrapper
-      hasMask={false}
-      vkuiClass={getClassName("ScreenSpinner", platform)}
-      className={className}
-      style={style}
-    >
-      <div vkuiClass="ScreenSpinner__container">
-        <Spinner vkuiClass="ScreenSpinner__spinner" {...restProps} />
-      </div>
-    </PopoutWrapper>
-  );
-};
-
-ScreenSpinner.defaultProps = {
-  size: "large",
-  "aria-label": "Пожалуйста, подождите...",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ScreenSpinner;