useMotion

type Styles = {
    root: string
    rectangle: string
    visible: string
}

let useStyles: unit -> Styles = Fui.makeStyles [
    "root", [
        style.height (length.px 180)
        style.display.flex
        style.flexDirection.column
        style.alignItems.center
        style.rowGap (length.px 24)
    ]
    "rectangle", [
        style.borderRadius (length.px 8)
        style.width (length.px 150)
        style.height (length.px 100)
        style.display.flex
        style.flexDirection.column
        style.alignContent.center
        style.justifyContent.center
        style.backgroundColor tokens.colorBrandBackground
        style.opacity 0
        style.transform.translate3D (0, 0, 0)
        style.transform.scale 0.25
        style.custom ("transitionDuration", $"{tokens.durationSlow}, {tokens.durationSlower}")
        style.transitionProperty "opacity, transform"
        style.custom ("willChange", "opacity, transform")
        style.color.white
        style.flexWrap.wrap
    ]
    "visible", [
        style.opacity 1
        style.transform.translate3D(0,0,0)
        style.transform.scale 1
    ]
]

[<ReactComponent>]
let UseMotionTest () =
    let styles = useStyles ()
    let isOpen, setOpen = React.useState(false)
    let motion = Fui.useMotion(isOpen)

    Html.div [
        prop.className styles.root
        prop.children [
            Fui.button [
                button.appearance.primary
                button.onClick (fun _ -> setOpen (isOpen |> not))
                button.text "Toggle UseMotion"
            ]

            if motion.canRender then
                Html.div [
                    prop.ref motion.ref
                    prop.className (
                        Fui.mergeClasses (styles.rectangle, (if motion.active then styles.visible else ""))
                    )
                    prop.children [
                        Fui.text "Lorem ipsum"
                    ]
                ]
        ]
    ]