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