@bytebrand/fe-ui-core 4.2.48 → 4.2.49

package/source/components/_common/VehicleSlider/VehicleSliderForSRL.tsx

@@ -1,170 +1,168 @@
-import * as React from 'react';
-import Slider from 'react-slick';
-import classnames from 'classnames';
-import _isLength from 'lodash/isLength';
-import Image from '../Image/Image';
-import Loader from '../Loader/Loader';
-import LazyLoad from 'react-lazyload';
-
-import { PLACEHOLDER_IMAGE } from '../../../framework/constants/common';
-import { preloadNearbyImages } from '../../../framework/utils/CommonUtils';
-import { IVehicleSliderForSRLProps } from '../../../framework/types/types';
-import styles from './VehicleSlider.styl';
-
-interface IVehicleSliderForSRLState {
-  noImagesLoaded: boolean;
-  activeSlide: number;
-}
-
-const SlickButtonFix: React.FunctionComponent = ({ currentSlide, slideCount, children, ...props }: any) => (
-  <div {...props} tabIndex={-1}>{children}</div>
-);
-
-class VehicleSliderForSRL extends React.Component<IVehicleSliderForSRLProps, IVehicleSliderForSRLState> {
-  readonly state = {
-    noImagesLoaded: false,
-    activeSlide: 0
-  };
-
-  static readonly defaultProps: IVehicleSliderForSRLProps = {
-    mainImageId: '',
-    imagesCount: 0,
-    imageSize: 'small',
-    isAlternative: false,
-    typeAlternative: '',
-    images: [],
-    getCarImagesData: () => null
-  };
-
-  beforeChange = () => {
-    const { carId, images, getCarImagesData, type, typeAlternative } = this.props;
-    const { activeSlide } = this.state;
-
-    const isMyVehicle: boolean = type === 'myVehicle';
-
-    if (_isLength(images)) return false;
-    getCarImagesData(carId, true, isMyVehicle, type, typeAlternative).then((data) => {
-      // a case when all images are in_postprocessing
-
-      if (!data || data.length === 0) {
-        this.setState({ noImagesLoaded: true });
-      }
-
-      preloadNearbyImages(data, activeSlide, 'imageUrlSmall');
-    });
-  };
-
-  onSlideChange = (index: number): void => {
-    const { images } = this.props;
-
-    this.setState({ activeSlide: index });
-
-    this.props.onSlideChange(index);
-    preloadNearbyImages(images, index, 'imageUrlSmall');
-  };
-
-  renderSliderImages = () => {
-    const { carId, mainImageId, images, imagesCount, imageSize, src, isAlternative } = this.props;
-    const { activeSlide } = this.state;
-
-    const imageProps = {
-      isAlternative,
-      ratioW: 4,
-      ratioH: 3,
-      width: '100%',
-      className: styles.photo,
-      withAnimation: false
-    };
-
-    const lazyLoadProps = {
-      once: true,
-      offset: 500
-    };
-
-    const imagesCache: string[] = [];
-    const currentSlide = activeSlide;
-    const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
-    const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
-
-    if (images.length) {
-      return images.map((image: any, index: number) => {
-        const showImage = index === currentSlide || index === prevSlide || index === nextSlide || imagesCache[index] !== undefined;
-
-        imagesCache[currentSlide] = image.imageUrlSmall;
-        imagesCache[prevSlide] = image.imageUrlSmall;
-        imagesCache[nextSlide] = image.imageUrlSmall;
-
-        return (
-          showImage ? (
-            <LazyLoad {...lazyLoadProps} key={image.imageUrl}>
-              <Image src={image.imageUrlSmall} {...imageProps} />
-            </LazyLoad>
-            ) : <div key={image.imageUrl} />
-        );
-      });
-    }
-
-    if (mainImageId && !!imagesCount) {
-      const mainImage = (
-        <LazyLoad {...lazyLoadProps} key={carId}>
-          <Image src={src} {...imageProps} />
-        </LazyLoad>
-      );
-      const spinner = !this.state.noImagesLoaded ? (
-        <div className={styles.spinnerWrap} key='spinnerWrap'>
-          <Loader className={styles.spinner} size='medium' key='small_slider_loader' />
-        </div>
-      ) : null;
-
-      return (imagesCount === 1) ? mainImage : [mainImage, spinner];
-    }
-
-    return (
-      <LazyLoad {...lazyLoadProps}>
-        <Image src={`${PLACEHOLDER_IMAGE}${imageSize}`} key={carId} {...imageProps} />
-      </LazyLoad>
-    );
-  };
-
-  renderSlider = () => {
-    const settings = {
-      autoPlay: false,
-      speed: 300,
-      infinite: true,
-      dots: false,
-      beforeChange: this.beforeChange,
-      className: styles.slider,
-      accessibility: false,
-      draggable: true,
-      nextArrow: <SlickButtonFix />,
-      prevArrow: <SlickButtonFix />,
-      swipeToSlide: true,
-      focusOnSelect: true,
-      afterChange: this.onSlideChange,
-      key: `${this.state.noImagesLoaded}`
-    };
-
-    return (
-      <div className={styles.wrapper} onMouseEnter={this.beforeChange}>
-        <Slider {...settings}>{this.renderSliderImages()}</Slider>
-      </div>
-    );
-  };
-
-  render(): JSX.Element {
-    const { images, className, type, isReferenceSearch, CircularProgressbar } = this.props;
-
-    const containerClassName = classnames(styles.imageContainer, className, {
-      [styles[type]]: !!type
-    });
-
-    return (
-      <div className={containerClassName}>
-        {isReferenceSearch && <CircularProgressbar />}
-        {images ? this.renderSlider() : false}
-      </div>
-    );
-  }
-}
-
-export default VehicleSliderForSRL;
+import * as React from 'react';
+import Slider from 'react-slick';
+import classnames from 'classnames';
+import _isLength from 'lodash/isLength';
+import Image from '../Image/Image';
+import Loader from '../Loader/Loader';
+import LazyLoad from 'react-lazyload';
+
+import { PLACEHOLDER_IMAGE } from '../../../framework/constants/common';
+import { preloadNearbyImages } from '../../../framework/utils/CommonUtils';
+import { IVehicleSliderForSRLProps } from '../../../framework/types/types';
+import styles from './VehicleSlider.styl';
+
+
+const SlickButtonFix: React.FC = ({ currentSlide, slideCount, children, ...props }: any) => (
+  <div {...props} tabIndex={-1}>{children}</div>
+);
+
+const VehicleSliderForSRL: React.FC<IVehicleSliderForSRLProps> = ({
+  id,
+  src,
+  className,
+  images,
+  imagesCount,
+  imageSize,
+  mainImageId,
+  getCarImagesData,
+  type,
+  isAlternative,
+  typeAlternative,
+  isReferenceSearch,
+  CircularProgressbar,
+  onSlideChange
+}: IVehicleSliderForSRLProps) => {
+  const [ noImagesLoaded, setNoImagesLoaded ] = React.useState<boolean>(false);
+  const [ activeSlide, setActiveSlide ] = React.useState<number>(0);
+
+  const beforeChange = () => {
+
+    const isMyVehicle: boolean = type === 'myVehicle';
+
+    if (_isLength(images)) return false;
+    getCarImagesData(id, true, isMyVehicle, type, typeAlternative).then((data) => {
+      // a case when all images are in_postprocessing
+
+      if (!data || data.length === 0) {
+        setNoImagesLoaded(true);
+      }
+
+      preloadNearbyImages(data, activeSlide, 'imageUrlSmall');
+    });
+  };
+
+  const onHandleSlideChange = (index: number): void => {
+    setActiveSlide(index);
+    onSlideChange(index);
+    preloadNearbyImages(images, index, 'imageUrlSmall');
+  };
+
+  const renderSliderImages = () => {
+
+    const imageProps = {
+      isAlternative,
+      ratioW: 4,
+      ratioH: 3,
+      width: '100%',
+      className: styles.photo,
+      withAnimation: false
+    };
+
+    const lazyLoadProps = {
+      once: true,
+      offset: 500
+    };
+
+    const imagesCache: string[] = [];
+    const currentSlide = activeSlide;
+    const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
+    const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
+
+    if (images.length) {
+      return images.map((image: any, index: number) => {
+        const showImage = index === currentSlide || index === prevSlide || index === nextSlide || imagesCache[index] !== undefined;
+
+        imagesCache[currentSlide] = image.imageUrlSmall;
+        imagesCache[prevSlide] = image.imageUrlSmall;
+        imagesCache[nextSlide] = image.imageUrlSmall;
+
+        return (
+          showImage ? (
+            <LazyLoad {...lazyLoadProps} key={image.imageUrl}>
+              <Image src={image.imageUrlSmall} {...imageProps} />
+            </LazyLoad>
+            ) : <div key={image.imageUrl} />
+        );
+      });
+    }
+
+    if (mainImageId && !!imagesCount) {
+      const mainImage = (
+        <LazyLoad {...lazyLoadProps} key={id}>
+          <Image src={src} {...imageProps} />
+        </LazyLoad>
+      );
+      const spinner = !noImagesLoaded ? (
+        <div className={styles.spinnerWrap} key='spinnerWrap'>
+          <Loader className={styles.spinner} size='medium' key='small_slider_loader' />
+        </div>
+      ) : null;
+
+      return (imagesCount === 1) ? mainImage : [mainImage, spinner];
+    }
+
+    return (
+      <LazyLoad {...lazyLoadProps}>
+        <Image src={`${PLACEHOLDER_IMAGE}${imageSize}`} key={id} {...imageProps} />
+      </LazyLoad>
+    );
+  };
+
+  const renderSlider = () => {
+    const settings = {
+      beforeChange,
+      autoPlay: false,
+      speed: 300,
+      infinite: true,
+      dots: false,
+      className: styles.slider,
+      accessibility: false,
+      draggable: true,
+      nextArrow: <SlickButtonFix />,
+      prevArrow: <SlickButtonFix />,
+      swipeToSlide: true,
+      focusOnSelect: true,
+      afterChange: onHandleSlideChange,
+      key: `${noImagesLoaded}`
+    };
+
+    return (
+      <div className={styles.wrapper} onMouseEnter={beforeChange}>
+        <Slider {...settings}>{renderSliderImages()}</Slider>
+      </div>
+    );
+  };
+
+  const containerClassName = classnames(styles.imageContainer, className, {
+    [styles[type]]: !!type
+  });
+
+  return (
+    <div className={containerClassName}>
+      {isReferenceSearch && <CircularProgressbar />}
+      {images ? renderSlider() : false}
+    </div>
+  );
+};
+
+VehicleSliderForSRL.defaultProps = {
+  mainImageId: '',
+  imagesCount: 0,
+  imageSize: 'small',
+  isAlternative: false,
+  typeAlternative: '',
+  images: [],
+  getCarImagesData: () => null
+}
+
+export default VehicleSliderForSRL;

package/source/components/_common/withLabel/withLabel.story.js

@@ -1,62 +1,62 @@
-import React from 'react';
-import styles from '../Image/Image.story.styl'
-import { storiesOf } from '@storybook/react';
-
-import Image from '../Image/Image.tsx';
-import withLabel from './withLabel.tsx'
-import withStats from '../withStats/withStats.tsx'
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-
-const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
-
-const ImageWithLabel = withLabel(Image);
-const DecoratedImage = withLabel(withStats(Image));
-
-export class ImageWithLabelContainer extends React.Component {
-  state = {
-    isFavoured: false
-  };
-
-  onFavoriteClick = () => {
-    this.setState({ isFavoured: !this.state.isFavoured })
-  };
-
-  render() {
-    const statsProps = {
-      isFavoured: this.state.isFavoured,
-      imagesCount: 10,
-      statsData: {
-        totalCarImpCount: 15,
-        totalFavCount: 20
-      },
-      statsSize: 'xs',
-      onFavoriteClick: this.onFavoriteClick
-    };
-
-    return (
-      <div className={styles.row}>
-        <div className={styles.col}>
-          <h2 className={styles.title}>XS Size</h2>
-          <div className={styles.row}>
-            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-              <ImageWithLabel labelVisible={true} src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} />
-            </div>
-          </div>
-        </div>
-        <div className={styles.col}>
-          <h2 className={styles.title}>MD Size</h2>
-          <div className={styles.row}>
-            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-              <DecoratedImage src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...statsProps} />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-  .add('withLabel', () => (
-    <ImageWithLabelContainer />
-  ));
+import React from 'react';
+import styles from '../Image/Image.story.styl'
+import { storiesOf } from '@storybook/react';
+
+import Image from '../Image/Image.tsx';
+import withLabel from './withLabel.tsx'
+import withStats from '../withStats/withStats.tsx'
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
+
+const ImageWithLabel = withLabel(Image);
+const DecoratedImage = withLabel(withStats(Image));
+
+export class ImageWithLabelContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const statsProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: 10,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      onFavoriteClick: this.onFavoriteClick
+    };
+
+    return (
+      <div className={styles.row}>
+        <div className={styles.col}>
+          <h2 className={styles.title}>XS Size</h2>
+          <div className={styles.row}>
+            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+              <ImageWithLabel labelVisible={true} src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} />
+            </div>
+          </div>
+        </div>
+        <div className={styles.col}>
+          <h2 className={styles.title}>MD Size</h2>
+          <div className={styles.row}>
+            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+              <DecoratedImage src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...statsProps} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withLabel', () => (
+    <ImageWithLabelContainer />
+  ));

package/source/components/_common/withLabel/withLabel.styl

@@ -1,33 +1,33 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  position: relative
-  border: 1px solid $mantisGreen
-  box-sizing: border-box
-  overflow: hidden
-.wrapper::after
-  content: ''
-
-.label
-  position: absolute
-  top: -32px
-  left: -32px
-  z-index: $zIndex-dropdown
-  display: flex
-  justify-content: center
-  align-items: flex-end
-  box-sizing: border-box
-  width: 65px
-  height: 65px
-  padding-bottom: 5px
-  transform: rotate(-45deg)
-  color: white
-  background-color: $mantisGreen
-  text-transform uppercase
-  font-family: $font-style-arial
-  font-weight: bold
-  font-size: 12px
-
-
-
-
+@import '../../../theme/theme.styl'
+
+.wrapper
+  position: relative
+  border: 1px solid $mantisGreen
+  box-sizing: border-box
+  overflow: hidden
+.wrapper::after
+  content: ''
+
+.label
+  position: absolute
+  top: -32px
+  left: -32px
+  z-index: $zIndex-dropdown
+  display: flex
+  justify-content: center
+  align-items: flex-end
+  box-sizing: border-box
+  width: 65px
+  height: 65px
+  padding-bottom: 5px
+  transform: rotate(-45deg)
+  color: white
+  background-color: $mantisGreen
+  text-transform uppercase
+  font-family: $font-style-arial
+  font-weight: bold
+  font-size: 12px
+
+
+
+

package/source/components/_common/withLabel/withLabel.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './withLabel.styl';
-
-export interface IWithLabelProps {
-  labelVisible?: boolean;
-  labelText?: string;
-
-  labelWrapperClassName?: string;
-  labelClassName?: string;
-  [key: string]: any;
-}
-
-// TODO: Correct types from WrappedComponent
-// TODO: Correct default props for WrappedComponent
-
-// This component adds TOP label(left-top corner) and green border.
-// But actual purpose of this components should be
-// adding the labels over the Image and ImageSlider with price quality texts,
-// with vehicle condition texts
-
-// TODO: Re-work component to fit requirements described above.
-export default function withLabel(WrappedComponent: any) {
-  const WithLabel: React.FunctionComponent<IWithLabelProps> = (props) => {
-    const { labelVisible, labelText, labelWrapperClassName, labelClassName, ...rest } = props;
-
-    if (!labelVisible) return <WrappedComponent {...rest} />;
-
-    return (
-      <div className={classnames(styles.wrapper, labelWrapperClassName)}>
-        <strong className={classnames(styles.label, labelClassName)}>{labelText}</strong>
-        <WrappedComponent {...rest} />
-      </div>
-    );
-  };
-
-  WithLabel.defaultProps = {
-    visible: true,
-    labelText: 'top'
-  };
-
-  return WithLabel;
-}
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './withLabel.styl';
+
+export interface IWithLabelProps {
+  labelVisible?: boolean;
+  labelText?: string;
+
+  labelWrapperClassName?: string;
+  labelClassName?: string;
+  [key: string]: any;
+}
+
+// TODO: Correct types from WrappedComponent
+// TODO: Correct default props for WrappedComponent
+
+// This component adds TOP label(left-top corner) and green border.
+// But actual purpose of this components should be
+// adding the labels over the Image and ImageSlider with price quality texts,
+// with vehicle condition texts
+
+// TODO: Re-work component to fit requirements described above.
+export default function withLabel(WrappedComponent: any) {
+  const WithLabel: React.FunctionComponent<IWithLabelProps> = (props) => {
+    const { labelVisible, labelText, labelWrapperClassName, labelClassName, ...rest } = props;
+
+    if (!labelVisible) return <WrappedComponent {...rest} />;
+
+    return (
+      <div className={classnames(styles.wrapper, labelWrapperClassName)}>
+        <strong className={classnames(styles.label, labelClassName)}>{labelText}</strong>
+        <WrappedComponent {...rest} />
+      </div>
+    );
+  };
+
+  WithLabel.defaultProps = {
+    visible: true,
+    labelText: 'top'
+  };
+
+  return WithLabel;
+}