Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #3390: Image add previewSrc property #3391

Merged
merged 1 commit into from
Sep 29, 2022
Merged

Fix #3390: Image add previewSrc property #3391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions api-generator/components/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
45 changes: 37 additions & 8 deletions components/doc/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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>
)
}
Expand All @@ -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>
)
Expand All @@ -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>
)
Expand All @@ -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>
)
Expand Down Expand Up @@ -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.
Expand All @@ -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>
Expand Down
37 changes: 20 additions & 17 deletions components/lib/image/Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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);
Expand All @@ -40,6 +36,10 @@ export const Image = React.memo(
previewClick.current = false;
};

const onPreviewImageClick = () => {
previewClick.current = true;
};

const onDownload = () => {
const { alt: name, src } = props;

Expand Down Expand Up @@ -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>
);
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -157,6 +157,8 @@ export const Image = React.memo(

React.useImperativeHandle(ref, () => ({
props,
show,
hide,
getElement: () => elementRef.current,
getImage: () => imageRef.current
}));
Expand All @@ -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}>
Expand All @@ -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
};
15 changes: 9 additions & 6 deletions components/lib/image/image.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
17 changes: 10 additions & 7 deletions pages/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>

Expand Down