Backup import cancel UI

This commit is contained in:
Fedor Indutny 2024-09-11 11:03:18 -07:00 committed by GitHub
parent c901f47dd1
commit 9687aee2ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 183 additions and 25 deletions

View file

@ -1,12 +1,13 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import React, { useState, useCallback } from 'react';
import type { LocalizerType } from '../../types/Util';
import { formatFileSize } from '../../util/formatFileSize';
import { TitlebarDragArea } from '../TitlebarDragArea';
import { ProgressBar } from '../ProgressBar';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { InstallScreenSignalLogo } from './InstallScreenSignalLogo';
// We can't always use destructuring assignment because of the complexity of this props
@ -16,16 +17,36 @@ export type PropsType = Readonly<{
i18n: LocalizerType;
currentBytes?: number;
totalBytes?: number;
onCancel: () => void;
}>;
export function InstallScreenBackupImportStep({
i18n,
currentBytes,
totalBytes,
onCancel,
}: PropsType): JSX.Element {
const [isConfirmingCancel, setIsConfirmingCancel] = useState(false);
const confirmCancel = useCallback(() => {
setIsConfirmingCancel(true);
}, []);
const abortCancel = useCallback(() => {
setIsConfirmingCancel(false);
}, []);
const onCancelWrap = useCallback(() => {
onCancel();
setIsConfirmingCancel(false);
}, [onCancel]);
let percentage = 0;
let progress: JSX.Element;
let isCancelPossible = true;
if (currentBytes != null && totalBytes != null) {
isCancelPossible = currentBytes !== totalBytes;
percentage = Math.max(0, Math.min(1, currentBytes / totalBytes));
if (percentage > 0 && percentage <= 0.01) {
percentage = 0.01;
@ -38,7 +59,7 @@ export function InstallScreenBackupImportStep({
progress = (
<>
<ProgressBar fractionComplete={percentage} />
<div className="BackupImportScreen__progressbar-hint">
<div className="InstallScreenBackupImportStep__progressbar-hint">
{i18n('icu:BackupImportScreen__progressbar-hint', {
currentSize: formatFileSize(currentBytes),
totalSize: formatFileSize(totalBytes),
@ -51,31 +72,60 @@ export function InstallScreenBackupImportStep({
progress = (
<>
<ProgressBar fractionComplete={0} />
<div className="BackupImportScreen__progressbar-hint BackupImportScreen__progressbar-hint--hidden">
{i18n('icu:BackupImportScreen__progressbar-hint', {
currentSize: '',
totalSize: '',
fractionComplete: 0,
})}
<div className="InstallScreenBackupImportStep__progressbar-hint">
{i18n('icu:BackupImportScreen__progressbar-hint--preparing')}
</div>
</>
);
}
return (
<div className="BackupImportScreen">
<div className="InstallScreenBackupImportStep">
<TitlebarDragArea />
<InstallScreenSignalLogo />
<div className="BackupImportScreen__content">
<h3 className="BackupImportScreen__title">
<div className="InstallScreenBackupImportStep__content">
<h3 className="InstallScreenBackupImportStep__title">
{i18n('icu:BackupImportScreen__title')}
</h3>
{progress}
<div className="BackupImportScreen__description">
<div className="InstallScreenBackupImportStep__description">
{i18n('icu:BackupImportScreen__description')}
</div>
</div>
{isCancelPossible && (
<button
className="InstallScreenBackupImportStep__cancel"
type="button"
onClick={confirmCancel}
>
{i18n('icu:BackupImportScreen__cancel')}
</button>
)}
{isConfirmingCancel && (
<ConfirmationDialog
dialogName="InstallScreenBackupImportStep.confirmCancel"
title={i18n('icu:BackupImportScreen__cancel-confirmation__title')}
cancelText={i18n(
'icu:BackupImportScreen__cancel-confirmation__cancel'
)}
actions={[
{
action: onCancelWrap,
style: 'negative',
text: i18n(
'icu:BackupImportScreen__cancel-confirmation__confirm'
),
},
]}
i18n={i18n}
onClose={abortCancel}
>
{i18n('icu:BackupImportScreen__cancel-confirmation__body')}
</ConfirmationDialog>
)}
</div>
);
}