overleaf/services/web/frontend/js/features/outline/components/outline-item-toggle-button.tsx
Alf Eaton c443322a41 Memoize FileTree and outline toggle button components (#16776)
GitOrigin-RevId: 299ed9d568650ce37edba87643112d1cd6d12fd4
2024-02-02 09:03:08 +00:00

24 lines
731 B
TypeScript

import { memo, type Dispatch, type SetStateAction } from 'react'
import Icon from '@/shared/components/icon'
import { useTranslation } from 'react-i18next'
export const OutlineItemToggleButton = memo<{
expanded: boolean
setExpanded: Dispatch<SetStateAction<boolean>>
}>(({ expanded, setExpanded }) => {
const { t } = useTranslation()
return (
<button
className="outline-item-expand-collapse-btn"
onClick={() => setExpanded(value => !value)}
aria-label={expanded ? t('collapse') : t('expand')}
>
<Icon
type={expanded ? 'angle-down' : 'angle-right'}
className="outline-caret-icon"
/>
</button>
)
})
OutlineItemToggleButton.displayName = 'OutlineItemToggleButton'