Merge branch 'router-fix' into develop

Pivot-Studio · Aug 10, 2023 · 0f2c6cb · 0f2c6cb
2 parents c2a19c7 + 6ae587d
commit 0f2c6cb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/packages/demo/index.tsx b/packages/demo/index.tsx
@@ -1,5 +1,5 @@
 import ReactDom from 'react-dom/client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { HashRouter, useLocation, useRoutes } from 'react-router-dom';
 import router from '@/routers';
 import './index.scss';
@@ -9,19 +9,35 @@ const App = () => {
   return useRoutes(router);
 };
 
-const AutoScrollToTop: React.FC<{ children: React.ReactElement }> = ({ children }) => {
-  const location = useLocation();
+function useScrollToHash() {
+  const { hash } = useLocation();
+  useEffect(() => {
+    if (hash && hash.length) {
+      const element = document.querySelector(`${hash}`);
+      if (element) {
+        console.log(element.getBoundingClientRect());
+        window.scrollTo({ top: element.getBoundingClientRect().top - 70, behavior: 'smooth' });
+      }
+    }
+  }, [hash]);
+}
+
+function useAutoScrollToTop() {
   useLayoutEffect(() => {
     document.documentElement.scrollTo(0, 0);
   }, [location.pathname]);
+}
+
+const GlobalWrap: React.FC<{ children: React.ReactElement }> = ({ children }) => {
+  useAutoScrollToTop();
+  useScrollToHash();
   return children;
 };
 
 ReactDom.createRoot(document.getElementById('root') as HTMLElement).render(
   <HashRouter>
-    <AutoScrollToTop>
+    <GlobalWrap>
       <App />
-    </AutoScrollToTop>
+    </GlobalWrap>
   </HashRouter>
-
 );
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/runtime": "^1.6.22",
     "babel-plugin-prismjs": "^2.1.0",
     "gsap": "^3.11.5",
     "pivot-design": "workspace:*",

diff --git a/packages/demo/src/pages/component/index.tsx b/packages/demo/src/pages/component/index.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+// import router from '@/routers';
 import './index.scss';
+
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import router, { ExtraRoute } from '@/routers';
-import { Outlet, useNavigate } from 'react-router-dom';
 import { list as DraggableList } from '../../components/Draggable/.catalog';
 import { list as ButtonList } from '../../components/Button/.catalog';
 import { list as InputList } from '../../components/Input/.catalog';
@@ -32,6 +34,14 @@ function getRouterConfig(router: ExtraRoute[], targetPath: string) {
 function Index() {
   const [select, setSelect] = useState('Draggable');
   const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.pathname === '/components') {
+      navigate('./button');
+      setSelect('button');
+    }
+  }, []);
 
   function handleClickButton(component: string) {
     setSelect(component);
@@ -63,6 +73,7 @@ function Index() {
         {componentsList.map((item) => (
           <div
             className={`demo-item ${select === item.path ? 'active' : ''}`}
+            key={item.path}
             onClick={() => handleClickButton(item.path)}
           >
             {item.name}