Sha256: cd4f04c03dc79466ebfefcd079b006474e556de84b04ca2de6384f3d5b1831bd
Contents?: true
Size: 1.22 KB
Versions: 870
Compression:
Stored size: 1.22 KB
Contents
import React, { useState } from 'react'
import {
Button,
} from 'playbook-ui'
import Typeahead from '../_typeahead'
const options = [
{ label: 'Orange', value: '#FFA500' },
{ label: 'Red', value: '#FF0000' },
{ label: 'Green', value: '#00FF00' },
{ label: 'Blue', value: '#0000FF' },
{ label: 'Amaranth', value: '#9F2B68' },
{ label: 'Key Lime', value: '#DAF7A6' },
{ label: 'Turquois', value: '#00FFD0' },
]
const TypeaheadCustomMenuList = (props) => {
const defaultColorOptions = options.slice(0, 3)
const [colorOptions, setColorOptions] = useState(defaultColorOptions)
const moreToLoad = colorOptions.length == defaultColorOptions.length
const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
const menuListProps = {
footer: (<Button
margin="sm"
onClick={loadColors}
text={`Load ${moreToLoad ? "More" : "Less"}`}
/>)
}
const MenuList = (props) => (
<Typeahead.MenuList
{...menuListProps}
{...props}
/>
)
return (
<Typeahead
components={{ MenuList }}
label="Colors"
options={colorOptions}
{...props}
/>
)
}
export default TypeaheadCustomMenuList
Version data entries
870 entries across 870 versions & 2 rubygems