2020-11-26 09:22:30 -05:00
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
|
|
|
|
import Icon from '../../../shared/components/icon'
|
|
|
|
import TooltipButton from '../../../shared/components/tooltip-button'
|
|
|
|
|
2021-03-18 05:52:36 -04:00
|
|
|
import { useFileTreeMainContext } from '../contexts/file-tree-main'
|
2020-11-26 09:22:30 -05:00
|
|
|
import { useFileTreeActionable } from '../contexts/file-tree-actionable'
|
|
|
|
|
|
|
|
function FileTreeToolbar() {
|
2021-03-18 05:52:36 -04:00
|
|
|
const { hasWritePermissions } = useFileTreeMainContext()
|
2020-11-26 09:22:30 -05:00
|
|
|
|
|
|
|
if (!hasWritePermissions) return null
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="toolbar toolbar-filetree">
|
|
|
|
<FileTreeToolbarLeft />
|
|
|
|
<FileTreeToolbarRight />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function FileTreeToolbarLeft() {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
|
|
canCreate,
|
|
|
|
startCreatingFolder,
|
|
|
|
startCreatingDocOrFile,
|
2021-04-27 03:52:58 -04:00
|
|
|
startUploadingDocOrFile,
|
2020-11-26 09:22:30 -05:00
|
|
|
} = useFileTreeActionable()
|
|
|
|
|
|
|
|
if (!canCreate) return null
|
|
|
|
|
|
|
|
return (
|
2021-03-18 05:52:36 -04:00
|
|
|
<div className="toolbar-left">
|
2020-11-26 09:22:30 -05:00
|
|
|
<TooltipButton
|
|
|
|
id="new_file"
|
|
|
|
description={t('new_file')}
|
|
|
|
onClick={startCreatingDocOrFile}
|
|
|
|
>
|
|
|
|
<Icon type="file" modifier="fw" accessibilityLabel={t('new_file')} />
|
|
|
|
</TooltipButton>
|
|
|
|
<TooltipButton
|
|
|
|
id="new_folder"
|
|
|
|
description={t('new_folder')}
|
|
|
|
onClick={startCreatingFolder}
|
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
type="folder"
|
|
|
|
modifier="fw"
|
|
|
|
accessibilityLabel={t('new_folder')}
|
|
|
|
/>
|
|
|
|
</TooltipButton>
|
|
|
|
<TooltipButton
|
|
|
|
id="upload"
|
|
|
|
description={t('upload')}
|
|
|
|
onClick={startUploadingDocOrFile}
|
|
|
|
>
|
|
|
|
<Icon type="upload" modifier="fw" accessibilityLabel={t('upload')} />
|
|
|
|
</TooltipButton>
|
2021-03-18 05:52:36 -04:00
|
|
|
</div>
|
2020-11-26 09:22:30 -05:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function FileTreeToolbarRight() {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
|
|
canRename,
|
|
|
|
canDelete,
|
|
|
|
startRenaming,
|
2021-04-27 03:52:58 -04:00
|
|
|
startDeleting,
|
2020-11-26 09:22:30 -05:00
|
|
|
} = useFileTreeActionable()
|
|
|
|
|
2021-01-07 09:23:02 -05:00
|
|
|
if (!canRename && !canDelete) {
|
2021-02-09 04:50:34 -05:00
|
|
|
return null
|
2021-01-07 09:23:02 -05:00
|
|
|
}
|
2020-11-26 09:22:30 -05:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="toolbar-right">
|
|
|
|
{canRename ? (
|
|
|
|
<TooltipButton
|
|
|
|
id="rename"
|
|
|
|
description={t('rename')}
|
|
|
|
onClick={startRenaming}
|
|
|
|
>
|
|
|
|
<Icon type="pencil" modifier="fw" accessibilityLabel={t('rename')} />
|
|
|
|
</TooltipButton>
|
|
|
|
) : null}
|
|
|
|
{canDelete ? (
|
|
|
|
<TooltipButton
|
|
|
|
id="delete"
|
|
|
|
description={t('delete')}
|
|
|
|
onClick={startDeleting}
|
|
|
|
>
|
|
|
|
<Icon type="trash-o" modifier="fw" accessibilityLabel={t('delete')} />
|
|
|
|
</TooltipButton>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default FileTreeToolbar
|