@bytebrand/fe-ui-core 4.2.117 → 4.2.118

package/package.json

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

package/source/components/FormattedNumber/FormattedNumber.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import styles from './FormattedNumber.styl';
 
 import classnames from 'classnames';
@@ -13,37 +13,39 @@ export interface IFormattedPriceProps {
   className?: string;
   afterCommaClassName?: string;
   beforeCommaClassName?: string;
-  fontSize?:number;
+  fontSize?:string;
 }
 
 // const breakpointForRound = 10000;
 const separatorCounter = 3;
 const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ className, value, disableFormatting, toRound, numbersAfterDot, beforeCommaClassName, afterCommaClassName, fontSize }) => {
-  const textRef = useRef(null);
-  const uniqueId = _uniqueId(className);
-
-  const [newFontSize, setFontSize] = useState(fontSize);
-  useEffect(() => {
-    const priceElement = document.getElementById(uniqueId);
-    const resizeFont = () => {
-      const textWidth = priceElement.getBoundingClientRect().width;
-      let parentWidth = fontSize === 40 ? 150 : 100;
-      if (window.innerWidth < 720) {
-        parentWidth = fontSize === 40 ? 200 : 150;
-      }
-      if (fontSize && textWidth > 120) {
-        textRef.current.parentNode.style.maxWidth = `${parentWidth}px`;
-        const newFont = Math.floor(newFontSize * parentWidth / textWidth);
-        priceElement.style.fontSize = `${newFont}px`;
-        priceElement.style.verticalAlign = 'top';
-        textRef.current.parentNode.style.fontSize = `${newFont}px`;
-        setFontSize(newFont);
-      }
-    };
-    resizeFont();
-    window.addEventListener('resize', resizeFont);
-    return () => window.removeEventListener('resize', resizeFont);
-  },        [uniqueId, newFontSize]);
+  // const textRef = useRef(null);
+  // const uniqueId = _uniqueId(className);
+
+  // const [newFontSize, setFontSize] = useState(fontSize);
+  // useEffect(() => {
+  //   const priceElement = document.getElementById(uniqueId);
+  //   // const resizeFont = () => {
+  //   //   const textWidth = priceElement.getBoundingClientRect().width;
+  //   //   let parentWidth = fontSize === 40 ? 150 : 100;
+  //   //   if (window.innerWidth < 720) {
+  //   //     parentWidth = fontSize === 40 ? 200 : 150;
+  //   //   }
+  //     if (fontSize && value.toString().length>4) {
+  //       // textRef.current.parentNode.style.maxWidth = `${parentWidth}px`;
+  //       // const newFont = Math.floor(newFontSize * parentWidth / textWidth);
+  //       // priceElement.style.fontSize = `45px`;
+  //       // priceElement.style.verticalAlign = 'top';
+  //       textRef.current.parentNode.style.fontSize = `45px`;
+  //       // setFontSize(newFont);
+  //     }
+  //   // };
+  //   // resizeFont();
+  //   // window.addEventListener('resize', resizeFont);
+  //   // return () => window.removeEventListener('resize', resizeFont);
+  //   // if(fontSize && )
+  //   console.log('value',value.toString().length);
+  // },        [uniqueId]);
 
   function getFormattedNumber() {
     // First we need to check if value is actual number;
@@ -99,7 +101,7 @@ const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ classN
 
   return (
     <span className={classnames(styles.formattedNumber, className)}>
-      <span className={styles.value} ref={textRef} id={uniqueId}>{val}</span>
+      <span className={styles.value} >{val}</span>
     </span>
   );
 };

package/source/components/OfferDetailedSection/partials/PanelConfig.tsx

@@ -65,7 +65,6 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
                 postfix={postfix}
                 className={styles.detailsPrice}
                 unitClassName={styles.detailsUnit}
-                fontSize={40}
               />
             </div>
           </div>

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import styles from './VehicleFormattedPrice.styl';
+import _uniqueId from 'lodash/uniqueId';
 
 export interface IVehiclePriceProps {
   price: number;
@@ -23,7 +24,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
-  fontSize?:number;
+  fontSize?:string;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -35,11 +36,22 @@ export interface IVehiclePriceProps {
 }
 
 const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (props) => {
+  const textRef = useRef(null);
+  const uniqueId = _uniqueId(props.className);
+
+  useEffect(() => {
+    const priceElement = document.getElementById(uniqueId);
+    if (fontSize === 'small') {
+      priceElement.style.fontSize = `45px`;
+      priceElement.style.margin = `9px 0px 0px 4px`;
+    }
+  },        [uniqueId]);
+
   function renderUnit(): React.ReactNode {
     const { postfix, unit, unitClassName } = props;
     return (
     <span className={classnames(styles.unit, unitClassName)}>
-      &nbsp;{unit}
+     {fontSize === 'small' ? unit : '\u00A0' + unit}
       {postfix ? renderPostfix() : ''}
     </span>);
   }
@@ -79,7 +91,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice,fontSize
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, fontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -103,7 +115,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   };
 
   return (
-    <span className={containerClass}>
+    <span className={containerClass} ref={textRef} id={uniqueId}>
       {<FormattedNumber {...formattedNumberProps} />}
       {(unit && !monthly) && renderUnit()}
       {(monthly && unit) && renderUnitMonthly()}

package/source/components/VehicleDetailedSidebar/partials/PriceContent.styl

@@ -25,6 +25,9 @@
         font-size: 45px!important;
         margin-left: 3px;
 
+
+
+
 .tabContentPadding
   padding: 10px 10px 10px 10px;
   flex-direction: row
@@ -112,3 +115,17 @@
 .wrapper
   +media-tablet-landscape-up()
    padding-right: 15px;
+
+.priceFontSizeSmall
+  .financingPriceItem
+    display: block;
+  .priceInfoLabel
+    margin-top:8px!important 
+  .wrapper
+    +media-tablet-landscape-up()
+      padding-right: 0px;
+  
+
+.tabContentPaddingForBuy.priceFontSizeSmall
+  .financingPriceItem
+      display: flex;

package/source/components/VehicleDetailedSidebar/partials/PriceContent.tsx

@@ -7,6 +7,7 @@ import styles from './PriceContent.styl';
 import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import PriceRating from '../../PriceRating/PriceRating';
 import RequestOffer from '../../_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper';
+import { getFormattedPrice } from '../../../../utils';
 
 const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
   t,
@@ -45,10 +46,12 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
     isAdditionalOption: true,
     onShowOfferDetails: offerBlockProps.onShowOfferDetails
   };
+  const priceFontSize:string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' :'large') :'';
 
   const tabContentPaddingClassName = classnames(
     styles.tabContentPadding,
-    { [styles.tabContentPaddingForBuy]: isBuy }
+    { [styles.tabContentPaddingForBuy]: isBuy },
+    { [styles.priceFontSizeSmall]: priceFontSize === 'small' }
   );
 
   return (
@@ -91,7 +94,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
-                fontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy')?40:60}
+                fontSize={priceFontSize}
               />
             </div>
           ) : null}