@bytebrand/fe-ui-core 4.2.80 → 4.2.82

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -1,296 +1,296 @@
-import React, { MouseEvent, Component } from 'react';
-import Slider from 'react-slick';
-import classnames from 'classnames';
-import Image from '../_common/Image/Image';
-import _get from 'lodash/get';
-import { isMobileOnly } from 'react-device-detect';
-
-import Stats from './partials/Stats';
-import Title from './partials/Title';
-import PriceData from './partials/PriceData';
-import MobileStats from './partials/MobileStast';
-import withMagnifyGlassImage from '../_common/MagnifyGlass/MagnifyGlass';
-import { IImage, IPrice, SliderType } from '../../framework/types/types';
-import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
-import { VehicleDetailedSliderTranslate } from '../../locales/data';
-
-import styles from './VehicleDetailedSlider.styl';
-
-interface IProps {
-  t: (phrase: string, config?: any) => string;
-  price: IPrice;
-  photos: IImage [];
-  exteriorPhotos: IImage [];
-  interiorPhoto: IImage;
-  mainImageUrl: string;
-  mainImageBlur: boolean;
-  statsData: any;
-  isFavorite: boolean;
-  showNewLabel: boolean;
-  make: string;
-  model: string;
-  subModel: string;
-  powerKW: number;
-  powerPS: number;
-  showModal?: (id: string, props?: any) => void;
-  hideModal: (id: string) => void;
-  onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
-}
-
-interface IState {
-  activeSlide: number;
-  largeLoaded: boolean;
-  smallLoaded: boolean;
-  largeLoaded1: boolean;
-  largeLoaded01: boolean;
-}
-
-const MagnifyGlassImage = withMagnifyGlassImage(Image);
-
-class VehicleDetailedSlider extends Component<IProps, IState> {
-
-  static readonly defaultProps = {
-    mainImageBlur: true,
-    showNewLabel: false,
-    price: {
-      historyPriceDifferencePrecCent: 0,
-      historyPriceDifference: 0
-    }
-  };
-
-  private slider: any;
-  private imagesCache: string[] = [];
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      activeSlide: 0,
-      largeLoaded: false,
-      smallLoaded: false,
-      largeLoaded1: false,
-      largeLoaded01: false
-    };
-  }
-
-  handleSetFirstSlide = () => {
-    this.slider.slickGoTo(0);
-  };
-
-  componentDidUpdate(prevProps: IProps) {
-    if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
-      this.setState(() => ({
-        largeLoaded: false,
-        smallLoaded: false,
-        largeLoaded1: false,
-        largeLoaded01: false
-      }));
-    }
-  }
-
-  handleOpenSliderModal = (sliderType: SliderType) => {
-    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData } = this.props;
-    const { activeSlide } = this.state;
-
-    showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
-      t,
-      photos,
-      exteriorPhotos,
-      interiorPhoto,
-      activeSlide,
-      sliderType,
-      showCloseButton: false,
-      className: styles.sliderModal,
-      overlayClassName: styles.overlayModal,
-      onClose: (index: number) => {
-        this.slider.slickGoTo(index, true);
-        hideModal('VEHICLE_DETAILED_SLIDER_MODAL');
-      }
-    });
-  };
-
-  getImages = () => {
-    const { photos, mainImageUrl, mainImageBlur } = this.props;
-    const { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
-
-    const imageProps = {
-      ratioW: 4,
-      ratioH: 3,
-      width: '100%',
-      className: styles.image,
-      withLoader: false
-    };
-    if (Array.isArray(photos) && photos.length > 0 && largeLoaded && smallLoaded && largeLoaded1 && largeLoaded01) {
-      let isMouseDown = false;
-      let isDragging = false;
-
-      const handleMouseDown = () => {
-        isDragging = false;
-        isMouseDown = true;
-      };
-
-      const handleMouseMove = () => {
-        if (isMouseDown) {
-          isDragging = true;
-        }
-      };
-
-      const handleMouseUp = () => {
-        if (!isDragging) {
-          this.handleOpenSliderModal(SliderType.DEFAULT);
-        }
-
-        isMouseDown = false;
-        isDragging = false;
-      };
-
-      const imagesCount = photos.length;
-      const currentSlide = activeSlide;
-      const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
-      const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
-
-      return photos.map(({ imageUrlLarge, imageUrlSmall }: IImage, index: number) => {
-        const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
-
-        this.imagesCache[currentSlide] = imageUrlLarge;
-        this.imagesCache[prevSlide] = imageUrlLarge;
-        this.imagesCache[nextSlide] = imageUrlLarge;
-
-        return (
-          <div
-            className={styles.photo}
-            key={imageUrlLarge}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-          >
-            {showImage && (
-              <MagnifyGlassImage
-                src={index !== 0 ? imageUrlLarge : null}
-                srcSmall={index === 0 ? imageUrlSmall : null}
-                srcLarge={index === 0 ? imageUrlLarge : null}
-                {...imageProps}
-              />
-            )}
-          </div>
-        );
-      });
-    }
-
-    if (mainImageUrl) {
-      const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length : 0;
-      const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
-      const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
-      return (
-        // preload cached photos from props
-        <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
-          {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} /> }
-
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[activeSlide].imageUrlSmall }
-            onLoad={ () => this.setState({ smallLoaded: true }) }
-            {...imageProps}
-            />
-          }
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[activeSlide].imageUrlLarge }
-            onLoad={ () => this.setState({ largeLoaded: true }) }
-            {...imageProps}
-            />
-          }
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[nextSlide].imageUrlLarge }
-            onLoad={ () => this.setState({ largeLoaded1: true }) }
-            {...imageProps}
-            />
-          }
-          { Array.isArray(photos) && photos.length > 0 && <Image
-            style={ { display: 'none' } }
-            src={ photos[prevSlide].imageUrlLarge }
-            onLoad={ () => this.setState({ largeLoaded01: true }) }
-            {...imageProps}
-            />
-          }
-        </div>
-      );
-    }
-
-    return (
-      <div className={styles.noPhoto}/>
-    );
-  };
-
-  render() {
-    const {
-      t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase),
-      price,
-      photos,
-      exteriorPhotos,
-      interiorPhoto,
-      statsData,
-      isFavorite,
-      showNewLabel,
-      make,
-      model,
-      subModel,
-      powerKW,
-      powerPS,
-      onCarFavorite
-    } = this.props;
-    const { activeSlide } = this.state;
-
-    const sliderProps = {
-      autoPlay: false,
-      speed: 300,
-      infinite: true,
-      dots: false,
-      arrows: Array.isArray(photos) && photos.length > 0,
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      afterChange: (index: number) => {
-        this.setState({
-          activeSlide: index
-        });
-      }
-    };
-
-    const priceProps = {
-      t,
-      showNewLabel,
-      historyPriceDifference: price ? price.historyPriceDifference : 0,
-      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0
-    };
-
-    const statsProps = {
-      t,
-      activeSlide,
-      totalFavCount: statsData && statsData.totalFavCount,
-      totalCarImpCount: statsData && statsData.totalCarImpCount,
-      photosLength: Array.isArray(photos) && photos.length,
-      hasExteriorPhotos: Array.isArray(exteriorPhotos) && exteriorPhotos.length > 0,
-      hasInteriorPhoto: !!interiorPhoto,
-      onSetFirstSlide: this.handleSetFirstSlide,
-      onOpenSliderModal: this.handleOpenSliderModal
-    };
-
-    return (
-      <div className={styles.sliderWrap}>
-        {isMobileOnly &&
-          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }}/>
-        }
-        <div className={styles.slider}>
-          <PriceData {...priceProps}/>
-          <Slider ref={slider => (this.slider = slider)} {...sliderProps}>
-            {this.getImages()}
-          </Slider>
-          {isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps}/>}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default VehicleDetailedSlider;
+import React, { MouseEvent, Component } from 'react';
+import Slider from 'react-slick';
+import classnames from 'classnames';
+import Image from '../_common/Image/Image';
+import _get from 'lodash/get';
+import { isMobileOnly } from 'react-device-detect';
+
+import Stats from './partials/Stats';
+import Title from './partials/Title';
+import PriceData from './partials/PriceData';
+import MobileStats from './partials/MobileStast';
+import withMagnifyGlassImage from '../_common/MagnifyGlass/MagnifyGlass';
+import { IImage, IPrice, SliderType } from '../../framework/types/types';
+import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
+import { VehicleDetailedSliderTranslate } from '../../locales/data';
+
+import styles from './VehicleDetailedSlider.styl';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  price: IPrice;
+  photos: IImage [];
+  exteriorPhotos: IImage [];
+  interiorPhoto: IImage;
+  mainImageUrl: string;
+  mainImageBlur: boolean;
+  statsData: any;
+  isFavorite: boolean;
+  showNewLabel: boolean;
+  make: string;
+  model: string;
+  subModel: string;
+  powerKW: number;
+  powerPS: number;
+  showModal?: (id: string, props?: any) => void;
+  hideModal: (id: string) => void;
+  onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
+}
+
+interface IState {
+  activeSlide: number;
+  largeLoaded: boolean;
+  smallLoaded: boolean;
+  largeLoaded1: boolean;
+  largeLoaded01: boolean;
+}
+
+const MagnifyGlassImage = withMagnifyGlassImage(Image);
+
+class VehicleDetailedSlider extends Component<IProps, IState> {
+
+  static readonly defaultProps = {
+    mainImageBlur: true,
+    showNewLabel: false,
+    price: {
+      historyPriceDifferencePrecCent: 0,
+      historyPriceDifference: 0
+    }
+  };
+
+  private slider: any;
+  private imagesCache: string[] = [];
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      activeSlide: 0,
+      largeLoaded: false,
+      smallLoaded: false,
+      largeLoaded1: false,
+      largeLoaded01: false
+    };
+  }
+
+  handleSetFirstSlide = () => {
+    this.slider.slickGoTo(0);
+  };
+
+  componentDidUpdate(prevProps: IProps) {
+    if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
+      this.setState(() => ({
+        largeLoaded: false,
+        smallLoaded: false,
+        largeLoaded1: false,
+        largeLoaded01: false
+      }));
+    }
+  }
+
+  handleOpenSliderModal = (sliderType: SliderType) => {
+    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData } = this.props;
+    const { activeSlide } = this.state;
+
+    showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
+      t,
+      photos,
+      exteriorPhotos,
+      interiorPhoto,
+      activeSlide,
+      sliderType,
+      showCloseButton: false,
+      className: styles.sliderModal,
+      overlayClassName: styles.overlayModal,
+      onClose: (index: number) => {
+        this.slider.slickGoTo(index, true);
+        hideModal('VEHICLE_DETAILED_SLIDER_MODAL');
+      }
+    });
+  };
+
+  getImages = () => {
+    const { photos, mainImageUrl, mainImageBlur } = this.props;
+    const { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
+
+    const imageProps = {
+      ratioW: 4,
+      ratioH: 3,
+      width: '100%',
+      className: styles.image,
+      withLoader: false
+    };
+    if (Array.isArray(photos) && photos.length > 0 && largeLoaded && smallLoaded && largeLoaded1 && largeLoaded01) {
+      let isMouseDown = false;
+      let isDragging = false;
+
+      const handleMouseDown = () => {
+        isDragging = false;
+        isMouseDown = true;
+      };
+
+      const handleMouseMove = () => {
+        if (isMouseDown) {
+          isDragging = true;
+        }
+      };
+
+      const handleMouseUp = () => {
+        if (!isDragging) {
+          this.handleOpenSliderModal(SliderType.DEFAULT);
+        }
+
+        isMouseDown = false;
+        isDragging = false;
+      };
+
+      const imagesCount = photos.length;
+      const currentSlide = activeSlide;
+      const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
+      const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
+
+      return photos.map(({ imageUrlLarge, imageUrlSmall }: IImage, index: number) => {
+        const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
+
+        this.imagesCache[currentSlide] = imageUrlLarge;
+        this.imagesCache[prevSlide] = imageUrlLarge;
+        this.imagesCache[nextSlide] = imageUrlLarge;
+
+        return (
+          <div
+            className={styles.photo}
+            key={imageUrlLarge}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+          >
+            {showImage && (
+              <MagnifyGlassImage
+                src={index !== 0 ? imageUrlLarge : null}
+                srcSmall={index === 0 ? imageUrlSmall : null}
+                srcLarge={index === 0 ? imageUrlLarge : null}
+                {...imageProps}
+              />
+            )}
+          </div>
+        );
+      });
+    }
+
+    if (mainImageUrl) {
+      const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length : 0;
+      const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
+      const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
+      return (
+        // preload cached photos from props
+        <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
+          {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} /> }
+
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[activeSlide].imageUrlSmall }
+            onLoad={ () => this.setState({ smallLoaded: true }) }
+            {...imageProps}
+            />
+          }
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[activeSlide].imageUrlLarge }
+            onLoad={ () => this.setState({ largeLoaded: true }) }
+            {...imageProps}
+            />
+          }
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[nextSlide].imageUrlLarge }
+            onLoad={ () => this.setState({ largeLoaded1: true }) }
+            {...imageProps}
+            />
+          }
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[prevSlide].imageUrlLarge }
+            onLoad={ () => this.setState({ largeLoaded01: true }) }
+            {...imageProps}
+            />
+          }
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.noPhoto}/>
+    );
+  };
+
+  render() {
+    const {
+      t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase),
+      price,
+      photos,
+      exteriorPhotos,
+      interiorPhoto,
+      statsData,
+      isFavorite,
+      showNewLabel,
+      make,
+      model,
+      subModel,
+      powerKW,
+      powerPS,
+      onCarFavorite
+    } = this.props;
+    const { activeSlide } = this.state;
+
+    const sliderProps = {
+      autoPlay: false,
+      speed: 300,
+      infinite: true,
+      dots: false,
+      arrows: Array.isArray(photos) && photos.length > 0,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      afterChange: (index: number) => {
+        this.setState({
+          activeSlide: index
+        });
+      }
+    };
+
+    const priceProps = {
+      t,
+      showNewLabel,
+      historyPriceDifference: price ? price.historyPriceDifference : 0,
+      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0
+    };
+
+    const statsProps = {
+      t,
+      activeSlide,
+      totalFavCount: statsData && statsData.totalFavCount,
+      totalCarImpCount: statsData && statsData.totalCarImpCount,
+      photosLength: Array.isArray(photos) && photos.length,
+      hasExteriorPhotos: Array.isArray(exteriorPhotos) && exteriorPhotos.length > 0,
+      hasInteriorPhoto: !!interiorPhoto,
+      onSetFirstSlide: this.handleSetFirstSlide,
+      onOpenSliderModal: this.handleOpenSliderModal
+    };
+
+    return (
+      <div className={styles.sliderWrap}>
+        {isMobileOnly &&
+          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }}/>
+        }
+        <div className={styles.slider}>
+          <PriceData {...priceProps}/>
+          <Slider ref={slider => (this.slider = slider)} {...sliderProps}>
+            {this.getImages()}
+          </Slider>
+          {isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps}/>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default VehicleDetailedSlider;