From 66bbd409c854a157be30b4846d1f17203213be6c Mon Sep 17 00:00:00 2001 From: nicholas <nicholas.spong@adyen.com> Date: Thu, 14 Nov 2024 12:27:55 +0100 Subject: [PATCH] Use useState and avoid setting inline styles --- .../Card/components/CardInput/CardInput.scss | 4 +++ .../CardInput/components/BrandIcon.tsx | 28 ++++++++++--------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.scss b/packages/lib/src/components/Card/components/CardInput/CardInput.scss index 83704c1944..0608b2cbfa 100644 --- a/packages/lib/src/components/Card/components/CardInput/CardInput.scss +++ b/packages/lib/src/components/Card/components/CardInput/CardInput.scss @@ -120,6 +120,10 @@ display: none; } +.adyen-checkout__field--cardNumber .adyen-checkout-card-input__icon--hidden { + display: none; +} + .adyen-checkout__field--securityCode.adyen-checkout__field--error .adyen-checkout__card__cvc__hint, .adyen-checkout__field--securityCode.adyen-checkout__field--valid .adyen-checkout__card__cvc__hint { opacity: 0; diff --git a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx index 6bea01763e..19b63bd394 100644 --- a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx +++ b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx @@ -2,27 +2,29 @@ import { h } from 'preact'; import { getCardImageUrl, getFullBrandName } from '../utils'; import { BrandIconProps } from './types'; import useImage from '../../../../../core/Context/useImage'; +import { useState } from 'preact/hooks'; +import classNames from 'classnames'; export default function BrandIcon({ brand, brandsConfiguration = {} }: BrandIconProps) { const getImage = useImage(); const imageName = brand === 'card' ? 'nocard' : brand; const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage); - const handleError = e => { - e.target.style.cssText = 'display: none'; + const [hasLoaded, setHasLoaded] = useState(false); + + const handleError = () => { + setHasLoaded(false); }; - const handleLoad = e => { - e.target.style.cssText = 'display: block'; + const handleLoad = () => { + setHasLoaded(true); }; - return ( - <img - className="adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon" - onLoad={handleLoad} - onError={handleError} - alt={getFullBrandName(brand)} - src={imageUrl} - /> - ); + const fieldClassnames = classNames({ + 'adyen-checkout-card-input__icon': true, + 'adyen-checkout__card__cardNumber__brandIcon': true, + 'adyen-checkout-card-input__icon--hidden': !hasLoaded + }); + + return <img className={fieldClassnames} onLoad={handleLoad} onError={handleError} alt={getFullBrandName(brand)} src={imageUrl} />; }