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

94 lines
3.2 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';
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
},
};
function ModalRemoveFile(props: Props) {
2019-10-17 03:25:58 +02:00
const { uri, claimIsMine, closeModal, deleteFile, title, claim } = 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
title="Remove File"
subtitle={
<I18nMessage tokens={{ title: <cite>{`"${title}"`}</cite> }}>
Are you sure you'd like to remove %title% from LBRY?
</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"
label={__('Abandon on blockchain (reclaim %amount% LBC)', { amount: claim.amount })}
type="checkbox"
checked={abandonChecked}
onChange={() => setAbandonChecked(!abandonChecked)}
/>
{abandonChecked === true && (
<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"
label={__('OK')}
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;