2024-08-12 05:50:54 -04:00
|
|
|
import ControlledDropdown from '@/shared/components/controlled-dropdown'
|
|
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
2024-10-18 06:14:45 -04:00
|
|
|
import { FC, memo, forwardRef } from 'react'
|
|
|
|
import {
|
|
|
|
Dropdown as BS3Dropdown,
|
|
|
|
MenuItem as BS3MenuItem,
|
|
|
|
} from 'react-bootstrap'
|
2024-08-12 05:50:54 -04:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2024-10-18 06:14:45 -04:00
|
|
|
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
|
|
|
|
import {
|
|
|
|
Dropdown,
|
|
|
|
DropdownItem,
|
|
|
|
DropdownMenu,
|
|
|
|
DropdownToggle,
|
|
|
|
} from '@/features/ui/components/bootstrap-5/dropdown-menu'
|
|
|
|
import classnames from 'classnames'
|
|
|
|
|
|
|
|
const ReviewPanelCommentDropdownToggleButton = forwardRef<
|
|
|
|
HTMLButtonElement,
|
|
|
|
React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
|
>((props, ref) => (
|
|
|
|
<button {...props} ref={ref} className={classnames(props.className, 'btn')} />
|
|
|
|
))
|
|
|
|
ReviewPanelCommentDropdownToggleButton.displayName =
|
|
|
|
'ReviewPanelCommentDropdownToggleButton'
|
2024-08-12 05:50:54 -04:00
|
|
|
|
|
|
|
const ReviewPanelCommentOptions: FC<{
|
|
|
|
onEdit: () => void
|
|
|
|
onDelete: () => void
|
2024-10-18 06:14:45 -04:00
|
|
|
id: string
|
|
|
|
}> = ({ onEdit, onDelete, id }) => {
|
2024-08-12 05:50:54 -04:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
|
|
|
return (
|
2024-10-18 06:14:45 -04:00
|
|
|
<BootstrapVersionSwitcher
|
|
|
|
bs3={
|
|
|
|
<ControlledDropdown id={`review-panel-comment-options-${id}`} pullRight>
|
|
|
|
<BS3Dropdown.Toggle noCaret bsSize="small" bsStyle={null}>
|
|
|
|
<MaterialIcon
|
|
|
|
type="more_vert"
|
|
|
|
className="review-panel-entry-actions-icon"
|
|
|
|
accessibilityLabel={t('more_options')}
|
|
|
|
/>
|
|
|
|
</BS3Dropdown.Toggle>
|
|
|
|
<BS3Dropdown.Menu>
|
|
|
|
<BS3MenuItem onClick={onEdit}>{t('edit')}</BS3MenuItem>
|
|
|
|
<BS3MenuItem onClick={onDelete}>{t('delete')}</BS3MenuItem>
|
|
|
|
</BS3Dropdown.Menu>
|
|
|
|
</ControlledDropdown>
|
|
|
|
}
|
|
|
|
bs5={
|
|
|
|
<Dropdown align="end">
|
|
|
|
<DropdownToggle
|
|
|
|
as={ReviewPanelCommentDropdownToggleButton}
|
|
|
|
id={`review-panel-comment-options-btn-${id}`}
|
|
|
|
>
|
|
|
|
<MaterialIcon
|
|
|
|
type="more_vert"
|
|
|
|
className="review-panel-entry-actions-icon"
|
|
|
|
accessibilityLabel={t('more_options')}
|
|
|
|
/>
|
|
|
|
</DropdownToggle>
|
|
|
|
<DropdownMenu flip={false}>
|
|
|
|
<li role="none">
|
|
|
|
<DropdownItem as="button" onClick={onEdit}>
|
|
|
|
{t('edit')}
|
|
|
|
</DropdownItem>
|
|
|
|
</li>
|
|
|
|
<li role="none">
|
|
|
|
<DropdownItem as="button" onClick={onDelete}>
|
|
|
|
{t('delete')}
|
|
|
|
</DropdownItem>
|
|
|
|
</li>
|
|
|
|
</DropdownMenu>
|
|
|
|
</Dropdown>
|
|
|
|
}
|
|
|
|
/>
|
2024-08-12 05:50:54 -04:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default memo(ReviewPanelCommentOptions)
|