lbry-desktop/ui/modal/modalRemoveCollection/view.jsx
saltrafael 64cbd4ae8d
Expanded Playback and List controls (#6921)
* Dont show countdown on Lists

* Add Repeat icon

* Add Shuffle icon

* Add Replay Icon

* Add Replay Option to autoplayCountdown

* Add Loop Control for Lists

* Add Shuffle control for Lists

* Improve View List Link and Fetch action

* Add Play Button to List page

* Add Shuffle Play Option on List Page and Menus

* Fix Modal Remove Collection I18n

* CSS: Fix Large list titles

* Fix List playback on Floating Player

* Add Theater Mode to its own class and fix bar text display

* Add Play Next VJS component

* Add Play Next Button

* Add Play Previous VJS Component

* Add Play Previous Button

* Add Autoplay Next Button

* Add separate control for autoplay next in list

* Bump redux

* Update CHANGELOG.md
2021-09-02 16:05:32 -04:00

65 lines
2.2 KiB
JavaScript

// @flow
import React, { useState } from 'react';
import { Modal } from 'modal/modal';
import Button from 'component/button';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router-dom';
import { FormField } from 'component/common/form';
type Props = {
closeModal: () => void,
collectionDelete: (string, ?string) => void,
claim: Claim,
collectionId: string,
collectionName: string,
uri: ?string,
redirect: ?string,
};
function ModalRemoveCollection(props: Props) {
const { closeModal, claim, collectionDelete, collectionId, collectionName, uri, redirect } = props;
const title = claim && claim.value && claim.value.title;
const { replace } = useHistory();
const [confirmName, setConfirmName] = useState('');
return (
<Modal isOpen contentLabel={__('Confirm List Unpublish')} type="card" onAborted={closeModal}>
<Card
title={__('Delete List')}
body={
uri ? (
<React.Fragment>
<p>{__('This will permanently delete the list.')}</p>
<p>{__('Type "%name%" to confirm.', { name: collectionName })}</p>
<FormField value={confirmName} type={'text'} onChange={(e) => setConfirmName(e.target.value)} />
</React.Fragment>
) : (
<I18nMessage tokens={{ title: <cite>{uri && title ? `"${title}"` : `"${collectionName}"`}</cite> }}>
Are you sure you'd like to remove %title%?
</I18nMessage>
)
}
actions={
<>
<div className="section__actions">
<Button
button="primary"
label={__('Delete')}
disabled={uri && collectionName !== confirmName}
onClick={() => {
if (redirect) replace(redirect);
collectionDelete(collectionId, uri ? 'resolved' : undefined);
closeModal();
}}
/>
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
</>
}
/>
</Modal>
);
}
export default ModalRemoveCollection;