@procivis/one-react-native-components 0.3.71 → 0.3.91

package/src/components/proof-request/v2/share-credential-v2-group.tsx

@@ -0,0 +1,258 @@
+import {
+  CredentialListItem,
+  PresentationDefinitionV2,
+  PresentationDefinitionV2CredentialClaim,
+  PresentationSubmitV2CredentialRequest,
+} from '@procivis/react-native-one-core';
+import React, { FC, useCallback, useMemo } from 'react';
+import { ImageSourcePropType, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
+import {
+  BlurView,
+  CredentialCardShadow,
+  DownIcon,
+  Selector,
+  SelectorStatus,
+  TouchableOpacity,
+  UpIcon,
+} from '../../../ui-components';
+import CredentialGroupHeader from '../../../ui-components/credential/group/credential-group-header';
+import { concatTestID, useCredentialListExpandedCard } from '../../../utils';
+import { ShareCredentialLabels } from '../v1/share-credential';
+import { GroupedShareCredentialV2Padding, ShareCredentialV2 } from './share-credential-v2';
+
+export type CredentialQuerySelection = Record<
+  string,
+  PresentationSubmitV2CredentialRequest | PresentationSubmitV2CredentialRequest[]
+>;
+
+export type ShareCredentialGroupLabels = ShareCredentialLabels & {
+  groupHeader: string;
+};
+
+export type ShareCredentialV2GroupProps = {
+  labels: ShareCredentialGroupLabels;
+  lastGroup: boolean;
+  onGroupSelect?: (selected: boolean) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelectCredential: (requestCredentialId: string) => () => void;
+  onSelectField: (
+    requestCredentialId: string,
+  ) => (
+    credentialId: CredentialListItem['id'],
+    fieldPath: PresentationDefinitionV2CredentialClaim['path'],
+    selected: boolean,
+  ) => void;
+  presentationDefinition: PresentationDefinitionV2;
+  requestGroup: string[];
+  selected?: boolean;
+  selectedCredentials?: CredentialQuerySelection;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+  valid: boolean;
+};
+
+const multipleCredentialsSelected = (
+  selectedCredentials: CredentialQuerySelection | undefined,
+  credentialRequestId: string,
+) => {
+  return (
+    selectedCredentials &&
+    selectedCredentials[credentialRequestId] &&
+    Array.isArray(selectedCredentials[credentialRequestId]) &&
+    (selectedCredentials[credentialRequestId] as PresentationSubmitV2CredentialRequest[]).length > 1
+  );
+};
+
+const numberOfCardsForRequest = (
+  selectedCredentials: CredentialQuerySelection | undefined,
+  credentialRequestId: string,
+) => {
+  if (!selectedCredentials || !selectedCredentials[credentialRequestId]) {
+    return 1;
+  }
+  const selection = selectedCredentials[credentialRequestId];
+  if (Array.isArray(selection)) {
+    return selection.length;
+  }
+  return 1;
+};
+
+const heightForNumberOfCards = (numberOfCards: number) => 60 * (numberOfCards + 1) + 12 * numberOfCards;
+
+export const ShareCredentialV2Group: FC<ShareCredentialV2GroupProps> = ({
+  labels,
+  lastGroup,
+  onGroupSelect,
+  onImagePreview,
+  onSelectCredential,
+  onSelectField,
+  presentationDefinition,
+  requestGroup,
+  selected,
+  selectedCredentials = {},
+  style,
+  testID,
+  valid,
+}) => {
+  const { expandedCredential, onHeaderPress } = useCredentialListExpandedCard();
+  const numberOfCards = requestGroup.reduce(
+    (acc, groupId) => acc + numberOfCardsForRequest(selectedCredentials, groupId),
+    0,
+  );
+  const singleCredentialGroup =
+    requestGroup.length === 1 && !multipleCredentialsSelected(selectedCredentials, requestGroup[0]);
+
+  const headerPressHandler = useCallback(() => {
+    onGroupSelect?.(!selected);
+  }, [selected, onGroupSelect]);
+
+  const onNestedCardHeaderPress = useCallback(
+    (credentialId: string) => () => {
+      if (!selected) {
+        onGroupSelect?.(true);
+      }
+      onHeaderPress(credentialId);
+    },
+    [selected, onGroupSelect, onHeaderPress],
+  );
+
+  const credentialCards = useMemo(() => {
+    return requestGroup.flatMap((credentialRequestId, credentialRequestIndex, { length: credentialRequestsLength }) => {
+      const lastQuery = credentialRequestIndex === credentialRequestsLength - 1;
+
+      const credentialQuery = presentationDefinition.credentialQueries[credentialRequestId];
+      let defaultSelection: PresentationSubmitV2CredentialRequest;
+      if ('applicableCredentials' in credentialQuery) {
+        defaultSelection = credentialQuery.applicableCredentials?.[0]
+          ? {
+              credentialId: credentialQuery.applicableCredentials[0].id,
+              userSelections: [],
+            }
+          : {
+              credentialId: '',
+              userSelections: [],
+            };
+      } else {
+        defaultSelection = {
+          credentialId: '',
+          userSelections: [],
+        };
+      }
+      const request = selectedCredentials[credentialRequestId];
+      const credentialSelections = request ? (Array.isArray(request) ? request : [request]) : [defaultSelection];
+
+      return credentialSelections?.flatMap((credentialRequest, credentialIndex, { length: credentialsLength }) => {
+        const selectedFields = credentialRequest.userSelections;
+        const cardId = `${credentialRequestId}-${credentialRequest.credentialId}`;
+        const lastItem = singleCredentialGroup ? lastGroup : lastQuery && credentialIndex === credentialsLength - 1;
+        const cardExpanded = selected && (singleCredentialGroup || expandedCredential === cardId);
+        const headerAccessory =
+          singleCredentialGroup && valid ? (
+            <Selector status={selected ? SelectorStatus.SelectedRadio : SelectorStatus.Empty} />
+          ) : cardExpanded ? (
+            UpIcon
+          ) : (
+            DownIcon
+          );
+        return (
+          <ShareCredentialV2
+            credentialQuery={credentialQuery}
+            credentialRequestId={credentialRequestId}
+            expanded={cardExpanded}
+            grouped={!singleCredentialGroup}
+            headerAccessory={headerAccessory}
+            key={credentialRequestId}
+            labels={labels}
+            lastItem={lastItem}
+            onHeaderPress={singleCredentialGroup ? headerPressHandler : onNestedCardHeaderPress(cardId)}
+            onImagePreview={onImagePreview}
+            onSelectCredential={onSelectCredential?.(credentialRequestId)}
+            onSelectField={onSelectField(credentialRequestId)}
+            selectedCredentialId={credentialRequest.credentialId}
+            selectedFields={selectedFields}
+            style={[!singleCredentialGroup && styles.requestedCredential, lastItem && styles.requestedCredentialLast]}
+            testID={concatTestID(testID, credentialRequestId)}
+          />
+        );
+      });
+    });
+  }, [
+    expandedCredential,
+    labels,
+    lastGroup,
+    headerPressHandler,
+    onImagePreview,
+    onNestedCardHeaderPress,
+    onSelectCredential,
+    onSelectField,
+    presentationDefinition.credentialQueries,
+    requestGroup,
+    selected,
+    selectedCredentials,
+    singleCredentialGroup,
+    testID,
+    valid,
+  ]);
+
+  if (singleCredentialGroup) {
+    return credentialCards[0];
+  }
+
+  const groupHeaderAccessory = valid ? (
+    <Selector status={selected ? SelectorStatus.SelectedRadio : SelectorStatus.Empty} />
+  ) : selected ? (
+    UpIcon
+  ) : (
+    DownIcon
+  );
+
+  return (
+    <Animated.View
+      layout={LinearTransition}
+      style={[
+        styles.animatedWrapper,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          height: selected || lastGroup ? 'auto' : heightForNumberOfCards(numberOfCards),
+        },
+        style,
+      ]}>
+      <Animated.View
+        layout={LinearTransition}
+        style={[
+          singleCredentialGroup ? undefined : styles.groupedCredentialsWrapper,
+          !singleCredentialGroup && styles.requestedCredential,
+          lastGroup && styles.requestedCredentialLast,
+          style,
+        ]}>
+        <BlurView blurStyle="strong" darkMode={true} style={StyleSheet.absoluteFill} />
+        <TouchableOpacity onPress={headerPressHandler}>
+          <CredentialGroupHeader accessory={groupHeaderAccessory} name={labels.groupHeader} style={styles.header} />
+        </TouchableOpacity>
+        {credentialCards}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  animatedWrapper: {
+    ...CredentialCardShadow,
+  },
+  groupedCredentialsWrapper: {
+    borderRadius: 10 + GroupedShareCredentialV2Padding,
+    overflow: 'hidden',
+    paddingBottom: GroupedShareCredentialV2Padding,
+  },
+  header: {
+    marginBottom: GroupedShareCredentialV2Padding,
+  },
+  requestedCredential: {
+    marginBottom: 12,
+  },
+  requestedCredentialLast: {
+    marginBottom: 0,
+  },
+});

package/src/components/proof-request/v2/share-credential-v2.tsx

@@ -0,0 +1,202 @@
+import {
+  CredentialListItem,
+  PresentationDefinitionV2CredentialClaim,
+  PresentationDefinitionV2CredentialQuery,
+} from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useCallback, useMemo } from 'react';
+import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { CredentialDetailsCardListItem, useAppColorScheme } from '../../../ui-components';
+import { concatTestID, getValidityState, useCoreConfig, ValidityState } from '../../../utils';
+import { shareCredentialCardFromV2PresentationCredential } from '../../../utils/parsers/credential-sharing-v2';
+import { SelectShareCredentialCardNotice } from '../select-share-credential-card-notice';
+import { ShareCredentialCardNotice } from '../share-credential-card-notice';
+import { ShareCredentialLabels } from '../v1';
+
+export type ShareCredentialV2Props = {
+  credentialQuery: PresentationDefinitionV2CredentialQuery;
+  credentialRequestId: string;
+  expanded?: boolean;
+  grouped?: boolean;
+  headerAccessory?: React.ComponentType<any> | React.ReactElement;
+  labels: ShareCredentialLabels;
+  lastItem?: boolean;
+  onHeaderPress?: (_credentialId?: string) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelectCredential?: () => void;
+  onSelectField: (
+    credentialId: CredentialListItem['id'],
+    fieldPath: PresentationDefinitionV2CredentialClaim['path'],
+    selected: boolean,
+  ) => void;
+  selectedCredentialId?: CredentialListItem['id'];
+  selectedFields?: Array<PresentationDefinitionV2CredentialClaim['path']>;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+};
+
+export const GroupedShareCredentialV2Padding = 4;
+
+export const ShareCredentialV2: FunctionComponent<ShareCredentialV2Props> = ({
+  credentialQuery,
+  credentialRequestId,
+  expanded,
+  grouped,
+  headerAccessory,
+  labels,
+  lastItem,
+  onHeaderPress,
+  onImagePreview,
+  onSelectCredential,
+  onSelectField,
+  selectedCredentialId,
+  selectedFields,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const applicableCredentials =
+    'applicableCredentials' in credentialQuery ? credentialQuery.applicableCredentials : undefined;
+  const failureHint = 'failureHint' in credentialQuery ? credentialQuery.failureHint : undefined;
+  const credential = applicableCredentials?.find((c) => c.id === selectedCredentialId) ?? applicableCredentials?.[0];
+  const { data: config } = useCoreConfig();
+  const cardWidth = useMemo(
+    () => Dimensions.get('window').width - 32 - (grouped ? GroupedShareCredentialV2Padding * 2 : 0),
+    [grouped],
+  );
+
+  const multipleCredentialsAvailable = Boolean(applicableCredentials?.length && applicableCredentials.length > 1);
+
+  const validityState = getValidityState(
+    credential
+      ? {
+          ...credential,
+          issuer: credential?.issuer?.id,
+        }
+      : undefined,
+  );
+
+  const footer = useMemo(() => {
+    if (!expanded) {
+      return;
+    }
+    if (validityState === ValidityState.Revoked) {
+      return (
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.revoked')}
+          text={labels.revokedCredentialNotice}
+        />
+      );
+    }
+    if (validityState === ValidityState.Suspended) {
+      return (
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.suspended')}
+          text={labels.suspendedCredentialNotice}
+        />
+      );
+    }
+
+    if (failureHint?.reason === 'VALIDITY') {
+      return (
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.invalid')}
+          text={labels.invalidCredentialNotice}
+        />
+      );
+    }
+
+    if (multipleCredentialsAvailable) {
+      return (
+        <SelectShareCredentialCardNotice
+          buttonTitle={labels.multipleCredentialsSelect}
+          onPress={onSelectCredential}
+          testID={concatTestID(testID, 'notice.multiple')}
+          text={labels.multipleCredentialsNotice}
+        />
+      );
+    }
+  }, [
+    expanded,
+    failureHint?.reason,
+    labels.invalidCredentialNotice,
+    labels.multipleCredentialsNotice,
+    labels.multipleCredentialsSelect,
+    labels.revokedCredentialNotice,
+    labels.suspendedCredentialNotice,
+    multipleCredentialsAvailable,
+    onSelectCredential,
+    testID,
+    validityState,
+  ]);
+
+  const onAttributeSelected = useCallback(
+    (fieldPath: PresentationDefinitionV2CredentialClaim['path'], selected: boolean) => {
+      if (!selectedCredentialId) {
+        return;
+      }
+      onSelectField(selectedCredentialId, fieldPath, selected);
+    },
+    [onSelectField, selectedCredentialId],
+  );
+
+  if (!config) {
+    return null;
+  }
+
+  const {
+    card: { header, ...card },
+    attributes,
+  } = shareCredentialCardFromV2PresentationCredential(
+    credential,
+    failureHint,
+    Boolean(expanded),
+    multipleCredentialsAvailable,
+    selectedFields,
+    config,
+    testID,
+    labels,
+  );
+
+  if (headerAccessory) {
+    header.accessory = headerAccessory;
+  }
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        credentialId: credentialRequestId,
+        header,
+        onHeaderPress,
+        width: cardWidth,
+      }}
+      expanded={expanded}
+      footer={footer}
+      lastItem={lastItem}
+      onAttributeSelected={onAttributeSelected}
+      onImagePreview={onImagePreview}
+      style={[
+        styles.credential,
+        grouped ? styles.groupedCredential : styles.bordered,
+        { borderColor: colorScheme.background },
+        style,
+      ]}
+      testID={testID}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  bordered: {
+    borderWidth: 1,
+  },
+  credential: {
+    borderRadius: 10,
+    marginBottom: 8,
+  },
+  groupedCredential: {
+    marginHorizontal: GroupedShareCredentialV2Padding,
+  },
+});

package/src/ui-components/buttons/share-button.tsx

@@ -3,9 +3,9 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { concatTestID } from '../../utils';
 import { TouchableHighlight } from '../accessibility';
+import { LinkIcon } from '../icons';
 import { Typography } from '../text';
 import { useAppColorScheme } from '../theme';
-import { LinkIcon } from '../icons';
 
 export type ShareButtonProps = {
   onPress?: () => void;

package/src/ui-components/camera/qr-code-scanner.tsx

@@ -1,7 +1,9 @@
+import { useIsFocused } from '@react-navigation/native';
 import React, { FunctionComponent, useMemo } from 'react';
 import { StyleSheet, View, ViewProps } from 'react-native';
 import { Camera, Code, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
 
+import { useIsAppActive } from '../../utils';
 import CameraOverlay from './camera-overlay';
 
 export type QRCodeScannerProps = ViewProps & {
@@ -18,6 +20,8 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
   noCameraView = null,
   ...viewProps
 }) => {
+  const isFocused = useIsFocused();
+  const isAppActive = useIsAppActive();
   const qrCodeScanner = useCodeScanner({
     codeTypes,
     onCodeScanned: onQRCodeRead,
@@ -25,7 +29,7 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
 
   const device = useCameraDevice('back');
 
-  const cameraOverlayView: React.ReactElement | undefined = useMemo(() => {
+  const cameraOverlayView = useMemo(() => {
     if (!cameraOverlay) {
       return <CameraOverlay />;
     }
@@ -43,7 +47,12 @@ const QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({
 
   return (
     <View {...viewProps}>
-      <Camera codeScanner={qrCodeScanner} device={device} isActive={true} style={StyleSheet.absoluteFill} />
+      <Camera
+        codeScanner={qrCodeScanner}
+        device={device}
+        isActive={isFocused && isAppActive !== false}
+        style={StyleSheet.absoluteFill}
+      />
       {cameraOverlayView}
     </View>
   );

package/src/ui-components/credential/card/credential-details-list-item.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, { FC, useCallback, useState } from 'react';
+import { LayoutChangeEvent, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { CredentialCardRatio, CredentialCardShadow } from './credential-card';
 import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
@@ -17,64 +17,43 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
   style,
   ...props
 }) => {
-  const [cardWidth, setCardWidth] = useState<number>();
-  const [minHeight, setMinHeight] = useState<number>();
   const [detailsCardHeight, setDetailsCardHeight] = useState<number>();
-
-  const cardListItemHeight = useSharedValue<number | undefined>(undefined);
-
-  useEffect(() => {
-    if (!detailsCardHeight || !minHeight) {
-      return;
-    }
-    const newValue = expanded ? detailsCardHeight : minHeight;
-    if (cardListItemHeight.value === undefined) {
-      cardListItemHeight.value = newValue;
-      return;
-    }
-    cardListItemHeight.value = withTiming(newValue, {
-      duration: 250,
-    });
-  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);
-
-  const animatedCardWrapperStyle = useAnimatedStyle(() => {
-    if (cardListItemHeight.value !== undefined) {
-      return {
-        height: cardListItemHeight.value,
-      };
-    }
-    if (lastItem || expanded) {
-      return {};
-    }
-    return {
-      height: 60,
-    };
-  }, [cardListItemHeight, lastItem, expanded]);
-
-  const cardWrapperStyle: ViewStyle = {
-    minHeight: cardWidth ? Math.ceil(cardWidth / CredentialCardRatio) : undefined,
-  }
+  const cardWidth = props.card.width;
+  const minHeight = lastItem ? Math.ceil(cardWidth / CredentialCardRatio) : 60;
 
   const onContentLayout = useCallback(
     (event: LayoutChangeEvent) => {
-      const { width, height } = event.nativeEvent.layout;
+      const { height } = event.nativeEvent.layout;
       const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;
       const cardHeight = Math.round(height) + 2 * borderWidth;
       if (cardHeight === detailsCardHeight) {
         return;
       }
-      setCardWidth(width);
-      if (!minHeight) {
-        setMinHeight(lastItem ? Math.ceil(width / CredentialCardRatio) : 60);
-      }
       setDetailsCardHeight(cardHeight);
     },
-    [lastItem, minHeight, style, detailsCardHeight],
+    [style, detailsCardHeight],
   );
 
   return (
-    <Animated.View style={[styles.animatedWrapper, animatedCardWrapperStyle, style]}>
-      <View style={[styles.cardWrapper, cardWrapperStyle]}>
+    <Animated.View
+      layout={LinearTransition}
+      style={[
+        styles.animatedWrapper,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          height: expanded ? 'auto' : minHeight,
+        },
+        style,
+      ]}>
+      <Animated.View
+        layout={LinearTransition}
+        style={[
+          styles.cardWrapper,
+          // eslint-disable-next-line react-native/no-inline-styles
+          {
+            height: expanded ? 'auto' : Math.ceil(cardWidth / CredentialCardRatio),
+          },
+        ]}>
         <CredentialDetailsCard
           animate={false}
           expanded={true}
@@ -82,7 +61,7 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
           style={detailsCardStyle}
           {...props}
         />
-      </View>
+      </Animated.View>
     </Animated.View>
   );
 };
@@ -93,7 +72,6 @@ const styles = StyleSheet.create({
   },
   cardWrapper: {
     borderRadius: 10,
-    height: '100%',
     overflow: 'hidden',
   },
 });

package/src/ui-components/credential/credential-attribute-item.tsx

@@ -357,6 +357,8 @@ const styles = StyleSheet.create({
   },
   rightAccessory: {
     paddingHorizontal: 8,
+    position: 'absolute',
+    right: 0,
   },
   separator: {
     height: 1,