Rebeka DekanyandCopybot
d751b88e6b
* Remove icons folder * Create folders for badge, button, and dropdown components * Remove Bootstrap 5 from test * Rename `getBootstrap5Breakpoint` to `getBootstrapBreakpoint` * Cleanup and update BS 5 comments * Move components to the shared folder * Rename `tooltips-bs5` to `tooltip` * Remove `-bs5` suffix * Fix path * Delete BS3 version file * Rename `_form_marketing-bootstrap-5` to `_form_marketing` * Delete BS3 version file * Rename `_contact_general_modal-marketing-bootstrap-5` to `_contact_general_modal-marketing` * Delete BS3 version file * Rename `_contact_modal-marketing-bootstrap-5` to `_contact_modal-marketing` * Delete BS3 version file * Rename `thin-footer-bootstrap-5` to `thin-footer` * Delete BS3 version file * Rename `language-picker-bootstrap-5` to `language-picker` * Rename `fat-footer-react-bootstrap-5` to `fat-footer-react` * Delete BS3 version file * Rename `navbar-marketing-bootstrap-5` to `navbar-marketing` * Rename `navbar-marketing-react-bootstrap-5` to `navbar-marketing-react` * Delete BS3 version file * Rename `layout-website-redesign-cms-bootstrap-5` to `layout-website-redesign-cms` * Source format * Fix path GitOrigin-RevId: cf0f5db7c84cf545c69213dcc271d9ff17fe5db7
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
|
|
import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu'
|
|
import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
|
|
import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown'
|
|
import { MouseEventHandler, ReactNode, useCallback } from 'react'
|
|
|
|
type MenuBarOptionProps = {
|
|
title: string
|
|
onClick?: MouseEventHandler
|
|
disabled?: boolean
|
|
leadingIcon?: ReactNode
|
|
trailingIcon?: ReactNode
|
|
href?: string
|
|
target?: string
|
|
rel?: string
|
|
eventKey?: string
|
|
}
|
|
|
|
export const MenuBarOption = ({
|
|
title,
|
|
onClick: clickHandler,
|
|
href,
|
|
disabled,
|
|
leadingIcon,
|
|
trailingIcon,
|
|
target,
|
|
rel,
|
|
eventKey,
|
|
}: MenuBarOptionProps) => {
|
|
const { setSelected } = useNestableDropdown()
|
|
const { sendEvent } = useEditorAnalytics()
|
|
const onClick: MouseEventHandler = useCallback(
|
|
e => {
|
|
if (eventKey) {
|
|
sendEvent('menu-bar-option-click', { key: eventKey })
|
|
}
|
|
return clickHandler?.(e)
|
|
},
|
|
[clickHandler, eventKey, sendEvent]
|
|
)
|
|
return (
|
|
<DropdownListItem>
|
|
<DropdownItem
|
|
onMouseEnter={() => setSelected(null)}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
leadingIcon={leadingIcon}
|
|
trailingIcon={trailingIcon}
|
|
href={href}
|
|
rel={rel}
|
|
target={target}
|
|
>
|
|
{title}
|
|
</DropdownItem>
|
|
</DropdownListItem>
|
|
)
|
|
}
|