BREAKING CHANGE: new version of VKUI

- Обновлен VKUI до последней версии, что привело к изменениям в структуре приложения и отказу от некоторых хуков. - Обновлен шаблон-пример с точки зрения модальных окон. Также добавлена новая страница для навигации.
LukasAndreano · Sep 14, 2024 · 13f8920 · 13f8920
1 parent 8e2a5db
commit 13f8920
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 200 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@kokateam/router-vkminiapps": "^0.2.6",
     "@vkontakte/icons": "^2.139.0",
     "@vkontakte/vk-bridge": "^2.15.0",
-    "@vkontakte/vkui": "4.41.0",
+    "@vkontakte/vkui": "^6.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,67 +1,58 @@
 import { useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 import {
-  AppearanceProvider,
   AppRoot,
   ConfigProvider,
-  usePlatform,
-  withAdaptivity,
+  useAdaptivityWithJSMediaQueries,
+  usePlatform
 } from "@vkontakte/vkui";
 
 import Navigation from "/src/Navigation";
 import bridge from "@vkontakte/vk-bridge";
 import main from "/src/storage/atoms/main";
 import SnackbarProvider from "./components/__global/SnackbarProvider";
 
-const App = withAdaptivity(
-  ({ viewWidth }) => {
-    const [theme, setTheme] = useState("light");
-    const [mainCoil, updateMainCoil] = useRecoilState(main);
-
-    const platform = usePlatform();
-
-    const isDesktop =
-      viewWidth > 3 ||
-      new URLSearchParams(window.location.search).get("vk_platform") ===
-        "desktop_web";
-
-    useEffect(() => {
-      bridge.subscribe(({ detail: { type, data } }) => {
-        if (type === "VKWebAppUpdateConfig")
-          setTheme(data?.scheme.includes("light") ? "light" : "dark");
-      });
-    }, []);
-
-    useEffect(() => {
-      bridge.send("VKWebAppInit").then(() => console.log("VKWebAppInit"));
-
-      updateMainCoil({
-        ...mainCoil,
-        isDesktop,
-        platform,
-      });
-    }, []);
-
-    return (
-      <ConfigProvider
-        locale={"ru"}
-        isWebView={false}
-        appearance={theme}
-        platform={isDesktop ? "android" : platform}
-      >
-        <AppearanceProvider appearance={theme}>
-          <AppRoot mode="full" className={isDesktop ? "desktop" : "mobile"}>
-            <SnackbarProvider>
-              <Navigation isDesktop={isDesktop} />
-            </SnackbarProvider>
-          </AppRoot>
-        </AppearanceProvider>
-      </ConfigProvider>
-    );
-  },
-  {
-    viewWidth: true,
-  },
-);
+bridge.send("VKWebAppInit").then(() => console.log("VKWebAppInit"));
+
+const App = () => {
+  const [theme, setTheme] = useState("light");
+  const [mainCoil, updateMainCoil] = useRecoilState(main);
+
+  const platform = usePlatform();
+  const { viewWidth } = useAdaptivityWithJSMediaQueries();
+
+  const isDesktop = viewWidth >= 3 || platform === "vkcom";
+
+  useEffect(() => {
+    bridge.subscribe(({ detail: { type, data } }) => {
+      if (type === "VKWebAppUpdateConfig" && data?.appearance)
+        setTheme(data.appearance);
+    });
+  }, []);
+
+  useEffect(() => {
+    updateMainCoil({
+      ...mainCoil,
+      isDesktop,
+      platform
+    });
+  }, [isDesktop, platform]);
+
+  return (
+    <ConfigProvider
+      locale={"ru"}
+      isWebView={true}
+      appearance={theme}
+      platform={isDesktop ? "android" : platform}
+      hasCustomPanelHeaderAfter
+    >
+      <AppRoot mode="full" userSelectMode={"disabled"}>
+        <SnackbarProvider>
+          <Navigation isDesktop={isDesktop} />
+        </SnackbarProvider>
+      </AppRoot>
+    </ConfigProvider>
+  );
+};
 
 export default App;
diff --git a/src/Main.jsx b/src/Main.jsx
@@ -1,8 +1,8 @@
 import "/src/assets/css/global.scss";
 
 import { createRoot } from "react-dom/client";
-import { AdaptivityProvider } from "@vkontakte/vkui";
 import { RouterRoot } from "@kokateam/router-vkminiapps";
+import { AdaptivityProvider } from "@vkontakte/vkui";
 
 import App from "/src/App";
 

diff --git a/src/Navigation.jsx b/src/Navigation.jsx
@@ -1,39 +1,48 @@
-import { PanelHeader, SplitCol, SplitLayout } from "@vkontakte/vkui";
+import {
+  PanelHeader,
+  SplitCol,
+  SplitLayout
+} from "@vkontakte/vkui";
 import { Epic, View, useRouterPopout } from "@kokateam/router-vkminiapps";
 import PageConstructor from "/src/components/__global/PageConstructor";
 import Home from "./panels/home/home";
 import MainStack from "./modals/MainStack";
 import DesktopNavigation from "./components/__navigation/Desktop";
 import MobileNavigation from "./components/__navigation/Mobile";
+import Profile from "./panels/profile/profile";
 
 const Navigation = ({ isDesktop }) => {
   const [popout] = useRouterPopout();
 
   return (
     <SplitLayout
-      header={<PanelHeader separator={false} />}
-      className={"jcc"}
+      header={<PanelHeader />}
       modal={<MainStack />}
       popout={popout}
     >
       {isDesktop ? <DesktopNavigation /> : null}
 
-      <SplitCol
-        animate={!isDesktop}
-        spaced={isDesktop}
-        width={isDesktop ? "650px" : "100%"}
-        maxWidth={isDesktop ? "650px" : "100%"}
-      >
-        <Epic tabbar={!isDesktop ? <MobileNavigation /> : null}>
+      <SplitCol autoSpaced>
+        <Epic
+          tabbar={
+            !isDesktop ? <MobileNavigation /> : null
+          }
+        >
           <View id="home">
             <PageConstructor id={"home"} name={"Главная"}>
               <Home />
             </PageConstructor>
 
-            <PageConstructor id={"home2"} name={"Главная 2"}>
+            <PageConstructor isBack id={"home2"} name={"Главная 2"}>
               <Home />
             </PageConstructor>
           </View>
+
+          <View id="profile">
+            <PageConstructor id={"profile"} name={"Профиль"}>
+              <Profile />
+            </PageConstructor>
+          </View>
         </Epic>
       </SplitCol>
     </SplitLayout>

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
@@ -1,10 +1,5 @@
 @import "@vkontakte/vkui/dist/vkui.css", "variables.scss";
 
-body,
-.Header {
-  user-select: none;
-}
-
 body[scheme="bright_dark"],
 [scheme="bright_dark"],
 .vkuibright_dark,
@@ -18,6 +13,10 @@ body[scheme="vkcom_dark"],
   }
 }
 
+.vkuiSplitLayout {
+  height: auto;
+}
+
 .vkuiTabbarItem {
   .vkuiTappable {
     display: none;
@@ -34,7 +33,11 @@ body[scheme="vkcom_dark"],
 }
 
 .navigation__item-selected {
-  background-color: var(--vkui--color_background--hover);
+  background-color: var(--vkui--color_field_background);
+}
+
+.vkuiFormItem--withPadding {
+  padding: 10px 0 0;
 }
 
 .panelPadding {
@@ -46,3 +49,9 @@ body[scheme="vkcom_dark"],
     margin-top: 30px;
   }
 }
+
+.header {
+  margin-left: var(--vkui--size_split_col_padding_horizontal--regular);
+
+  background: var(--vkui--color_background_content);
+}
diff --git a/src/assets/css/variables.scss b/src/assets/css/variables.scss
@@ -6,8 +6,12 @@
   margin-top: 10px;
 }
 
-.jcc {
-  justify-content: center;
+.p16 {
+  padding: 16px;
+}
+
+.mb5 {
+  margin-bottom: 5px;
 }
 
 .mt5 {

diff --git a/src/components/__global/ModalConstructor.jsx b/src/components/__global/ModalConstructor.jsx
@@ -1,9 +1,7 @@
 import { useRecoilValue } from "recoil";
 
 import {
-  ANDROID,
   Group,
-  IOS,
   ModalPage,
   ModalPageHeader,
   PanelHeaderButton,
@@ -34,7 +32,7 @@ const ModalConstructor = ({
         <ModalPageHeader
           after={
             !isDesktop &&
-            platform === IOS && (
+            platform === "ios" && (
               <PanelHeaderButton
                 aria-label={"Закрытие модального окна"}
                 onClick={close}
@@ -45,14 +43,14 @@ const ModalConstructor = ({
           }
           before={
             !isDesktop &&
-            platform === ANDROID && <PanelHeaderClose onClick={close} />
+            platform === "android" && <PanelHeaderClose onClick={close} />
           }
         >
           {title}
         </ModalPageHeader>
       }
     >
-      <Group className={"panelPadding"}>{children}</Group>
+      <Group className={"p16"}>{children}</Group>
     </ModalPage>
   );
 };

diff --git a/src/components/__global/PageConstructor.jsx b/src/components/__global/PageConstructor.jsx
@@ -1,7 +1,6 @@
 import { Suspense } from "react";
 import { useRecoilValue } from "recoil";
 import { useRouterBack } from "@kokateam/router-vkminiapps";
-
 import { Group, Panel, PanelHeader, PanelHeaderBack } from "@vkontakte/vkui";
 import { getIsDesktop } from "/src/storage/selectors/main";
 
@@ -26,7 +25,7 @@ const Page = ({
         before={
           isBack ? <PanelHeaderBack onClick={() => toBack(-1)} /> : undefined
         }
-        separator={isDesktop}
+        delimiter={isDesktop ? "none" : "separator"}
       >
         {name}
       </PanelHeader>

diff --git a/src/components/__global/SnackbarProvider.jsx b/src/components/__global/SnackbarProvider.jsx
@@ -13,8 +13,8 @@ export default function SnackbarProvider({ children }) {
         toastOptions={{
           className: "toast",
         }}
-        gutter={isDesktop ? 8 : -20}
-        position={isDesktop ? "bottom-left" : "top-center"}
+        gutter={8}
+        position={isDesktop ? "bottom-left" : "bottom-center"}
         reverseOrder={false}
       />
     </>

diff --git a/src/components/__navigation/Desktop.jsx b/src/components/__navigation/Desktop.jsx
@@ -1,30 +1,42 @@
 import { useRouterView } from "@kokateam/router-vkminiapps";
-import { Panel, PanelHeader, SimpleCell, SplitCol } from "@vkontakte/vkui";
+import {
+  Card,
+  Panel,
+  PanelHeader,
+  SimpleCell,
+  SplitCol
+} from "@vkontakte/vkui";
 import navigationItems from "/src/components/__navigation/items";
 
 const DesktopNavigation = () => {
-  const { view, toView } = useRouterView();
+  const [view, toView] = useRouterView();
 
   return (
-    <SplitCol fixed width="240px" maxWidth="240px">
+    <SplitCol fixed width="280px" maxWidth="280px">
       <Panel nav="navigationDesktop">
         <PanelHeader>Boilerplate</PanelHeader>
 
-        {navigationItems.map((el, key) => (
-          <SimpleCell
-            key={key}
-            className={`mb5 ${
-              view === el.id ? "navigation__item-selected" : ""
-            }`}
-            onClick={() => toView(el.id)}
-            disabled={view === el.id}
-            before={el.icon}
-            multiline
-            description={el.description}
-          >
-            {el.title}
-          </SimpleCell>
-        ))}
+        <Card mode={"outline"} className={"header p5"}>
+          {navigationItems.map((el, key) => (
+            <SimpleCell
+              key={key}
+              className={`mb5 ${
+                view === el.id ? "navigation__item-selected" : ""
+              }`}
+              onClick={() => {
+                if (view !== el.id)
+                  toView(el.id);
+              }}
+              hasActive={view !== el.id}
+              hasHover={view !== el.id}
+              before={el.icon}
+              multiline
+              description={el.description}
+            >
+              {el.title}
+            </SimpleCell>
+          ))}
+        </Card>
       </Panel>
     </SplitCol>
   );