From 2b616b6585e6fef66edf8fa62156da4b8631d39f Mon Sep 17 00:00:00 2001 From: anil_majji Date: Fri, 27 Oct 2023 14:08:30 +0530 Subject: [PATCH 1/6] Feat(INJI-502): Enable user to search issuer from the list Signed-off-by: anil_majji --- components/openId4VCI/Issuer.tsx | 10 +++--- components/ui/themes/DefaultTheme.ts | 10 +++++- components/ui/themes/PurpleTheme.ts | 10 +++++- locales/ara.json | 2 +- locales/en.json | 2 +- locales/fil.json | 2 +- locales/hin.json | 2 +- locales/kan.json | 2 +- locales/spa.json | 2 +- locales/tam.json | 2 +- screens/Issuers/IssuersScreen.tsx | 53 +++++++++++++++++++--------- 11 files changed, 67 insertions(+), 30 deletions(-) diff --git a/components/openId4VCI/Issuer.tsx b/components/openId4VCI/Issuer.tsx index 1b6d6489e3..5a6a6aa482 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 3181657915..3afd4d2613 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -1156,7 +1156,15 @@ export const DefaultTheme = { backgroundColor: Colors.Transparent, }, }), - issuersScreenStyles: StyleSheet.create({ + IssuersScreenStyles: StyleSheet.create({ + issuersSearchBar: { + borderWidth: 1, + height: 45, + paddingLeft: 15, + margin: 5, + borderRadius: 10, + borderColor: Colors.Gray50, + }, issuerListOuterContainer: { padding: 10, flex: 1, diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts index 73efd68cbf..5b0c880852 100644 --- a/components/ui/themes/PurpleTheme.ts +++ b/components/ui/themes/PurpleTheme.ts @@ -1158,7 +1158,15 @@ export const PurpleTheme = { backgroundColor: Colors.Transparent, }, }), - issuersScreenStyles: StyleSheet.create({ + IssuersScreenStyles: StyleSheet.create({ + issuersSearchBar: { + borderWidth: 1, + height: 45, + paddingLeft: 15, + margin: 5, + borderRadius: 10, + borderColor: Colors.Gray50, + }, issuerListOuterContainer: { padding: 10, flex: 1, diff --git a/locales/ara.json b/locales/ara.json index a366067ebf..a92c123c0e 100644 --- a/locales/ara.json +++ b/locales/ara.json @@ -159,7 +159,7 @@ }, "IssuersScreen": { "title": "أضف بطاقة جديدة", - "header": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", + "addCardDescription": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", "itemHeading": "التنزيل عبر {{issuer}}", "itemSubHeading": "أدخل رقم الهوية الوطنية الخاص بك لتنزيل بطاقتك.", "loaders": { diff --git a/locales/en.json b/locales/en.json index 2cb41c1d3b..b250d19da0 100644 --- a/locales/en.json +++ b/locales/en.json @@ -160,7 +160,7 @@ }, "IssuersScreen": { "title": "Add new card", - "header": "Please choose your preferred issuer from the options below to add a new card.", + "addCardDescription": "Please choose your preferred issuer from the options below to add a new card.", "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 9398494275..34ec543bce 100644 --- a/locales/fil.json +++ b/locales/fil.json @@ -158,7 +158,7 @@ }, "IssuersScreen": { "title": "Magdagdag ng bagong card", - "header": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.", + "addCardDescription": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.", "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 b57110f105..d160b4f0cd 100644 --- a/locales/hin.json +++ b/locales/hin.json @@ -156,7 +156,7 @@ }, "IssuersScreen": { "title": "नया कार्ड जोड़ें", - "header": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", + "addCardDescription": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", "itemHeading": "{{issuer}} के माध्यम से डाउनलोड करें", "itemSubHeading": "अपना कार्ड डाउनलोड करने के लिए अपनी राष्ट्रीय आईडी दर्ज करें।", "loaders": { diff --git a/locales/kan.json b/locales/kan.json index 01454fe612..4985e56b40 100644 --- a/locales/kan.json +++ b/locales/kan.json @@ -155,7 +155,7 @@ }, "IssuersScreen": { "title": "ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಿ", - "header": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", + "addCardDescription": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", "itemHeading": "{{issuer}} ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ", "itemSubHeading": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ರಾಷ್ಟ್ರೀಯ ID ಅನ್ನು ನಮೂದಿಸಿ.", "loaders": { diff --git a/locales/spa.json b/locales/spa.json index 0edfaf3f2b..411b7b6dcc 100644 --- a/locales/spa.json +++ b/locales/spa.json @@ -274,7 +274,7 @@ }, "IssuersScreen": { "title": "Agregar nueva tarjeta", - "header": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.", + "addCardDescription": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.", "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 60bf85e5d6..ee3bf5059c 100644 --- a/locales/tam.json +++ b/locales/tam.json @@ -155,7 +155,7 @@ }, "IssuersScreen": { "title": "புதிய அட்டையைச் சேர்க்கவும்", - "header": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", + "addCardDescription": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", "itemHeading": "{{issuer}} மூலம் பதிவிறக்கவும்", "itemSubHeading": "உங்கள் கார்டைப் பதிவிறக்க உங்கள் தேசிய ஐடியை உள்ளிடவும்.", "loaders": { diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index 2a37b04448..1818629b23 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} 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} from '../../components/ui'; import {Theme} from '../../components/ui/styleUtils'; import {RootRouteProps} from '../../routes'; import {HomeRouteProps} from '../../routes/main'; @@ -29,6 +29,10 @@ export const IssuersScreen: React.FC< const controller = useIssuerScreenController(props); const {t} = useTranslation('IssuersScreen'); + const issuers = controller.issuers; + let [issuersData, setIssuersData] = useState(issuers); + const [search, setSearch] = useState(''); + useLayoutEffect(() => { if (controller.loadingReason || controller.errorMessageType) { props.navigation.setOptions({ @@ -124,24 +128,41 @@ export const IssuersScreen: React.FC< ); } + const searchIssuer = text => { + if (text === '') { + setIssuersData(issuers); + setSearch(text); + } else { + let filterdData = issuers.filter(item => { + if ( + getDisplayObjectForCurrentLanguage(item.display) + ?.name.toLowerCase() + .includes(text.toLowerCase()) + ) { + return getDisplayObjectForCurrentLanguage(item.display); + } + }, []); + + setIssuersData(filterdData); + setSearch(text); + } + }; + return ( {controller.issuers.length > 0 && ( - - - {t('header')} - - + + searchIssuer(text)} + /> + {controller.issuers.length > 0 && ( ( Date: Fri, 27 Oct 2023 14:19:09 +0530 Subject: [PATCH 2/6] Feat(INJI-502): Updates all the locals with respective translation text Signed-off-by: anil_majji --- locales/ara.json | 1 + locales/en.json | 1 + locales/fil.json | 1 + locales/hin.json | 1 + locales/kan.json | 1 + locales/spa.json | 1 + locales/tam.json | 1 + screens/Issuers/IssuersScreen.tsx | 2 +- 8 files changed, 8 insertions(+), 1 deletion(-) diff --git a/locales/ara.json b/locales/ara.json index a92c123c0e..4d57f4e79b 100644 --- a/locales/ara.json +++ b/locales/ara.json @@ -160,6 +160,7 @@ "IssuersScreen": { "title": "أضف بطاقة جديدة", "addCardDescription": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", + "searchByIssuersName": "البحث حسب اسم المصدر", "itemHeading": "التنزيل عبر {{issuer}}", "itemSubHeading": "أدخل رقم الهوية الوطنية الخاص بك لتنزيل بطاقتك.", "loaders": { diff --git a/locales/en.json b/locales/en.json index b250d19da0..b0f538b43c 100644 --- a/locales/en.json +++ b/locales/en.json @@ -161,6 +161,7 @@ "IssuersScreen": { "title": "Add new card", "addCardDescription": "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 34ec543bce..2032c19ef8 100644 --- a/locales/fil.json +++ b/locales/fil.json @@ -159,6 +159,7 @@ "IssuersScreen": { "title": "Magdagdag ng bagong card", "addCardDescription": "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 d160b4f0cd..459e8f3bca 100644 --- a/locales/hin.json +++ b/locales/hin.json @@ -157,6 +157,7 @@ "IssuersScreen": { "title": "नया कार्ड जोड़ें", "addCardDescription": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", + "searchByIssuersName": "जारीकर्ता के नाम से खोजें", "itemHeading": "{{issuer}} के माध्यम से डाउनलोड करें", "itemSubHeading": "अपना कार्ड डाउनलोड करने के लिए अपनी राष्ट्रीय आईडी दर्ज करें।", "loaders": { diff --git a/locales/kan.json b/locales/kan.json index 4985e56b40..ff27e64f91 100644 --- a/locales/kan.json +++ b/locales/kan.json @@ -156,6 +156,7 @@ "IssuersScreen": { "title": "ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಿ", "addCardDescription": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", + "searchByIssuersName": "ವಿತರಕರ ಹೆಸರಿನ ಮೂಲಕ ಹುಡುಕಿ", "itemHeading": "{{issuer}} ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ", "itemSubHeading": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ರಾಷ್ಟ್ರೀಯ ID ಅನ್ನು ನಮೂದಿಸಿ.", "loaders": { diff --git a/locales/spa.json b/locales/spa.json index 411b7b6dcc..03626a0ec4 100644 --- a/locales/spa.json +++ b/locales/spa.json @@ -275,6 +275,7 @@ "IssuersScreen": { "title": "Agregar nueva tarjeta", "addCardDescription": "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 ee3bf5059c..6963ed5288 100644 --- a/locales/tam.json +++ b/locales/tam.json @@ -156,6 +156,7 @@ "IssuersScreen": { "title": "புதிய அட்டையைச் சேர்க்கவும்", "addCardDescription": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", + "searchByIssuersName": "வழங்குபவரின் பெயரால் தேடவும்", "itemHeading": "{{issuer}} மூலம் பதிவிறக்கவும்", "itemSubHeading": "உங்கள் கார்டைப் பதிவிறக்க உங்கள் தேசிய ஐடியை உள்ளிடவும்.", "loaders": { diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index 1818629b23..8ff7fd80f3 100644 --- a/screens/Issuers/IssuersScreen.tsx +++ b/screens/Issuers/IssuersScreen.tsx @@ -155,7 +155,7 @@ export const IssuersScreen: React.FC< searchIssuer(text)} /> From 0ee1ed1c725cb002f43ce2e3ad4ab41335976820 Mon Sep 17 00:00:00 2001 From: anil_majji Date: Mon, 30 Oct 2023 12:52:23 +0530 Subject: [PATCH 3/6] Feat(INJI-502): Implemented search icon Signed-off-by: anil_majji --- components/ui/themes/DefaultTheme.ts | 22 ++++++++++--- components/ui/themes/PurpleTheme.ts | 23 ++++++++++---- screens/Issuers/IssuersScreen.tsx | 46 +++++++++++++++++++--------- 3 files changed, 65 insertions(+), 26 deletions(-) diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index 3afd4d2613..7ebc9d75fb 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -1159,18 +1159,30 @@ export const DefaultTheme = { IssuersScreenStyles: StyleSheet.create({ issuersSearchBar: { borderWidth: 1, - height: 45, - paddingLeft: 15, - margin: 5, - borderRadius: 10, borderColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.06, + width: Dimensions.get('window').width * 0.85, + paddingLeft: 15, + borderTopRightRadius: 9, + borderBottomRightRadius: 9, + }, + searchIcon: { + justifyContent: 'center', + backgroundColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.06, + width: Dimensions.get('window').width * 0.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 5b0c880852..e5e7a2b5d5 100644 --- a/components/ui/themes/PurpleTheme.ts +++ b/components/ui/themes/PurpleTheme.ts @@ -1161,18 +1161,30 @@ export const PurpleTheme = { IssuersScreenStyles: StyleSheet.create({ issuersSearchBar: { borderWidth: 1, - height: 45, - paddingLeft: 15, - margin: 5, - borderRadius: 10, borderColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.06, + width: Dimensions.get('window').width * 0.85, + paddingLeft: 15, + borderTopRightRadius: 9, + borderBottomRightRadius: 9, + }, + searchIcon: { + justifyContent: 'center', + backgroundColor: Colors.Gray50, + height: Dimensions.get('window').height * 0.06, + width: Dimensions.get('window').width * 0.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, @@ -1281,7 +1293,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/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index 8ff7fd80f3..266e137cd5 100644 --- a/screens/Issuers/IssuersScreen.tsx +++ b/screens/Issuers/IssuersScreen.tsx @@ -1,10 +1,10 @@ import React, {useLayoutEffect, useState} from 'react'; import {useTranslation} from 'react-i18next'; -import {FlatList, Image, View, TextInput} 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} from '../../components/ui'; +import {Column, Row} 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 @@ -30,7 +31,7 @@ export const IssuersScreen: React.FC< const {t} = useTranslation('IssuersScreen'); const issuers = controller.issuers; - let [issuersData, setIssuersData] = useState(issuers); + let [filteredSearchData, setFilteredSearchData] = useState(issuers); const [search, setSearch] = useState(''); useLayoutEffect(() => { @@ -128,9 +129,13 @@ export const IssuersScreen: React.FC< ); } + const showAllIssuers = () => { + setFilteredSearchData(issuers); + }; + const searchIssuer = text => { if (text === '') { - setIssuersData(issuers); + setFilteredSearchData(issuers); setSearch(text); } else { let filterdData = issuers.filter(item => { @@ -143,7 +148,7 @@ export const IssuersScreen: React.FC< } }, []); - setIssuersData(filterdData); + setFilteredSearchData(filterdData); setSearch(text); } }; @@ -152,17 +157,28 @@ export const IssuersScreen: React.FC< {controller.issuers.length > 0 && ( - searchIssuer(text)} - /> - + + + searchIssuer(text)} + onLayout={() => showAllIssuers()} + /> + + + {controller.issuers.length > 0 && ( ( item.id} /> )} - + )} From f72e495b4b4703dc89687c6f2a32e1b9d7a5ba91 Mon Sep 17 00:00:00 2001 From: anil_majji Date: Mon, 30 Oct 2023 19:04:32 +0530 Subject: [PATCH 4/6] Feat(INJI-502): Adjusted the CSS of the search Icon & search bar Signed-off-by: anil_majji --- components/ui/themes/DefaultTheme.ts | 15 ++++++++++----- components/ui/themes/PurpleTheme.ts | 13 +++++++++---- screens/Issuers/IssuersScreen.tsx | 8 ++++---- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index 7ebc9d75fb..1c96af4605 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -1160,17 +1160,22 @@ export const DefaultTheme = { issuersSearchBar: { borderWidth: 1, borderColor: Colors.Gray50, - height: Dimensions.get('window').height * 0.06, - width: Dimensions.get('window').width * 0.85, - paddingLeft: 15, + 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.06, + 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, }, diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts index e5e7a2b5d5..097bec9e04 100644 --- a/components/ui/themes/PurpleTheme.ts +++ b/components/ui/themes/PurpleTheme.ts @@ -1162,17 +1162,22 @@ export const PurpleTheme = { issuersSearchBar: { borderWidth: 1, borderColor: Colors.Gray50, - height: Dimensions.get('window').height * 0.06, - width: Dimensions.get('window').width * 0.85, - paddingLeft: 15, + 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.06, + 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, }, diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index 266e137cd5..f78fbea8fd 100644 --- a/screens/Issuers/IssuersScreen.tsx +++ b/screens/Issuers/IssuersScreen.tsx @@ -161,8 +161,8 @@ export const IssuersScreen: React.FC< - + {controller.issuers.length > 0 && ( item.id} /> )} - + )} From ff9e33a3e6e26deb1b5cdfa9a05fe638bbd0b833 Mon Sep 17 00:00:00 2001 From: anil_majji Date: Tue, 31 Oct 2023 12:16:11 +0530 Subject: [PATCH 5/6] Feat(INJI-502): Resolved PR commits Signed-off-by: anil_majji --- screens/Issuers/IssuersScreen.tsx | 37 +++++++++++++++++-------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index f78fbea8fd..cc19e033b3 100644 --- a/screens/Issuers/IssuersScreen.tsx +++ b/screens/Issuers/IssuersScreen.tsx @@ -4,7 +4,7 @@ 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, Row} 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'; @@ -129,16 +129,10 @@ export const IssuersScreen: React.FC< ); } - const showAllIssuers = () => { - setFilteredSearchData(issuers); - }; - - const searchIssuer = text => { - if (text === '') { - setFilteredSearchData(issuers); - setSearch(text); - } else { - let filterdData = issuers.filter(item => { + const filterIssuers = text => { + let filterdData = issuers; + if (text.length > 0) { + filterdData = issuers.filter(item => { if ( getDisplayObjectForCurrentLanguage(item.display) ?.name.toLowerCase() @@ -147,19 +141,28 @@ export const IssuersScreen: React.FC< return getDisplayObjectForCurrentLanguage(item.display); } }, []); - - setFilteredSearchData(filterdData); - setSearch(text); } + setFilteredSearchData(filterdData); + setSearch(text); }; return ( {controller.issuers.length > 0 && ( + + {t('addCardDescription')} + searchIssuer(text)} - onLayout={() => showAllIssuers()} + onChangeText={text => filterIssuers(text)} + onLayout={filterIssuers} /> From 2fd4cec8a000b44a8ba2e81fa7211b2077ab9c51 Mon Sep 17 00:00:00 2001 From: anil_majji Date: Tue, 31 Oct 2023 18:35:22 +0530 Subject: [PATCH 6/6] Feat(INJI-502): Changed the sub header testId name along with locals key name Signed-off-by: anil_majji --- locales/ara.json | 2 +- locales/en.json | 2 +- locales/fil.json | 2 +- locales/hin.json | 2 +- locales/kan.json | 2 +- locales/spa.json | 2 +- locales/tam.json | 2 +- screens/Issuers/IssuersScreen.tsx | 33 ++++++++++++++----------------- 8 files changed, 22 insertions(+), 25 deletions(-) diff --git a/locales/ara.json b/locales/ara.json index 4d57f4e79b..ecb09b78d5 100644 --- a/locales/ara.json +++ b/locales/ara.json @@ -159,7 +159,7 @@ }, "IssuersScreen": { "title": "أضف بطاقة جديدة", - "addCardDescription": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", + "description": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.", "searchByIssuersName": "البحث حسب اسم المصدر", "itemHeading": "التنزيل عبر {{issuer}}", "itemSubHeading": "أدخل رقم الهوية الوطنية الخاص بك لتنزيل بطاقتك.", diff --git a/locales/en.json b/locales/en.json index b0f538b43c..244b41fc3f 100644 --- a/locales/en.json +++ b/locales/en.json @@ -160,7 +160,7 @@ }, "IssuersScreen": { "title": "Add new card", - "addCardDescription": "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.", diff --git a/locales/fil.json b/locales/fil.json index 2032c19ef8..ee623b7102 100644 --- a/locales/fil.json +++ b/locales/fil.json @@ -158,7 +158,7 @@ }, "IssuersScreen": { "title": "Magdagdag ng bagong card", - "addCardDescription": "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.", diff --git a/locales/hin.json b/locales/hin.json index 459e8f3bca..3232e48675 100644 --- a/locales/hin.json +++ b/locales/hin.json @@ -156,7 +156,7 @@ }, "IssuersScreen": { "title": "नया कार्ड जोड़ें", - "addCardDescription": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", + "description": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।", "searchByIssuersName": "जारीकर्ता के नाम से खोजें", "itemHeading": "{{issuer}} के माध्यम से डाउनलोड करें", "itemSubHeading": "अपना कार्ड डाउनलोड करने के लिए अपनी राष्ट्रीय आईडी दर्ज करें।", diff --git a/locales/kan.json b/locales/kan.json index ff27e64f91..e19793ecea 100644 --- a/locales/kan.json +++ b/locales/kan.json @@ -155,7 +155,7 @@ }, "IssuersScreen": { "title": "ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಿ", - "addCardDescription": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", + "description": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.", "searchByIssuersName": "ವಿತರಕರ ಹೆಸರಿನ ಮೂಲಕ ಹುಡುಕಿ", "itemHeading": "{{issuer}} ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ", "itemSubHeading": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ರಾಷ್ಟ್ರೀಯ ID ಅನ್ನು ನಮೂದಿಸಿ.", diff --git a/locales/spa.json b/locales/spa.json index 03626a0ec4..577758855b 100644 --- a/locales/spa.json +++ b/locales/spa.json @@ -274,7 +274,7 @@ }, "IssuersScreen": { "title": "Agregar nueva tarjeta", - "addCardDescription": "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.", diff --git a/locales/tam.json b/locales/tam.json index 6963ed5288..d033f08ea8 100644 --- a/locales/tam.json +++ b/locales/tam.json @@ -155,7 +155,7 @@ }, "IssuersScreen": { "title": "புதிய அட்டையைச் சேர்க்கவும்", - "addCardDescription": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", + "description": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.", "searchByIssuersName": "வழங்குபவரின் பெயரால் தேடவும்", "itemHeading": "{{issuer}} மூலம் பதிவிறக்கவும்", "itemSubHeading": "உங்கள் கார்டைப் பதிவிறக்க உங்கள் தேசிய ஐடியை உள்ளிடவும்.", diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx index cc19e033b3..bacceb1429 100644 --- a/screens/Issuers/IssuersScreen.tsx +++ b/screens/Issuers/IssuersScreen.tsx @@ -129,21 +129,18 @@ export const IssuersScreen: React.FC< ); } - const filterIssuers = text => { - let filterdData = issuers; - if (text.length > 0) { - filterdData = issuers.filter(item => { - if ( - getDisplayObjectForCurrentLanguage(item.display) - ?.name.toLowerCase() - .includes(text.toLowerCase()) - ) { - return getDisplayObjectForCurrentLanguage(item.display); - } - }, []); - } + 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(text); + setSearch(searchText); }; return ( @@ -151,14 +148,14 @@ export const IssuersScreen: React.FC< {controller.issuers.length > 0 && ( - {t('addCardDescription')} + {t('description')} filterIssuers(text)} - onLayout={filterIssuers} + onChangeText={searchText => filterIssuers(searchText)} + onLayout={() => filterIssuers('')} />