💄 给工具列表添加TransitionGroup

package.json

@@ -1,7 +1,7 @@
 {
  "name": "verkfi",
  "version": "1.5.3",
- "devVersion": "726",
+ "devVersion": "729",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,
@@ -61,6 +61,8 @@
  "react-draggable": "^4.4.6",
  "react-filepond": "^7.1.2",
  "react-intl-universal": "^2.9.1",
+ "react-swipeable": "^7.0.1",
+ "react-transition-group": "^4.4.5",
  "sass": "^1.69.5",
  "sharp": "^0.32.6",
  "styled-components": "^5.3.11"
@@ -71,6 +73,7 @@
  "@types/node": "20.3.0",
  "@types/react": "18.2.11",
  "@types/react-dom": "18.2.4",
+ "@types/react-transition-group": "^4.4.10",
  "@types/three": "^0.152.1",
  "esbuild": "^0.18.20",
  "esbuild-loader": "^3.2.0",

src/app/index/ToolsStack.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import {
  Box,
+ Collapse,
  Stack
 } from "@mui/material";
 import style from "./Index.module.scss";
@@ -33,6 +34,9 @@ import {
 import reorder from '../components/reorder';
 import buttonCommonSorting from './buttonCommonSorting';
 import ToolsNotFound from './ToolsNotFound';
+import {
+ TransitionGroup
+} from 'react-transition-group';
 export default function ToolsStack(props: {
  paramTool: tool[];
  viewMode: viewMode;
@@ -85,15 +89,19 @@ export default function ToolsStack(props: {
  {provided => {
  return (
  <div ref={provided.innerRef} {...provided.droppableProps}>
- {props.paramTool.map((tool, index) => (
- <Draggable draggableId={tool.to} index={index} key={tool.to}>
- {provided => (
- <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
- <Insert index={index} tool={tool} />
- </div>
- )}
- </Draggable>
- ))}
+ <TransitionGroup>
+ {props.paramTool.map((tool, index) => (
+ <Collapse key={tool.to}>
+ <Draggable draggableId={tool.to} index={index}>
+ {provided => (
+ <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+ <Insert index={index} tool={tool} />
+ </div>
+ )}
+ </Draggable>
+ </Collapse>
+ ))}
+ </TransitionGroup>
  {provided.placeholder}
  </div>
  );
@@ -104,9 +112,15 @@ export default function ToolsStack(props: {
  );
  }
  function GridContainer() {
- return props.paramTool.map((tool, index) => (
- <Insert key={tool.to} tool={tool} index={index} />
- ));
+ return (
+ <TransitionGroup>
+ {props.paramTool.map((tool, index) => (
+ <Collapse key={tool.to}>
+ <Insert key={tool.to} tool={tool} index={index} />
+ </Collapse>
+ ))}
+ </TransitionGroup>
+ );
  }
  var darkModeFormStorage = useContext(darkModeContext).mode,
  darkMode = stringToBoolean(darkModeFormStorage.replace("light", "false").replace("dark", "true"));

src/app/layout.tsx

@@ -5,30 +5,31 @@ import {
  getRepoInfo
 } from "./components/getRepoInfo";
 export async function generateMetadata() {
- const repoInfo = await getRepoInfo();
+ const repoInfo = await getRepoInfo(),
+ upperName = repoInfo.name.charAt(0).toUpperCase() + repoInfo.name.slice(1);
  return ({
  manifest: "/index.webmanifest",
  description: repoInfo.description,
- applicationName: repoInfo.name,
+ applicationName: upperName,
  other: {
- "msapplication-tooltip": repoInfo.name,
+ "msapplication-tooltip": upperName,
  "msapplication-navbutton-color": "#1976d2",
  "msapplication-starturl": "/",
  },
  themeColor: "#1976d2",
  icons: "/image/favicon.png",
  appleWebApp: {
- title: repoInfo.name
+ title: upperName
  },
  title: {
- default: repoInfo.name,
- template: `%s | ${repoInfo.name}`
+ default: upperName,
+ template: `%s | ${upperName}`
  },
  openGraph: {
- title: repoInfo.name,
+ title: upperName,
  description: repoInfo.description,
  url: pack.homepage,
- siteName: repoInfo.name,
+ siteName: upperName,
  images: [
  {
  url: './image/social.png',