@paprika/dropdown-menu

@paprika/dropdown-menu - 2.0.19

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	AlignTypes.ALL	false	AlignTypes.BOTTOM	Alignment of the dropdown menu
children	node	true	-	Children should consist of <Dropdown.Item />
edge	[object Object],[object Object],[object Object]	false	AlignTypes.LEFT	Sets the alignment of the dropdown menu based on the edge of the trigger button

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	ButtonTypes.ALL	false	"simple"	Determine the styling of the button
isOpen	bool	false	false
menuRefId	string	false	""
onOpenMenu	func	false	() => {}
triggerRef	custom	false	null

Usage

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>;

more:

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