decap-cms-widget-file 3.1.4-beta.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.1.4-beta.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",
@@ -34,9 +34,9 @@
     "decap-cms-ui-default": "^3.0.0",
     "immutable": "^3.7.6",
     "prop-types": "^15.7.2",
-    "react": "17.x || 18.x",
+    "react": "^19.1.0",
     "react-immutable-proptypes": "^2.1.0",
     "uuid": "^8.3.2"
   },
-  "gitHead": "0f91300093c3c074f50c7af8f20a4ad331806e62"
+  "gitHead": "ae01ad6f2b139f93472c8f0d049d35277d8583ca"
 }

package/src/withFileControl.js

@@ -1,10 +1,10 @@
-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';
 import { css } from '@emotion/react';
 import { Map, List } from 'immutable';
-import { once } from 'lodash';
+import once from 'lodash/once';
 import { v4 as uuid } from 'uuid';
 import { oneLine } from 'common-tags';
 import {
@@ -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}
@@ -257,6 +268,11 @@ export default function withFileControl({ forImage } = {}) {
       this.controlID = uuid();
     }
 
+    componentDidMount() {
+      // Manually validate PropTypes - React 19 breaking change
+      PropTypes.checkPropTypes(FileControl.propTypes, this.props, 'prop', 'FileControl');
+    }
+
     shouldComponentUpdate(nextProps) {
       /**
        * Always update if the value or getAsset changes.
@@ -412,6 +428,7 @@ export default function withFileControl({ forImage } = {}) {
     renderImages = () => {
       const { getAsset, value, field } = this.props;
       const items = valueListToSortableArray(value);
+
       if (isMultiple(value)) {
         return (
           <SortableMultiImageWrapper
@@ -428,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>
       );
     };