Overflow Overflow Hooks

type Styles = { overflow: string }

let useStyles: unit -> Styles = Fui.makeStyles [
    "overflow", [
        style.overflow.hidden
        style.display.flex
        style.flexWrap.nowrap
        style.minWidth (length.px 200)
        style.maxWidth (length.px 900)
        style.height (length.px 30)
        style.resize.horizontal
        style.border (1, borderStyle.solid, "lightGray")
        style.padding (length.px 16)
        style.zIndex 0
    ]
]

[<ReactComponent>]
let OverflowMenuItem (key: string) (id: string)=
    let isVisible = Fui.useIsOverflowItemVisible(id)
    if isVisible then
        Html.none
    else
        Fui.menuItem [
            menuItem.key key
            menuItem.text $"Item {id}"
        ]

[<ReactComponent>]
let OverflowMenu itemIds =
    let options = Fui.useOverflowMenu (None)

    if options.isOverflowing |> not then
        Html.none
    else
    Fui.menu [
        // menu.positioning.afterBottom
        menu.positioning [
            positioning.offset [
                offset.crossAxis 30
                offset.mainAxis 35 
            ]
        ]
        menu.children [
            Fui.menuTrigger [
                menuTrigger.disableButtonEnhancement true
                menuTrigger.children (
                    Fui.menuButton [
                        menuButton.ref options.ref
                        menuButton.text $"+{options.overflowCount} items"
                    ]
                )
            ]
            Fui.menuPopover [
                Fui.menuList (
                    itemIds |> List.map (fun i ->
                        OverflowMenuItem i i
                    )
                )
            ]
        ]
    ]

[<ReactComponent>]
let Overflow ()=
    let itemIds = [ "0"; "1"; "2"; "3"; "4"; "5"; "6"; "7"]
    let styles = useStyles()

    Fui.overflow [
        overflow.children (
            Html.div [
                prop.className styles.overflow
                prop.children [
                    yield! itemIds |> List.map (fun i ->
                        Fui.overflowItem [
                            overflowItem.key i
                            overflowItem.id i
                            overflowItem.children (
                                Fui.button [
                                    button.text $"Item {i}"
                                ]
                            )
                        ]
                    )
                    yield OverflowMenu itemIds
                ]
            ]
        )
    ]