diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js index c83b85313c..a05529b97d 100644 --- a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js @@ -8,11 +8,33 @@ import { AssetType, AssetDefinition } from '../../constants'; import { createAssetUrl } from '../../utils/createAssetUrl'; import toSingularTypes from '../../utils/toSingularTypes'; -export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, size, local }) => { +export const AssetCard = ({ + allowedTypes, + asset, + isSelected, + onSelect, + onEdit, + onRemove, + size, + local, +}) => { const singularTypes = toSingularTypes(allowedTypes); let handleSelect = onSelect ? () => onSelect(asset) : undefined; const fileType = asset.mime.split('/')[0]; + const commonAssetCardProps = { + id: asset.id, + extension: getFileExtension(asset.ext), + key: asset.id, + name: asset.name, + url: local ? asset.url : createAssetUrl(asset, true), + mime: asset.mime, + onEdit: onEdit ? () => onEdit(asset) : undefined, + onSelect: handleSelect, + onRemove: onRemove ? () => onRemove(asset) : undefined, + selected: isSelected, + size, + }; if (asset.mime.includes(AssetType.Video)) { const canSelectAsset = singularTypes.includes(fileType); @@ -21,20 +43,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s handleSelect = undefined; } - return ( - onEdit(asset) : undefined} - onSelect={handleSelect} - selected={isSelected} - size={size} - /> - ); + return ; } if (asset.mime.includes(AssetType.Image)) { @@ -46,18 +55,11 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s return ( onEdit(asset) : undefined} - onSelect={handleSelect} - selected={isSelected} - size={size} + width={asset.width} /> ); } @@ -68,18 +70,7 @@ export const AssetCard = ({ allowedTypes, asset, isSelected, onSelect, onEdit, s handleSelect = undefined; } - return ( - onEdit(asset) : undefined} - onSelect={handleSelect} - selected={isSelected} - size={size} - /> - ); + return ; }; AssetCard.defaultProps = { @@ -89,6 +80,7 @@ AssetCard.defaultProps = { local: false, onSelect: undefined, onEdit: undefined, + onRemove: undefined, size: 'M', }; @@ -98,6 +90,7 @@ AssetCard.propTypes = { local: PropTypes.bool, onSelect: PropTypes.func, onEdit: PropTypes.func, + onRemove: PropTypes.func, isSelected: PropTypes.bool, size: PropTypes.oneOf(['S', 'M']), }; diff --git a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js index cd7459af77..97d1cf0ca4 100644 --- a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js @@ -16,6 +16,7 @@ import { } from '@strapi/design-system/Card'; import { IconButton } from '@strapi/design-system/IconButton'; import Pencil from '@strapi/icons/Pencil'; +import Trash from '@strapi/icons/Trash'; import { useIntl } from 'react-intl'; import { getTrad } from '../../utils'; @@ -32,6 +33,7 @@ export const ImageAssetCard = ({ selected, onSelect, onEdit, + onRemove, size, alt, }) => { @@ -46,13 +48,26 @@ export const ImageAssetCard = ({ {onSelect && } - {onEdit && ( + {(onRemove || onEdit) && ( - } - onClick={onEdit} - /> + {onRemove && ( + } + onClick={onRemove} + /> + )} + + {onEdit && ( + } + onClick={onEdit} + /> + )} )} @@ -81,6 +96,7 @@ ImageAssetCard.defaultProps = { selected: false, onEdit: undefined, onSelect: undefined, + onRemove: undefined, size: 'M', }; @@ -91,6 +107,7 @@ ImageAssetCard.propTypes = { name: PropTypes.string.isRequired, onEdit: PropTypes.func, onSelect: PropTypes.func, + onRemove: PropTypes.func, width: PropTypes.number, thumbnail: PropTypes.string.isRequired, selected: PropTypes.bool, diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js index d9b2ac7990..dff857cd13 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js @@ -23,6 +23,7 @@ export const PendingAssetStep = ({ addUploadedFiles, onClose, onEditAsset, + onRemoveAsset, assets, onClickAddAsset, onCancelUpload, @@ -126,6 +127,7 @@ export const PendingAssetStep = ({ local alt={asset.name} onEdit={onEditAsset} + onRemove={onRemoveAsset} /> ); @@ -168,6 +170,7 @@ PendingAssetStep.propTypes = { assets: PropTypes.arrayOf(AssetDefinition).isRequired, onClose: PropTypes.func.isRequired, onEditAsset: PropTypes.func.isRequired, + onRemoveAsset: PropTypes.func.isRequired, onClickAddAsset: PropTypes.func.isRequired, onUploadSucceed: PropTypes.func.isRequired, onCancelUpload: PropTypes.func.isRequired, diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js index 0c33a31032..60535fded4 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js @@ -78,6 +78,11 @@ export const UploadAssetDialog = ({ } }; + const handleRemoveAsset = assetToRemove => { + const nextAssets = assets.filter(asset => asset !== assetToRemove); + setAssets(nextAssets); + }; + return ( {step === Steps.AddAsset && ( @@ -93,6 +98,7 @@ export const UploadAssetDialog = ({ onClose={handleClose} assets={assets} onEditAsset={setAssetToEdit} + onRemoveAsset={handleRemoveAsset} onClickAddAsset={moveToAddAsset} onCancelUpload={handleCancelUpload} onUploadSucceed={handleUploadSuccess}