public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add automanimate page transitions (#4368)

pull/4376/head
sean-brydon 2022-09-11 20:54:05 +01:00 committed by GitHub
parent e50bc0f198
commit a9b79eafb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/pages/v2/event-types/[type]/index.tsx
View File

@ -1,7 +1,8 @@
import autoAnimate from "@formkit/auto-animate";
import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client"; import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client";
import { GetServerSidePropsContext } from "next"; import { GetServerSidePropsContext } from "next";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { JSONObject } from "superjson/dist/types"; import { JSONObject } from "superjson/dist/types";
import { z } from "zod"; import { z } from "zod";
@ -95,9 +96,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
const { t } = useLocale(); const { t } = useLocale();
const { eventType, locationOptions, team, teamMembers } = props; const { eventType, locationOptions, team, teamMembers } = props;
const animationParentRef = useRef(null);
const router = useRouter(); const router = useRouter();
const { tabName } = querySchema.parse(router.query); const { tabName } = querySchema.parse(router.query);
useEffect(() => {
animationParentRef.current && autoAnimate(animationParentRef.current);
}, [animationParentRef]);
const updateMutation = trpc.useMutation("viewer.eventTypes.update", { const updateMutation = trpc.useMutation("viewer.eventTypes.update", {
onSuccess: async ({ eventType }) => { onSuccess: async ({ eventType }) => {
showToast( showToast(
@ -230,7 +236,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
}); });
}} }}
className="space-y-6"> className="space-y-6">
{tabMap[tabName]} <div ref={animationParentRef}>{tabMap[tabName]}</div>
{!TABS_WITHOUT_ACTION_BUTTONS.includes(tabName) && ( {!TABS_WITHOUT_ACTION_BUTTONS.includes(tabName) && (
<div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse"> <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
<Button href="/event-types" color="secondary" tabIndex={-1}> <Button href="/event-types" color="secondary" tabIndex={-1}>