@bytebrand/fe-ui-core 4.2.120 → 4.2.122

package/package.json

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

package/source/components/FormattedNumber/FormattedNumber.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import styles from './FormattedNumber.styl';
 
 import classnames from 'classnames';
-import _uniqueId from 'lodash/uniqueId';
 
 export interface IFormattedPriceProps {
   value: number;
@@ -13,38 +12,11 @@ export interface IFormattedPriceProps {
   className?: string;
   afterCommaClassName?: string;
   beforeCommaClassName?: string;
-  fontSize?:number;
 }
 
 // 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 FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ className, value, disableFormatting, toRound, numbersAfterDot, beforeCommaClassName, afterCommaClassName }) => {
   function getFormattedNumber() {
     // First we need to check if value is actual number;
 
@@ -99,7 +71,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,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import styles from './VehicleFormattedPrice.styl';
@@ -23,7 +23,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
-  fontSize?:number;
+  isDynamicFontSize?:boolean;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -35,6 +35,20 @@ export interface IVehiclePriceProps {
 }
 
 const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (props) => {
+  const textRef = useRef(null);
+
+  const updateFontSize = useCallback(() => {
+    if (price && isDynamicFontSize && textRef.current) {
+      const priceLength = Math.round(price).toString().length;
+      const newSize = Math.min(60, 200 / priceLength);
+      textRef.current.style.fontSize = `${newSize}px`;
+    }
+  }, [props.price, props.isDynamicFontSize]);
+
+  useEffect(() => {
+    updateFontSize();
+  }, [updateFontSize]);
+
   function renderUnit(): React.ReactNode {
     const { postfix, unit, unitClassName } = props;
     return (
@@ -79,7 +93,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice,fontSize
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, isDynamicFontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -95,7 +109,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
-    fontSize,
+    isDynamicFontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,
@@ -103,7 +117,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   };
 
   return (
-    <span className={containerClass}>
+    <span className={containerClass} ref={textRef}>
       {<FormattedNumber {...formattedNumberProps} />}
       {(unit && !monthly) && renderUnit()}
       {(monthly && unit) && renderUnitMonthly()}
@@ -127,6 +141,7 @@ VehicleFormattedPrice.defaultProps = {
   unitClassName: '',
   postfixClassName: '',
   subClassName: '',
+  isDynamicFontSize: false,
   sub: '',
   // FormattedNumber props
   toRound: false,

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}
+                isDynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy')? false : true}
               />
             </div>
           ) : null}