Backup import cancel UI
This commit is contained in:
parent
c901f47dd1
commit
9687aee2ca
9 changed files with 183 additions and 25 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue