Standard Dropdown for an array of items.

Usage

Import

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

Example

function 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>
  )
}
function 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>
  )
}
content_copy
Copy
live example

Render Item

function Example() {
  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>
  )
}
function Example() {
  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

function Example() {
  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>
  )
}
function Example() {
  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

function Example() {
  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>
  )
}
function Example() {
  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