import { ColorValue } from "react-native"; import Animated from "react-native-reanimated"; import { Component } from "react"; import { IOColors } from "../../core/IOColors"; import { useIOFontDynamicScale } from "../../utils/accessibility"; /* Icons */ import IconAbacus from "./svg/IconAbacus"; import IconAccessibility from "./svg/IconAccessibility"; import IconAdd from "./svg/IconAdd"; import IconAddSmall from "./svg/IconAddSmall"; import IconAmount from "./svg/IconAmount"; import IconAnalytics from "./svg/IconAnalytics"; import IconArchive from "./svg/IconArchive"; import IconArchiveFilled from "./svg/IconArchiveFilled"; import IconArrowBottom from "./svg/IconArrowBottom"; import IconArrowLeft from "./svg/IconArrowLeft"; import IconArrowRight from "./svg/IconArrowRight"; import IconArrowTop from "./svg/IconArrowTop"; import IconAttachment from "./svg/IconAttachment"; import IconBackAndroid from "./svg/IconBackAndroid"; import IconBackiOS from "./svg/IconBackiOS"; import IconBarcode from "./svg/IconBarcode"; import IconBattery from "./svg/IconBattery"; import IconBell from "./svg/IconBell"; import IconBiomFaceID from "./svg/IconBiomFaceID"; import IconBiomFingerprint from "./svg/IconBiomFingerprint"; import IconBonus from "./svg/IconBonus"; import IconBonusFilled from "./svg/IconBonusFilled"; import IconCalendar from "./svg/IconCalendar"; import IconCancel from "./svg/IconCancel"; import IconCanceled from "./svg/IconCanceled"; import IconCar from "./svg/IconCar"; import IconCategCulture from "./svg/IconCategCulture"; import IconCategFinance from "./svg/IconCategFinance"; import IconCategHome from "./svg/IconCategHome"; import IconCategJobOffers from "./svg/IconCategJobOffers"; import IconCategLearning from "./svg/IconCategLearning"; import IconCategMobility from "./svg/IconCategMobility"; import IconCategShopping from "./svg/IconCategShopping"; import IconCategSport from "./svg/IconCategSport"; import IconCategSustainability from "./svg/IconCategSustainability"; import IconCategTelco from "./svg/IconCategTelco"; import IconCategTravel from "./svg/IconCategTravel"; import IconCategWellness from "./svg/IconCategWellness"; import IconChange from "./svg/IconChange"; import IconChat from "./svg/IconChat"; import IconCheckTick from "./svg/IconCheckTick"; import IconCheckTickBig from "./svg/IconCheckTickBig"; import IconChevronBottom from "./svg/IconChevronBottom"; import IconChevronLeft from "./svg/IconChevronLeft"; import IconChevronRight from "./svg/IconChevronRight"; import IconChevronRightListItem from "./svg/IconChevronRightListItem"; import IconChevronTop from "./svg/IconChevronTop"; import IconCie from "./svg/IconCie"; import IconCieCard from "./svg/IconCieCard"; import IconCieLetter from "./svg/IconCieLetter"; import IconCloseLarge from "./svg/IconCloseLarge"; import IconCloseMedium from "./svg/IconCloseMedium"; import IconCloseSmall from "./svg/IconCloseSmall"; import IconCode from "./svg/IconCode"; import IconCoggle from "./svg/IconCoggle"; import IconCompare from "./svg/IconCompare"; import IconContactless from "./svg/IconContactless"; import IconCopy from "./svg/IconCopy"; import IconCreditCard from "./svg/IconCreditCard"; import IconCreditCardFilled from "./svg/IconCreditCardFilled"; import IconCreditCardOff from "./svg/IconCreditCardOff"; import IconDevice from "./svg/IconDevice"; import IconDeviceVibration from "./svg/IconDeviceVibration"; import IconDocGiacenza from "./svg/IconDocGiacenza"; import IconDocPaymentCode from "./svg/IconDocPaymentCode"; import IconDocPaymentTitle from "./svg/IconDocPaymentTitle"; import IconDocumentAdd from "./svg/IconDocumentAdd"; import IconDocumentAttachment from "./svg/IconDocumentAttachment"; import IconDocumentAttachmentPDF from "./svg/IconDocumentAttachmentPDF"; import IconDotMenu from "./svg/IconDotMenu"; import IconEUStars from "./svg/IconEUStars"; import IconEdit from "./svg/IconEdit"; import IconEmail from "./svg/IconEmail"; import IconEmailFill from "./svg/IconEmailFill"; import IconEmojiHappy from "./svg/IconEmojiHappy"; import IconEmojiSad from "./svg/IconEmojiSad"; import IconEntityCode from "./svg/IconEntityCode"; import IconErrorFilled from "./svg/IconErrorFilled"; import IconExternalLink from "./svg/IconExternalLink"; import IconExternalLinkSmall from "./svg/IconExternalLinkSmall"; import IconEyeHide from "./svg/IconEyeHide"; import IconEyeShow from "./svg/IconEyeShow"; import IconFamilySharing from "./svg/IconFamilySharing"; import IconFilterAndroid from "./svg/IconFilterAndroid"; import IconFilterOffiOS from "./svg/IconFilterOffiOS"; import IconFilterOniOS from "./svg/IconFilterOniOS"; import IconFingerprint from "./svg/IconFingerprint"; import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual"; import IconFolder from "./svg/IconFolder"; import IconFornitori from "./svg/IconFornitori"; import IconForward from "./svg/IconForward"; import IconGallery from "./svg/IconGallery"; import IconHealthCard from "./svg/IconHealthCard"; import IconHeartEmpty from "./svg/IconHeartEmpty"; import IconHeartFilled from "./svg/IconHeartFilled"; import IconHeartOff from "./svg/IconHeartOff"; import IconHistory from "./svg/IconHistory"; import IconHome from "./svg/IconHome"; import IconHomeFill from "./svg/IconHomeFill"; import IconHourglass from "./svg/IconHourglass"; import IconInboxEmpty from "./svg/IconInboxEmpty"; import IconInboxFilled from "./svg/IconInboxFilled"; import IconInfo from "./svg/IconInfo"; import IconInfoFilled from "./svg/IconInfoFilled"; import IconInitiatives from "./svg/IconInitiatives"; import IconInstitution from "./svg/IconInstitution"; import IconInstruction from "./svg/IconInstruction"; import IconKey from "./svg/IconKey"; import IconKeyboard from "./svg/IconKeyboard"; import IconKeyboardDown from "./svg/IconKeyboardDown"; import IconLadybug from "./svg/IconLadybug"; import IconLegalValue from "./svg/IconLegalValue"; import IconLight from "./svg/IconLight"; import IconLightFilled from "./svg/IconLightFilled"; import IconLightbulb from "./svg/IconLightbulb"; import IconLocationAndroid from "./svg/IconLocationAndroid"; import IconLocationiOS from "./svg/IconLocationiOS"; import IconLocationiOSFilled from "./svg/IconLocationiOSFilled"; import IconLockOff from "./svg/IconLockOff"; import IconLockOn from "./svg/IconLockOn"; import IconLogin from "./svg/IconLogin"; import IconLogout from "./svg/IconLogout"; import IconMagicWand from "./svg/IconMagicWand"; import IconMapPin from "./svg/IconMapPin"; import IconMerchant from "./svg/IconMerchant"; import IconMessage from "./svg/IconMessage"; import IconMessageLegal from "./svg/IconMessageLegal"; import IconMultiCard from "./svg/IconMultiCard"; import IconNavMessages from "./svg/IconNavMessages"; import IconNavMessagesFocused from "./svg/IconNavMessagesFocused"; import IconNavProfile from "./svg/IconNavProfile"; import IconNavProfileFocused from "./svg/IconNavProfileFocused"; import IconNavQrWallet from "./svg/IconNavQrWallet"; import IconNavScan from "./svg/IconNavScan"; import IconNavServices from "./svg/IconNavServices"; import IconNavServicesFocused from "./svg/IconNavServicesFocused"; import IconNavWallet from "./svg/IconNavWallet"; import IconNavWalletFocused from "./svg/IconNavWalletFocused"; import IconNotes from "./svg/IconNotes"; import IconNotice from "./svg/IconNotice"; import IconNoticeFilled from "./svg/IconNoticeFilled"; import IconNoticePlain from "./svg/IconNoticePlain"; import IconNotification from "./svg/IconNotification"; import IconOk from "./svg/IconOk"; import IconOption from "./svg/IconOption"; import IconPEC from "./svg/IconPEC"; import IconPSP from "./svg/IconPSP"; import IconPhone from "./svg/IconPhone"; import IconPinOff from "./svg/IconPinOff"; import IconPinOn from "./svg/IconPinOn"; import IconPlay from "./svg/IconPlay"; import IconPrint from "./svg/IconPrint"; import IconProductIOApp from "./svg/IconProductIOApp"; import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg"; import IconProductITWallet from "./svg/IconProductITWallet"; import IconProductPagoPA from "./svg/IconProductPagoPA"; import IconProfile from "./svg/IconProfile"; import IconProfileRegistered from "./svg/IconProfileRegistered"; import IconQrCode from "./svg/IconQrCode"; import IconQuestion from "./svg/IconQuestion"; import IconRead from "./svg/IconRead"; import IconReceiptOff from "./svg/IconReceiptOff"; import IconReceiptOn from "./svg/IconReceiptOn"; import IconRefund from "./svg/IconRefund"; import IconReload from "./svg/IconReload"; import IconSave from "./svg/IconSave"; import IconSearch from "./svg/IconSearch"; import IconSecurity from "./svg/IconSecurity"; import IconSecurityPad from "./svg/IconSecurityPad"; import IconSelfCertification from "./svg/IconSelfCertification"; import IconShareAndroid from "./svg/IconShareAndroid"; import IconShareiOs from "./svg/IconShareiOs"; import IconSignal from "./svg/IconSignal"; import IconSparkles from "./svg/IconSparkles"; import IconSpid from "./svg/IconSpid"; import IconStarEmpty from "./svg/IconStarEmpty"; import IconStarFilled from "./svg/IconStarFilled"; import IconStarOff from "./svg/IconStarOff"; import IconStop from "./svg/IconStop"; import IconSuccess from "./svg/IconSuccess"; import IconSwitchCard from "./svg/IconSwitchCard"; import IconSwitchOff from "./svg/IconSwitchOff"; import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid"; import IconSystemBiometricRecognitionOS from "./svg/IconSystemBiometricRecognitionOS"; import IconSystemLocationiOS from "./svg/IconSystemLocationiOS"; import IconSystemNFC from "./svg/IconSystemNFC"; import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions"; import IconSystemPasswordAndroid from "./svg/IconSystemPasswordAndroid"; import IconSystemPasswordiOS from "./svg/IconSystemPasswordiOS"; import IconSystemPermissionsAndroid from "./svg/IconSystemPermissionsAndroid"; import IconSystemPhotosiOS from "./svg/IconSystemPhotosiOS"; import IconSystemPrivacyiOS from "./svg/IconSystemPrivacyiOS"; import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid"; import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS"; import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions"; import IconTag from "./svg/IconTag"; import IconTerms from "./svg/IconTerms"; import IconTheme from "./svg/IconTheme"; import IconTouch from "./svg/IconTouch"; import IconTransactions from "./svg/IconTransactions"; import IconTransactionsBoxed from "./svg/IconTransactionsBoxed"; import IconTrashcan from "./svg/IconTrashcan"; import IconTypeface from "./svg/IconTypeface"; import IconWarningFilled from "./svg/IconWarningFilled"; import IconWebsite from "./svg/IconWebsite"; export const IOIcons = { spid: IconSpid, cie: IconCie /* io-cie */, cieCard: IconCieCard, cieLetter: IconCieLetter, qrCode: IconQrCode, bell: IconBell, website: IconWebsite, abacus: IconAbacus, home: IconHome, homeFill: IconHomeFill, copy: IconCopy, selfCert: IconSelfCertification, institution: IconInstitution, merchant: IconMerchant, hourglass: IconHourglass, shareiOs: IconShareiOs, shareAndroid: IconShareAndroid, filterOniOS: IconFilterOniOS, filterOffiOS: IconFilterOffiOS, filterAndroid: IconFilterAndroid, locked: IconLockOn, unlocked: IconLockOff, initiatives: IconInitiatives, analytics: IconAnalytics, fornitori: IconFornitori, eyeShow: IconEyeShow, eyeHide: IconEyeHide, pinOff: IconPinOff, pinOn: IconPinOn, play: IconPlay, stop: IconStop, emojiSad: IconEmojiSad, emojiHappy: IconEmojiHappy, phone: IconPhone, email: IconEmail, emailFill: IconEmailFill, pec: IconPEC, messageLegal: IconMessageLegal, message: IconMessage, chat: IconChat, archive: IconArchive, archiveFilled: IconArchiveFilled, inbox: IconInboxEmpty, inboxFilled: IconInboxFilled, security: IconSecurity, securityPad: IconSecurityPad, option: IconOption, key: IconKey, documentAdd: IconDocumentAdd, docGiacenza: IconDocGiacenza, docPaymentTitle: IconDocPaymentTitle, docPaymentCode: IconDocPaymentCode, docAttach: IconDocumentAttachment, docAttachPDF: IconDocumentAttachmentPDF, folder: IconFolder, receiptOn: IconReceiptOn, receiptOff: IconReceiptOff, notes: IconNotes, attachment: IconAttachment, print: IconPrint, add: IconAdd, addSmall: IconAddSmall, success: IconSuccess, ok: IconOk, fiscalCodeIndividual: IconFiscalCodeIndividual, entityCode: IconEntityCode, creditCard: IconCreditCard, creditCardOff: IconCreditCardOff, creditCardFilled: IconCreditCardFilled, multiCard: IconMultiCard, bonus: IconBonus, bonusFilled: IconBonusFilled, transactionsBoxed: IconTransactionsBoxed, transactions: IconTransactions, amount: IconAmount, psp: IconPSP, mapPin: IconMapPin, locationiOS: IconLocationiOS, locationiOSFilled: IconLocationiOSFilled, locationAndroid: IconLocationAndroid, coggle: IconCoggle, warningFilled: IconWarningFilled, notice: IconNotice, noticeFilled: IconNoticeFilled, noticePlain: IconNoticePlain, info: IconInfo, infoFilled: IconInfoFilled, canceled: IconCanceled, errorFilled: IconErrorFilled, legalValue: IconLegalValue, refund: IconRefund, reload: IconReload, history: IconHistory, edit: IconEdit, battery: IconBattery, trashcan: IconTrashcan, calendar: IconCalendar, profile: IconProfile, profileRegistered: IconProfileRegistered, familySharing: IconFamilySharing, lightbulb: IconLightbulb, magicWand: IconMagicWand, sparkles: IconSparkles, starEmpty: IconStarEmpty, starFilled: IconStarFilled, starOff: IconStarOff, heartEmpty: IconHeartEmpty, heartFilled: IconHeartFilled, heartOff: IconHeartOff, switchOff: IconSwitchOff, switchCard: IconSwitchCard, fingerprint: IconFingerprint, touch: IconTouch, device: IconDevice, deviceVibration: IconDeviceVibration, contactless: IconContactless, signal: IconSignal, notification: IconNotification, keyboard: IconKeyboard, keyboardDown: IconKeyboardDown, dotMenu: IconDotMenu, barcode: IconBarcode, save: IconSave, login: IconLogin, logout: IconLogout, ladybug: IconLadybug, tag: IconTag, gallery: IconGallery, externalLink: IconExternalLink, externalLinkSmall: IconExternalLinkSmall, forward: IconForward, cancel: IconCancel, compare: IconCompare, instruction: IconInstruction, terms: IconTerms, help: IconQuestion, search: IconSearch, accessibility: IconAccessibility, car: IconCar, healthCard: IconHealthCard, chevronRight: IconChevronRight, chevronLeft: IconChevronLeft, chevronBottom: IconChevronBottom, chevronTop: IconChevronTop, chevronRightListItem: IconChevronRightListItem, closeLarge: IconCloseLarge, closeMedium: IconCloseMedium, closeSmall: IconCloseSmall, arrowBottom: IconArrowBottom, arrowLeft: IconArrowLeft, arrowTop: IconArrowTop, arrowRight: IconArrowRight, change: IconChange, backiOS: IconBackiOS, backAndroid: IconBackAndroid, checkTick: IconCheckTick, checkTickBig: IconCheckTickBig, read: IconRead, light: IconLight, lightFilled: IconLightFilled, code: IconCode, theme: IconTheme, typeface: IconTypeface, navMessages: IconNavMessages, navMessagesFocused: IconNavMessagesFocused, navWallet: IconNavWallet, navWalletFocused: IconNavWalletFocused, navQrWallet: IconNavQrWallet, navScan: IconNavScan, navServices: IconNavServices, navServicesFocused: IconNavServicesFocused, navProfile: IconNavProfile, navProfileFocused: IconNavProfileFocused, navPsp: IconPSP, biomFingerprint: IconBiomFingerprint, biomFaceID: IconBiomFaceID, categCulture: IconCategCulture, categWellness: IconCategWellness, categLearning: IconCategLearning, categSport: IconCategSport, categHome: IconCategHome, categTelco: IconCategTelco, categFinance: IconCategFinance, categTravel: IconCategTravel, categMobility: IconCategMobility, categJobOffers: IconCategJobOffers, categShopping: IconCategShopping, categSustainability: IconCategSustainability, productIOApp: IconProductIOApp, productPagoPA: IconProductPagoPA, productIOAppBlueBg: IconProductIOAppBlueBg, productITWallet: IconProductITWallet, systemSettingsAndroid: IconSystemSettingsAndroid, systemSettingsiOS: IconSystemSettingsiOS, systemToggleInstructions: IconSystemToggleInstructions, systemAppsAndroid: IconSystemAppsAndroid, systemNotificationsInstructions: IconSystemNotificationsInstructions, systemPermissionsAndroid: IconSystemPermissionsAndroid, systemLocationiOS: IconSystemLocationiOS, systemPhotosiOS: IconSystemPhotosiOS, systemPrivacyiOS: IconSystemPrivacyiOS, systemBiometricRecognitionOS: IconSystemBiometricRecognitionOS, systemNFC: IconSystemNFC, systemPasswordAndroid: IconSystemPasswordAndroid, systemPasswordiOS: IconSystemPasswordiOS, euStars: IconEUStars } as const; export type IOIcons = keyof typeof IOIcons; export type IOIconSizeScale = 16 | 20 | 24 | 32 | 48; /* Sizes used exclusively for the Checkbox component */ export type IOIconSizeScaleCheckbox = 14 | 18; export type IOIconsProps = { name: IOIcons; color?: IOColors; size?: IOIconSizeScale | IOIconSizeScaleCheckbox | "100%"; testID?: string; accessible?: boolean; accessibilityLabel?: string; allowFontScaling?: boolean; }; /* Static icon component. Use it when you need an ion that doesn't change its color values. It accepts `IOColors` values only. */ export const Icon = ({ name, color = "grey-700", size = 24, accessible = false, accessibilityLabel = "", allowFontScaling = false, ...props }: IOIconsProps) => { const { dynamicFontScale } = useIOFontDynamicScale(); const IconElement = IOIcons[name]; const isAccessible = accessible && accessibilityLabel.trim().length > 0; const iconSize = allowFontScaling && typeof size === "number" ? size * dynamicFontScale : size; return ( ); }; /* Animated icon component. Use it when you need a color transition between different states. */ type IOAnimatedIconsProps = { name: IOIcons; color?: ColorValue; size?: IOIconSizeScale | "100%"; accessible?: boolean; allowFontScaling?: boolean; }; export const AnimatedIcon = ({ name, color = IOColors["grey-700"], size = 24, accessible = false, allowFontScaling = false, ...props }: IOAnimatedIconsProps) => { const { dynamicFontScale } = useIOFontDynamicScale(); const IconElement = IOIcons[name]; const iconSize = allowFontScaling && typeof size === "number" ? size * dynamicFontScale : size; return ( ); }; /* Make component animatable. Reanimated supports class components only, so we need to convert into a class component first. https://github.com/software-mansion/react-native-reanimated/discussions/1527 */ class AnimatedIconClassComponent extends Component { constructor(props: IOAnimatedIconsProps) { super(props); } render() { return ; } } /* A name that explicitly indicates the purpose of the component. It must be used in combination with `useAnimatedProps` hook. */ export const AnimatedIconWithColorTransition = Animated.createAnimatedComponent( AnimatedIconClassComponent ); /* ░░░ VARIOUS SETS ░░░ */ /* New icons */ const { sparkles, profileRegistered, documentAdd, securityPad, multiCard } = IOIcons; export const IOIconsNew = { sparkles, profileRegistered, documentAdd, securityPad, multiCard }; /* Navigation */ const { navMessages, navWallet, navScan, navServices, navProfile, navPsp, navMessagesFocused, navWalletFocused, navServicesFocused, navProfileFocused, navQrWallet } = IOIcons; export const IONavIcons = { navMessages, navWallet, navScan, navServices, navProfile, navPsp, navMessagesFocused, navWalletFocused, navServicesFocused, navProfileFocused, navQrWallet } as const; export type IONavIcons = keyof typeof IONavIcons; /* Biometric */ const { biomFingerprint, biomFaceID } = IOIcons; export const IOBiometricIcons = { biomFingerprint, biomFaceID } as const; export type IOBiometricIcons = keyof typeof IOBiometricIcons; /* Categories (used by CGN) */ const { categCulture, categWellness, categLearning, categSport, categHome, categTelco, categFinance, categTravel, categMobility, categJobOffers, categShopping, categSustainability } = IOIcons; export const IOCategoryIcons = { categCulture, categWellness, categLearning, categSport, categHome, categTelco, categFinance, categTravel, categMobility, categJobOffers, categShopping, categSustainability } as const; export type IOCategoryIcons = keyof typeof IOCategoryIcons; /* Product Logos */ const { productIOApp, productPagoPA, productIOAppBlueBg, productITWallet } = IOIcons; export const IOProductIcons = { productIOApp, productPagoPA, productIOAppBlueBg, productITWallet } as const; export type IOProductIcons = keyof typeof IOProductIcons; /* System */ const { systemSettingsAndroid, systemSettingsiOS, systemToggleInstructions, systemAppsAndroid, systemNotificationsInstructions, systemPermissionsAndroid, systemLocationiOS, systemPhotosiOS, systemPrivacyiOS, systemBiometricRecognitionOS, systemNFC, systemPasswordAndroid, systemPasswordiOS } = IOIcons; export const IOSystemIcons = { systemSettingsAndroid, systemSettingsiOS, systemToggleInstructions, systemAppsAndroid, systemNotificationsInstructions, systemPermissionsAndroid, systemLocationiOS, systemPhotosiOS, systemPrivacyiOS, systemBiometricRecognitionOS, systemNFC, systemPasswordAndroid, systemPasswordiOS } as const; export type IOSystemIcons = keyof typeof IOSystemIcons;