mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-23 15:07:43 +01:00
4880d46dc4
This commit updates the import statements in the codebase to comply with ESLint rules for import ordering. All imports have been sorted alphabetically and grouped according to the specified import groups in the ESLint configuration. This improves the codebase's consistency and maintainability.
103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import {
|
|
Transition as HeadlessTransition,
|
|
TransitionClasses,
|
|
} from "@headlessui/react";
|
|
import { Fragment, ReactNode } from "react";
|
|
|
|
type TransitionAnimations =
|
|
| "slide-down"
|
|
| "slide-full-left"
|
|
| "slide-full-right"
|
|
| "slide-up"
|
|
| "fade"
|
|
| "none";
|
|
|
|
interface Props {
|
|
show?: boolean;
|
|
durationClass?: string;
|
|
animation: TransitionAnimations;
|
|
className?: string;
|
|
children?: ReactNode;
|
|
isChild?: boolean;
|
|
}
|
|
|
|
function getClasses(
|
|
animation: TransitionAnimations,
|
|
duration: string
|
|
): TransitionClasses {
|
|
if (animation === "slide-down") {
|
|
return {
|
|
leave: `transition-[transform,opacity] ${duration}`,
|
|
leaveFrom: "opacity-100 translate-y-0",
|
|
leaveTo: "-translate-y-4 opacity-0",
|
|
enter: `transition-[transform,opacity] ${duration}`,
|
|
enterFrom: "opacity-0 -translate-y-4",
|
|
enterTo: "translate-y-0 opacity-100",
|
|
};
|
|
}
|
|
|
|
if (animation === "slide-up") {
|
|
return {
|
|
leave: `transition-[transform,opacity] ${duration}`,
|
|
leaveFrom: "opacity-100 translate-y-0",
|
|
leaveTo: "translate-y-4 opacity-0",
|
|
enter: `transition-[transform,opacity] ${duration}`,
|
|
enterFrom: "opacity-0 translate-y-4",
|
|
enterTo: "translate-y-0 opacity-100",
|
|
};
|
|
}
|
|
|
|
if (animation === "slide-full-left") {
|
|
return {
|
|
leave: `transition-[transform] ${duration}`,
|
|
leaveFrom: "translate-x-0",
|
|
leaveTo: "-translate-x-full",
|
|
enter: `transition-[transform] ${duration}`,
|
|
enterFrom: "-translate-x-full",
|
|
enterTo: "translate-x-0",
|
|
};
|
|
}
|
|
|
|
if (animation === "slide-full-right") {
|
|
return {
|
|
leave: `transition-[transform] ${duration}`,
|
|
leaveFrom: "translate-x-0",
|
|
leaveTo: "translate-x-full",
|
|
enter: `transition-[transform] ${duration}`,
|
|
enterFrom: "translate-x-full",
|
|
enterTo: "translate-x-0",
|
|
};
|
|
}
|
|
|
|
if (animation === "fade") {
|
|
return {
|
|
leave: `transition-[transform,opacity] ${duration}`,
|
|
leaveFrom: "opacity-100",
|
|
leaveTo: "opacity-0",
|
|
enter: `transition-[transform,opacity] ${duration}`,
|
|
enterFrom: "opacity-0",
|
|
enterTo: "opacity-100",
|
|
};
|
|
}
|
|
|
|
return {};
|
|
}
|
|
|
|
export function Transition(props: Props) {
|
|
const duration = props.durationClass ?? "duration-200";
|
|
const classes = getClasses(props.animation, duration);
|
|
|
|
if (props.isChild) {
|
|
return (
|
|
<HeadlessTransition.Child as={Fragment} {...classes}>
|
|
<div className={props.className}>{props.children}</div>
|
|
</HeadlessTransition.Child>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<HeadlessTransition show={props.show} as={Fragment} {...classes}>
|
|
<div className={props.className}>{props.children}</div>
|
|
</HeadlessTransition>
|
|
);
|
|
}
|