From 8ba3867a519e2eaf77a06736a8971171bd2b6df3 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Mon, 9 Jan 2023 21:51:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0nav=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |  3 +-
 pnpm-lock.yaml                        | 26 ++++++++
 src/routers/layout/header.tsx         |  2 +
 src/routers/layout/layout.module.less |  1 +
 src/routers/layout/nav.tsx            | 89 +++++++++++++++------------
 5 files changed, 81 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 8d0464d..efebc9e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "localdev":"vite --host 192.168.2.250"
+    "localdev": "vite --host 192.168.2.250"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.7",
@@ -26,6 +26,7 @@
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-flip-toolkit": "^7.0.17",
     "react-intersection-observer": "^9.4.1",
     "react-photo-view": "^1.2.3",
     "react-router-dom": "^6.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b152e8a..10bd8fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,7 @@ specifiers:
   normalize.css: ^8.0.1
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-flip-toolkit: ^7.0.17
   react-intersection-observer: ^9.4.1
   react-photo-view: ^1.2.3
   react-router-dom: ^6.6.1
@@ -54,6 +55,7 @@ dependencies:
   normalize.css: 8.0.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-flip-toolkit: 7.0.17_biqbaboplfbrettd7655fr4n2y
   react-intersection-observer: 9.4.1_react@18.2.0
   react-photo-view: 1.2.3_biqbaboplfbrettd7655fr4n2y
   react-router-dom: 6.6.1_biqbaboplfbrettd7655fr4n2y
@@ -1465,6 +1467,13 @@ packages:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
     dev: false
 
+  /flip-toolkit/7.0.17:
+    resolution: {integrity: sha512-bybUdLNbC80F0+v+t3TBfxEAMVGhvXLi3pZ+qTtr4aCu/Y/5YQimMij0xJKT1qtz4SO31V4zftIgaTJdCCFiHA==}
+    engines: {node: '>=8', npm: '>=5'}
+    dependencies:
+      rematrix: 0.2.2
+    dev: false
+
   /fs-extra/10.1.0:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
@@ -1861,6 +1870,19 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-flip-toolkit/7.0.17_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-dvL7CddwsPm5QHH3rRC5/I5Vjl6hp/QwqcFNIfA4ScfnbSf2xMaAMaPg0frIt0Vm+GO0PXf89hJ9RDmkGzqHKw==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: '>= 16.x'
+      react-dom: '>= 16.x'
+    dependencies:
+      flip-toolkit: 7.0.17
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react-intersection-observer/9.4.1_react@18.2.0:
     resolution: {integrity: sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==}
     peerDependencies:
@@ -1969,6 +1991,10 @@ packages:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
     dev: false
 
+  /rematrix/0.2.2:
+    resolution: {integrity: sha512-agFFS3RzrLXJl5LY5xg/xYyXvUuVAnkhgKO7RaO9J1Ssth6yvbO+PIiV67V59MB5NCdAK2flvGvNT4mdKVniFA==}
+    dev: false
+
   /require-directory/2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
index 53bf554..9ecce1a 100644
--- a/src/routers/layout/header.tsx
+++ b/src/routers/layout/header.tsx
@@ -11,10 +11,12 @@ import {
 import Header_Nav from "./nav";
 import styles from "./layout.module.less";
 import { useFocus } from "./hooks";
+import { ListShuffler } from "./test";
 export default function Header() {
   return (
     <header>
       <Search />
+      {/* <ListShuffler /> */}
       <Header_Nav />
     </header>
   );
diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
index 620130b..0a37ea9 100644
--- a/src/routers/layout/layout.module.less
+++ b/src/routers/layout/layout.module.less
@@ -82,6 +82,7 @@
     position: relative;
     overflow: hidden;
     margin: 10px;
+    background-color: aquamarine;
 
     .navstack {
         overflow-x: auto;
diff --git a/src/routers/layout/nav.tsx b/src/routers/layout/nav.tsx
index 36b1961..f925319 100644
--- a/src/routers/layout/nav.tsx
+++ b/src/routers/layout/nav.tsx
@@ -22,6 +22,7 @@ import { nanoid } from "nanoid";
 import styles from "./layout.module.less";
 import { FC, useState, useEffect, useMemo, memo } from "react";
 import { Pick } from "@utils/index";
+import { Flipped, Flipper } from "react-flip-toolkit";
 //todo 拆分组件
 //todo 修改文件夹
 export default function Header_Nav() {
@@ -68,27 +69,33 @@ export default function Header_Nav() {
     [navLists]
   );
   return (
-    <div className={styles["nav"]}>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-        modifiers={[restrictToParentElement]}
-      >
-        <Stack
-          direction='row'
-          alignItems='center'
-          className={`${styles["navstack"]}`}
-          style={{
-            display: showed ? "grid" : "flex",
-          }}
-          data-showed={showed}
-        >
-          <SortableContext items={navLists}>{ComRes}</SortableContext>
-          <NavInViewItem handlerClick={() => setShow((show) => !show)} />
-        </Stack>
-      </DndContext>
-    </div>
+    <Flipper flipKey={showed} decisionData={showed} spring={"veryGentle"}>
+      <Flipped flipId={"list"} spring={"veryGentle"}>
+        <div className={styles["nav"]}>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+            modifiers={[restrictToParentElement]}
+          >
+            <Flipped inverseFlipId='list'>
+              <Stack
+                direction='row'
+                alignItems='center'
+                className={`${styles["navstack"]}`}
+                style={{
+                  display: showed ? "grid" : "flex",
+                }}
+                data-showed={showed}
+              >
+                <SortableContext items={navLists}>{ComRes}</SortableContext>
+                <NavInViewItem handlerClick={() => setShow((show) => !show)} />
+              </Stack>
+            </Flipped>
+          </DndContext>
+        </div>
+      </Flipped>
+    </Flipper>
   );
 }
 
@@ -106,15 +113,17 @@ const NavInViewItem: FC<{
           width: "1px",
         }}
       ></span>
-      <div
-        className={styles["nav-right-show-btn"]}
-        onClick={handlerClick}
-        style={{
-          display: inView ? "none" : "flex",
-        }}
-      >
-        <SegmentIcon fontSize='medium' />
-      </div>
+      <Flipped flipId={"nav-right"} delayUntil='list'>
+        <div
+          className={styles["nav-right-show-btn"]}
+          onClick={handlerClick}
+          style={{
+            display: inView ? "none" : "flex",
+          }}
+        >
+          <SegmentIcon fontSize='medium' />
+        </div>
+      </Flipped>
     </>
   );
 };
@@ -127,15 +136,17 @@ const NavItem: FC<NavListItemType> = memo((props) => {
     transition,
   };
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      {props.type === "router" ? (
-        <NavRouterChipItem
-          {...Pick(props as NavRouterItemType, "pathname", "name")}
-        />
-      ) : (
-        <NavTagChipItem {...Pick(props as NavQueryItemType, "query")} />
-      )}
-    </div>
+    <Flipped flipId={props.id} translate spring={"veryGentle"}>
+      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+        {props.type === "router" ? (
+          <NavRouterChipItem
+            {...Pick(props as NavRouterItemType, "pathname", "name")}
+          />
+        ) : (
+          <NavTagChipItem {...Pick(props as NavQueryItemType, "query")} />
+        )}
+      </div>
+    </Flipped>
   );
 });