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

View File

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