Use useState and avoid setting inline styles

Adyen · Nov 14, 2024 · 66bbd40 · 66bbd40
1 parent e6478e7
commit 66bbd40
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git 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
@@ -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} />;
 }