Fix #3390: Rename previewSrc as zoomSrc (#3394)

primefaces · Sep 30, 2022 · e886383 · e886383
1 parent 7cb83ed
commit e886383
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/api-generator/components/image.js b/api-generator/components/image.js
@@ -12,10 +12,10 @@ const ImageProps = [
         description: 'Specifies the path to the image.'
     },
     {
-        name: 'previewSrc',
+        name: 'zoomSrc',
         type: 'string',
         default: 'null',
-        description: 'Preview image that may be different than "src" image.'
+        description: 'Zoomed image that may be different than "src" image.'
     },
     {
         name: 'downloadable',

diff --git a/components/doc/image/index.js b/components/doc/image/index.js
@@ -27,7 +27,7 @@ export class ImageDemo extends Component {
                     <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" preview />
 
                     <h5>Thumbnail</h5>
-                    <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" previewSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
+                    <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" zoomSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
             </div>
         )
     }
@@ -52,7 +52,7 @@ const ImageDemo = () => {
                 <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" preview />
 
                 <h5>Thumbnail</h5>
-                <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" previewSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
+                <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" zoomSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
             </div>
         </div>
     )
@@ -77,7 +77,7 @@ const ImageDemo = () => {
                 <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" preview />
 
                 <h5>Thumbnail</h5>
-                <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" previewSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
+                <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" zoomSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
             </div>
         </div>
     )
@@ -105,7 +105,7 @@ const ImageDemo = () => {
                 <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" preview />
 
                 <h5>Thumbnail</h5>
-                <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" previewSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
+                <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" zoomSrc="https://www.primefaces.org/wp-content/uploads/2020/05/small.png" alt="Image" width="80" height="60" preview />
             </div>
         </div>
     )
@@ -149,7 +149,7 @@ import { Image } from 'primereact/image';
 
                     <h5>Thumbnail</h5>
                     <p>
-                        Allow different images or sizes for source and preview images using <i>previewSrc</i> property.
+                        Allow different images or sizes for source and preview images using <i>zoomSrc</i> property.
                     </p>
 
                     <h5>Templating</h5>
@@ -189,10 +189,10 @@ import { Image } from 'primereact/image';
                                     <td>Controls the preview functionality.</td>
                                 </tr>
                                 <tr>
-                                    <td>previewSrc</td>
+                                    <td>zoomSrc</td>
                                     <td>string</td>
                                     <td>null</td>
-                                    <td>Preview image that may be different than "src" image.</td>
+                                    <td>Zoomed image that may be different than "src" image.</td>
                                 </tr>
                                 <tr>
                                     <td>downloadable</td>

diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
@@ -148,7 +148,7 @@ export const Image = React.memo(
                         onExited={onExited}
                     >
                         <div ref={previewRef}>
-                            <img src={props.previewSrc || props.src} className="p-image-preview" style={imagePreviewStyle} onClick={onPreviewImageClick} alt={props.alt} />
+                            <img src={props.zoomSrc || props.src} className="p-image-preview" style={imagePreviewStyle} onClick={onPreviewImageClick} alt={props.alt} />
                         </div>
                     </CSSTransition>
                 </div>
@@ -194,7 +194,7 @@ Image.defaultProps = {
     imageStyle: null,
     onError: null,
     preview: false,
-    previewSrc: null,
+    zoomSrc: null,
     src: null,
     template: null,
     width: null

diff --git a/components/lib/image/image.d.ts b/components/lib/image/image.d.ts
@@ -8,7 +8,7 @@ export interface ImageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
     imageClassName?: string;
     imageStyle?: string;
     preview?: boolean;
-    previewSrc?: string;
+    zoomSrc?: string;
     src?: string;
     template?: any;
     width?: string;

diff --git a/pages/image/index.js b/pages/image/index.js
@@ -36,7 +36,7 @@ const ImageDemo = () => {
                     <Image src={`${contextPath}/images/galleria/galleria12.jpg`} alt="Image" width="250" preview />
 
                     <h5>Thumbnail</h5>
-                    <Image src={`${contextPath}/images/galleria/galleria14s.jpg`} previewSrc={`${contextPath}/images/galleria/galleria14.jpg`} alt="Image" width="80" height="60" preview />
+                    <Image src={`${contextPath}/images/galleria/galleria14s.jpg`} zoomSrc={`${contextPath}/images/galleria/galleria14.jpg`} alt="Image" width="80" height="60" preview />
                 </div>
             </div>