@bytebrand/fe-ui-core 4.0.268 → 4.1.0

package/package.json

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

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
 import classnames from 'classnames';
 import _get from 'lodash/get';
 import LazyLoad from 'react-lazyload';
@@ -64,7 +64,7 @@ interface IVehicleSmallCardProps {
   src?: string;
   url?: string;
   iconName?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
   showSlider?: boolean;
   showOfferBtn?: boolean;
   showFavoriteStar?: boolean;
@@ -81,7 +81,7 @@ interface IVehicleSmallCardProps {
   currentPage?: number;
 }
 
-const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props) => {
+const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
   const {
     t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
     isTop,
@@ -239,14 +239,14 @@ const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props
     statsData
   };
 
-  const linkBaseUrl = (e: React.MouseEvent<HTMLImageElement>) => {
+  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
     e.preventDefault();
     if (baseUrl) window.open(baseUrl, '_blank');
   };
-
+  console.log(`%cqqq VSC [${id}] = `, 'font-weight: bold;color: #90ee90', id );
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
-      {React.createElement(linkTag, {
+      {createElement(linkTag, {
         children: <VehicleTitle {...favoriteProps} />,
         ...routeObj,
         className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
@@ -254,7 +254,7 @@ const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props
         href: url
       })}
 
-      {React.createElement(linkTag, {
+      {createElement(linkTag, {
         children: (
           <>
             {showSlider ? (
@@ -269,7 +269,7 @@ const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props
                           {offerSource || ownerName ? (
                             <>
                               <IconSVG className={styles.svgIcon} name='linkAlternative' />
-                              <span onClick={(e: React.MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
+                              <span onClick={(e: MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
                                 {!typeAlternative ? ownerName : t(`cbd:${offerSource}`)}
                               </span>
                             </>
@@ -339,4 +339,19 @@ VehicleSmallCard.defaultProps = {
   onDetailsClick: () => { }
 };
 
-export default VehicleSmallCard;
+// export default VehicleSmallCard;
+export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponentUpdate
+  const {
+    t,
+    price: {
+      financing: { monthlyInstallment, annualMileage, withFinalInstallment },
+      leasing: { monthlyInstallment: lMonthlyInstallment }
+    }
+  } = props;
+
+  return t                    === nextProps.t
+    && monthlyInstallment     === nextProps.price.financing.monthlyInstallment
+    && annualMileage          === nextProps.price.financing.annualMileage
+    && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
+    && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment;
+});