@bytebrand/fe-ui-core 4.1.191 → 4.1.193

package/source/components/_common/withStats/withStats.tsx

@@ -1,185 +1,185 @@
-import React from 'react';
-import classnames from 'classnames';
-
-import IconSVG from '../IconSVG/IconSVG';
-import Badge from '../Badge/Badge';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-
-import styles from './withStats.styl';
-
-export interface IStatsData {
-  totalCarImpCount: number;
-  totalFavCount: number;
-}
-
-type TStatsSize = 'xs' | 'sm' | 'md';
-
-export type TPrice = {
-  currency?: string;
-  amount?: number;
-  oldPrice?: number;
-  historyPriceDifference?: number;
-  historyPriceDifferencePerCent?: number;
-  vatRate?: number | null;
-};
-
-export interface IStatsWrapperProps {
-  t?: (key: string, options?: object) => string;
-  statsSize?: TStatsSize;
-  price?: TPrice;
-  isFavoured?: boolean;
-  statsData?: IStatsData;
-  imagesCount?: number;
-  showNewLabel?: boolean;
-  onFavoriteClick?: (event: any) => void;
-
-  [key: string]: any;
-}
-
-export interface IStatsWrapperState {
-  activeSlide: number;
-}
-
-const MIN_PERCENT = 5;
-const MIN_PRICE_DIFFERENCE = 500;
-
-export default function withStats(WrappedComponent: any) {
-  return class extends React.Component<IStatsWrapperProps, IStatsWrapperState> {
-    static defaultProps = {
-      classWrapPrice: '',
-      statsSize: 'xs',
-      showNewLabel: false,
-      price: {
-        historyPriceDifference: 0,
-        historyPriceDifferencePerCent: 0
-      }
-    };
-
-    state = {
-      activeSlide: 0
-    };
-
-    onSlideChange = (activeSlide: number) => {
-      this.setState(() => ({ activeSlide }));
-
-      if (typeof this.props.onSlideChange === 'function') {
-        this.props.onSlideChange(activeSlide);
-      }
-    };
-
-    renderImagesData = (): JSX.Element => {
-      const { imagesCount, statsSize } = this.props;
-      if (!Number.isFinite(imagesCount)) return null;
-
-      const { activeSlide } = this.state;
-      const delimiters = { xs: '|', sm: '|', md: 'von' };
-
-      return (
-        <div className={styles.section}>
-          {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
-          {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
-        </div>
-      );
-    };
-
-    renderRotateSvg = (): JSX.Element => {
-      const { hasInteriorExteriorPhoto, images } = this.props;
-      const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
-      if (!hasExteriorPhotos) return null;
-      return (
-        <div className={styles.section}>
-          {hasExteriorPhotos ? (
-            <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
-          ) : null}
-        </div>
-      );
-    };
-
-    renderStarButton = () => {
-      const { isFavoured, onFavoriteClick } = this.props;
-      if (!onFavoriteClick) return null;
-
-      return (
-        <IconSVG
-          name='common_StarRoundedCorners'
-          customDimensions
-          className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
-          onClick={onFavoriteClick}
-        />
-      );
-    };
-
-    renderStatsData = (): JSX.Element => {
-      const { statsData, isFavoured, onFavoriteClick } = this.props;
-      if (!statsData) return null;
-      const { totalCarImpCount, totalFavCount } = statsData;
-      const favoritesClassName = classnames(
-        styles.statsFavoritesCount,
-        {
-          [styles.accented]: isFavoured,
-          [styles.clickable]: typeof onFavoriteClick === 'function'
-        });
-      const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
-
-      return (
-        <div className={styles.section}>
-          {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
-            <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
-            <span>
-              {totalCarImpCount}
-            </span>
-          </div> : null}
-          {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
-            <IconSVG name='star' customDimensions className={favoritesIconClassName} />
-            <span>
-              {totalFavCount}
-            </span>
-          </div> : null}
-        </div>
-      );
-    };
-
-    renderPriceData = () => {
-      const { price: { historyPriceDifference, historyPriceDifferencePerCent }, showNewLabel, classWrapPrice, t } = this.props;
-
-      const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
-      const EUR = `\u20AC`;
-
-      return (
-        <div className={classnames(styles.topWrapper, classWrapPrice)}>
-          {showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
-          {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-            <Badge type='green'>
-              {`-`}
-              <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
-              {` ${EUR}`}
-            </Badge>
-          )}
-          {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
-            <Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
-          )}
-        </div>
-      );
-    };
-
-    render() {
-      const {
-        statsSize, isFavoured, onFavoriteClick, statsData, isReferenceSearch,
-        ...wrappedComponentProps
-      } = this.props;
-
-      return (
-        <div className={styles.wrapper}>
-          {!isReferenceSearch && this.renderPriceData()}
-          <WrappedComponent {...wrappedComponentProps} onSlideChange={this.onSlideChange} isReferenceSearch={isReferenceSearch} />
-          <div className={classnames(styles.controls, styles[statsSize])}>
-            {this.renderImagesData()}
-            {this.renderRotateSvg()}
-            {this.renderStarButton()}
-            {this.renderStatsData()}
-          </div>
-        </div>
-      );
-    }
-  };
-}
+import React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../IconSVG/IconSVG';
+import Badge from '../Badge/Badge';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+
+import styles from './withStats.styl';
+
+export interface IStatsData {
+  totalCarImpCount: number;
+  totalFavCount: number;
+}
+
+type TStatsSize = 'xs' | 'sm' | 'md';
+
+export type TPrice = {
+  currency?: string;
+  amount?: number;
+  oldPrice?: number;
+  historyPriceDifference?: number;
+  historyPriceDifferencePerCent?: number;
+  vatRate?: number | null;
+};
+
+export interface IStatsWrapperProps {
+  t?: (key: string, options?: object) => string;
+  statsSize?: TStatsSize;
+  price?: TPrice;
+  isFavoured?: boolean;
+  statsData?: IStatsData;
+  imagesCount?: number;
+  showNewLabel?: boolean;
+  onFavoriteClick?: (event: any) => void;
+
+  [key: string]: any;
+}
+
+export interface IStatsWrapperState {
+  activeSlide: number;
+}
+
+const MIN_PERCENT = 5;
+const MIN_PRICE_DIFFERENCE = 500;
+
+export default function withStats(WrappedComponent: any) {
+  return class extends React.Component<IStatsWrapperProps, IStatsWrapperState> {
+    static defaultProps = {
+      classWrapPrice: '',
+      statsSize: 'xs',
+      showNewLabel: false,
+      price: {
+        historyPriceDifference: 0,
+        historyPriceDifferencePerCent: 0
+      }
+    };
+
+    state = {
+      activeSlide: 0
+    };
+
+    onSlideChange = (activeSlide: number) => {
+      this.setState(() => ({ activeSlide }));
+
+      if (typeof this.props.onSlideChange === 'function') {
+        this.props.onSlideChange(activeSlide);
+      }
+    };
+
+    renderImagesData = (): JSX.Element => {
+      const { imagesCount, statsSize } = this.props;
+      if (!Number.isFinite(imagesCount)) return null;
+
+      const { activeSlide } = this.state;
+      const delimiters = { xs: '|', sm: '|', md: 'von' };
+
+      return (
+        <div className={styles.section}>
+          {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
+          {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
+        </div>
+      );
+    };
+
+    renderRotateSvg = (): JSX.Element => {
+      const { hasInteriorExteriorPhoto, images } = this.props;
+      const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
+      if (!hasExteriorPhotos) return null;
+      return (
+        <div className={styles.section}>
+          {hasExteriorPhotos ? (
+            <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
+          ) : null}
+        </div>
+      );
+    };
+
+    renderStarButton = () => {
+      const { isFavoured, onFavoriteClick } = this.props;
+      if (!onFavoriteClick) return null;
+
+      return (
+        <IconSVG
+          name='common_StarRoundedCorners'
+          customDimensions
+          className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
+          onClick={onFavoriteClick}
+        />
+      );
+    };
+
+    renderStatsData = (): JSX.Element => {
+      const { statsData, isFavoured, onFavoriteClick } = this.props;
+      if (!statsData) return null;
+      const { totalCarImpCount, totalFavCount } = statsData;
+      const favoritesClassName = classnames(
+        styles.statsFavoritesCount,
+        {
+          [styles.accented]: isFavoured,
+          [styles.clickable]: typeof onFavoriteClick === 'function'
+        });
+      const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
+
+      return (
+        <div className={styles.section}>
+          {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
+            <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
+            <span>
+              {totalCarImpCount}
+            </span>
+          </div> : null}
+          {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
+            <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+            <span>
+              {totalFavCount}
+            </span>
+          </div> : null}
+        </div>
+      );
+    };
+
+    renderPriceData = () => {
+      const { price: { historyPriceDifference, historyPriceDifferencePerCent }, showNewLabel, classWrapPrice, t } = this.props;
+
+      const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
+      const EUR = `\u20AC`;
+
+      return (
+        <div className={classnames(styles.topWrapper, classWrapPrice)}>
+          {showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
+          {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+            <Badge type='green'>
+              {`-`}
+              <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
+              {` ${EUR}`}
+            </Badge>
+          )}
+          {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
+            <Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
+          )}
+        </div>
+      );
+    };
+
+    render() {
+      const {
+        statsSize, isFavoured, onFavoriteClick, statsData, isReferenceSearch,
+        ...wrappedComponentProps
+      } = this.props;
+
+      return (
+        <div className={styles.wrapper}>
+          {!isReferenceSearch && this.renderPriceData()}
+          <WrappedComponent {...wrappedComponentProps} onSlideChange={this.onSlideChange} isReferenceSearch={isReferenceSearch} />
+          <div className={classnames(styles.controls, styles[statsSize])}>
+            {this.renderImagesData()}
+            {this.renderRotateSvg()}
+            {this.renderStarButton()}
+            {this.renderStatsData()}
+          </div>
+        </div>
+      );
+    }
+  };
+}

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.styl

@@ -1,55 +1,55 @@
-@import '../../../../theme/mixins.styl'
-@import '../../../../theme/theme.styl'
-
-.filters
-  position: relative;
-  width: 100%;
-  // background-color: #fff;
-  align-self: flex-start;
-  border: 1px solid rgba(76, 78, 100, 0.12);
-  border-radius: 10px;
-  box-sizing: border-box;
-  
-
-  +media-tablet-landscape-down() {
-    display none
-  }
-
-.titleWrap
-  display flex
-  justify-content: space-between;
-  align-items: center;
-
-.title
-  height: 40px
-
-.titleLink
-  color: $skyBlue;
-  font-size: 14px;
-
-.titleAlternative
-  border-bottom: 1px solid $grey-d;
-  padding: 0 11px 15px 11px;
-  background-color: #fff;
-
-.titleTextAlternative
-  line-height: 40px
-
-.titleText
-  font-size: 18px
-  line-height: 40px
-  padding: 0 10px
-  background-color: #fff;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-
-.linkToDetailed
-  display: block
-  padding: 16px
-  border-top: 1px solid $grey-e
-  background-color: #fff
-  color: $skyBlue
-  font-weight: 700
-  font-size: 14px
-  border-bottom-left-radius: 10px;
+@import '../../../../theme/mixins.styl'
+@import '../../../../theme/theme.styl'
+
+.filters
+  position: relative;
+  width: 100%;
+  // background-color: #fff;
+  align-self: flex-start;
+  border: 1px solid rgba(76, 78, 100, 0.12);
+  border-radius: 10px;
+  box-sizing: border-box;
+  
+
+  +media-tablet-landscape-down() {
+    display none
+  }
+
+.titleWrap
+  display flex
+  justify-content: space-between;
+  align-items: center;
+
+.title
+  height: 40px
+
+.titleLink
+  color: $skyBlue;
+  font-size: 14px;
+
+.titleAlternative
+  border-bottom: 1px solid $grey-d;
+  padding: 0 11px 15px 11px;
+  background-color: #fff;
+
+.titleTextAlternative
+  line-height: 40px
+
+.titleText
+  font-size: 18px
+  line-height: 40px
+  padding: 0 10px
+  background-color: #fff;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+
+.linkToDetailed
+  display: block
+  padding: 16px
+  border-top: 1px solid $grey-e
+  background-color: #fff
+  color: $skyBlue
+  font-weight: 700
+  font-size: 14px
+  border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;