Sha256: ae74054267af0b7199d748b78c917ec14d8e5a4ebf9615dacaaa826c60da69dd
Contents?: true
Size: 1.86 KB
Versions: 90
Compression:
Stored size: 1.86 KB
Contents
import React, { useState } from 'react'
import Flex from '../../pb_flex/_flex'
import PbReactPopover from '../../pb_popover/_popover'
import Icon from '../../pb_icon/_icon'
import Nav from '../../pb_nav/_nav'
import NavItem from '../../pb_nav/_item'
const MoreExtensionsDropdown = ({extensions}: any) => {
const [showPopover, setShowPopover] = useState(false)
const handleTogglePopover = () => {
setShowPopover(true)
}
const handlePopoverClose = (shouldClosePopover: boolean) => {
setShowPopover(!shouldClosePopover)
}
const popoverReference = (
<button
className="toolbar_button"
onClick={handleTogglePopover}
role="button"
type="button"
>
<Flex
align="center"
className="toolbar_button_icon"
justify="center"
>
<Icon icon="ellipsis" size="lg" />
</Flex>
</button>
);
return (
<PbReactPopover
closeOnClick='outside'
padding='none'
placement="bottom"
reference={popoverReference}
shouldClosePopover={handlePopoverClose}
show={showPopover}
>
<Nav
paddingTop={extensions.length > 1 ? "xs" : "none"}
paddingBottom={extensions.length > 1 ? "xs" : "none"}
variant="subtle"
>
{extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => (
<NavItem
cursor="pointer"
className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
iconLeft={icon}
key={`${text}_${index}`}
margin='none'
onClick={()=> {onclick(); setShowPopover(false)}}
text={text}
paddingTop='xxs'
paddingBottom='xxs'
/>
))}
</Nav>
</PbReactPopover>
)
}
export default MoreExtensionsDropdown
Version data entries
90 entries across 90 versions & 1 rubygems