migrate SpinnerImage to Mui 5 (#97)
* migrate Page to Mui 5 * migrate SpinnerImage to Mui 5 * match the style
This commit is contained in:
@@ -17,9 +17,7 @@ interface IProps {
|
||||
|
||||
imgRef?: React.RefObject<HTMLImageElement>
|
||||
|
||||
spinnerClassName?: string
|
||||
spinnerStyle?: SxProps<Theme>
|
||||
imgClassName?: string
|
||||
imgStyle?: CSSProperties
|
||||
|
||||
onImageLoad?: () => void
|
||||
@@ -27,7 +25,7 @@ interface IProps {
|
||||
|
||||
export default function SpinnerImage(props: IProps) {
|
||||
const {
|
||||
src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName, spinnerStyle, imgStyle,
|
||||
src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle,
|
||||
} = props;
|
||||
const [imageSrc, setImagsrc] = useState<string>('');
|
||||
|
||||
@@ -53,19 +51,18 @@ export default function SpinnerImage(props: IProps) {
|
||||
|
||||
if (imageSrc.length === 0) {
|
||||
return (
|
||||
<Box className={spinnerClassName} sx={spinnerStyle}>
|
||||
<Box sx={spinnerStyle}>
|
||||
<CircularProgress thickness={5} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (imageSrc === 'Not Found') {
|
||||
return <Box className={spinnerClassName} sx={spinnerStyle} />;
|
||||
return <Box sx={spinnerStyle} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
className={imgClassName}
|
||||
style={imgStyle}
|
||||
ref={imgRef}
|
||||
src={imageSrc}
|
||||
@@ -75,8 +72,6 @@ export default function SpinnerImage(props: IProps) {
|
||||
}
|
||||
|
||||
SpinnerImage.defaultProps = {
|
||||
spinnerClassName: '',
|
||||
imgClassName: '',
|
||||
spinnerStyle: {},
|
||||
imgStyle: {},
|
||||
onImageLoad: () => {},
|
||||
|
||||
Reference in New Issue
Block a user