Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 52x 52x 52x 52x 52x 212x 212x 212x 638x 212x 1x 211x 632x 52x | import classNames from 'classnames';
import React, { memo, FunctionComponent } from 'react';
import CreditCardIcon from './CreditCardIcon';
export const SUPPORTED_CARD_TYPES = [
'american-express',
'carnet',
'cb',
'dankort',
'diners-club',
'discover',
'elo',
'hiper',
'jcb',
'mada',
'maestro',
'mastercard',
'troy',
'unionpay',
'visa',
];
export interface CreditCardIconListProps {
selectedCardType?: string;
cardTypes: string[];
}
const CreditCardIconList: FunctionComponent<CreditCardIconListProps> = ({
selectedCardType,
cardTypes,
}) => {
const filteredCardTypes = cardTypes
.filter(type => SUPPORTED_CARD_TYPES.indexOf(type) !== -1);
if (!filteredCardTypes.length) {
return null;
}
return (
<ul className="creditCardTypes-list">
{ filteredCardTypes.map(type => (
<li
className={ classNames(
'creditCardTypes-list-item',
{ 'is-active': selectedCardType === type },
{ 'not-active': selectedCardType && selectedCardType !== type}
) }
key={ type }
>
<span className="cardIcon">
<CreditCardIcon cardType={ type } />
</span>
</li>
)) }
</ul>
);
};
export default memo(CreditCardIconList);
|