99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
|
|
import { classNames } from '@standardnotes/snjs'
|
|
import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
|
|
import {
|
|
ComponentPropsWithoutRef,
|
|
ForwardedRef,
|
|
forwardRef,
|
|
MouseEventHandler,
|
|
ReactNode,
|
|
useCallback,
|
|
useState,
|
|
} from 'react'
|
|
import Icon from '../Icon/Icon'
|
|
import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
|
|
import RadioIndicator from '../Radio/RadioIndicator'
|
|
import MenuListItem from './MenuListItem'
|
|
import Popover from '../Popover/Popover'
|
|
|
|
const Tooltip = ({ text }: { text: string }) => {
|
|
const [visible, setVisible] = useState(false)
|
|
const onClickMobile: MouseEventHandler<HTMLDivElement> = useCallback(
|
|
(event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
setVisible(!visible)
|
|
},
|
|
[visible],
|
|
)
|
|
|
|
const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null)
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div
|
|
ref={setAnchorElement}
|
|
className={classNames('peer z-0 flex h-5 w-5 items-center justify-center rounded-full')}
|
|
onClick={onClickMobile}
|
|
onMouseEnter={() => setVisible(true)}
|
|
onMouseLeave={() => setVisible(false)}
|
|
>
|
|
<Icon type={'notes'} className="text-border" size="large" />
|
|
</div>
|
|
<Popover
|
|
open={visible}
|
|
title="Info"
|
|
anchorElement={anchorElement}
|
|
disableMobileFullscreenTakeover
|
|
className={classNames(
|
|
'w-60 translate-x-2 translate-y-1 select-none rounded border border-border shadow-main',
|
|
'z-modal bg-default py-1.5 px-3 text-left',
|
|
)}
|
|
>
|
|
{text}
|
|
</Popover>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type Props = {
|
|
checked: boolean
|
|
children: ReactNode
|
|
shortcut?: PlatformedKeyboardShortcut
|
|
info?: string
|
|
} & ComponentPropsWithoutRef<'button'>
|
|
|
|
const MenuRadioButtonItem = forwardRef(
|
|
(
|
|
{ checked, disabled, tabIndex, children, shortcut, className, info, ...props }: Props,
|
|
ref: ForwardedRef<HTMLButtonElement>,
|
|
) => {
|
|
return (
|
|
<MenuListItem>
|
|
<button
|
|
ref={ref}
|
|
role="menuitemradio"
|
|
tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
|
|
className={classNames(
|
|
'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
|
|
'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
|
|
'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
|
|
className,
|
|
className?.includes('items-') ? '' : 'items-center',
|
|
)}
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
|
|
<RadioIndicator disabled={disabled} checked={checked} className="flex-shrink-0" />
|
|
{children}
|
|
{info && <Tooltip text={info} />}
|
|
</button>
|
|
</MenuListItem>
|
|
)
|
|
},
|
|
)
|
|
|
|
export default MenuRadioButtonItem
|