import React, { useCallback, useState, CSSProperties } from 'react'; import classnames from 'classnames'; const checked = ( ); const unchecked = ; const radioUnchecked = ( ); const radioChecked = ( ); export type MenuItemT = | { label?: string; accelerator?: string; type?: 'normal'; enabled?: boolean; visiable?: boolean; checked?: boolean; click: (menuItem: MenuItemT, event: React.MouseEvent) => void; } | { type: 'separator'; visiable?: boolean; } | { label?: string; accelerator?: string; type: 'checkbox'; enabled?: boolean; visiable?: boolean; checked?: boolean; click: (menuItem: MenuItemT, event: React.MouseEvent) => void; } | { label?: string; accelerator?: string; type: 'radio'; enabled?: boolean; visiable?: boolean; checked?: boolean; click: (menuItem: MenuItemT, event: React.MouseEvent) => void; }; export interface MenuListItemProps { mainIndex: number; subIndex: number; curItem: MenuItemT; changeCheckState: ( mainIndex: number, subIndex: number, check: boolean, isRadio?: boolean ) => void; style: CSSProperties; } export const MenuListItem: React.FC = ({ mainIndex, subIndex, curItem, style, changeCheckState, }) => { const [selected, setSelected] = useState(false); const onMouseOver = () => setSelected(true); const onMouseLeave = () => setSelected(false); const handleClick = useCallback( (e: React.MouseEvent) => { if (curItem.type === 'separator' || curItem.enabled === false) { e.stopPropagation(); } else if (curItem.type === 'checkbox') { e.persist(); const nextCurItem = { ...curItem, checked: !curItem.checked, }; curItem.click(nextCurItem, e); changeCheckState(mainIndex, subIndex, !curItem.checked); } else if (curItem.type === 'radio') { const nextCurItem = { ...curItem, checked: true, }; curItem.click(nextCurItem, e); if (!curItem.checked) { changeCheckState(mainIndex, subIndex, true, true); } } else { e.persist(); curItem.click(curItem, e); } }, // ts-ignore [changeCheckState, curItem, mainIndex, subIndex] ); // eslint-disable-next-line eqeqeq if (curItem.visiable == false) { return
; } const listItemClass = classnames('list-item', { selected: selected && curItem.type !== 'separator' && curItem.enabled !== false, }); const menuItemClass = classnames('menu-item', { disabled: curItem.type !== 'separator' && curItem.enabled === false, }); const innerContent = curItem.type === 'separator' ? (
) : ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
{/* eslint-disable-next-line no-nested-ternary */} {curItem.type === 'radio' ? curItem.checked ? radioChecked : radioUnchecked : curItem.checked && curItem.type === 'checkbox' ? checked : unchecked}
{curItem.label}
{curItem.accelerator && (
{curItem.accelerator}
)}
); return ( // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
{innerContent}
); };