Overflow Overflow Hooks

Other Overflow hooks not in this example but are accessible: useIsOverflowGroupVisible, useOverflowCount

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
                    )
                )
            ]
        ]
    ]

type ItemVisibility = {
    ``0``: bool
    ``1``: bool
    ``2``: bool
    ``3``: bool
    ``4``: bool
    ``5``: bool
    ``6``: bool
    ``7``: bool
}

type GroupVisibility = {
    ``0``: OverflowGroupState
    ``1``: OverflowGroupState
    ``2``: OverflowGroupState
    ``3``: OverflowGroupState
    ``4``: OverflowGroupState
    ``5``: OverflowGroupState
    ``6``: OverflowGroupState
    ``7``: OverflowGroupState
}

[<ReactComponent>]
let Overflow ()=
    let itemIds = [ "0"; "1"; "2"; "3"; "4"; "5"; "6"; "7"]
    let overflowState, setOverflowState = React.useState (None)
    let styles = useStyles()

    Html.div [
        prop.children [
            Fui.overflow [
                overflow.onOverflowChange<ItemVisibility, GroupVisibility> (fun data -> setOverflowState (Some data.itemVisibility))
                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
                        ]
                    ]
                )
            ]

        ]
    ]