import React, { useEffect, useRef } from 'react' import { OverlayTrigger, Tooltip } from 'react-bootstrap' import PropTypes from 'prop-types' export default function SymbolPaletteItem({ focused, handleSelect, handleKeyDown, symbol, }) { const buttonRef = useRef(null) // call focus() on this item when appropriate useEffect(() => { if ( focused && buttonRef.current && document.activeElement?.closest('.symbol-palette-items') ) { buttonRef.current.focus() } }, [focused]) return (
{symbol.description}
{symbol.command}
{symbol.notes && (
{symbol.notes}
)} } >
) } SymbolPaletteItem.propTypes = { symbol: PropTypes.shape({ codepoint: PropTypes.string.isRequired, description: PropTypes.string.isRequired, command: PropTypes.string.isRequired, character: PropTypes.string.isRequired, notes: PropTypes.string, }), handleKeyDown: PropTypes.func.isRequired, handleSelect: PropTypes.func.isRequired, focused: PropTypes.bool, }