@paprika/dropdown-menu

@paprika/dropdown-menu - 2.0.47-alpha.2

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
onClose	custom	false	Popover.defaultProps.onClose	If provided, will fire when the Popover is closed
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.Content className="my-popover-classname" />
  <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