From 33decf061cb95701547ef2d9e805778fa469c058 Mon Sep 17 00:00:00 2001 From: Neila Date: Sun, 10 Dec 2023 21:59:18 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E7=BB=99=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0TransitionGroup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 ++++- pnpm-lock.yaml | 18 ++++++++++++++++- src/app/index/ToolsStack.tsx | 38 ++++++++++++++++++++++++------------ src/app/layout.tsx | 17 ++++++++-------- 4 files changed, 56 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 56e4d9db..78299450 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72791127..2f2ca61c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,12 @@ dependencies: react-intl-universal: specifier: ^2.9.1 version: 2.9.1(react@18.2.0) + react-swipeable: + specifier: ^7.0.1 + version: 7.0.1(react@18.2.0) + react-transition-group: + specifier: ^4.4.5 + version: 4.4.5(react-dom@18.2.0)(react@18.2.0) sass: specifier: ^1.69.5 version: 1.69.5 @@ -118,6 +124,9 @@ devDependencies: '@types/react-dom': specifier: 18.2.4 version: 18.2.4 + '@types/react-transition-group': + specifier: ^4.4.10 + version: 4.4.10 '@types/three': specifier: ^0.152.1 version: 0.152.1 @@ -1442,7 +1451,6 @@ packages: resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==} dependencies: '@types/react': 18.2.11 - dev: false /@types/react@18.2.11: resolution: {integrity: sha512-+hsJr9hmwyDecSMQAmX7drgbDpyE+EgSF6t7+5QEBAn1tQK7kl1vWZ4iRf6SjQ8lk7dyEULxUmZOIpN0W5baZA==} @@ -3996,6 +4004,14 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false + /react-swipeable@7.0.1(react@18.2.0): + resolution: {integrity: sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==} + peerDependencies: + react: ^16.8.3 || ^17 || ^18 + dependencies: + react: 18.2.0 + dev: false + /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: diff --git a/src/app/index/ToolsStack.tsx b/src/app/index/ToolsStack.tsx index 23a136ec..8e37f8ec 100644 --- a/src/app/index/ToolsStack.tsx +++ b/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 (
- {props.paramTool.map((tool, index) => ( - - {provided => ( -
- -
- )} - - ))} + + {props.paramTool.map((tool, index) => ( + + + {provided => ( +
+ +
+ )} + + + ))} + {provided.placeholder}
); @@ -104,9 +112,15 @@ export default function ToolsStack(props: { ); } function GridContainer() { - return props.paramTool.map((tool, index) => ( - - )); + return ( + + {props.paramTool.map((tool, index) => ( + + + + ))} + + ); } var darkModeFormStorage = useContext(darkModeContext).mode, darkMode = stringToBoolean(darkModeFormStorage.replace("light", "false").replace("dark", "true")); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8fdbd219..49849dae 100644 --- a/src/app/layout.tsx +++ b/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',