1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-12-18 04:44:19 +00:00
steffoweb/components/FlipPanel.tsx

54 lines
2 KiB
TypeScript
Raw Normal View History

2023-12-19 03:18:47 +00:00
import React from "react"
2023-05-28 23:18:24 +00:00
import {default as cn} from "classnames";
import {default as style} from "./FlipPanel.module.css"
export type FlipPanelProps = {
front: (f: () => void) => React.ReactNode,
back: (f: () => void) => React.ReactNode,
containerClassName?: cn.Argument,
className?: cn.Argument,
frontClassName?: cn.Argument,
backClassName?: cn.Argument,
containerProps?: {[prop: string]: any},
props?: {[prop: string]: any},
frontProps?: {[prop: string]: any},
backProps?: {[prop: string]: any},
}
export const FlipPanel = ({front, back, containerClassName, className, frontClassName, backClassName, containerProps, props, frontProps, backProps}: FlipPanelProps) => {
const [isFront, setFront] = React.useState<boolean>(true)
2023-12-19 04:07:44 +00:00
const frontElement = React.useRef<HTMLElement>(null)
const backElement = React.useRef<HTMLElement>(null)
2023-05-28 23:18:24 +00:00
const flipToFront = React.useCallback(
() => {
setFront(true)
2023-12-19 04:07:44 +00:00
if(frontElement.current) frontElement.current.inert = false
if(backElement.current) backElement.current.inert = true
2023-05-28 23:18:24 +00:00
},
[frontElement, backElement]
)
const flipToBack = React.useCallback(
() => {
setFront(false)
2023-12-19 04:07:44 +00:00
if(frontElement.current) frontElement.current.inert = true
if(backElement.current) backElement.current.inert = false
2023-05-28 23:18:24 +00:00
},
[frontElement, backElement]
)
return (
<div className={cn(style.flipPanelContainer, containerClassName)} {...containerProps}>
<section ref={frontElement} className={cn("panel", style.flipPanel, style.flipPanelFront, {[style.flipPanelFrontVisible]: isFront}, className, frontClassName)} {...props} {...frontProps}>
{front(flipToBack)}
</section>
<section ref={backElement} className={cn("panel", style.flipPanel, style.flipPanelBack, {[style.flipPanelBackVisible]: !isFront}, className, backClassName)} {...props} {...backProps}>
{back(flipToFront)}
</section>
</div>
)
2023-05-28 23:18:24 +00:00
}