1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-16 22:50:10 +03:00

F OpenNebula/one#5422: Add new prop to image component

This commit is contained in:
Sergio Betanzos 2021-07-15 12:48:59 +02:00
parent da048e2300
commit 26cb29c1fb
No known key found for this signature in database
GPG Key ID: E3E704F097737136
3 changed files with 18 additions and 10 deletions

View File

@ -66,7 +66,12 @@ const ProvisionCard = memo(
isSelected={isSelected}
mediaProps={{
component: 'div',
children: <Image src={imageUrl} withSources={image && !isExternalImage} />
children: (
<Image
src={imageUrl}
withSources={image && !isExternalImage}
/>
)
}}
subheader={`#${ID}`}
title={NAME}

View File

@ -47,7 +47,12 @@ const ProvisionTemplateCard = memo(
isSelected={isSelected}
mediaProps={{
component: 'div',
children: <Image src={imageUrl} withSources={image && !isExternalImage} />
children: (
<Image
src={imageUrl}
withSources={image && !isExternalImage}
/>
)
}}
subheader={description}
title={name}

View File

@ -29,19 +29,15 @@ const INITIAL_STATE = { fail: false, retries: 0 }
* @param {string} props.imgProps - Properties to image element
* @returns {React.JSXElementConstructor} Picture with all images format
*/
const Image = memo(({ src = DEFAULT_IMAGE, withSources, imgProps }) => {
const Image = memo(({ src, imageInError, withSources, imgProps }) => {
const [error, setError] = useState(INITIAL_STATE)
/**
* Increment retries by one in error state.
*/
/** Increment retries by one in error state. */
const addRetry = () => {
setError(prev => ({ ...prev, retries: prev.retries + 1 }))
}
/**
* Set failed state.
*/
/** Set failed state. */
const onImageFail = () => {
setError(prev => ({ fail: true, retries: prev.retries + 1 }))
}
@ -51,7 +47,7 @@ const Image = memo(({ src = DEFAULT_IMAGE, withSources, imgProps }) => {
}
if (error.fail) {
return <img src={DEFAULT_IMAGE} draggable={false} onError={addRetry} />
return <img src={imageInError} draggable={false} onError={addRetry} />
}
return (
@ -69,6 +65,7 @@ const Image = memo(({ src = DEFAULT_IMAGE, withSources, imgProps }) => {
Image.propTypes = {
src: PropTypes.string,
imageInError: PropTypes.string,
withSources: PropTypes.bool,
imgProps: PropTypes.shape({
decoding: PropTypes.oneOf(['sync', 'async', 'auto']),
@ -79,6 +76,7 @@ Image.propTypes = {
Image.defaultProps = {
src: undefined,
imageInError: DEFAULT_IMAGE,
withSources: false,
imgProps: {
decoding: 'async',