Fix #3390: Image add previewSrc property (#3391)

primefaces · Sep 29, 2022 · 7cb83ed · 7cb83ed
1 parent 7f682d7
commit 7cb83ed
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 38 deletions.
diff --git a/api-generator/components/image.js b/api-generator/components/image.js
@@ -5,6 +5,18 @@ const ImageProps = [
         default: 'false',
         description: 'Controls the preview functionality.'
     },
+    {
+        name: 'src',
+        type: 'string',
+        default: 'null',
+        description: 'Specifies the path to the image.'
+    },
+    {
+        name: 'previewSrc',
+        type: 'string',
+        default: 'null',
+        description: 'Preview image that may be different than "src" image.'
+    },
     {
         name: 'downloadable',
         type: 'boolean',

diff --git a/components/doc/image/index.js b/components/doc/image/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const ImageDoc = memo(() => {
     const sources = {
@@ -22,9 +22,12 @@ export class ImageDemo extends Component {
                     <h5>Basic</h5>
                     <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" />
 
-                    <h5>Preview</h5>
+
+                    <h5>Preview and Zoom</h5>
                     <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" preview />
-                </div>
+
+                    <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 />
             </div>
         )
     }
@@ -45,8 +48,11 @@ const ImageDemo = () => {
                 <h5>Basic</h5>
                 <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" />
 
-                <h5>Preview</h5>
+                <h5>Preview and Zoom</h5>
                 <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 />
             </div>
         </div>
     )
@@ -67,8 +73,11 @@ const ImageDemo = () => {
                 <h5>Basic</h5>
                 <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" />
 
-                <h5>Preview</h5>
+                <h5>Preview and Zoom</h5>
                 <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 />
             </div>
         </div>
     )
@@ -92,8 +101,11 @@ const ImageDemo = () => {
                 <h5>Basic</h5>
                 <Image src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" alt="Image" width="250" />
 
-                <h5>Preview</h5>
+                <h5>Preview and Zoom</h5>
                 <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 />
             </div>
         </div>
     )
@@ -135,6 +147,11 @@ import { Image } from 'primereact/image';
                     <h5>Preview</h5>
                     <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
 
+                    <h5>Thumbnail</h5>
+                    <p>
+                        Allow different images or sizes for source and preview images using <i>previewSrc</i> property.
+                    </p>
+
                     <h5>Templating</h5>
                     <p>
                         An eye icon is displayed by default when the image is hovered in preview mode. Use the<i>template</i>prop for custom content.
@@ -159,12 +176,24 @@ import { Image } from 'primereact/image';
                                 </tr>
                             </thead>
                             <tbody>
+                                <tr>
+                                    <td>src</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Specifies the path to the image.</td>
+                                </tr>
                                 <tr>
                                     <td>preview</td>
                                     <td>boolean</td>
                                     <td>false</td>
                                     <td>Controls the preview functionality.</td>
                                 </tr>
+                                <tr>
+                                    <td>previewSrc</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Preview image that may be different than "src" image.</td>
+                                </tr>
                                 <tr>
                                     <td>downloadable</td>
                                     <td>boolean</td>

diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
@@ -17,7 +17,7 @@ export const Image = React.memo(
         const previewRef = React.useRef(null);
         const previewClick = React.useRef(false);
 
-        const onImageClick = () => {
+        const show = () => {
             if (props.preview) {
                 setMaskVisibleState(true);
                 setTimeout(() => {
@@ -26,11 +26,7 @@ export const Image = React.memo(
             }
         };
 
-        const onPreviewImageClick = () => {
-            previewClick.current = true;
-        };
-
-        const onMaskClick = () => {
+        const hide = () => {
             if (!previewClick.current) {
                 setPreviewVisibleState(false);
                 setRotateState(0);
@@ -40,6 +36,10 @@ export const Image = React.memo(
             previewClick.current = false;
         };
 
+        const onPreviewImageClick = () => {
+            previewClick.current = true;
+        };
+
         const onDownload = () => {
             const { alt: name, src } = props;
 
@@ -96,7 +96,7 @@ export const Image = React.memo(
         const createPreview = () => {
             if (props.preview) {
                 return (
-                    <div className="p-image-preview-indicator" onClick={onImageClick}>
+                    <div className="p-image-preview-indicator" onClick={show}>
                         {content}
                     </div>
                 );
@@ -112,7 +112,7 @@ export const Image = React.memo(
             // const rotateClassName = 'p-image-preview-rotate-' + rotateScale;
 
             return (
-                <div ref={maskRef} className="p-image-mask p-component-overlay p-component-overlay-enter" onClick={onMaskClick}>
+                <div ref={maskRef} className="p-image-mask p-component-overlay p-component-overlay-enter" onClick={hide}>
                     <div className="p-image-toolbar">
                         {downloadable && (
                             <button className="p-image-action p-link" onClick={onDownload} type="button">
@@ -148,7 +148,7 @@ export const Image = React.memo(
                         onExited={onExited}
                     >
                         <div ref={previewRef}>
-                            <img src={props.src} className="p-image-preview" style={imagePreviewStyle} onClick={onPreviewImageClick} alt={props.alt} />
+                            <img src={props.previewSrc || props.src} className="p-image-preview" style={imagePreviewStyle} onClick={onPreviewImageClick} alt={props.alt} />
                         </div>
                     </CSSTransition>
                 </div>
@@ -157,6 +157,8 @@ export const Image = React.memo(
 
         React.useImperativeHandle(ref, () => ({
             props,
+            show,
+            hide,
             getElement: () => elementRef.current,
             getImage: () => imageRef.current
         }));
@@ -169,7 +171,7 @@ export const Image = React.memo(
         const element = createElement();
         const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : <i className="p-image-preview-icon pi pi-eye"></i>;
         const preview = createPreview();
-        const image = <img ref={imageRef} src={src} className={props.imageClassName} width={width} height={height} style={props.imageStyle} alt={alt} onError={props.onError} />;
+        const image = props.src && <img ref={imageRef} src={src} className={props.imageClassName} width={width} height={height} style={props.imageStyle} alt={alt} onError={props.onError} />;
 
         return (
             <span ref={elementRef} className={containerClassName} {...otherProps}>
@@ -184,15 +186,16 @@ export const Image = React.memo(
 Image.displayName = 'Image';
 Image.defaultProps = {
     __TYPE: 'Image',
-    preview: false,
+    alt: null,
     className: null,
     downloadable: false,
-    imageStyle: null,
+    height: null,
     imageClassName: null,
-    template: null,
+    imageStyle: null,
+    onError: null,
+    preview: false,
+    previewSrc: null,
     src: null,
-    alt: null,
-    width: null,
-    height: null,
-    onError: null
+    template: null,
+    width: null
 };
diff --git a/components/lib/image/image.d.ts b/components/lib/image/image.d.ts
@@ -1,21 +1,24 @@
 import * as React from 'react';
 
 export interface ImageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
-    preview?: boolean;
+    alt?: string;
+    children?: React.ReactNode;
     downloadable?: boolean;
-    imageStyle?: string;
+    height?: string;
     imageClassName?: string;
-    template?: any;
+    imageStyle?: string;
+    preview?: boolean;
+    previewSrc?: string;
     src?: string;
-    alt?: string;
+    template?: any;
     width?: string;
-    height?: string;
     onShow?(): void;
     onHide?(): void;
-    children?: React.ReactNode;
 }
 
 export declare class Image extends React.Component<ImageProps, any> {
+    public show(): void;
+    public hide(): void;
     public getElement(): HTMLSpanElement;
     public getImage(): HTMLImageElement;
 }
diff --git a/pages/image/index.js b/pages/image/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Image } from '../../components/lib/image/Image';
+import getConfig from 'next/config';
+import Head from 'next/head';
 import Link from 'next/link';
-import ImageDoc from '../../components/doc/image';
+import React from 'react';
 import { DocActions } from '../../components/doc/common/docactions';
-import Head from 'next/head';
-import getConfig from 'next/config';
+import ImageDoc from '../../components/doc/image';
+import { Image } from '../../components/lib/image/Image';
 
 const ImageDemo = () => {
     const contextPath = getConfig().publicRuntimeConfig.contextPath;
@@ -32,8 +32,11 @@ const ImageDemo = () => {
                     <h5>Basic</h5>
                     <Image src={`${contextPath}/images/galleria/galleria7.jpg`} alt="Image" width="250" />
 
-                    <h5>Preview</h5>
-                    <Image src={`${contextPath}/images/galleria/galleria11.jpg`} alt="Image" width="250" preview />
+                    <h5>Preview and Zoom</h5>
+                    <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 />
                 </div>
             </div>