lbry-desktop/ui/component/webUploadList/internal/web-upload-item.jsx
2020-01-06 16:35:43 -05:00

42 lines
1.2 KiB
JavaScript

// @flow
import React from 'react';
import Button from 'component/button';
import FileThumbnail from 'component/fileThumbnail';
type Props = {
params: UpdatePublishFormData,
progress: string,
xhr?: () => void,
};
export default function WebUploadItem(props: Props) {
const { params, progress, xhr } = props;
return (
<li className={'claim-preview claim-preview--inactive card--inline'}>
<FileThumbnail thumbnail={params.thumbnail_url} />
<div className={'claim-preview-metadata'}>
<div className="claim-preview-info">
<div className="claim-preview-title">{params.title}</div>
{xhr && (
<div className="card__actions--inline">
<Button
button="link"
onClick={() => {
xhr.abort();
}}
label={__('Cancel')}
/>
</div>
)}
</div>
<h2>lbry://{params.name}</h2>
<div className={'claim-upload__progress--outer card--inline'}>
<div className={'claim-upload__progress--inner'} style={{ width: `${progress}%` }}>
Uploading...
</div>
</div>
</div>
</li>
);
}