@bytebrand/fe-ui-core 4.2.190 → 4.2.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.190",
+  "version": "4.2.192",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,6 +12,7 @@ type LinkItem = { link: string, title: string };
 interface IBreadcrumbsProps {
   page: string;
   pageProps: any;
+  Link: any;
   infoBlockData: { contentMobile: string, title: string }[];
   t?: (key: string, options?: object) => string;
 }
@@ -32,7 +33,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
   };
 
   renderList = (list: LinkItem[]) => {
-    const { t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page } = this.props;
+    const {t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page, Link } = this.props;
 
     return list.map((item, index): React.ReactElement<any> => {
       const isLastItem: boolean = list.length - 1 === index;
@@ -43,7 +44,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
 
       return item.link
         ? <span className={linkClassName} onClick={this.props.pageProps.onBreadCrumbClick} key={index}>
-            <a href={page !== 'REFERENCE_VEHICLE_DETAILS' && item.link}>{item.title}</a>
+            <Link to={page !== 'REFERENCE_VEHICLE_DETAILS' && item.link}>{item.title}</Link>
           </span>
         : <span className={textClassName} key={index}>
             {bigItem}
@@ -90,4 +91,3 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
 }
 
 export default Breadcrumbs;
-// export default withRouter(translate(['common'])(Breadcrumbs));

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, FunctionComponent } from 'react';
 import _get from 'lodash/get';
-import { Hidden } from 'react-grid-system';
+import { Hidden, Visible } from 'react-grid-system';
 import PriceContent from './partials/PriceContent';
 import Title from './partials/Title';
 import Price from './partials/Price';
@@ -148,24 +148,26 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
         <Title {...titleProps} />
         <Price {...priceProps} />
         <Price {...priceProps} isSticky={true} />
-        <div
-          ref={ref}
-          data-locale='de-DE'
-          data-template-id='5419b6a8b0d04a076446a9ad'
-          data-businessunit-id='46edfd1c0000640005017f22'
-          data-style-height='42px'
-          data-style-width='100%'
-          data-theme='light'
-          data-style-alignment='center'
-        >
-          <a
-            href='https://de.trustpilot.com/review/www.auto.de'
-            target='_blank'
-            rel='noopener noreferrer'
+        <Visible xs sm md>
+          <div
+            ref={ref}
+            data-locale='de-DE'
+            data-template-id='5419b6a8b0d04a076446a9ad'
+            data-businessunit-id='46edfd1c0000640005017f22'
+            data-style-height='42px'
+            data-style-width='100%'
+            data-theme='light'
+            data-style-alignment='center'
           >
-            Trustpilot
-          </a>
-        </div>
+            <a
+              href='https://de.trustpilot.com/review/www.auto.de'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              Trustpilot
+            </a>
+          </div>
+        </Visible>
         {props.children}
       </div>
       <div>

package/source/components/_common/Range/Range.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import { Slider } from '@mui/material';
 import { isMobileOnly } from 'react-device-detect';
+import { iOS } from '../../../framework/utils/CommonUtils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 interface IRangeProps {
@@ -50,6 +51,9 @@ const Range: React.FC<IRangeProps> = ({
   )
 
   const onChangeRange = (event: Event, value: number | number[]) => {
+    if (isIOS && event.type === 'mousedown') {
+      return;
+    }
     setRangeValue(value);
     onChange(event, value)
   }