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

package/src/ui-components/credential/group/credential-group-header.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useMemo } from 'react';
+import { AccessibilityProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../../utils';
+import { Typography } from '../../text';
+import { useAppColorScheme } from '../../theme';
+
+export interface CredentialGroupHeaderProps extends AccessibilityProps {
+  accessory?: React.ComponentType<any> | React.ReactElement;
+  name: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const CredentialGroupHeader: FC<CredentialGroupHeaderProps> = ({ accessory, name, style, testID, ...props }) => {
+  const colorScheme = useAppColorScheme();
+
+  const accessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!accessory) {
+      return undefined;
+    }
+    if (React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory as React.ComponentType<any>;
+      return <AccessoryComponent />;
+    }
+  }, [accessory]);
+
+  return (
+    <View {...props} style={[styles.container, style]} testID={testID}>
+      <View style={styles.text}>
+        <Typography
+          color={colorScheme.white}
+          ellipsizeMode={'tail'}
+          numberOfLines={1}
+          preset="regular"
+          style={styles.nameText}
+          testID={concatTestID(testID, 'name')}>
+          {name}
+        </Typography>
+      </View>
+      {accessoryView && <View style={styles.accessory}>{accessoryView}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accessory: {
+    alignItems: 'center',
+    height: 44,
+    justifyContent: 'center',
+    width: 44,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 60,
+    padding: 8,
+  },
+  nameText: {
+    marginTop: 2,
+  },
+  text: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+
+export default CredentialGroupHeader;

package/src/ui-components/credential/group/index.ts

@@ -0,0 +1,4 @@
+import type { CredentialGroupHeaderProps } from './credential-group-header';
+import CredentialGroupHeader from './credential-group-header';
+
+export { CredentialGroupHeader, CredentialGroupHeaderProps };

package/src/ui-components/credential/index.ts

@@ -12,3 +12,4 @@ export { CredentialAttribute, CredentialAttributeItem, CredentialAttributeItemPr
 export { Barcode, Mrz, QrCode };
 export { Selector, SelectorStatus };
 export * from './card';
+export * from './group';

package/src/ui-components/header/foldable-header.tsx

@@ -12,6 +12,7 @@ export type FoldableHeaderProps = {
   searchBar?: Omit<AnimatedSearchBarProps, 'collapsed'>;
   // if true, the header won't fold / fade out on scroll
   staticHeader?: boolean;
+  withNotice?: boolean;
 };
 
 const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
@@ -19,12 +20,17 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
   scrollOffset,
   searchBar,
   header,
+  withNotice,
 }) => {
   const safeAreaInsets = useSafeAreaInsets();
   const colorScheme = useAppColorScheme();
   const [collapsed, setCollapsed] = useState(header ? false : true);
   const [headerHeight, setHeaderHeight] = useState<number>();
 
+  const containerPaddingStyle = {
+    paddingTop: withNotice ? 15 : safeAreaInsets.top,
+  };
+
   useEffect(() => {
     const id = scrollOffset.addListener(({ value }) => {
       if (!headerHeight) {
@@ -46,15 +52,11 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
 
   const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation
     ? {
-        transform: [
-          {
-            translateY: scrollOffset.interpolate({
-              extrapolate: 'clamp',
-              inputRange: [0, headerHeight],
-              outputRange: [0, -headerHeight],
-            }),
-          },
-        ],
+        paddingTop: scrollOffset.interpolate({
+          extrapolate: 'clamp',
+          inputRange: [0, headerHeight],
+          outputRange: [headerHeight, 0]
+        })
       }
     : undefined;
 
@@ -79,29 +81,42 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
     <Animated.View
       style={[
         styles.headerContainer,
-        {
-          paddingTop: safeAreaInsets.top,
-        },
-        scrollHeaderAnimatedStyle,
+        containerPaddingStyle,
+        withNotice ? styles.noticeBorderRadius : undefined,
       ]}>
-      <BlurView blurStyle={'header'} color={colorScheme.background} style={StyleSheet.absoluteFill} />
+      <View style={[styles.blurWrapper, StyleSheet.absoluteFill]}>
+        <BlurView blurStyle={'header'} color={colorScheme.background} style={[
+          StyleSheet.absoluteFill,
+          withNotice ? styles.noticeBorderRadius : undefined,
+        ]} />
+      </View>
       <View>
+        <Animated.View style={scrollHeaderAnimatedStyle}>
+          {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
+        </Animated.View>
         {header && (
-          <Animated.View onLayout={onHeaderLayout} style={fadeHeaderOutAnimatedStyle}>
+          <Animated.View onLayout={onHeaderLayout} style={[styles.headerContainer, fadeHeaderOutAnimatedStyle]}>
             {header}
           </Animated.View>
         )}
-        {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
       </View>
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
+  blurWrapper: {
+    overflow: 'hidden',
+  },
   headerContainer: {
     position: 'absolute',
     width: '100%',
   },
+  noticeBorderRadius: {
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    overflow: 'hidden',
+  },
 });
 
 export default FoldableSearchHeader;

package/src/ui-components/index.ts

@@ -18,6 +18,7 @@ export * from './loader';
 export * from './nerd-view';
 export * from './nfc';
 export * from './pin';
+export * from './proof-request';
 export * from './screens';
 export * from './searchbar';
 export * from './settings';

package/src/ui-components/loader/loading-result.tsx

@@ -3,11 +3,11 @@ import { Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Button, ButtonProps } from '../buttons/button';
+import ShareButton, { ShareButtonProps } from '../buttons/share-button';
 import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-header';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
 import LoaderView, { LoaderViewProps } from './loader';
-import ShareButton, { ShareButtonProps } from '../buttons/share-button';
 
 export type LoadingResultScreenProps = ViewProps & {
   button?: ButtonProps;