@procivis/one-react-native-components 0.2.54 → 0.3.27

package/lib/module/ui-components/credential/card/credential-details-list-item.js

@@ -1,17 +1,17 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { CredentialCardRatio, CredentialCardShadow } from './credential-card';
 import CredentialDetailsCard from './credential-details-card';
-const CredentialDetailsCardListItem = _ref => {
-  let {
-    detailsCardStyle,
-    expanded,
-    lastItem,
-    style,
-    ...props
-  } = _ref;
+const CredentialDetailsCardListItem = ({
+  detailsCardStyle,
+  expanded,
+  lastItem,
+  style,
+  ...props
+}) => {
+  const [cardWidth, setCardWidth] = useState();
   const [minHeight, setMinHeight] = useState();
   const [detailsCardHeight, setDetailsCardHeight] = useState();
   const cardListItemHeight = useSharedValue(undefined);
@@ -28,7 +28,7 @@ const CredentialDetailsCardListItem = _ref => {
       duration: 250
     });
   }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);
-  const cardWrapperStyle = useAnimatedStyle(() => {
+  const animatedCardWrapperStyle = useAnimatedStyle(() => {
     if (cardListItemHeight.value !== undefined) {
       return {
         height: cardListItemHeight.value
@@ -40,13 +40,17 @@ const CredentialDetailsCardListItem = _ref => {
     return {
       height: 60
     };
-  });
+  }, [cardListItemHeight, lastItem, expanded]);
+  const cardWrapperStyle = {
+    minHeight: cardWidth ? cardWidth / CredentialCardRatio : undefined
+  };
   const onContentLayout = useCallback(event => {
     var _StyleSheet$flatten$b, _StyleSheet$flatten;
     const {
       width,
       height
     } = event.nativeEvent.layout;
+    setCardWidth(width);
     if (!minHeight) {
       setMinHeight(lastItem ? width / CredentialCardRatio : 60);
     }
@@ -54,9 +58,9 @@ const CredentialDetailsCardListItem = _ref => {
     setDetailsCardHeight(height + 2 * borderWidth);
   }, [lastItem, minHeight, style]);
   return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [cardWrapperStyle, style]
+    style: [styles.animatedWrapper, animatedCardWrapperStyle, style]
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.cardWrapper
+    style: [styles.cardWrapper, cardWrapperStyle]
   }, /*#__PURE__*/React.createElement(CredentialDetailsCard, _extends({
     animate: false,
     expanded: expanded,
@@ -65,9 +69,13 @@ const CredentialDetailsCardListItem = _ref => {
   }, props))));
 };
 const styles = StyleSheet.create({
+  animatedWrapper: {
+    ...CredentialCardShadow
+  },
   cardWrapper: {
-    ...CredentialCardShadow,
-    overflow: 'visible'
+    borderRadius: 10,
+    height: '100%',
+    overflow: 'hidden'
   }
 });
 export default CredentialDetailsCardListItem;

package/lib/module/ui-components/credential/card/credential-details-list-item.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","StyleSheet","View","Animated","useAnimatedStyle","useSharedValue","withTiming","CredentialCardRatio","CredentialCardShadow","CredentialDetailsCard","CredentialDetailsCardListItem","_ref","detailsCardStyle","expanded","lastItem","style","props","minHeight","setMinHeight","detailsCardHeight","setDetailsCardHeight","cardListItemHeight","undefined","newValue","value","duration","cardWrapperStyle","height","onContentLayout","event","_StyleSheet$flatten$b","_StyleSheet$flatten","width","nativeEvent","layout","borderWidth","flatten","createElement","styles","cardWrapper","_extends","animate","onLayout","create","overflow"],"sources":["credential-details-list-item.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useState } from 'react';\nimport { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\n\nimport { CredentialCardRatio, CredentialCardShadow } from './credential-card';\nimport CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';\n\nexport type CredentialDetailsCardListItemProps = Omit<CredentialDetailsCardProps, 'animate'> & {\n  detailsCardStyle?: StyleProp<ViewStyle>;\n  lastItem?: boolean;\n};\n\nconst CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({\n  detailsCardStyle,\n  expanded,\n  lastItem,\n  style,\n  ...props\n}) => {\n  const [minHeight, setMinHeight] = useState<number>();\n  const [detailsCardHeight, setDetailsCardHeight] = useState<number>();\n\n  const cardListItemHeight = useSharedValue<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!detailsCardHeight || !minHeight) {\n      return;\n    }\n    const newValue = expanded ? detailsCardHeight : minHeight;\n    if (cardListItemHeight.value === undefined) {\n      cardListItemHeight.value = newValue;\n      return;\n    }\n    cardListItemHeight.value = withTiming(newValue, {\n      duration: 250,\n    });\n  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);\n\n  const cardWrapperStyle = useAnimatedStyle(() => {\n    if (cardListItemHeight.value !== undefined) {\n      return {\n        height: cardListItemHeight.value,\n      };\n    }\n    if (lastItem || expanded) {\n      return {};\n    }\n    return {\n      height: 60,\n    };\n  });\n\n  const onContentLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { width, height } = event.nativeEvent.layout;\n      if (!minHeight) {\n        setMinHeight(lastItem ? width / CredentialCardRatio : 60);\n      }\n      const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;\n      setDetailsCardHeight(height + 2 * borderWidth);\n    },\n    [lastItem, minHeight, style],\n  );\n\n  return (\n    <Animated.View style={[cardWrapperStyle, style]}>\n      <View style={styles.cardWrapper}>\n        <CredentialDetailsCard\n          animate={false}\n          expanded={expanded}\n          onLayout={onContentLayout}\n          style={detailsCardStyle}\n          {...props}\n        />\n      </View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  cardWrapper: {\n    ...CredentialCardShadow,\n    overflow: 'visible',\n  },\n});\n\nexport default CredentialDetailsCardListItem;\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useState","StyleSheet","View","Animated","useAnimatedStyle","useSharedValue","withTiming","CredentialCardRatio","CredentialCardShadow","CredentialDetailsCard","CredentialDetailsCardListItem","detailsCardStyle","expanded","lastItem","style","props","cardWidth","setCardWidth","minHeight","setMinHeight","detailsCardHeight","setDetailsCardHeight","cardListItemHeight","undefined","newValue","value","duration","animatedCardWrapperStyle","height","cardWrapperStyle","onContentLayout","event","_StyleSheet$flatten$b","_StyleSheet$flatten","width","nativeEvent","layout","borderWidth","flatten","createElement","styles","animatedWrapper","cardWrapper","_extends","animate","onLayout","create","borderRadius","overflow"],"sources":["credential-details-list-item.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useState } from 'react';\nimport { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\n\nimport { CredentialCardRatio, CredentialCardShadow } from './credential-card';\nimport CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';\n\nexport type CredentialDetailsCardListItemProps = Omit<CredentialDetailsCardProps, 'animate'> & {\n  detailsCardStyle?: StyleProp<ViewStyle>;\n  lastItem?: boolean;\n};\n\nconst CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({\n  detailsCardStyle,\n  expanded,\n  lastItem,\n  style,\n  ...props\n}) => {\n  const [cardWidth, setCardWidth] = useState<number>();\n  const [minHeight, setMinHeight] = useState<number>();\n  const [detailsCardHeight, setDetailsCardHeight] = useState<number>();\n\n  const cardListItemHeight = useSharedValue<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!detailsCardHeight || !minHeight) {\n      return;\n    }\n    const newValue = expanded ? detailsCardHeight : minHeight;\n    if (cardListItemHeight.value === undefined) {\n      cardListItemHeight.value = newValue;\n      return;\n    }\n    cardListItemHeight.value = withTiming(newValue, {\n      duration: 250,\n    });\n  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);\n\n  const animatedCardWrapperStyle = useAnimatedStyle(() => {\n    if (cardListItemHeight.value !== undefined) {\n      return {\n        height: cardListItemHeight.value,\n      };\n    }\n    if (lastItem || expanded) {\n      return {};\n    }\n    return {\n      height: 60,\n    };\n  }, [cardListItemHeight, lastItem, expanded]);\n\n  const cardWrapperStyle: ViewStyle = {\n    minHeight: cardWidth ? cardWidth / CredentialCardRatio : undefined,\n  }\n\n  const onContentLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { width, height } = event.nativeEvent.layout;\n      setCardWidth(width);\n      if (!minHeight) {\n        setMinHeight(lastItem ? width / CredentialCardRatio : 60);\n      }\n      const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;\n      setDetailsCardHeight(height + 2 * borderWidth);\n    },\n    [lastItem, minHeight, style],\n  );\n\n  return (\n    <Animated.View style={[styles.animatedWrapper, animatedCardWrapperStyle, style]}>\n      <View style={[styles.cardWrapper, cardWrapperStyle]}>\n        <CredentialDetailsCard\n          animate={false}\n          expanded={expanded}\n          onLayout={onContentLayout}\n          style={detailsCardStyle}\n          {...props}\n        />\n      </View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  animatedWrapper: {\n    ...CredentialCardShadow,\n  },\n  cardWrapper: {\n    borderRadius: 10,\n    height: '100%',\n    overflow: 'hidden',\n  },\n});\n\nexport default CredentialDetailsCardListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/credential/card/credential-header.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { concatTestID } from '../../../utils/testID';
@@ -6,28 +6,27 @@ import BlurView from '../../blur/blur-view';
 import ImageOrComponent from '../../image/image-or-component';
 import Typography from '../../text/typography';
 import { useAppColorScheme } from '../../theme/color-scheme-context';
-const CredentialHeader = _ref => {
-  let {
-    accessory,
-    blur = true,
-    color = '#5A69F3',
-    credentialDetailPrimary,
-    credentialDetailSecondary,
-    credentialDetailTestID,
-    credentialDetailErrorColor,
-    credentialName,
-    icon,
-    iconLabelColor = '#FFFFFF',
-    statusIcon,
-    style,
-    testID
-  } = _ref;
+const CredentialHeader = ({
+  accessory,
+  blur = true,
+  color = '#5A69F3',
+  credentialDetailPrimary,
+  credentialDetailSecondary,
+  credentialDetailTestID,
+  credentialDetailErrorColor,
+  credentialName,
+  icon,
+  iconLabelColor = '#FFFFFF',
+  statusIcon,
+  style,
+  testID
+}) => {
   const colorScheme = useAppColorScheme();
   const statusIconView = useMemo(() => {
     if (!statusIcon) {
       return undefined;
     }
-    if ( /*#__PURE__*/React.isValidElement(statusIcon)) {
+    if (/*#__PURE__*/React.isValidElement(statusIcon)) {
       return statusIcon;
     } else {
       const StatusIconComponent = statusIcon;
@@ -38,7 +37,7 @@ const CredentialHeader = _ref => {
     if (!accessory) {
       return undefined;
     }
-    if ( /*#__PURE__*/React.isValidElement(accessory)) {
+    if (/*#__PURE__*/React.isValidElement(accessory)) {
       return accessory;
     } else {
       const AccessoryComponent = accessory;
@@ -46,6 +45,9 @@ const CredentialHeader = _ref => {
     }
   }, [accessory]);
   const DetailText = useMemo(() => {
+    if (!credentialDetailPrimary) {
+      return undefined;
+    }
     const commonProps = {
       color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,
       ellipsizeMode: 'tail',

package/lib/module/ui-components/credential/card/credential-header.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","StyleSheet","View","concatTestID","BlurView","ImageOrComponent","Typography","useAppColorScheme","CredentialHeader","_ref","accessory","blur","color","credentialDetailPrimary","credentialDetailSecondary","credentialDetailTestID","credentialDetailErrorColor","credentialName","icon","iconLabelColor","statusIcon","style","testID","colorScheme","statusIconView","undefined","isValidElement","StatusIconComponent","createElement","accessoryView","AccessoryComponent","DetailText","commonProps","error","text","ellipsizeMode","numberOfLines","preset","styles","detailText","detailTextContainer","_extends","Fragment","interpunct","container","backgroundColor","white","blurStyle","absoluteFill","imageContainer","source","image","String","imagePlaceholder","substring","statusIconWrapper","nameText","create","alignItems","height","justifyContent","width","flexDirection","padding","flex","opacity","marginTop","borderRadius","marginRight","overflow","paddingLeft","paddingTop","textTransform","marginHorizontal","bottom","left","position"],"sources":["credential-header.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { AccessibilityProps, ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../../utils/testID';\nimport BlurView from '../../blur/blur-view';\nimport ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';\nimport Typography, { TypographyProps } from '../../text/typography';\nimport { useAppColorScheme } from '../../theme/color-scheme-context';\n\nexport interface CredentialHeaderProps extends AccessibilityProps {\n  accessory?: React.ComponentType<any> | React.ReactElement;\n  blur?: boolean;\n  color?: ColorValue;\n  credentialDetailPrimary: string;\n  credentialDetailSecondary?: string;\n  credentialDetailTestID?: string;\n  credentialDetailErrorColor?: boolean;\n  credentialName: string;\n  icon?: ImageOrComponentSource;\n  iconLabelColor?: ColorValue;\n  statusIcon?: React.ComponentType<any> | React.ReactElement;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst CredentialHeader: FC<CredentialHeaderProps> = ({\n  accessory,\n  blur = true,\n  color = '#5A69F3',\n  credentialDetailPrimary,\n  credentialDetailSecondary,\n  credentialDetailTestID,\n  credentialDetailErrorColor,\n  credentialName,\n  icon,\n  iconLabelColor = '#FFFFFF',\n  statusIcon,\n  style,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const statusIconView: React.ReactElement | undefined = useMemo(() => {\n    if (!statusIcon) {\n      return undefined;\n    }\n    if (React.isValidElement(statusIcon)) {\n      return statusIcon;\n    } else {\n      const StatusIconComponent = statusIcon as React.ComponentType<any>;\n      return <StatusIconComponent />;\n    }\n  }, [statusIcon]);\n\n  const accessoryView: React.ReactElement | undefined = useMemo(() => {\n    if (!accessory) {\n      return undefined;\n    }\n    if (React.isValidElement(accessory)) {\n      return accessory;\n    } else {\n      const AccessoryComponent = accessory as React.ComponentType<any>;\n      return <AccessoryComponent />;\n    }\n  }, [accessory]);\n\n  const DetailText = useMemo(() => {\n    const commonProps: TypographyProps = {\n      color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,\n      ellipsizeMode: 'tail',\n      numberOfLines: 1,\n      preset: 'xs',\n      style: styles.detailText,\n    };\n    return (\n      <View style={styles.detailTextContainer}>\n        <Typography {...commonProps} testID={credentialDetailTestID ?? concatTestID(testID, 'primaryDetail')}>\n          {credentialDetailPrimary}\n        </Typography>\n        {credentialDetailSecondary ? (\n          <>\n            <Typography {...commonProps} style={styles.interpunct}>\n              {'·'}\n            </Typography>\n            <Typography {...commonProps} testID={concatTestID(testID, 'secondaryDetail')}>\n              {credentialDetailSecondary}\n            </Typography>\n          </>\n        ) : null}\n      </View>\n    );\n  }, [\n    credentialDetailPrimary,\n    credentialDetailSecondary,\n    colorScheme,\n    testID,\n    credentialDetailErrorColor,\n    credentialDetailTestID,\n  ]);\n\n  return (\n    <View style={[styles.container, { backgroundColor: blur ? undefined : colorScheme.white }, style]} testID={testID}>\n      {blur && <BlurView blurStyle=\"strong\" style={StyleSheet.absoluteFill} />}\n      <View style={[styles.imageContainer, { backgroundColor: color }]}>\n        {icon ? (\n          <ImageOrComponent testID={concatTestID(testID, 'logoIcon')} source={icon} style={styles.image} />\n        ) : (\n          <View testID={concatTestID(testID, 'logoBackgroundColor', String(color))}>\n            <View testID={concatTestID(testID, 'logoTextColor', String(iconLabelColor))}>\n              <Typography\n                testID={concatTestID(testID, 'logoName')}\n                color={iconLabelColor}\n                preset=\"m\"\n                style={styles.imagePlaceholder}>\n                {credentialName.substring(0, 1)}\n              </Typography>\n            </View>\n          </View>\n        )}\n      </View>\n      {statusIconView && <View style={styles.statusIconWrapper}>{statusIconView}</View>}\n      <View style={styles.text}>\n        <Typography\n          testID={concatTestID(testID, 'name')}\n          color={colorScheme.text}\n          ellipsizeMode={'tail'}\n          numberOfLines={1}\n          preset=\"regular\"\n          style={styles.nameText}>\n          {credentialName}\n        </Typography>\n        {DetailText}\n      </View>\n      {accessoryView && <View style={styles.accessory}>{accessoryView}</View>}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  accessory: {\n    alignItems: 'center',\n    height: 44,\n    justifyContent: 'center',\n    width: 44,\n  },\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: 60,\n    padding: 8,\n  },\n  detailText: {\n    flex: 1,\n    opacity: 0.7,\n  },\n  detailTextContainer: {\n    flexDirection: 'row',\n    marginTop: -1,\n  },\n  image: {\n    height: 44,\n    width: 44,\n  },\n  imageContainer: {\n    alignItems: 'center',\n    borderRadius: 5,\n    height: 44,\n    justifyContent: 'center',\n    marginRight: 8,\n    overflow: 'hidden',\n    width: 44,\n  },\n  imagePlaceholder: {\n    paddingLeft: 1,\n    paddingTop: 3,\n    textTransform: 'uppercase',\n  },\n  interpunct: {\n    marginHorizontal: 12,\n    opacity: 0.5,\n  },\n  nameText: {\n    marginTop: 2,\n  },\n  statusIconWrapper: {\n    bottom: 3,\n    left: 36,\n    position: 'absolute',\n  },\n  text: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default CredentialHeader;\n"],"mappings":"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"}
+{"version":3,"names":["React","useMemo","StyleSheet","View","concatTestID","BlurView","ImageOrComponent","Typography","useAppColorScheme","CredentialHeader","accessory","blur","color","credentialDetailPrimary","credentialDetailSecondary","credentialDetailTestID","credentialDetailErrorColor","credentialName","icon","iconLabelColor","statusIcon","style","testID","colorScheme","statusIconView","undefined","isValidElement","StatusIconComponent","createElement","accessoryView","AccessoryComponent","DetailText","commonProps","error","text","ellipsizeMode","numberOfLines","preset","styles","detailText","detailTextContainer","_extends","Fragment","interpunct","container","backgroundColor","white","blurStyle","absoluteFill","imageContainer","source","image","String","imagePlaceholder","substring","statusIconWrapper","nameText","create","alignItems","height","justifyContent","width","flexDirection","padding","flex","opacity","marginTop","borderRadius","marginRight","overflow","paddingLeft","paddingTop","textTransform","marginHorizontal","bottom","left","position"],"sources":["credential-header.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { AccessibilityProps, ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../../utils/testID';\nimport BlurView from '../../blur/blur-view';\nimport ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';\nimport Typography, { TypographyProps } from '../../text/typography';\nimport { useAppColorScheme } from '../../theme/color-scheme-context';\n\nexport interface CredentialHeaderProps extends AccessibilityProps {\n  accessory?: React.ComponentType<any> | React.ReactElement;\n  blur?: boolean;\n  color?: ColorValue;\n  credentialDetailPrimary?: string;\n  credentialDetailSecondary?: string;\n  credentialDetailTestID?: string;\n  credentialDetailErrorColor?: boolean;\n  credentialName: string;\n  icon?: ImageOrComponentSource;\n  iconLabelColor?: ColorValue;\n  statusIcon?: React.ComponentType<any> | React.ReactElement;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst CredentialHeader: FC<CredentialHeaderProps> = ({\n  accessory,\n  blur = true,\n  color = '#5A69F3',\n  credentialDetailPrimary,\n  credentialDetailSecondary,\n  credentialDetailTestID,\n  credentialDetailErrorColor,\n  credentialName,\n  icon,\n  iconLabelColor = '#FFFFFF',\n  statusIcon,\n  style,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const statusIconView: React.ReactElement | undefined = useMemo(() => {\n    if (!statusIcon) {\n      return undefined;\n    }\n    if (React.isValidElement(statusIcon)) {\n      return statusIcon;\n    } else {\n      const StatusIconComponent = statusIcon as React.ComponentType<any>;\n      return <StatusIconComponent />;\n    }\n  }, [statusIcon]);\n\n  const accessoryView: React.ReactElement | undefined = useMemo(() => {\n    if (!accessory) {\n      return undefined;\n    }\n    if (React.isValidElement(accessory)) {\n      return accessory;\n    } else {\n      const AccessoryComponent = accessory as React.ComponentType<any>;\n      return <AccessoryComponent />;\n    }\n  }, [accessory]);\n\n  const DetailText = useMemo(() => {\n    if (!credentialDetailPrimary) {\n      return undefined;\n    }\n    const commonProps: TypographyProps = {\n      color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,\n      ellipsizeMode: 'tail',\n      numberOfLines: 1,\n      preset: 'xs',\n      style: styles.detailText,\n    };\n    return (\n      <View style={styles.detailTextContainer}>\n        <Typography {...commonProps} testID={credentialDetailTestID ?? concatTestID(testID, 'primaryDetail')}>\n          {credentialDetailPrimary}\n        </Typography>\n        {credentialDetailSecondary ? (\n          <>\n            <Typography {...commonProps} style={styles.interpunct}>\n              {'·'}\n            </Typography>\n            <Typography {...commonProps} testID={concatTestID(testID, 'secondaryDetail')}>\n              {credentialDetailSecondary}\n            </Typography>\n          </>\n        ) : null}\n      </View>\n    );\n  }, [\n    credentialDetailPrimary,\n    credentialDetailSecondary,\n    colorScheme,\n    testID,\n    credentialDetailErrorColor,\n    credentialDetailTestID,\n  ]);\n\n  return (\n    <View style={[styles.container, { backgroundColor: blur ? undefined : colorScheme.white }, style]} testID={testID}>\n      {blur && <BlurView blurStyle=\"strong\" style={StyleSheet.absoluteFill} />}\n      <View style={[styles.imageContainer, { backgroundColor: color }]}>\n        {icon ? (\n          <ImageOrComponent testID={concatTestID(testID, 'logoIcon')} source={icon} style={styles.image} />\n        ) : (\n          <View testID={concatTestID(testID, 'logoBackgroundColor', String(color))}>\n            <View testID={concatTestID(testID, 'logoTextColor', String(iconLabelColor))}>\n              <Typography\n                testID={concatTestID(testID, 'logoName')}\n                color={iconLabelColor}\n                preset=\"m\"\n                style={styles.imagePlaceholder}>\n                {credentialName.substring(0, 1)}\n              </Typography>\n            </View>\n          </View>\n        )}\n      </View>\n      {statusIconView && <View style={styles.statusIconWrapper}>{statusIconView}</View>}\n      <View style={styles.text}>\n        <Typography\n          testID={concatTestID(testID, 'name')}\n          color={colorScheme.text}\n          ellipsizeMode={'tail'}\n          numberOfLines={1}\n          preset=\"regular\"\n          style={styles.nameText}>\n          {credentialName}\n        </Typography>\n        {DetailText}\n      </View>\n      {accessoryView && <View style={styles.accessory}>{accessoryView}</View>}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  accessory: {\n    alignItems: 'center',\n    height: 44,\n    justifyContent: 'center',\n    width: 44,\n  },\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: 60,\n    padding: 8,\n  },\n  detailText: {\n    flex: 1,\n    opacity: 0.7,\n  },\n  detailTextContainer: {\n    flexDirection: 'row',\n    marginTop: -1,\n  },\n  image: {\n    height: 44,\n    width: 44,\n  },\n  imageContainer: {\n    alignItems: 'center',\n    borderRadius: 5,\n    height: 44,\n    justifyContent: 'center',\n    marginRight: 8,\n    overflow: 'hidden',\n    width: 44,\n  },\n  imagePlaceholder: {\n    paddingLeft: 1,\n    paddingTop: 3,\n    textTransform: 'uppercase',\n  },\n  interpunct: {\n    marginHorizontal: 12,\n    opacity: 0.5,\n  },\n  nameText: {\n    marginTop: 2,\n  },\n  statusIconWrapper: {\n    bottom: 3,\n    left: 36,\n    position: 'absolute',\n  },\n  text: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default CredentialHeader;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/credential/card/credential-image-carousel.js

@@ -3,20 +3,19 @@ import { StyleSheet, View } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import Svg, { Circle } from 'react-native-svg';
 import { concatTestID } from '../../../utils';
-export let CarouselImageType;
-(function (CarouselImageType) {
+export let CarouselImageType = /*#__PURE__*/function (CarouselImageType) {
   CarouselImageType["Barcode"] = "Barcode";
   CarouselImageType["QrCode"] = "QrCode";
   CarouselImageType["MRZ"] = "MRZ";
   CarouselImageType["Photo"] = "Photo";
-})(CarouselImageType || (CarouselImageType = {}));
-const CarouselComponent = _ref => {
-  let {
-    carouselSize,
-    imagesToRender,
-    style,
-    testID
-  } = _ref;
+  return CarouselImageType;
+}({});
+const CarouselComponent = ({
+  carouselSize,
+  imagesToRender,
+  style,
+  testID
+}) => {
   const [selectedDot, setSelectedDot] = useState(0);
   if (!carouselSize.width || !carouselSize.height) {
     return null;
@@ -34,19 +33,20 @@ const CarouselComponent = _ref => {
     enabled: numberOfSlides >= 2,
     data: imagesToRender,
     testID: testID,
-    renderItem: _ref2 => {
-      let {
-        item: {
-          type,
-          element
-        }
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(View, {
-        style: styles.carouselItem
-      }, /*#__PURE__*/React.createElement(View, {
-        style: [styles[type]]
-      }, element));
-    }
+    panGestureHandlerProps: {
+      activeOffsetX: [-10, 10],
+      failOffsetY: [-10, 10]
+    },
+    renderItem: ({
+      item: {
+        type,
+        element
+      }
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: styles.carouselItem
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles[type]]
+    }, element))
   }), numberOfSlides >= 2 ? /*#__PURE__*/React.createElement(View, {
     style: styles.pageDotContainer
   }, imagesToRender.map((_, index) => /*#__PURE__*/React.createElement(Svg, {

package/lib/module/ui-components/credential/card/credential-image-carousel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","StyleSheet","View","Carousel","Svg","Circle","concatTestID","CarouselImageType","CarouselComponent","_ref","carouselSize","imagesToRender","style","testID","selectedDot","setSelectedDot","width","height","numberOfSlides","length","createElement","styles","container","onSnapToItem","enabled","data","renderItem","_ref2","item","type","element","carouselItem","pageDotContainer","map","_","index","key","viewBox","fill","toString","cx","cy","r","fillOpacity","create","Barcode","borderRadius","MRZ","Photo","aspectRatio","borderColor","borderWidth","overflow","QrCode","alignItems","justifyContent","flex","position","bottom","columnGap","flexDirection"],"sources":["credential-image-carousel.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Carousel from 'react-native-reanimated-carousel';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport { concatTestID } from '../../../utils';\n\nexport enum CarouselImageType {\n  Barcode = 'Barcode',\n  QrCode = 'QrCode',\n  MRZ = 'MRZ',\n  Photo = 'Photo',\n}\n\nexport type CarouselImage = {\n  type: CarouselImageType;\n  element: React.ReactElement;\n};\n\ntype CarouselProps = {\n  carouselSize: { width: number; height: number };\n  imagesToRender: CarouselImage[];\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\nconst CarouselComponent: FC<CarouselProps> = ({ carouselSize, imagesToRender, style, testID }) => {\n  const [selectedDot, setSelectedDot] = useState(0);\n\n  if (!carouselSize.width || !carouselSize.height) {\n    return null;\n  }\n\n  const numberOfSlides = imagesToRender.length;\n\n  if (!numberOfSlides) {\n    return null;\n  }\n\n  return (\n    <View style={[styles.container, style]}>\n      <Carousel\n        width={carouselSize.width}\n        onSnapToItem={setSelectedDot}\n        height={carouselSize.height}\n        enabled={numberOfSlides >= 2}\n        data={imagesToRender}\n        testID={testID}\n        renderItem={({ item: { type, element } }) => (\n          <View style={styles.carouselItem}>\n            <View style={[styles[type]]}>{element}</View>\n          </View>\n        )}\n      />\n      {numberOfSlides >= 2 ? (\n        <View style={styles.pageDotContainer}>\n          {imagesToRender.map((_, index) => (\n            <Svg key={index} width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\n              <Circle\n                testID={concatTestID(testID, 'dot', index.toString())}\n                cx=\"4.5\"\n                cy=\"4\"\n                r=\"4\"\n                fill=\"white\"\n                fillOpacity={selectedDot === index ? 0.8 : 0.2}\n              />\n            </Svg>\n          ))}\n        </View>\n      ) : null}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  // eslint-disable-next-line react-native/no-unused-styles\n  Barcode: { borderRadius: 4, height: '50%', width: '80%' },\n  // eslint-disable-next-line react-native/no-unused-styles\n  MRZ: {\n    height: '50%',\n    width: '100%',\n  },\n  // eslint-disable-next-line react-native/no-unused-styles\n  Photo: {\n    aspectRatio: 1,\n    borderColor: '#FFFFFF',\n    borderRadius: 100,\n    borderWidth: 2,\n    height: '70%',\n    overflow: 'hidden',\n  },\n  // eslint-disable-next-line react-native/no-unused-styles\n  QrCode: { aspectRatio: 1, borderRadius: 4, height: '70%' },\n  carouselItem: {\n    alignItems: 'center',\n    height: '100%',\n    justifyContent: 'center',\n    width: '100%',\n  },\n  container: {\n    flex: 1,\n    position: 'absolute',\n    width: '100%',\n  },\n  pageDotContainer: {\n    bottom: 15,\n    columnGap: 8,\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n});\n\nexport default CarouselComponent;\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","StyleSheet","View","Carousel","Svg","Circle","concatTestID","CarouselImageType","CarouselComponent","carouselSize","imagesToRender","style","testID","selectedDot","setSelectedDot","width","height","numberOfSlides","length","createElement","styles","container","onSnapToItem","enabled","data","panGestureHandlerProps","activeOffsetX","failOffsetY","renderItem","item","type","element","carouselItem","pageDotContainer","map","_","index","key","viewBox","fill","toString","cx","cy","r","fillOpacity","create","Barcode","borderRadius","MRZ","Photo","aspectRatio","borderColor","borderWidth","overflow","QrCode","alignItems","justifyContent","flex","position","bottom","columnGap","flexDirection"],"sources":["credential-image-carousel.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Carousel from 'react-native-reanimated-carousel';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport { concatTestID } from '../../../utils';\n\nexport enum CarouselImageType {\n  Barcode = 'Barcode',\n  QrCode = 'QrCode',\n  MRZ = 'MRZ',\n  Photo = 'Photo',\n}\n\nexport type CarouselImage = {\n  type: CarouselImageType;\n  element: React.ReactElement;\n};\n\ntype CarouselProps = {\n  carouselSize: { width: number; height: number };\n  imagesToRender: CarouselImage[];\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\nconst CarouselComponent: FC<CarouselProps> = ({ carouselSize, imagesToRender, style, testID }) => {\n  const [selectedDot, setSelectedDot] = useState(0);\n\n  if (!carouselSize.width || !carouselSize.height) {\n    return null;\n  }\n\n  const numberOfSlides = imagesToRender.length;\n\n  if (!numberOfSlides) {\n    return null;\n  }\n\n  return (\n    <View style={[styles.container, style]}>\n      <Carousel\n        width={carouselSize.width}\n        onSnapToItem={setSelectedDot}\n        height={carouselSize.height}\n        enabled={numberOfSlides >= 2}\n        data={imagesToRender}\n        testID={testID}\n        panGestureHandlerProps={{\n          activeOffsetX: [-10, 10],\n          failOffsetY: [-10, 10],\n        }}\n        renderItem={({ item: { type, element } }) => (\n          <View style={styles.carouselItem}>\n            <View style={[styles[type]]}>{element}</View>\n          </View>\n        )}\n      />\n      {numberOfSlides >= 2 ? (\n        <View style={styles.pageDotContainer}>\n          {imagesToRender.map((_, index) => (\n            <Svg key={index} width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\n              <Circle\n                testID={concatTestID(testID, 'dot', index.toString())}\n                cx=\"4.5\"\n                cy=\"4\"\n                r=\"4\"\n                fill=\"white\"\n                fillOpacity={selectedDot === index ? 0.8 : 0.2}\n              />\n            </Svg>\n          ))}\n        </View>\n      ) : null}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  // eslint-disable-next-line react-native/no-unused-styles\n  Barcode: { borderRadius: 4, height: '50%', width: '80%' },\n  // eslint-disable-next-line react-native/no-unused-styles\n  MRZ: {\n    height: '50%',\n    width: '100%',\n  },\n  // eslint-disable-next-line react-native/no-unused-styles\n  Photo: {\n    aspectRatio: 1,\n    borderColor: '#FFFFFF',\n    borderRadius: 100,\n    borderWidth: 2,\n    height: '70%',\n    overflow: 'hidden',\n  },\n  // eslint-disable-next-line react-native/no-unused-styles\n  QrCode: { aspectRatio: 1, borderRadius: 4, height: '70%' },\n  carouselItem: {\n    alignItems: 'center',\n    height: '100%',\n    justifyContent: 'center',\n    width: '100%',\n  },\n  container: {\n    flex: 1,\n    position: 'absolute',\n    width: '100%',\n  },\n  pageDotContainer: {\n    bottom: 15,\n    columnGap: 8,\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n});\n\nexport default CarouselComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui-components/credential/card/index.js

@@ -1,11 +1,11 @@
-import CredentialCard, { CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow } from './credential-card';
-import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
-import CredentialDetailsCardListItem, { CredentialDetailsCardListItemProps } from './credential-details-list-item';
-import CredentialHeader, { CredentialHeaderProps } from './credential-header';
-import { CarouselImage, CarouselImageType } from './credential-image-carousel';
-export { CarouselImage, CarouselImageType };
-export { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };
-export { CredentialDetailsCard, CredentialDetailsCardProps };
-export { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };
-export { CredentialHeader, CredentialHeaderProps };
+import CredentialCard, { CredentialCardRatio, CredentialCardShadow } from './credential-card';
+import CredentialDetailsCard from './credential-details-card';
+import CredentialDetailsCardListItem from './credential-details-list-item';
+import CredentialHeader from './credential-header';
+import { CarouselImageType } from './credential-image-carousel';
+export { CarouselImageType };
+export { CredentialCard, CredentialCardRatio, CredentialCardShadow };
+export { CredentialDetailsCard };
+export { CredentialDetailsCardListItem };
+export { CredentialHeader };
 //# sourceMappingURL=index.js.map

package/lib/module/ui-components/credential/card/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CredentialCard","CredentialCardNotice","CredentialCardProps","CredentialCardRatio","CredentialCardShadow","CredentialDetailsCard","CredentialDetailsCardProps","CredentialDetailsCardListItem","CredentialDetailsCardListItemProps","CredentialHeader","CredentialHeaderProps","CarouselImage","CarouselImageType"],"sources":["index.ts"],"sourcesContent":["import CredentialCard, {\n  CredentialCardNotice,\n  CredentialCardProps,\n  CredentialCardRatio,\n  CredentialCardShadow,\n} from './credential-card';\nimport CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';\nimport CredentialDetailsCardListItem, { CredentialDetailsCardListItemProps } from './credential-details-list-item';\nimport CredentialHeader, { CredentialHeaderProps } from './credential-header';\nimport { CarouselImage, CarouselImageType } from './credential-image-carousel';\n\nexport { CarouselImage, CarouselImageType };\nexport { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };\nexport { CredentialDetailsCard, CredentialDetailsCardProps };\nexport { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };\nexport { CredentialHeader, CredentialHeaderProps };\n"],"mappings":"AAAA,OAAOA,cAAc,IACnBC,oBAAoB,EACpBC,mBAAmB,EACnBC,mBAAmB,EACnBC,oBAAoB,QACf,mBAAmB;AAC1B,OAAOC,qBAAqB,IAAIC,0BAA0B,QAAQ,2BAA2B;AAC7F,OAAOC,6BAA6B,IAAIC,kCAAkC,QAAQ,gCAAgC;AAClH,OAAOC,gBAAgB,IAAIC,qBAAqB,QAAQ,qBAAqB;AAC7E,SAASC,aAAa,EAAEC,iBAAiB,QAAQ,6BAA6B;AAE9E,SAASD,aAAa,EAAEC,iBAAiB;AACzC,SAASZ,cAAc,EAAEC,oBAAoB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAEC,oBAAoB;AAC7G,SAASC,qBAAqB,EAAEC,0BAA0B;AAC1D,SAASC,6BAA6B,EAAEC,kCAAkC;AAC1E,SAASC,gBAAgB,EAAEC,qBAAqB"}
+{"version":3,"names":["CredentialCard","CredentialCardRatio","CredentialCardShadow","CredentialDetailsCard","CredentialDetailsCardListItem","CredentialHeader","CarouselImageType"],"sources":["index.ts"],"sourcesContent":["import type {\n  CredentialCardNotice,\n  CredentialCardProps,\n} from './credential-card';\nimport CredentialCard, {\n  CredentialCardRatio,\n  CredentialCardShadow,\n} from './credential-card';\nimport type { CredentialDetailsCardProps } from './credential-details-card';\nimport CredentialDetailsCard from './credential-details-card';\nimport type { CredentialDetailsCardListItemProps } from './credential-details-list-item';\nimport CredentialDetailsCardListItem from './credential-details-list-item';\nimport type { CredentialHeaderProps } from './credential-header';\nimport CredentialHeader from './credential-header';\nimport type { CarouselImage } from './credential-image-carousel';\nimport { CarouselImageType } from './credential-image-carousel';\n\nexport { CarouselImage, CarouselImageType };\nexport { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };\nexport { CredentialDetailsCard, CredentialDetailsCardProps };\nexport { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };\nexport { CredentialHeader, CredentialHeaderProps };\n"],"mappings":"AAIA,OAAOA,cAAc,IACnBC,mBAAmB,EACnBC,oBAAoB,QACf,mBAAmB;AAE1B,OAAOC,qBAAqB,MAAM,2BAA2B;AAE7D,OAAOC,6BAA6B,MAAM,gCAAgC;AAE1E,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,SAASC,iBAAiB,QAAQ,6BAA6B;AAE/D,SAAwBA,iBAAiB;AACzC,SAASN,cAAc,EAA6CC,mBAAmB,EAAEC,oBAAoB;AAC7G,SAASC,qBAAqB;AAC9B,SAASC,6BAA6B;AACtC,SAASC,gBAAgB","ignoreList":[]}

package/lib/module/ui-components/credential/credential-attribute-item.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useMemo } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { colorWithAlphaComponent } from '../../utils/color';
@@ -6,14 +6,13 @@ import { concatTestID } from '../../utils/testID';
 import { TouchableHighlight, TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
-const CredentialAttributeItemButton = _ref => {
-  let {
-    children,
-    disabled,
-    id,
-    onPress,
-    selected
-  } = _ref;
+const CredentialAttributeItemButton = ({
+  children,
+  disabled,
+  id,
+  onPress,
+  selected
+}) => {
   const colorScheme = useAppColorScheme();
   const pressHandler = useCallback(() => {
     if (!onPress) {
@@ -44,26 +43,25 @@ const CredentialAttributeItemButton = _ref => {
   }, children);
 };
 const IMAGE_SIZE = 64;
-const CredentialAttributeItem = _ref2 => {
-  let {
-    attributes,
-    disabled,
-    id,
-    image,
-    last,
-    name,
-    onImagePreview,
-    onPress,
-    rightAccessory,
-    nested = false,
-    listValue = false,
-    selected,
-    style,
-    testID,
-    value,
-    values,
-    valueErrorColor
-  } = _ref2;
+const CredentialAttributeItem = ({
+  attributes,
+  disabled,
+  id,
+  image,
+  last,
+  name,
+  onImagePreview,
+  onPress,
+  rightAccessory,
+  nested = false,
+  listValue = false,
+  selected,
+  style,
+  testID,
+  value,
+  values,
+  valueErrorColor
+}) => {
   const colorScheme = useAppColorScheme();
   const imagePreviewHandler = useCallback(() => {
     if (!onImagePreview || !image) {
@@ -75,7 +73,7 @@ const CredentialAttributeItem = _ref2 => {
     if (!rightAccessory) {
       return undefined;
     }
-    if ( /*#__PURE__*/React.isValidElement(rightAccessory)) {
+    if (/*#__PURE__*/React.isValidElement(rightAccessory)) {
       return rightAccessory;
     } else {
       const RightAccessoryComponent = rightAccessory;
@@ -133,31 +131,25 @@ const CredentialAttributeItem = _ref2 => {
     preset: "s",
     style: listValue ? styles.listValue : undefined,
     testID: concatTestID(testID, 'value')
-  }, value), isObject && attributes.map((attribute, index, _ref3) => {
-    let {
-      length
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(CredentialAttributeItem, _extends({
-      nested: true,
-      key: attribute.id,
-      onPress: onPress,
-      last: index === length - 1,
-      onImagePreview: onImagePreview
-    }, attribute));
-  }), isArray && values.map((arrayValue, index, _ref4) => {
-    let {
-      length
-    } = _ref4;
-    return /*#__PURE__*/React.createElement(CredentialAttributeItem, _extends({
-      key: arrayValue.id,
-      onPress: onPress,
-      last: index === length - 1,
-      onImagePreview: onImagePreview,
-      listValue: true
-    }, arrayValue, {
-      name: undefined
-    }));
-  }), /*#__PURE__*/React.createElement(View, null)), rightAccessoryView && /*#__PURE__*/React.createElement(View, {
+  }, value), isObject && attributes.map((attribute, index, {
+    length
+  }) => /*#__PURE__*/React.createElement(CredentialAttributeItem, _extends({
+    nested: true,
+    key: attribute.id,
+    onPress: onPress,
+    last: index === length - 1,
+    onImagePreview: onImagePreview
+  }, attribute))), isArray && values.map((arrayValue, index, {
+    length
+  }) => /*#__PURE__*/React.createElement(CredentialAttributeItem, _extends({
+    key: arrayValue.id,
+    onPress: onPress,
+    last: index === length - 1,
+    onImagePreview: onImagePreview,
+    listValue: true
+  }, arrayValue, {
+    name: undefined
+  }))), /*#__PURE__*/React.createElement(View, null)), rightAccessoryView && /*#__PURE__*/React.createElement(View, {
     style: [styles.rightAccessory, isObject && styles.objectAccessory]
   }, rightAccessoryView)))), !last && !nested && /*#__PURE__*/React.createElement(View, {
     style: [styles.separator, {