@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Root/Readme.md

@@ -0,0 +1,36 @@
+Используется для создания модальных окон. Содержимое `Root` – это коллекция `View`. У каждой `View` должен быть `id`.
+Свойство `activeView` определяет, какая `View` сейчас активна.
+
+При смене значения свойства `activeView` происходит плавный переход от одной `View` к другой.
+Как только он заканчивается, вызывается свойство-функция `onTransition`.
+
+```jsx
+const [activeView, setActiveView] = useState("view1");
+
+<Root activeView={activeView}>
+  <View activePanel="panel1.1" id="view1">
+    <Panel id="panel1.1">
+      <PanelHeader>View 1</PanelHeader>
+      <Group>
+        <div style={{ height: 200 }} />
+        <CellButton onClick={() => setActiveView("view2")}>
+          Open View 2
+        </CellButton>
+        <div style={{ height: 600 }} />
+      </Group>
+    </Panel>
+  </View>
+  <View header activePanel="panel2.1" id="view2">
+    <Panel id="panel2.1">
+      <PanelHeader>View 2</PanelHeader>
+      <Group>
+        <div style={{ height: 200 }} />
+        <CellButton onClick={() => setActiveView("view1")}>
+          Back to View 1
+        </CellButton>
+        <div style={{ height: 600 }} />
+      </Group>
+    </Panel>
+  </View>
+</Root>;
+```

package/src/components/Root/Root.css

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

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

@@ -0,0 +1,43 @@
+Компонент-обертка над [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

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

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