Skip to content

Commit

Permalink
use tamagui sheet instead of select component
Browse files Browse the repository at this point in the history
  • Loading branch information
@remicolin
remicolin committed Oct 30, 2024
1 parent 12fee6d commit df6539b
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 151 deletions.
102 changes: 100 additions & 2 deletions app/src/screens/MainScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { NativeEventEmitter, NativeModules, Linking, Modal, Platform, Pressable } from 'react-native';
import { NativeEventEmitter, NativeModules, Linking, Modal, Platform, Pressable, TouchableOpacity, ScrollView } from 'react-native';
import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3, View, Separator } from 'tamagui'
import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, ArrowRight, UserPlus, CalendarSearch, X, ShieldCheck } from '@tamagui/lucide-icons';
import Telegram from '../images/telegram.png'
Expand Down Expand Up @@ -36,6 +36,9 @@ import ValidProofScreen from './ValidProofScreen';
import WrongProofScreen from './WrongProofScreen';
import MockDataScreen from './MockDataScreen';
import OPENPASSPORT_LOGO from '../images/openpassport.png'
import { countryCodes } from '../../../common/src/constants/constants';
import getCountryISO2 from "country-iso-3-to-2";
import { flag } from 'country-emoji';

const emitter = (Platform.OS === 'android')
? new NativeEventEmitter(NativeModules.nativeModule)
Expand All @@ -57,6 +60,10 @@ const MainScreen: React.FC = () => {
const [dateOfBirthDatePickerIsOpen, setDateOfBirthDatePickerIsOpen] = useState(false)
const [dateOfExpiryDatePickerIsOpen, setDateOfExpiryDatePickerIsOpen] = useState(false)
const [isFormComplete, setIsFormComplete] = useState(false);
const [countrySheetOpen, setCountrySheetOpen] = useState(false);
const [algorithmSheetOpen, setAlgorithmSheetOpen] = useState(false);
const [selectedCountry, setSelectedCountry] = useState('USA');
const [selectedAlgorithm, setSelectedAlgorithm] = useState('rsa_sha256');

const {
passportNumber,
Expand Down Expand Up @@ -206,6 +213,16 @@ const MainScreen: React.FC = () => {

const { height } = useWindowDimensions();

const handleCountrySelect = (countryCode: string) => {
setSelectedCountry(countryCode);
setCountrySheetOpen(false);
};

const handleAlgorithmSelect = (algorithm: string) => {
setSelectedAlgorithm(algorithm);
setAlgorithmSheetOpen(false);
};

return (
<YStack f={1}>
<ToastViewport portalToRoot flexDirection="column-reverse" top={85} right={0} left={0} />
Expand Down Expand Up @@ -773,6 +790,82 @@ const MainScreen: React.FC = () => {
</Sheet.Frame>
</Sheet>

<Sheet
modal
open={countrySheetOpen}
onOpenChange={setCountrySheetOpen}
snapPoints={[60]}
animation="medium"
disableDrag
>
<Sheet.Overlay />
<Sheet.Frame bg={bgWhite} borderTopLeftRadius="$9" borderTopRightRadius="$9">
<YStack p="$4">
<XStack ai="center" jc="space-between" mb="$4">
<Text fontSize="$8">Select a country</Text>
<XStack onPress={() => setCountrySheetOpen(false)} p="$2">
<X color={borderColor} size="$1.5" mr="$2" />
</XStack>
</XStack>
<Separator borderColor={separatorColor} mb="$4" />
<ScrollView showsVerticalScrollIndicator={false}>
{Object.keys(countryCodes).map((countryCode) => (
<TouchableOpacity
key={countryCode}
onPress={() => {
handleCountrySelect(countryCode);
setCountrySheetOpen(false);
}}
>
<XStack py="$3" px="$2">
<Text fontSize="$4">
{countryCodes[countryCode as keyof typeof countryCodes]} {flag(getCountryISO2(countryCode))}
</Text>
</XStack>
</TouchableOpacity>
))}
</ScrollView>
</YStack>
</Sheet.Frame>
</Sheet>

<Sheet
modal
open={algorithmSheetOpen}
onOpenChange={setAlgorithmSheetOpen}
snapPoints={[40]}
animation="medium"
disableDrag
>
<Sheet.Overlay />
<Sheet.Frame bg={bgWhite} borderTopLeftRadius="$9" borderTopRightRadius="$9">
<YStack p="$4">
<XStack ai="center" jc="space-between" mb="$4">
<Text fontSize="$8">Select an algorithm</Text>
<XStack onPress={() => setAlgorithmSheetOpen(false)} p="$2">
<X color={borderColor} size="$1.5" mr="$2" />
</XStack>
</XStack>
<Separator borderColor={separatorColor} mb="$4" />
<ScrollView showsVerticalScrollIndicator={false}>
{["rsa_sha1", "rsa_sha256", "rsapss_sha256"].map((algorithm) => (
<TouchableOpacity
key={algorithm}
onPress={() => {
handleAlgorithmSelect(algorithm);
setAlgorithmSheetOpen(false);
}}
>
<XStack py="$3" px="$2">
<Text fontSize="$4">{algorithm}</Text>
</XStack>
</TouchableOpacity>
))}
</ScrollView>
</YStack>
</Sheet.Frame>
</Sheet>

</YStack>

<Tabs f={1} orientation="horizontal" flexDirection="column" defaultValue={"splash"}
Expand All @@ -789,7 +882,12 @@ const MainScreen: React.FC = () => {
/>
</Tabs.Content>
<Tabs.Content value="mock" f={1}>
<MockDataScreen />
<MockDataScreen
onCountryPress={() => setCountrySheetOpen(true)}
onAlgorithmPress={() => setAlgorithmSheetOpen(true)}
selectedCountry={selectedCountry}
selectedAlgorithm={selectedAlgorithm}
/>
</Tabs.Content>
<Tabs.Content value="scan" f={1}>
<CameraScreen
Expand Down
188 changes: 39 additions & 149 deletions app/src/screens/MockDataScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useCallback, useMemo } from 'react';
import React, { useState, useCallback, useMemo, useRef } from 'react';
import { YStack, XStack, Text, Select, Adapt, Sheet, Fieldset, Button, Spinner, Switch } from 'tamagui';
import { Check, ChevronDown, ChevronUp, Cpu, Minus, Plus } from '@tamagui/lucide-icons';
import { Check, ChevronDown, ChevronUp, Cpu, Minus, Plus, X } from '@tamagui/lucide-icons';
import { bgColor, bgGreen, bgGreen2, blueColor, borderColor, greenColorLight, redColorDark, textBlack } from '../utils/colors';
import useUserStore from '../stores/userStore';
import useNavigationStore from '../stores/navigationStore';
Expand All @@ -9,14 +9,23 @@ import { genMockPassportData } from '../../../common/src/utils/genMockPassportDa
import { countryCodes } from '../../../common/src/constants/constants';
import getCountryISO2 from "country-iso-3-to-2";
import { flag } from 'country-emoji';

const MockDataScreen: React.FC = () => {
const [signatureAlgorithm, setSignatureAlgorithm] = useState("rsa_sha256");
const listOfSignatureAlgorithms = ["rsa_sha1", "rsa_sha256", "rsapss_sha256"];

import { StyleSheet, TouchableOpacity, View } from 'react-native';

interface MockDataScreenProps {
onCountryPress: () => void;
onAlgorithmPress: () => void;
selectedCountry: string;
selectedAlgorithm: string;
}

const MockDataScreen: React.FC<MockDataScreenProps> = ({
onCountryPress,
onAlgorithmPress,
selectedCountry,
selectedAlgorithm,
}) => {
const [age, setAge] = useState(24);
const [expiryYears, setExpiryYears] = useState(5);
const [nationality, setNationality] = useState("FRA");
const [isGenerating, setIsGenerating] = useState(false);
const [isInOfacList, setIsInOfacList] = useState(false);
const castDate = (yearsOffset: number) => {
Expand All @@ -34,8 +43,8 @@ const MockDataScreen: React.FC = () => {
let mockPassportData;
if (isInOfacList) {
mockPassportData = genMockPassportData(
signatureAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256",
nationality as keyof typeof countryCodes,
selectedAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256",
selectedCountry as keyof typeof countryCodes,
castDate(-age),
castDate(expiryYears),
randomPassportNumber,
Expand All @@ -44,8 +53,8 @@ const MockDataScreen: React.FC = () => {
);
} else {
mockPassportData = genMockPassportData(
signatureAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256",
nationality as keyof typeof countryCodes,
selectedAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256",
selectedCountry as keyof typeof countryCodes,
castDate(-age),
castDate(expiryYears),
randomPassportNumber,
Expand All @@ -65,149 +74,30 @@ const MockDataScreen: React.FC = () => {

await new Promise(resolve => setTimeout(resolve, 1000));
useNavigationStore.getState().setSelectedTab("next");
}, [signatureAlgorithm, nationality, age, expiryYears, isInOfacList]);
const countryOptions = useMemo(() => {
return Object.keys(countryCodes).map((countryCode, index) => ({
countryCode,
countryName: countryCodes[countryCode as keyof typeof countryCodes],
flagEmoji: flag(getCountryISO2(countryCode)),
index,
}));
}, []);
}, [selectedAlgorithm, selectedCountry, age, expiryYears, isInOfacList]);

return (
<YStack f={1} gap="$4" >
<Text my="$9" textAlign="center" fontSize="$9" color={textBlack}>Generate passport data</Text>
<XStack ai="center" >
<Text f={1} fontSize="$5">
Encryption
</Text>
<Select
id="signature-algorithm"
value={signatureAlgorithm}
onValueChange={setSignatureAlgorithm}
native
>
<Select.Trigger w="$16" iconAfter={ChevronDown}>
<Select.Value placeholder="Select algorithm" />
</Select.Trigger>

<Adapt when="sm" platform="touch">
<Sheet
modal
dismissOnSnapToBottom
animationConfig={{
type: 'spring',
damping: 20,
mass: 1.2,
stiffness: 250,
}}
>
<Sheet.Frame>
<Text fontSize="$8" p="$3">Encryption method</Text>
<Sheet.ScrollView>
<Adapt.Contents />
</Sheet.ScrollView>
</Sheet.Frame>
<Sheet.Overlay
animation="lazy"
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
/>
</Sheet>
</Adapt>

<Select.Content zIndex={200000}>
<Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
<ChevronUp size={20} />
</Select.ScrollUpButton>

<Select.Viewport minWidth={200}>
<Select.Group>
{listOfSignatureAlgorithms.map((algorithm, index) => (
<Select.Item key={algorithm} index={index} value={algorithm}>
<Select.ItemText >{algorithm}</Select.ItemText>
<Select.ItemIndicator marginLeft="auto">
<Check size={16} />
</Select.ItemIndicator>
</Select.Item>
))}
</Select.Group>
</Select.Viewport>

<Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
<ChevronDown size={20} />
</Select.ScrollDownButton>
</Select.Content>
</Select>
<XStack ai="center">
<Text f={1} fontSize="$5">Encryption</Text>
<Button onPress={onAlgorithmPress} p="$2" px="$3" bg="white" borderColor={borderColor} borderWidth={1} borderRadius="$4" >
<XStack ai="center" gap="$2">
<Text fontSize="$4">{selectedAlgorithm}</Text>
<ChevronDown size={20} />
</XStack>
</Button>
</XStack>


<XStack ai="center" gap="$2">
<Text f={1} fontSize="$5">
Nationality
</Text>
<Select
id="nationality"
value={nationality}
onValueChange={setNationality}
native
>
<Select.Trigger width="$16" iconAfter={ChevronDown}>
<Select.Value placeholder="Select algorithm" />
</Select.Trigger>

<Adapt when="sm" platform="touch">
<Sheet
modal
dismissOnSnapToBottom
animationConfig={{
type: 'spring',
damping: 20,
mass: 1.2,
stiffness: 250,
}}
>
<Sheet.Frame >
<Text fontSize="$8" p="$3">Nationality</Text>
<Sheet.ScrollView>
<Adapt.Contents />
</Sheet.ScrollView>
</Sheet.Frame>
<Sheet.Overlay
animation="lazy"
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
/>
</Sheet>
</Adapt>

<Select.Content zIndex={200000}>
<Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
<ChevronUp size={20} />
</Select.ScrollUpButton>

<Select.Viewport minWidth={200}>
<Select.Group>
{countryOptions.map(({ countryCode, countryName, flagEmoji, index }) => (
<Select.Item key={countryCode} index={index} value={countryCode}>
<Select.ItemText>{countryName} {flagEmoji}</Select.ItemText>
<Select.ItemIndicator marginLeft="auto">
<Check size={16} />
</Select.ItemIndicator>
</Select.Item>
))}
</Select.Group>
</Select.Viewport>

<Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
<ChevronDown size={20} />
</Select.ScrollDownButton>
</Select.Content>
</Select>
<XStack ai="center">
<Text f={1} fontSize="$5">Nationality</Text>
<Button onPress={onCountryPress} p="$2" px="$3" bg="white" borderColor={borderColor} borderWidth={1} borderRadius="$4">
<XStack ai="center" gap="$2">
<Text fontSize="$4">{countryCodes[selectedCountry as keyof typeof countryCodes]} {flag(getCountryISO2(selectedCountry))}</Text>
<ChevronDown size={20} />
</XStack>
</Button>
</XStack>



<Fieldset mt="$2" gap="$2" horizontal>
<Text color={textBlack} width={160} justifyContent="flex-end" fontSize="$5">
Age (🎂)
Expand Down

0 comments on commit df6539b

Please sign in to comment.