overleaf-cep/services/web/frontend/js/features/review-panel-new/components/review-panel-change-action.tsx
Alf Eaton bd67b4ca13 Improve review panel entry performance (#25402)
GitOrigin-RevId: 2a6ec8ad432195c6069bb58be37dd93341533817
2025-05-14 08:06:35 +00:00

36 lines
1.2 KiB
TypeScript

import Tooltip from '@/features/ui/components/bootstrap-5/tooltip'
import { ComponentProps, memo, MouseEventHandler } from 'react'
import { PreventSelectingEntry } from '@/features/review-panel-new/components/review-panel-prevent-selecting'
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
import MaterialIcon from '@/shared/components/material-icon'
const changeActionTooltipProps: Partial<ComponentProps<typeof Tooltip>> = {
overlayProps: { placement: 'bottom' },
tooltipProps: { className: 'review-panel-tooltip' },
}
export const ChangeAction = memo<{
id: string
label: string
type: string
handleClick: MouseEventHandler<HTMLButtonElement>
}>(function ChangeAction({ id, label, type, handleClick }) {
return (
<PreventSelectingEntry>
<OLTooltip id={id} description={label} {...changeActionTooltipProps}>
<button
type="button"
className="btn"
onClick={handleClick}
tabIndex={0}
>
<MaterialIcon
type={type}
className="review-panel-entry-actions-icon"
accessibilityLabel={label}
/>
</button>
</OLTooltip>
</PreventSelectingEntry>
)
})