81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import type { BookerLayout, BookerState } from "./types";
|
|
|
|
// Framer motion fade in animation configs.
|
|
export const fadeInLeft = {
|
|
variants: {
|
|
visible: { opacity: 1, x: 0 },
|
|
hidden: { opacity: 0, x: 20 },
|
|
},
|
|
initial: "hidden",
|
|
exit: "hidden",
|
|
animate: "visible",
|
|
transition: { ease: "easeInOut", delay: 0.1 },
|
|
};
|
|
export const fadeInUp = {
|
|
variants: {
|
|
visible: { opacity: 1, y: 0 },
|
|
hidden: { opacity: 0, y: 20 },
|
|
},
|
|
initial: "hidden",
|
|
exit: "hidden",
|
|
animate: "visible",
|
|
transition: { ease: "easeInOut", delay: 0.1 },
|
|
};
|
|
|
|
type ResizeAnimationConfig = {
|
|
[key in BookerLayout]: {
|
|
[key in BookerState | "default"]?: React.CSSProperties;
|
|
};
|
|
};
|
|
|
|
/**
|
|
* This configuration is used to animate the grid container for the booker.
|
|
* The object is structured as following:
|
|
*
|
|
* The root property of the object: is the name of the layout
|
|
* (mobile, small_calendar, large_calendar, large_timeslots)
|
|
*
|
|
* The values of these properties are objects that define the animation for each state of the booker.
|
|
* The animation have the same properties as you could pass to the animate prop of framer-motion:
|
|
* @see: https://www.framer.com/motion/animation/
|
|
*/
|
|
export const resizeAnimationConfig: ResizeAnimationConfig = {
|
|
mobile: {
|
|
default: {
|
|
width: "100%",
|
|
gridTemplateAreas: `
|
|
"meta"
|
|
"main"
|
|
"timeslots"
|
|
`,
|
|
gridTemplateColumns: "100%",
|
|
},
|
|
},
|
|
small_calendar: {
|
|
default: {
|
|
width: "calc(var(--booker-meta-width) + var(--booker-main-width))",
|
|
gridTemplateAreas: `"meta main"`,
|
|
gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width)",
|
|
},
|
|
selecting_time: {
|
|
width: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))",
|
|
gridTemplateAreas: `"meta main timeslots"`,
|
|
gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width) var(--booker-timeslots-width)",
|
|
},
|
|
},
|
|
large_calendar: {
|
|
default: {
|
|
width: "100%",
|
|
gridTemplateAreas: `"meta main"`,
|
|
gridTemplateColumns: "var(--booker-meta-width) 1fr",
|
|
},
|
|
},
|
|
large_timeslots: {
|
|
default: {
|
|
width: "100%",
|
|
gridTemplateAreas: `"meta main"`,
|
|
gridTemplateColumns: "var(--booker-meta-width) 1fr",
|
|
},
|
|
},
|
|
};
|