feat: add image context to use NextImage instead of normal img tag (#313)

VitaliiDC8 · web-flow · commit 10841dcbcc9b · 2023-04-25T09:52:53.000+02:00
* feat: add passive flag and alt to img

* fix: change defer to loading attribute for iframe

* feat: add image context

* feat: removed passive flag from listener

* feat: removed changes from another pr

* feat: removed changes from another pr
diff --git a/src/blocks/Security/Security.tsx b/src/blocks/Security/Security.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {AnimateBlock, FullWidthBackground, HTML, Link, Media} from '../../components';
+import {AnimateBlock, FullWidthBackground, HTML, ImageBase, Link, Media} from '../../components';
 import {Col, Grid, Row} from '../../grid';
 import {SecurityBlockProps} from '../../models';
 import {block} from '../../utils';
@@ -26,7 +26,7 @@ export const SecurityBlock = (props: SecurityBlockProps) => {
                         <Row className={b('points')}>
                             {points.map(({text, link, img}, index) => (
                                 <Col key={index} className={b('point')} sizes={{sm: 4, all: 12}}>
-                                    <img className={b('point-icon')} src={img} />
+                                    <ImageBase className={b('point-icon')} src={img} />
                                     <HTML className={b('point-text')} block={true}>
                                         {text}
                                     </HTML>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -8,6 +8,7 @@ import {useMetrika} from '../../hooks/useMetrika';
 import {Github} from '../../icons';
 import {ButtonProps as ButtonParams, DefaultEventNames} from '../../models';
 import {block, setUrlTld} from '../../utils';
+import ImageBase from '../ImageBase/ImageBase';
 import {ICON_QA, OldButtonSize, OldButtonTheme, toCommonSize, toCommonView} from './utils';
 
 import './Button.scss';
@@ -72,7 +73,7 @@ const Button = (props: ButtonProps) => {
     }
 
     let icon;
-    let image = img && <img className={b('image')} src={buttonImg.url} alt={buttonImg.alt} />;
+    let image = img && <ImageBase className={b('image')} src={buttonImg.url} alt={buttonImg.alt} />;
 
     if (theme === 'github') {
         icon = <Icon className={b('icon')} data={Github} size={24} qa={ICON_QA} />;
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -4,6 +4,7 @@ import {BREAKPOINTS} from '../../constants';
 import {ProjectSettingsContext} from '../../context/projectSettingsContext';
 import {ImageDeviceProps, ImageObjectProps} from '../../models';
 import {isCompressible} from '../../utils/imageCompress';
+import ImageBase from '../ImageBase/ImageBase';
 
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps> {
     style?: CSSProperties;
@@ -19,7 +20,7 @@ const checkWebP = (src: string) => {
 const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const {
-        src,
+        src: imageSrc,
         alt,
         disableCompress,
         tablet,
@@ -32,16 +33,16 @@ const Image = (props: ImageProps) => {
     } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
 
-    const imageSrc = src || desktop;
+    const src = imageSrc || desktop;
 
-    if (!imageSrc) {
+    if (!src) {
         return null;
     }
 
     const disableWebp =
         projectSettings.disableCompress ||
         disableCompress ||
-        !isCompressible(imageSrc) ||
+        !isCompressible(src) ||
         imgLoadingError;
 
     return (
@@ -70,11 +71,11 @@ const Image = (props: ImageProps) => {
                     <source srcSet={tablet} media={`(max-width: ${BREAKPOINTS.md}px)`} />
                 </Fragment>
             )}
-            {imageSrc && !disableWebp && <source srcSet={checkWebP(imageSrc)} type="image/webp" />}
-            <img
+            {src && !disableWebp && <source srcSet={checkWebP(src)} type="image/webp" />}
+            <ImageBase
                 className={className}
-                src={imageSrc}
                 alt={alt}
+                src={src}
                 style={style}
                 onClick={onClick}
                 onError={() => setImgLoadingError(true)}
diff --git a/src/components/ImageBase/ImageBase.tsx b/src/components/ImageBase/ImageBase.tsx
@@ -0,0 +1,18 @@
+import React, {CSSProperties, MouseEventHandler} from 'react';
+
+import {ImageContext} from '../../context/imageContext/imageContext';
+import {ImageObjectProps} from '../../models';
+
+export interface ImageBaseProps extends Partial<ImageObjectProps> {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+    onError?: () => void;
+}
+
+export const ImageBase = (props: ImageBaseProps) => {
+    const {Image} = React.useContext(ImageContext);
+    return Image ? <Image {...props} /> : <img {...props} />;
+};
+
+export default ImageBase;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -16,6 +16,7 @@ export {default as FullWidthBackground} from './FullWidthBackground/FullWidthBac
 export {default as HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export {default as HeightCalculator} from './HeightCalculator/HeightCalculator';
 export {default as Image} from './Image/Image';
+export {default as ImageBase} from './ImageBase/ImageBase';
 export {default as Link} from './Link/Link';
 export {default as Links} from './Link/Links';
 export {default as Media} from './Media/Media';
@@ -37,3 +38,4 @@ export {default as MetaInfo} from './MetaInfo/MetaInfo';
 export {default as FullScreenMedia} from './FullscreenMedia/FullScreenMedia';
 
 export type {RouterLinkProps} from './RouterLink/RouterLink';
+export type {ImageBaseProps} from './ImageBase/ImageBase';
diff --git a/src/containers/PageConstructor/Provider.tsx b/src/containers/PageConstructor/Provider.tsx
@@ -2,6 +2,7 @@ import React, {Fragment} from 'react';
 
 import {DEFAULT_THEME} from '../../components/constants';
 import {AnalyticsContext, AnalyticsContextProps} from '../../context/analyticsContext';
+import {ImageContext, ImageContextProps} from '../../context/imageContext';
 import {LocaleContext, LocaleContextProps} from '../../context/localeContext';
 import {LocationContext, LocationContextProps} from '../../context/locationContext';
 import {MapsContext, MapsContextType, initialMapValue} from '../../context/mapsContext/mapsContext';
@@ -25,6 +26,7 @@ export interface PageConstructorProviderProps {
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;
+    image?: ImageContextProps;
 }
 
 export const PageConstructorProvider = (props: WithChildren<PageConstructorProviderProps>) => {
@@ -39,13 +41,15 @@ export const PageConstructorProvider = (props: WithChildren<PageConstructorProvi
         projectSettings = {},
         theme = DEFAULT_THEME,
         children,
+        image = {},
     } = props;
 
     /* eslint-disable react/jsx-key */
     const context = [
         <ThemeValueContext.Provider value={{themeValue: theme}} />,
         <ProjectSettingsContext.Provider value={projectSettings} />,
         <LocaleContext.Provider value={locale} />,
+        <ImageContext.Provider value={image} />,
         <LocationContext.Provider value={location} />,
         <MobileContext.Provider value={Boolean(isMobile)} />,
         <MapsContext.Provider value={mapsContext} />,
diff --git a/src/context/imageContext/imageContext.ts b/src/context/imageContext/imageContext.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {ImageBaseProps} from '../../components';
+
+export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
+
+export type ImageContextProps = {
+    Image?: Image;
+};
+
+export const ImageContext = React.createContext<ImageContextProps>({});
diff --git a/src/context/imageContext/index.ts b/src/context/imageContext/index.ts
@@ -0,0 +1 @@
+export * from './imageContext';
