89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import { h } from 'preact'
|
|
import type { ComponentChildren } from 'preact'
|
|
|
|
export type MenuItemProps = {
|
|
icon?: ComponentChildren
|
|
children: ComponentChildren
|
|
onClick: () => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
export default function MenuItem ({ icon, children, onClick, disabled = false }: MenuItemProps) {
|
|
return (
|
|
<div
|
|
className={`menuitem ${disabled ? 'disabled' : ''}`}
|
|
tabIndex={disabled ? -1 : 0}
|
|
style={{
|
|
width: 'auto', // Width fits content
|
|
minWidth: 'var(--space-24)', // Minimum width like IconButton
|
|
height: 'var(--space-24)', // Fixed height like IconButton
|
|
border: 'var(--border-width-1) solid transparent',
|
|
borderRadius: 'var(--border-radius-4)',
|
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
backgroundColor: 'transparent',
|
|
color: disabled ? 'var(--figma-color-icon-disabled)' : 'var(--figma-color-icon)',
|
|
transition: 'background-color 0.1s ease, border-color 0.1s ease',
|
|
padding: '0 var(--space-8)',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 'var(--space-8)',
|
|
whiteSpace: 'nowrap'
|
|
}}
|
|
onClick={disabled ? undefined : onClick}
|
|
onKeyDown={(e) => {
|
|
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
e.preventDefault()
|
|
onClick()
|
|
}
|
|
}}
|
|
>
|
|
{icon && (
|
|
<div
|
|
style={{
|
|
width: 'var(--space-16)',
|
|
height: 'var(--space-16)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
color: 'inherit'
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div
|
|
style={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
fontSize: 'var(--font-size-12)',
|
|
fontFamily: 'var(--font-family)',
|
|
fontWeight: 'var(--font-weight-normal)',
|
|
color: disabled ? 'var(--figma-color-text-disabled)' : 'var(--figma-color-text)'
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
<style>{`
|
|
.menuitem:not(.disabled):hover {
|
|
background-color: var(--figma-color-bg-hover, #e0e0e0) !important;
|
|
}
|
|
.menuitem:not(.disabled):focus-visible {
|
|
border-color: var(--figma-color-border-selected, #007acc) !important;
|
|
outline: none !important;
|
|
}
|
|
.menuitem:not(.disabled):active {
|
|
background-color: var(--figma-color-bg-hover, #d0d0d0) !important;
|
|
}
|
|
|
|
.menuitem {
|
|
box-sizing: border-box !important;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|