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

78 lines
2.1 KiB
React
Raw Normal View History

// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import { Modal } from 'modal/modal';
import { withRouter } from 'react-router';
import Card from 'component/common/card';
import Button from 'component/button';
import FileList from 'component/common/file-list';
type Props = {
files: Array<WebFile>,
hideModal: () => void,
updatePublishForm: ({}) => void,
history: {
location: { pathname: string },
push: string => void,
},
};
2020-07-23 19:02:07 +02:00
const PUBLISH_URL = `/$/${PAGES.UPLOAD}`;
const ModalFileSelection = (props: Props) => {
const { history, files, hideModal, updatePublishForm } = props;
const [selectedFile, setSelectedFile] = React.useState(null);
const navigateToPublish = React.useCallback(() => {
// Navigate only if location is not publish area:
// - Prevent spam in history
if (history.location.pathname !== PUBLISH_URL) {
history.push(PUBLISH_URL);
}
}, [history]);
function handleCloseModal() {
hideModal();
setSelectedFile(null);
}
function handleSubmit() {
updatePublishForm({ filePath: selectedFile });
handleCloseModal();
navigateToPublish();
}
const handleFileChange = (file?: WebFile) => {
setSelectedFile(file);
};
return (
<Modal isOpen type="card" onAborted={handleCloseModal} onConfirmed={handleCloseModal}>
<Card
icon={ICONS.PUBLISH}
title={__('Choose a file')}
subtitle={__('Only one file is allowed, choose wisely:')}
actions={
<div>
<div>
<FileList files={files} onChange={handleFileChange} />
</div>
<div className="section__actions">
<Button
disabled={!selectedFile || !files || !files.length}
button="primary"
label={__('Accept')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={handleCloseModal} />
</div>
</div>
}
/>
</Modal>
);
};
export default withRouter(ModalFileSelection);