@paprika/overflow-menu NPM

@paprika/overflow-menu

Description

OverflowMenu component displays a trigger button, which when clicked displays a list of items in a dropdown menu 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/overflow-menu

or with npm:

npm install @paprika/overflow-menu

Props

OverflowMenu

Prop	Type	required	default	Description
align	Popover.types.align.TOP, Popover.types.align.RIGHT, Popover.types.align.BOTTOM, Popover.types.align.LEFT	false	Popover.types.align.BOTTOM	Where the popover content is positioned relative to the trigger or getPositioningElement.
children	node	true	-	Children should consist of <OverflowMenu.Item />
edge	Popover.types.align.LEFT, Popover.types.align.RIGHT, null	false	null	If provided, will align Popover to specified edge of Trigger
isOpen	bool	false	null	Control if the overflow menu popover open.
maxHeight	number,string	false	300	The maximum height of the OverflowMenu content
onClose	func	false	null	If provided, will fire when the Popover is closed
zIndex	number	false	zValue(1)	The z-index for the popover / confirmation

OverflowMenu.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 overflow menu 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

OverflowMenu.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

OverflowMenu.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	""
onClick	func	false	() => {}
onOpenMenu	func	false	() => {}
triggerRef	custom	false	null

Usage

import OverflowMenu from "@paprika/overflow-menu";
import Confirmation from "@paprika/confirmation";

<OverflowMenu>
  <OverflowMenu.Trigger>Trigger</OverflowMenu.Trigger>
  <OverflowMenu.Content className="my-popover-classname" />
  <OverflowMenu.Item onClick={() => {}}>Edit</OverflowMenu.Item>
  <OverflowMenu.LinkItem isExternal link="http://www.wegalvanize.com">
    External link
  </OverflowMenu.LinkItem>
  <OverflowMenu.Item isDisabled onClick={() => {}}>
    Disabled Item
  </OverflowMenu.Item>
  <OverflowMenu.Divider />
  <OverflowMenu.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
  </OverflowMenu.Item>
</OverflowMenu>;