@paprika/dropdown-menu

@paprika/dropdown-menu - 2.0.43

Description

DropdownMenu component displays a trigger button, which when clicked displays a list of items in a dropdown format. These items can be raw content, Links or actions such as Delete, which will prompt a confirmation panel to be displayed.

Installation

yarn add @paprika/dropdown-menu

or with npm:

npm install @paprika/dropdown-menu

Props

DropdownMenu

Prop	Type	required	default	Description
align	custom	false	Popover.defaultProps.align	Alignment of the Popover
children	node	true	-	Children should consist of <Dropdown.Item />
edge	custom	false	Popover.defaultProps.edge	If provided, will align Popover to specified edge of Trigger
zIndex	custom	false	Popover.defaultProps.zIndex	The z-index for the popover / confirmation

DropdownMenu.Item

Prop	Type	required	default	Description
children	node	true	-	HTML for each item
isDestructive	bool	false	false	If the item is destructive.
onClick	func	false	() => {}	Callback to be executed when button is clicked
onKeyDown	func	false	() => {}	Callback to be executed when key is pressed
onClose	func	false	() => {}	Callback to be executed when dropdown needs to be closed
onShowConfirmation	func	false	() => {}	Callback to be executed when delete item is clicked
renderConfirmation	func	false	null	Render prop to render the replacement node

DropdownMenu.LinkItem

Prop	Type	required	default	Description
children	node	true	-	HTML for each LinkItem
link	string	true	-	The url for the href
onKeyDown	func	false	() => {}	Callback to be executed when key is pressed
isExternal	bool	false	false	Should the link open content in a new tab

DropdownMenu.Trigger

Prop	Type	required	default	Description
children	node	false	null
buttonType	[ Trigger.types.button.ICON, Trigger.types.button.RAW, Trigger.types.button.SIMPLE]	false	Trigger.types.button.SIMPLE	Determine the styling of the button
isOpen	bool	false	false
menuRefId	string	false	""
onOpenMenu	func	false	() => {}
triggerRef	custom	false	null

Usage

import DropdownMenu from "@paprika/dropdown-menu";
import Confirmation from "@paprika/confirmation";

<DropdownMenu>
  <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
  <DropdownMenu.Item onClick={() => {}}>Edit</DropdownMenu.Item>
  <DropdownMenu.LinkItem isExternal link="http://www.wegalvanize.com">
    External link
  </DropdownMenu.LinkItem>
  <DropdownMenu.Item isDisabled onClick={() => {}}>
    Disabled Item
  </DropdownMenu.Item>
  <DropdownMenu.Divider />
  <DropdownMenu.Item
    isDestructive
    renderConfirmation={onCloseMenu => {
      return (
        <Confirmation
          body="Lorem ipsum dolor amet vexillologist tacos selvage narwhal butcher twee ethical hot chicken."
          confirmLabel="Delete filter"
          defaultIsOpen
          heading="Delete filter?"
          onConfirm={handleConfirm}
          onClose={handleCloseConfirm(onCloseMenu)}
        />
      );
    }}
  >
    Delete filter
  </DropdownMenu.Item>
</DropdownMenu>;

Links

• Storybook showcase
• Github source code
• Github create issue
• ChangeLog