diff --git a/components/openId4VCI/Issuer.tsx b/components/openId4VCI/Issuer.tsx index 1b6d6489e..5a6a6aa48 100644 --- a/components/openId4VCI/Issuer.tsx +++ b/components/openId4VCI/Issuer.tsx @@ -19,27 +19,27 @@ export const Issuer: React.FC = (props: IssuerProps) => { style={({pressed}) => pressed ? [ - Theme.issuersScreenStyles.issuerBoxContainerPressed, + Theme.IssuersScreenStyles.issuerBoxContainerPressed, Theme.Styles.boxShadow, ] : [ - Theme.issuersScreenStyles.issuerBoxContainer, + Theme.IssuersScreenStyles.issuerBoxContainer, Theme.Styles.boxShadow, ] }> + style={Theme.IssuersScreenStyles.issuerHeading}> {t('itemHeading', {issuer: props.displayName})} + style={Theme.IssuersScreenStyles.issuerDescription}> {t('itemSubHeading')} diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index 318165791..1c96af460 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -1156,13 +1156,38 @@ export const DefaultTheme = { backgroundColor: Colors.Transparent, }, }), - issuersScreenStyles: StyleSheet.create({ + IssuersScreenStyles: StyleSheet.create({ + issuersSearchBar: { + borderWidth: 1, + borderColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.055, + width: Dimensions.get('window').width * 0.84, + paddingLeft: 12, + borderLeftWidth: 0, + borderTopRightRadius: 9, + borderBottomRightRadius: 9, + }, + searchIcon: { + justifyContent: 'center', + paddingLeft: 15, + height: Dimensions.get('window').height * 0.055, + width: Dimensions.get('window').width * 0.1, + borderColor: Colors.Gray50, + borderTopWidth: 1, + borderBottomWidth: 1, + borderLeftWidth: 1, + borderTopLeftRadius: 9, + borderBottomLeftRadius: 9, + }, issuerListOuterContainer: { padding: 10, flex: 1, backgroundColor: Colors.White, }, - issuersContainer: {marginHorizontal: 3}, + issuersContainer: { + marginHorizontal: 3, + marginTop: 5, + }, issuerBoxContainer: { margin: 5, flex: 1, diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts index 73efd68cb..097bec9e0 100644 --- a/components/ui/themes/PurpleTheme.ts +++ b/components/ui/themes/PurpleTheme.ts @@ -1158,13 +1158,38 @@ export const PurpleTheme = { backgroundColor: Colors.Transparent, }, }), - issuersScreenStyles: StyleSheet.create({ + IssuersScreenStyles: StyleSheet.create({ + issuersSearchBar: { + borderWidth: 1, + borderColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.055, + width: Dimensions.get('window').width * 0.84, + paddingLeft: 12, + borderLeftWidth: 0, + borderTopRightRadius: 9, + borderBottomRightRadius: 9, + }, + searchIcon: { + justifyContent: 'center', + backgroundColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.055, + width: Dimensions.get('window').width * 0.1, + borderColor: Colors.Gray50, + borderTopWidth: 1, + borderBottomWidth: 1, + borderLeftWidth: 1, + borderTopLeftRadius: 9, + borderBottomLeftRadius: 9, + }, issuerListOuterContainer: { padding: 10, flex: 1, backgroundColor: Colors.White, }, - issuersContainer: {marginHorizontal: 3}, + issuersContainer: { + marginHorizontal: 3, + marginVertical: 5, + }, issuerBoxContainer: { margin: 5, flex: 1, @@ -1273,7 +1298,6 @@ export const PurpleTheme = { protectPrivacy: require('../../../assets/intro-unlock-method.png'), NoInternetConnection: require('../../../assets/no-internet-connection.png'), SomethingWentWrong: require('../../../assets/something-went-wrong.png'), - elevation(level: ElevationLevel): ViewStyle { // https://ethercreative.github.io/react-native-shadow-generator/ diff --git a/locales/ara.json b/locales/ara.json index a366067eb..ecb09b78d 100644 --- a/locales/ara.json +++ b/locales/ara.json @@ -159,7 +159,8 @@ }, "IssuersScreen": { "title": "أضف بطاقة جديدة", - "header": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", + "description": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", + "searchByIssuersName": "البحث حسب اسم المصدر", "itemHeading": "التنزيل عبر {{issuer}}", "itemSubHeading": "أدخل رقم الهوية الوطنية الخاص بك لتنزيل بطاقتك.", "loaders": { diff --git a/locales/en.json b/locales/en.json index 2cb41c1d3..244b41fc3 100644 --- a/locales/en.json +++ b/locales/en.json @@ -160,7 +160,8 @@ }, "IssuersScreen": { "title": "Add new card", - "header": "Please choose your preferred issuer from the options below to add a new card.", + "description": "Please choose your preferred issuer from the options below to add a new card.", + "searchByIssuersName": "Search by Issuer’s name", "itemHeading": "Download via {{issuer}}", "itemSubHeading": "Enter your national ID to download your card.", "loaders": { diff --git a/locales/fil.json b/locales/fil.json index 939849427..ee623b710 100644 --- a/locales/fil.json +++ b/locales/fil.json @@ -158,7 +158,8 @@ }, "IssuersScreen": { "title": "Magdagdag ng bagong card", - "header": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.", + "description": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.", + "searchByIssuersName": "Maghanap ayon sa pangalan ng Nag-isyu", "itemHeading": "I-download sa pamamagitan ng {{issuer}}", "itemSubHeading": "Ilagay ang iyong national ID para i-download ang iyong card.", "loaders": { diff --git a/locales/hin.json b/locales/hin.json index b57110f10..3232e4867 100644 --- a/locales/hin.json +++ b/locales/hin.json @@ -156,7 +156,8 @@ }, "IssuersScreen": { "title": "नया कार्ड जोड़ें", - "header": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", + "description": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", + "searchByIssuersName": "जारीकर्ता के नाम से खोजें", "itemHeading": "{{issuer}} के माध्यम से डाउनलोड करें", "itemSubHeading": "अपना कार्ड डाउनलोड करने के लिए अपनी राष्ट्रीय आईडी दर्ज करें।", "loaders": { diff --git a/locales/kan.json b/locales/kan.json index 01454fe61..e19793ece 100644 --- a/locales/kan.json +++ b/locales/kan.json @@ -155,7 +155,8 @@ }, "IssuersScreen": { "title": "ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಿ", - "header": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", + "description": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", + "searchByIssuersName": "ವಿತರಕರ ಹೆಸರಿನ ಮೂಲಕ ಹುಡುಕಿ", "itemHeading": "{{issuer}} ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ", "itemSubHeading": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ರಾಷ್ಟ್ರೀಯ ID ಅನ್ನು ನಮೂದಿಸಿ.", "loaders": { diff --git a/locales/spa.json b/locales/spa.json index 0edfaf3f2..577758855 100644 --- a/locales/spa.json +++ b/locales/spa.json @@ -274,7 +274,8 @@ }, "IssuersScreen": { "title": "Agregar nueva tarjeta", - "header": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.", + "description": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.", + "searchByIssuersName": "Buscar por nombre del emisor", "itemHeading": "Descargar vía {{issuer}}", "itemSubHeading": "Introduce tu DNI para descargar tu tarjeta.", "loaders": { diff --git a/locales/tam.json b/locales/tam.json index 60bf85e5d..d033f08ea 100644 --- a/locales/tam.json +++ b/locales/tam.json @@ -155,7 +155,8 @@ }, "IssuersScreen": { "title": "புதிய அட்டையைச் சேர்க்கவும்", - "header": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", + "description": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", + "searchByIssuersName": "வழங்குபவரின் பெயரால் தேடவும்", "itemHeading": "{{issuer}} மூலம் பதிவிறக்கவும்", "itemSubHeading": "உங்கள் கார்டைப் பதிவிறக்க உங்கள் தேசிய ஐடியை உள்ளிடவும்.", "loaders": { diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index 2a37b0444..bacceb142 100644 --- a/screens/Issuers/IssuersScreen.tsx +++ b/screens/Issuers/IssuersScreen.tsx @@ -1,10 +1,10 @@ -import React, {useLayoutEffect} from 'react'; +import React, {useLayoutEffect, useState} from 'react'; import {useTranslation} from 'react-i18next'; -import {FlatList, Image, View} from 'react-native'; +import {FlatList, Image, View, TextInput, ScrollView} from 'react-native'; import {Issuer} from '../../components/openId4VCI/Issuer'; import {Error} from '../../components/ui/Error'; import {Header} from '../../components/ui/Header'; -import {Column, Text} from '../../components/ui'; +import {Column, Row, Text} from '../../components/ui'; import {Theme} from '../../components/ui/styleUtils'; import {RootRouteProps} from '../../routes'; import {HomeRouteProps} from '../../routes/main'; @@ -22,6 +22,7 @@ import { sendInteractEvent, sendStartEvent, } from '../../shared/telemetry/TelemetryUtils'; +import {Icon} from 'react-native-elements'; export const IssuersScreen: React.FC< HomeRouteProps | RootRouteProps @@ -29,6 +30,10 @@ export const IssuersScreen: React.FC< const controller = useIssuerScreenController(props); const {t} = useTranslation('IssuersScreen'); + const issuers = controller.issuers; + let [filteredSearchData, setFilteredSearchData] = useState(issuers); + const [search, setSearch] = useState(''); + useLayoutEffect(() => { if (controller.loadingReason || controller.errorMessageType) { props.navigation.setOptions({ @@ -124,24 +129,56 @@ export const IssuersScreen: React.FC< ); } + const filterIssuers = (searchText: string) => { + let filterdData = issuers.filter(item => { + if ( + getDisplayObjectForCurrentLanguage(item.display) + ?.name.toLowerCase() + .includes(searchText.toLowerCase()) + ) { + return getDisplayObjectForCurrentLanguage(item.display); + } + }); + setFilteredSearchData(filterdData); + setSearch(searchText); + }; + return ( {controller.issuers.length > 0 && ( - + - {t('header')} + {t('description')} - + + + filterIssuers(searchText)} + onLayout={() => filterIssuers('')} + /> + + + {controller.issuers.length > 0 && ( (