63 lines
1.2 KiB
JavaScript
63 lines
1.2 KiB
JavaScript
/**
|
|
* Custom Image
|
|
*
|
|
* @module CustomImage
|
|
*/
|
|
import React, { memo, useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
import classNames from "classnames";
|
|
|
|
import { Job } from "@enact/core/util";
|
|
|
|
import css from "./CustomImage.module.less";
|
|
|
|
//animationSpeed : "slow", "normal", "fast", ==> 500ms, 250ms, 10ms
|
|
export default memo(function CustomImage({
|
|
src,
|
|
className,
|
|
hide,
|
|
delay = 100,
|
|
animationSpeed = "slow",
|
|
onLoad,
|
|
}) {
|
|
const [imageLoaded, setImageLoaded] = useState(false);
|
|
const [imgSrc, setImgSrc] = useState("");
|
|
|
|
const showImageJob = useRef(
|
|
new Job((setImageLoaded) => {
|
|
setImageLoaded(true);
|
|
}, delay)
|
|
);
|
|
|
|
useEffect(() => {
|
|
setImageLoaded(false);
|
|
setImgSrc(src);
|
|
showImageJob.current.stop();
|
|
}, [src]);
|
|
|
|
const _onLoad = useCallback(() => {
|
|
showImageJob.current.start(setImageLoaded);
|
|
if (onLoad) onLoad();
|
|
}, [onLoad]);
|
|
|
|
const onError = useCallback(() => {}, []);
|
|
|
|
if (!src) {
|
|
return null;
|
|
}
|
|
return (
|
|
<img
|
|
className={classNames(
|
|
css.customimage,
|
|
className,
|
|
!imageLoaded || hide ? css.hidden : null,
|
|
css[animationSpeed]
|
|
)}
|
|
src={imgSrc}
|
|
onLoad={_onLoad}
|
|
onError={onError}
|
|
alt=""
|
|
/>
|
|
);
|
|
});
|