VirtualizedList

FORMERLY FIXEDSIZELIST VirtalizedList is imported from react-window and, although Microsoft uses it in FluentUI's documentation, it is not a FluentUI component.

For more information and a full list of properties, see https://github.com/bvaughn/react-window

let countries = [
    "Afghanistan"
    "Albania"
    "Algeria"
    "Andorra"
    "Angola"
    "Antigua & Deps"
    "Argentina"
    "Armenia"
    "Australia"
    "Austria"
    "Azerbaijan"
    "Bahamas"
    "Bahrain"
    "Bangladesh"
    "Barbados"
    "Belarus"
    "Belgium"
    "Belize"
    "Benin"
    "Bhutan"
    "Bolivia"
    "Bosnia Herzegovina"
    "Botswana"
    "Brazil"
    "Brunei"
    "Bulgaria"
    "Burkina"
    "Burundi"
    "Cambodia"
    "Cameroon"
    "Canada"
    "Cape Verde"
    "Central African Rep"
    "Chad"
    "Chile"
    "China"
    "Colombia"
    "Comoros"
    "Congo"
    "Congo {Democratic Rep}"
    "Costa Rica"
    "Croatia"
    "Cuba"
    "Cyprus"
    "Czech Republic"
    "Denmark"
    "Djibouti"
    "Dominica"
    "Dominican Republic"
    "East Timor"
    "Ecuador"
    "Egypt"
    "El Salvador"
    "Equatorial Guinea"
    "Eritrea"
    "Estonia"
    "Ethiopia"
    "Fiji"
    "Finland"
    "France"
    "Gabon"
    "Gambia"
    "Georgia"
    "Germany"
    "Ghana"
    "Greece"
    "Grenada"
    "Guatemala"
    "Guinea"
    "Guinea-Bissau"
    "Guyana"
    "Haiti"
    "Honduras"
    "Hungary"
    "Iceland"
    "India"
    "Indonesia"
    "Iran"
    "Iraq"
    "Ireland {Republic}"
    "Israel"
    "Italy"
    "Ivory Coast"
    "Jamaica"
    "Japan"
    "Jordan"
    "Kazakhstan"
    "Kenya"
    "Kiribati"
    "Korea North"
    "Korea South"
    "Kosovo"
    "Kuwait"
    "Kyrgyzstan"
    "Laos"
    "Latvia"
    "Lebanon"
    "Lesotho"
    "Liberia"
    "Libya"
    "Liechtenstein"
    "Lithuania"
    "Luxembourg"
    "Macedonia"
    "Madagascar"
    "Malawi"
    "Malaysia"
    "Maldives"
    "Mali"
    "Malta"
    "Marshall Islands"
    "Mauritania"
    "Mauritius"
    "Mexico"
    "Micronesia"
    "Moldova"
    "Monaco"
    "Mongolia"
    "Montenegro"
    "Morocco"
    "Mozambique"
    "Myanmar {Burma}"
    "Namibia"
    "Nauru"
    "Nepal"
    "Netherlands"
    "New Zealand"
    "Nicaragua"
    "Niger"
    "Nigeria"
    "Norway"
    "Oman"
    "Pakistan"
    "Palau"
    "Panama"
    "Papua New Guinea"
    "Paraguay"
    "Peru"
    "Philippines"
    "Poland"
    "Portugal"
    "Qatar"
    "Romania"
    "Russian Federation"
    "Rwanda"
    "St Kitts & Nevis"
    "St Lucia"
    "Saint Vincent & the Grenadines"
    "Samoa"
    "San Marino"
    "Sao Tome & Principe"
    "Saudi Arabia"
    "Senegal"
    "Serbia"
    "Seychelles"
    "Sierra Leone"
    "Singapore"
    "Slovakia"
    "Slovenia"
    "Solomon Islands"
    "Somalia"
    "South Africa"
    "South Sudan"
    "Spain"
    "Sri Lanka"
    "Sudan"
    "Suriname"
    "Swaziland"
    "Sweden"
    "Switzerland"
    "Syria"
    "Taiwan"
    "Tajikistan"
    "Tanzania"
    "Thailand"
    "Togo"
    "Tonga"
    "Trinidad & Tobago"
    "Tunisia"
    "Turkey"
    "Turkmenistan"
    "Tuvalu"
    "Uganda"
    "Ukraine"
    "United Arab Emirates"
    "United Kingdom"
    "United States"
    "Uruguay"
    "Uzbekistan"
    "Vanuatu"
    "Vatican City"
    "Venezuela"
    "Vietnam"
    "Yemen"
    "Zambia"
    "Zimbabwe"
]


[<ReactComponent>]
let ListTest () =
    Fui.virtualized.list [
        virtualizedList.style [
            style.maxHeight 300
            style.width 400
            style.backgroundColor "pink"
        ]
        virtualizedList.rowComponent (fun (props: RowComponentProps) ->
            let country = countries[props.index]
            Fui.listItem [
                listItem.style props.style
                listItem.key country
                listItem.ariaSetSize countries.Length
                listItem.ariaPosInSet (props.index + 1)
                listItem.children [
                    Fui.text country
                ]
            ]
        )
        virtualizedList.rowHeight 30
        virtualizedList.rowCount countries.Length
        virtualizedList.rowProps {||}
        virtualizedList.onRowsRendered (fun (oir: OnRowsRendered ) -> printfn "orr %A" (oir.startIndex, oir.stopIndex)
        )
        virtualizedList.overscanCount 3
    ]