feat: add-download-button closes #3429 (#3609)

This commit is contained in:
Kunal Kundu
2020-04-20 15:07:47 +05:30
committed by GitHub
parent ebb4eb4e29
commit cf252605ad
20 changed files with 90 additions and 25 deletions

View File

@ -210,6 +210,36 @@ class MediaLibrary extends React.Component {
});
};
/**
* Downloads the selected file.
*/
handleDownload = () => {
const { selectedFile } = this.state;
const { displayURLs } = this.props;
const url = displayURLs.getIn([selectedFile.id, 'url']) || selectedFile.url;
if (!url) {
return;
}
const filename = selectedFile.name;
const element = document.createElement('a');
element.setAttribute('href', url);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
this.setState({ selectedFile: {} });
};
/**
*
*/
handleLoadMore = () => {
const { loadMedia, dynamicSearchQuery, page, privateUpload } = this.props;
loadMedia({ query: dynamicSearchQuery, page: page + 1, privateUpload });
@ -302,6 +332,7 @@ class MediaLibrary extends React.Component {
handlePersist={this.handlePersist}
handleDelete={this.handleDelete}
handleInsert={this.handleInsert}
handleDownload={this.handleDownload}
setScrollContainerRef={ref => (this.scrollContainerRef = ref)}
handleAssetClick={this.handleAssetClick}
handleLoadMore={this.handleLoadMore}

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { FileUploadButton } from 'UI';
import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
import { buttons, colors, colorsRaw, shadows, zIndex } from 'netlify-cms-ui-default';
const styles = {
button: css`
@ -61,6 +61,24 @@ const InsertButton = styled.button`
${buttons.green};
`;
const DownloadButton = styled.button`
${styles.button};
background-color: ${colors.button};
color: ${colors.buttonText};
${props =>
props.focused === true &&
css`
&:focus,
&:hover {
color: ${colorsRaw.white};
background-color: #555a65;
}
`}
`;
const UpperActionsContainer = styled.div``;
const LowerActionsContainer = styled.div`
margin-top: 30px;
`;
@ -69,22 +87,30 @@ const MediaLibraryActions = ({
uploadButtonLabel,
deleteButtonLabel,
insertButtonLabel,
downloadButtonLabel,
uploadEnabled,
deleteEnabled,
insertEnabled,
downloadEnabled,
insertVisible,
imagesOnly,
onPersist,
onDelete,
onInsert,
onDownload,
}) => (
<ActionsContainer>
<StyledUploadButton
label={uploadButtonLabel}
imagesOnly={imagesOnly}
onChange={onPersist}
disabled={!uploadEnabled}
/>
<UpperActionsContainer>
<DownloadButton onClick={onDownload} disabled={!downloadEnabled} focused={downloadEnabled}>
{downloadButtonLabel}
</DownloadButton>
<StyledUploadButton
label={uploadButtonLabel}
imagesOnly={imagesOnly}
onChange={onPersist}
disabled={!uploadEnabled}
/>
</UpperActionsContainer>
<LowerActionsContainer>
<DeleteButton onClick={onDelete} disabled={!deleteEnabled}>
{deleteButtonLabel}
@ -102,14 +128,17 @@ MediaLibraryActions.propTypes = {
uploadButtonLabel: PropTypes.string.isRequired,
deleteButtonLabel: PropTypes.string.isRequired,
insertButtonLabel: PropTypes.string.isRequired,
downloadButtonLabel: PropTypes.string.isRequired,
uploadEnabled: PropTypes.bool,
deleteEnabled: PropTypes.bool,
insertEnabled: PropTypes.bool,
insertVisible: PropTypes.bool,
downloadEnabled: PropTypes.bool,
imagesOnly: PropTypes.bool,
onPersist: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
onInsert: PropTypes.func.isRequired,
onDownload: PropTypes.func.isRequired,
};
export default MediaLibraryActions;

View File

@ -92,6 +92,7 @@ const MediaLibraryModal = ({
handlePersist,
handleDelete,
handleInsert,
handleDownload,
setScrollContainerRef,
handleAssetClick,
handleLoadMore,
@ -141,22 +142,25 @@ const MediaLibraryModal = ({
uploadButtonLabel={
isPersisting
? t('mediaLibrary.mediaLibraryModal.uploading')
: t('mediaLibrary.mediaLibraryModal.uploadNew')
: t('mediaLibrary.mediaLibraryModal.upload')
}
deleteButtonLabel={
isDeleting
? t('mediaLibrary.mediaLibraryModal.deleting')
: t('mediaLibrary.mediaLibraryModal.deleteSelected')
}
downloadButtonLabel={t('mediaLibrary.mediaLibraryModal.download')}
insertButtonLabel={t('mediaLibrary.mediaLibraryModal.chooseSelected')}
uploadEnabled={!shouldShowButtonLoader}
deleteEnabled={!shouldShowButtonLoader && hasSelection}
insertEnabled={hasSelection}
downloadEnabled={hasSelection}
insertVisible={canInsert}
imagesOnly={forImage}
onPersist={handlePersist}
onDelete={handleDelete}
onInsert={handleInsert}
onDownload={handleDownload}
/>
</LibraryTop>
{!shouldShowEmptyMessage ? null : (