decap-cms-widget-file 3.2.0 → 3.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-file",
   "description": "Widget for uploading files in Decap CMS.",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "homepage": "https://www.decapcms.org/docs/widgets/#file",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-file",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
@@ -38,5 +38,5 @@
     "react-immutable-proptypes": "^2.1.0",
     "uuid": "^8.3.2"
   },
-  "gitHead": "ed7e99318007b83f4c57f3237bf92b931676820a"
+  "gitHead": "ae01ad6f2b139f93472c8f0d049d35277d8583ca"
 }

package/src/withFileControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
@@ -61,8 +61,19 @@ const StyledImage = styled.img`
   object-fit: contain;
 `;
 
-function Image(props) {
-  return <StyledImage role="presentation" {...props} />;
+function Image({ value, field, getAsset }) {
+  const [asset, setAsset] = useState(null);
+
+  useEffect(() => {
+    if (value) {
+      const newAsset = getAsset(value, field);
+      setAsset(newAsset);
+    } else {
+      setAsset(null);
+    }
+  }, [value, field, getAsset]);
+
+  return asset ? <StyledImage role="presentation" src={asset} /> : null;
 }
 
 function SortableImageButtons({ onRemove, onReplace }) {
@@ -89,7 +100,7 @@ function SortableImage(props) {
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <ImageWrapper sortable>
-        <Image src={getAsset(itemValue, field) || ''} />
+        <Image value={itemValue} field={field} getAsset={getAsset} />
       </ImageWrapper>
       <SortableImageButtons
         item={itemValue}
@@ -417,6 +428,7 @@ export default function withFileControl({ forImage } = {}) {
     renderImages = () => {
       const { getAsset, value, field } = this.props;
       const items = valueListToSortableArray(value);
+
       if (isMultiple(value)) {
         return (
           <SortableMultiImageWrapper
@@ -433,10 +445,9 @@ export default function withFileControl({ forImage } = {}) {
         );
       }
 
-      const src = getAsset(value, field);
       return (
         <ImageWrapper>
-          <Image src={src || ''} />
+          <Image value={value} field={field} getAsset={getAsset} />
         </ImageWrapper>
       );
     };