Skip to content

Commit

Permalink
refactor: code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@erezrokah
erezrokah committed Jan 12, 2021
1 parent 97709e3 commit cada8c9
Show file tree
Hide file tree
Showing 8 changed files with 381 additions and 90 deletions.
2 changes: 1 addition & 1 deletion packages/netlify-cms-backend-github/src/implementation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ export default class GitHub implements Implementation {
displayURL: { id, path },
path,
isDirectory: type === TreeFileType.TREE,
hasChildren: files.filter(file => file.path.startsWith(path)).length > 1
hasChildren: files.filter(file => file.path.startsWith(path)).length > 1,
};
});
return withDisplayUrls;
Expand Down
19 changes: 17 additions & 2 deletions packages/netlify-cms-core/src/actions/mediaLibrary.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,14 @@ export function persistMedia(file: File, opts: MediaOptions = {}) {
const fileName = sanitizeSlug(file.name.toLowerCase(), state.config.get('slug'));
const entry = state.entryDraft.get('entry');
const collection = state.collections.get(entry?.get('collection'));
const path = selectMediaFilePath(state.config, collection, entry, fileName, field, currentMediaFolder);
const path = selectMediaFilePath(
state.config,
collection,
entry,
fileName,
field,
currentMediaFolder,
);
const existingFile = files.find(existingFile => existingFile.path.toLowerCase() === path);
const editingDraft = selectEditingDraft(state.entryDraft);

Expand Down Expand Up @@ -264,7 +271,14 @@ export function persistMedia(file: File, opts: MediaOptions = {}) {
} else {
const entry = state.entryDraft.get('entry');
const collection = state.collections.get(entry?.get('collection'));
const path = selectMediaFilePath(state.config, collection, entry, fileName, field, currentMediaFolder);
const path = selectMediaFilePath(
state.config,
collection,
entry,
fileName,
field,
currentMediaFolder,
);
assetProxy = createAssetProxy({
file,
path,
Expand Down Expand Up @@ -414,6 +428,7 @@ export function mediaLoading(page: number) {
interface MediaOptions {
privateUpload?: boolean;
field?: EntryField;
currentMediaFolder?: string;
}

export function mediaLoaded(files: ImplementationMediaFile[], opts: MediaOptions = {}) {
Expand Down
61 changes: 39 additions & 22 deletions packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,24 +111,37 @@ class MediaLibrary extends React.Component {
toTableData = files => {
const tableData =
files &&
files.map(({ key, name, id, size, path, queryOrder, displayURL, draft, isDirectory, hasChildren }) => {
const ext = fileExtension(name).toLowerCase();
return {
files.map(
({
key,
id,
name,
path,
type: ext.toUpperCase(),
id,
size,
path,
queryOrder,
displayURL,
draft,
isDirectory,
hasChildren,
isImage: IMAGE_EXTENSIONS.includes(ext),
isViewableImage: IMAGE_EXTENSIONS_VIEWABLE.includes(ext),
};
});
}) => {
const ext = fileExtension(name).toLowerCase();
return {
key,
id,
name,
path,
type: ext.toUpperCase(),
size,
queryOrder,
displayURL,
draft,
isDirectory,
hasChildren,
isImage: IMAGE_EXTENSIONS.includes(ext),
isViewableImage: IMAGE_EXTENSIONS_VIEWABLE.includes(ext),
};
},
);

/**
* Get the sort order for use with `lodash.orderBy`, and always add the
Expand All @@ -145,22 +158,24 @@ class MediaLibrary extends React.Component {
};

isSelectedAsset = asset => {
return (this.state.selectedAssets || []).filter(selectedAsset => {
return selectedAsset.key === asset.key
}).length > 0;
}
return (
(this.state.selectedAssets || []).filter(selectedAsset => {
return selectedAsset.key === asset.key;
}).length > 0
);
};

updateSelectedAssets = (asset) => {
updateSelectedAssets = asset => {
let selectedAssets = this.state.selectedAssets || [];
if (!this.isSelectedAsset(asset)) {
selectedAssets.push(asset)
selectedAssets.push(asset);
} else {
selectedAssets = selectedAssets.filter(selectedAsset => {
return selectedAsset.key !== asset.key;
})
});
}
this.setState({ selectedAssets });
}
};

handleAssetCheckboxChange = (asset, event) => {
event.stopPropagation();
Expand Down Expand Up @@ -237,9 +252,9 @@ class MediaLibrary extends React.Component {
if (!window.confirm(t('mediaLibrary.mediaLibrary.onDelete'))) {
return;
}
const filesToDelete = selectedAssets.map(selectedAsset =>
files.find(file => selectedAsset.key === file.key)
)
const filesToDelete = selectedAssets.map(selectedAsset =>
files.find(file => selectedAsset.key === file.key),
);
for (const file of filesToDelete) {
await deleteMedia(file, { privateUpload });
}
Expand Down Expand Up @@ -346,7 +361,9 @@ class MediaLibrary extends React.Component {

const currentMediaFolder = this.state.currentMediaFolder || defaultMediaFolder;
const currentDirFiles = files.filter(file => dirname(file.path) === currentMediaFolder);
const currentDirFilesOrderedByTreeType = (currentDirFiles || []).filter(file => file.isDirectory).concat((currentDirFiles || []).filter(file => !file.isDirectory));
const currentDirFilesOrderedByTreeType = (currentDirFiles || [])
.filter(file => file.isDirectory)
.concat((currentDirFiles || []).filter(file => !file.isDirectory));
return (
<MediaLibraryModal
isVisible={isVisible}
Expand Down
31 changes: 18 additions & 13 deletions packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,27 +110,28 @@ const AssetCheckbox = styled.input`
border-width: 0 !important;
&:after {
border: 1px solid ${inputBorderColor};
content: "";
content: '';
background-color: ${inputBackgroundColor};
width: ${radioButtonCheckboxWidthHeight};
height: ${radioButtonCheckboxWidthHeight};
border-radius: 50%;
position: absolute;
top: 0;
left: 0px;
}
&:checked:after, &.checked:after {
background: ${radioCheckboxSelectedBackgroundColor} ${svgDataRriIconTick} no-repeat ${radioCheckboxSelectedBackgroundPosition};
&:hover:after {
border-color: ${inputHoverBorderColor};
}
&:checked:after,
&.checked:after {
background: ${radioCheckboxSelectedBackgroundColor} ${svgDataRriIconTick} no-repeat
${radioCheckboxSelectedBackgroundPosition};
background-size: ${radioCheckboxSelectedBackgroundSize};
}
&:focus:after, &:focus:checked:after {
&:focus:after,
&:focus:checked:after {
border-color: ${inputFocusBorderColor};
}
&:hover:after {
border-color ${inputHoverBorderColor};
}
`;

const CheckboxContainer = styled.div`
Expand Down Expand Up @@ -178,7 +179,7 @@ class MediaLibraryCard extends React.Component {
isDraft,
isDirectory,
size,
hasChildren
hasChildren,
} = this.props;
const url = displayURL.get('url');
var cardImageWrapper = (
Expand Down Expand Up @@ -212,11 +213,15 @@ class MediaLibraryCard extends React.Component {
<AssetCheckbox type="checkbox" onClick={onChecked} checked={isSelected} readOnly />
</CheckboxContainer>
) : null}

{previewElement}
<CardText>
<ObjectName>{text}</ObjectName>
{isViewableImage ? <ImageMeta>{type} - {readableFileSize(size)}</ImageMeta> : null}
{isViewableImage ? (
<ImageMeta>
{type} - {readableFileSize(size)}
</ImageMeta>
) : null}
</CardText>
</Card>
);
Expand All @@ -233,7 +238,7 @@ MediaLibraryCard.propTypes = {
isSelected: PropTypes.bool,
displayURL: ImmutablePropTypes.map.isRequired,
text: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
draftText: PropTypes.string.isRequired,
width: PropTypes.string.isRequired,
height: PropTypes.string.isRequired,
Expand Down
9 changes: 3 additions & 6 deletions packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const CardWrapper = props => {
style,
data: {
mediaItems,
isSelectedFile,
isSelectedAsset,
onAssetClick,
onAssetCheckboxClick,
Expand Down Expand Up @@ -44,13 +43,14 @@ const CardWrapper = props => {
height: style.height - gutter,
}}
>

<MediaLibraryCard
key={file.key}
isSelected={isSelectedAsset(file)}
text={file.name}
onClick={() => onAssetClick(file)}
onChecked={(event) => {onAssetCheckboxClick(file, event)}}
onChecked={event => {
onAssetCheckboxClick(file, event);
}}
isDraft={file.draft}
draftText={cardDraftText}
width={cardWidth}
Expand Down Expand Up @@ -105,7 +105,6 @@ const VirtualizedGrid = props => {
const PaginatedGrid = ({
setScrollContainerRef,
mediaItems,
isSelectedFile,
isSelectedAsset,
onAssetClick,
onAssetCheckboxClick,
Expand All @@ -127,7 +126,6 @@ const PaginatedGrid = ({
{mediaItems.map(file => (
<MediaLibraryCard
key={file.key}
// isSelected={isSelectedFile(file)}
isSelected={isSelectedAsset(file)}
text={file.name}
onClick={() => onAssetClick(file)}
Expand Down Expand Up @@ -190,7 +188,6 @@ MediaLibraryCardGrid.propTypes = {
draft: PropTypes.bool,
}),
).isRequired,
isSelectedFile: PropTypes.func.isRequired,
onAssetClick: PropTypes.func.isRequired,
canLoadMore: PropTypes.bool,
onLoadMore: PropTypes.func.isRequired,
Expand Down
7 changes: 3 additions & 4 deletions packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { Map } from 'immutable';
import { isEmpty } from 'lodash';
import { translate } from 'react-polyglot';
import { Modal } from 'UI';
import MediaLibraryTop from './MediaLibraryTop';
Expand Down Expand Up @@ -74,7 +73,6 @@ const MediaLibraryModal = ({
isPaginating,
privateUpload,
query,
selectedFile,
selectedAssets,
handleFilter,
handleQuery,
Expand Down Expand Up @@ -144,8 +142,9 @@ const MediaLibraryModal = ({
<MediaLibraryCardGrid
setScrollContainerRef={setScrollContainerRef}
mediaItems={tableData}
isSelectedFile={file => selectedFile.key === file.key}
isSelectedAsset={file => (selectedAssets || []).filter(selectedAsset => selectedAsset.key === file.key).length > 0}
isSelectedAsset={file =>
(selectedAssets || []).filter(selectedAsset => selectedAsset.key === file.key).length > 0
}
onAssetClick={handleAssetClick}
onAssetCheckboxClick={handleAssetCheckboxChange}
canLoadMore={hasNextPage}
Expand Down
Loading

0 comments on commit cada8c9

Please sign in to comment.