lbry-desktop/ui/modal/modalRemoveFile/view.jsx

103 lines
3.6 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
2019-12-06 21:57:07 +01:00
import { FormField } from 'component/common/form';
2019-07-18 00:22:47 +02:00
import Button from 'component/button';
2019-09-27 20:56:15 +02:00
import usePersistedState from 'effects/use-persisted-state';
2019-12-06 21:57:07 +01:00
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
2017-07-02 20:23:38 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
uri: string,
claim: StreamClaim,
2018-03-26 23:32:43 +02:00
claimIsMine: boolean,
closeModal: () => void,
deleteFile: (string, boolean, boolean) => void,
title: string,
fileInfo?: {
outpoint: ?string,
2018-03-26 23:32:43 +02:00
},
isAbandoning: boolean,
2018-03-26 23:32:43 +02:00
};
function ModalRemoveFile(props: Props) {
const { uri, claimIsMine, closeModal, deleteFile, title, claim, isAbandoning } = props;
const [deleteChecked, setDeleteChecked] = usePersistedState('modal-remove-file:delete', true);
const [abandonChecked, setAbandonChecked] = usePersistedState('modal-remove-file:abandon', true);
2017-07-02 20:23:38 +02:00
return (
2019-12-06 21:57:07 +01:00
<Modal isOpen contentLabel={__('Confirm File Remove')} type="card" onAborted={closeModal}>
<Card
2020-09-09 04:01:52 +02:00
title={__('Remove File')}
2019-12-06 21:57:07 +01:00
subtitle={
<I18nMessage tokens={{ title: <cite>{`"${title}"`}</cite> }}>
2021-07-07 16:21:17 +02:00
Are you sure you'd like to remove %title%?
2019-12-06 21:57:07 +01:00
</I18nMessage>
}
body={
<React.Fragment>
{/* @if TARGET='app' */}
2019-10-17 03:25:58 +02:00
<FormField
2019-12-06 21:57:07 +01:00
name="file_delete"
label={__('Delete this file from my computer')}
2019-10-17 03:25:58 +02:00
type="checkbox"
2019-12-06 21:57:07 +01:00
checked={deleteChecked}
onChange={() => setDeleteChecked(!deleteChecked)}
2019-10-17 03:25:58 +02:00
/>
2019-12-06 21:57:07 +01:00
{/* @endif */}
2019-11-17 19:32:31 +01:00
2019-12-06 21:57:07 +01:00
{claimIsMine && (
<React.Fragment>
<FormField
name="claim_abandon"
2020-09-02 22:08:37 +02:00
label={
<I18nMessage
tokens={{ lbc: <LbcSymbol prefix={__('reclaim %amount%', { amount: claim.amount })} /> }}
>
2021-07-07 16:21:17 +02:00
Remove from blockchain (%lbc%)
2020-09-02 22:08:37 +02:00
</I18nMessage>
}
2019-12-06 21:57:07 +01:00
type="checkbox"
checked={abandonChecked}
onChange={() => setAbandonChecked(!abandonChecked)}
/>
{abandonChecked === true && (
2021-07-07 16:21:17 +02:00
<p className="help error__text">{__('This action is permanent and cannot be undone')}</p>
2019-12-06 21:57:07 +01:00
)}
{/* @if TARGET='app' */}
{abandonChecked === false && deleteChecked && (
<p className="help">{__('This file will be removed from your Library and Downloads folder.')}</p>
2019-12-06 21:57:07 +01:00
)}
{!deleteChecked && (
<p className="help">
{__('This file will be removed from your Library but will remain in your Downloads folder.')}
2019-12-06 21:57:07 +01:00
</p>
)}
{/* @endif */}
</React.Fragment>
2019-11-17 19:32:31 +01:00
)}
2019-12-06 21:57:07 +01:00
</React.Fragment>
}
actions={
<>
<div className="section__actions">
<Button
button="primary"
2020-07-30 18:58:24 +02:00
label={isAbandoning ? __('Removing...') : __('OK')}
2021-07-07 16:21:17 +02:00
disabled={isAbandoning || !(deleteChecked || abandonChecked)}
onClick={() => deleteFile(uri, deleteChecked, claimIsMine ? abandonChecked : false)}
/>
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
<p className="help">{__('These changes will appear shortly.')}</p>
</>
2019-12-06 21:57:07 +01:00
}
/>
</Modal>
);
2017-07-02 20:23:38 +02:00
}
export default ModalRemoveFile;