@bytebrand/fe-ui-core 4.2.115 → 4.2.117

package/package.json

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

package/source/components/FormattedNumber/FormattedNumber.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './FormattedNumber.styl';
 
 import classnames from 'classnames';
+import _uniqueId from 'lodash/uniqueId';
 
 export interface IFormattedPriceProps {
   value: number;
@@ -12,15 +13,41 @@ 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 }) => {
+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]);
 
   function getFormattedNumber() {
     // First we need to check if value is actual number;
+
     const notFalsieValue = !!value ? value : 0;
 
     const rounded = toRound ? Math.round(notFalsieValue) : notFalsieValue;
@@ -72,7 +99,7 @@ const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ classN
 
   return (
     <span className={classnames(styles.formattedNumber, className)}>
-      <span className={styles.value}>{val}</span>
+      <span className={styles.value} ref={textRef} id={uniqueId}>{val}</span>
     </span>
   );
 };

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

@@ -51,7 +51,6 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
       ] : [];
 
     const wrapperClassName = classnames(styles.wrapConfigDetails, { [styles.wrapConfigDetailsMobile]: mobileMode });
-
     return (
       <div className={wrapperClassName}>
         <Hidden xs sm md>
@@ -66,6 +65,7 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
                 postfix={postfix}
                 className={styles.detailsPrice}
                 unitClassName={styles.detailsUnit}
+                fontSize={40}
               />
             </div>
           </div>

package/source/components/SearchFilters/filters/Power.tsx

@@ -27,7 +27,7 @@ class Power extends React.Component<IPowerProps, ITypeState> {
 
     this.name = 'POWER';
     this.state = {
-      type: 'PS'
+      type: props.controls.type
     };
   }
 

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

@@ -23,6 +23,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
+  fontSize?:number;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -78,7 +79,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice,fontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -94,6 +95,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
+    fontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,

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

@@ -22,7 +22,7 @@
       margin-left: 0;
     +media-phone-only()
       [class*="VehicleFormattedPrice__large"]
-        font-size: 45px;
+        font-size: 45px!important;
         margin-left: 3px;
 
 .tabContentPadding

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

@@ -50,6 +50,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
     styles.tabContentPadding,
     { [styles.tabContentPaddingForBuy]: isBuy }
   );
+
   return (
     <>
       <div className={tabContentPaddingClassName}>
@@ -90,6 +91,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
+                fontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy')?40:60}
               />
             </div>
           ) : null}