feat(Root): tokenized

SevereCloud · SevereCloud · commit 83643b8fc714 · 2022-06-10T10:10:42.000+03:00
diff --git a/src/components/Root/Root.css b/src/components/Root/Root.css
@@ -36,6 +36,15 @@
   z-index: 2;
 }
 
+.Root__view--show-forward {
+  animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing);
+}
+
+.Root__view--hide-back {
+  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing)
+    forwards;
+}
+
 .Root__popout {
   position: fixed;
   left: 0;
@@ -138,20 +147,6 @@
  * 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)
-    forwards;
-}
-
 @keyframes vkui-root-android-animation-hide-back {
   from {
     transform: scale(1);
diff --git a/src/components/Root/Root.test.tsx b/src/components/Root/Root.test.tsx
@@ -7,7 +7,7 @@ import {
 import { render } from "@testing-library/react";
 import View from "../View/View";
 import ConfigProvider from "../ConfigProvider/ConfigProvider";
-import Root from "./Root";
+import { Root } from "./Root";
 
 const views = [
   <View id="v1" key="1" activePanel="" />,
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
@@ -1,6 +1,5 @@
 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";
@@ -46,7 +45,7 @@ const warn = warnOnce("Root");
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-const Root: React.FC<RootProps> = ({
+export const Root: React.FC<RootProps> = ({
   popout = null,
   modal,
   children,
@@ -152,10 +151,11 @@ const Root: React.FC<RootProps> = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Root", platform), {
-        "Root--transition": transition,
-      })}
+      vkuiClass={classNames(
+        "Root",
+        platform === IOS && "Root--ios",
+        transition && "Root--transition"
+      )}
     >
       {views.map((view) => {
         const viewId = getNavId(view.props, warn);
@@ -172,18 +172,26 @@ const Root: React.FC<RootProps> = ({
             key={viewId}
             ref={(e) => viewId && (viewNodes[viewId] = e)}
             onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
-            // eslint-disable-next-line vkui/no-object-expression-in-arguments
-            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,
-            })}
+            vkuiClass={classNames(
+              "Root__view",
+              transition &&
+                viewId === prevView &&
+                isBack &&
+                "Root__view--hide-back",
+              transition &&
+                viewId === prevView &&
+                !isBack &&
+                "Root__view--hide-forward",
+              transition &&
+                viewId === activeView &&
+                isBack &&
+                "Root__view--show-back",
+              transition &&
+                viewId === activeView &&
+                !isBack &&
+                "Root__view--show-forward",
+              !transition && viewId === activeView && "Root__view--active"
+            )}
           >
             <NavTransitionProvider
               entering={transition && viewId === activeView}
@@ -209,6 +217,3 @@ const Root: React.FC<RootProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Root;
diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,7 @@ import "./styles/common.css";
 /**
  * Layout
  */
-export { default as Root } from "./components/Root/Root";
+export { Root } from "./components/Root/Root";
 export type { RootProps } from "./components/Root/Root";
 export { default as View } from "./components/View/View";
 export type { ViewProps } from "./components/View/View";
diff --git a/src/tokenized/index.ts b/src/tokenized/index.ts
@@ -113,6 +113,9 @@ export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
 export { SplitCol } from "../components/SplitCol/SplitCol";
 export type { SplitColProps } from "../components/SplitCol/SplitCol";
 
+export { Root } from "../components/Root/Root";
+export type { RootProps } from "../components/Root/Root";
+
 export { Headline } from "../components/Typography/Headline/Headline";
 export type { HeadlineProps } from "../components/Typography/Headline/Headline";
 
diff --git a/styleguide/tokenized.js b/styleguide/tokenized.js
@@ -7,6 +7,7 @@ export const tokenized = [
   "Card",
   "CardScroll",
   "SegmentedControl",
+  "Root",
   "Textarea",
   "Title",
   "UsersStack",
