overleaf/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx
M Fahru b85ae6e58e Migrate actions menu in editor left menu to react (#10102)
* Migrate actions menu in editor left menu to react

* Move margin from inline style to css file

* remove focus selector to avoid "highlighting" the button after closing modal and regain focus

* Add disabled state on word count button when the compiling is loading or failed

* Use div instead of button for disabled word count button

* Add accessibility text props when LeftMenuButton is disabled

* Add actions menu test cases and storybook components

* use util assign function and wrap function prop in usecallback

GitOrigin-RevId: 81ab104be21fbcf5dfbc72c07d29eeb32976c61f
2022-10-28 08:05:14 +00:00

40 lines
1 KiB
TypeScript

import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { assign } from '../../../shared/components/location'
import EditorCloneProjectModalWrapper from '../../clone-project-modal/components/editor-clone-project-modal-wrapper'
import LeftMenuButton from './left-menu-button'
type ProjectCopyResponse = {
project_id: string
}
export default function ActionsCopyProject() {
const [showModal, setShowModal] = useState(false)
const { t } = useTranslation()
const openProject = useCallback(
({ project_id: projectId }: ProjectCopyResponse) => {
assign(`/project/${projectId}`)
},
[]
)
return (
<>
<LeftMenuButton
onClick={() => setShowModal(true)}
icon={{
type: 'copy',
fw: true,
}}
>
{t('copy_project')}
</LeftMenuButton>
<EditorCloneProjectModalWrapper
show={showModal}
handleHide={() => setShowModal(false)}
openProject={openProject}
/>
</>
)
}