Standard Dropdown for an array of items.

Usage

Import

import { DropdownMenu, DropdownButton, IDropdownItem } from '@passfort/castle'
content_copy
Copy

Example

() => {
    
    const [current, setCurrent] = useState('')
    
    const users = [{
        label: 'Alex W.',
        id: 'rmc'
    },
    {
        label: 'Stephen N.',
        id: 'uxd',
    },
    {
        label: 'David K.',
        id: 'hux',
    },
    ]

    const handleSelect = (item) => {
        setCurrent(item)
    }

    return (
        <DropdownMenu 
            contentStyles={{w: 400}}
            title="Select one"
            items={users} 
            onSelect={setCurrent} 
        >
            <DropdownButton label={current.label || 'Select'} />
        </DropdownMenu>
    )
}
() => {
    
    const [current, setCurrent] = useState('')
    
    const users = [{
        label: 'Alex W.',
        id: 'rmc'
    },
    {
        label: 'Stephen N.',
        id: 'uxd',
    },
    {
        label: 'David K.',
        id: 'hux',
    },
    ]

    const handleSelect = (item) => {
        setCurrent(item)
    }

    return (
        <DropdownMenu 
            contentStyles={{w: 400}}
            title="Select one"
            items={users} 
            onSelect={setCurrent} 
        >
            <DropdownButton label={current.label || 'Select'} />
        </DropdownMenu>
    )
}
content_copy
Copy
live example

Render Item

() => {
    
    const [current, setCurrent] = useState('')
    
    const vehicles = [{
        label: 'Bike',
        id: 'rmc',
        render: () => <Box>Custom</Box>
    },
    {
        label: 'Car',
        id: 'uxd',
        render: () => <Box>Tuned</Box>
    },
    {
        label: 'Plane',
        id: 'hux',
        render: () => <Box>Fast</Box>
    }]

    const handleSelect = (item) => {
        setCurrent(item)
    }

    return (
        <DropdownMenu 
            title="Select one"
            items={vehicles} 
            onSelect={setCurrent} 
        >
            <DropdownButton label={current.label || 'Select'} />
        </DropdownMenu>
    )
}
() => {
    
    const [current, setCurrent] = useState('')
    
    const vehicles = [{
        label: 'Bike',
        id: 'rmc',
        render: () => <Box>Custom</Box>
    },
    {
        label: 'Car',
        id: 'uxd',
        render: () => <Box>Tuned</Box>
    },
    {
        label: 'Plane',
        id: 'hux',
        render: () => <Box>Fast</Box>
    }]

    const handleSelect = (item) => {
        setCurrent(item)
    }

    return (
        <DropdownMenu 
            title="Select one"
            items={vehicles} 
            onSelect={setCurrent} 
        >
            <DropdownButton label={current.label || 'Select'} />
        </DropdownMenu>
    )
}
content_copy
Copy
live example

Additional options

() => {
    
    const [current, setCurrent] = useState('')
    
    const options = [{
        label: 'Remove from group',
    },
    {
        label: 'To a new group',
    },
    {
        label: 'to JJM test - sum risk score',
        separator: true,
        isDisabled: true
    },
    ]

    return (
        <DropdownMenu 
            title="Move risk factor..."
            items={options} 
            onSelect={setCurrent} 
        >
            <DropdownButton icon="folder" label={'Select'} />
        </DropdownMenu>
    )
}
() => {
    
    const [current, setCurrent] = useState('')
    
    const options = [{
        label: 'Remove from group',
    },
    {
        label: 'To a new group',
    },
    {
        label: 'to JJM test - sum risk score',
        separator: true,
        isDisabled: true
    },
    ]

    return (
        <DropdownMenu 
            title="Move risk factor..."
            items={options} 
            onSelect={setCurrent} 
        >
            <DropdownButton icon="folder" label={'Select'} />
        </DropdownMenu>
    )
}
content_copy
Copy
live example

Pass additional data

() => {
    
    const [current, setCurrent] = useState('')
    
    const removeAction = () => console.log('remove action');
    const addAction = () => console.log('add action');

    const options = [{
        label: 'Remove from group',
        id: 'remove',
        action: removeAction
    },
    {
        label: 'Add to group',
        action: addAction,
    }]

    const handleSelect = (item) => item.action();

    return (
        <DropdownMenu 
            title="Actions"
            items={options} 
            onSelect={setCurrent} 
        >
            <DropdownButton icon="folder" label={'Group'} />
        </DropdownMenu>
    )
}
() => {
    
    const [current, setCurrent] = useState('')
    
    const removeAction = () => console.log('remove action');
    const addAction = () => console.log('add action');

    const options = [{
        label: 'Remove from group',
        id: 'remove',
        action: removeAction
    },
    {
        label: 'Add to group',
        action: addAction,
    }]

    const handleSelect = (item) => item.action();

    return (
        <DropdownMenu 
            title="Actions"
            items={options} 
            onSelect={setCurrent} 
        >
            <DropdownButton icon="folder" label={'Group'} />
        </DropdownMenu>
    )
}
content_copy
Copy
live example