@procivis/one-react-native-components 0.1.63 → 0.3.22

package/src/components/history/history-list.tsx

@@ -0,0 +1,116 @@
+import { HistoryListItem, HistoryListQuery } from '@procivis/react-native-one-core';
+import { useIsFocused } from '@react-navigation/native';
+import React, { FC, useCallback, useMemo } from 'react';
+import { Animated, SectionListProps, StyleSheet } from 'react-native';
+
+import { ActivityIndicator, useAppColorScheme } from '../../ui-components';
+import ListPageLoadingIndicator from '../../ui-components/list/list-page-loading-indicator';
+import { concatTestID, useHistory } from '../../utils';
+import { groupEntriesByDay, HistoryGroupByDaySection } from '../../utils/history';
+import { HistoryListItemLabels, HistoryListItemView, HistoryListItemViewProps } from './history-list-item';
+import { HistoryListSectionHeaderLabels, HistoryListSectionHeaderView } from './history-list-section-header';
+
+export type HistoryListLabels = {
+  sectionHeader: HistoryListSectionHeaderLabels;
+  item: HistoryListItemLabels;
+};
+
+export interface HistoryListViewProps
+  extends Omit<SectionListProps<HistoryListItem, HistoryGroupByDaySection>, 'sections'> {
+  // optional customization of item props
+  getItemProps?: (item: HistoryListItem) => Partial<HistoryListItemViewProps> | undefined;
+  groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  itemProps?: Partial<HistoryListItemViewProps>;
+  labels: HistoryListLabels;
+  // callback when empty list displayed
+  onEmpty?: (empty: boolean) => void;
+  query: Partial<HistoryListQuery>;
+}
+
+export const HistoryListView: FC<HistoryListViewProps> = ({
+  query,
+  contentContainerStyle,
+  getItemProps,
+  groupItems = groupEntriesByDay,
+  itemProps,
+  labels,
+  onEmpty,
+  onScroll,
+  ...props
+}) => {
+  const isFocused = useIsFocused();
+  const colorScheme = useAppColorScheme();
+  const {
+    data: historyData,
+    fetchNextPage: fetchNextHistoryPage,
+    hasNextPage: hasNextHistoryPage,
+    isLoading,
+  } = useHistory(query);
+
+  const history = useMemo(() => {
+    const items = historyData?.pages
+      .flat()
+      .map((page) => page.values)
+      .flat();
+    if (!items) {
+      return undefined;
+    }
+    if (historyData) {
+      setImmediate(() => onEmpty?.(!items.length));
+    }
+    return groupItems(items);
+  }, [historyData, onEmpty, groupItems]);
+
+  const onEndReached = useCallback(() => {
+    if (hasNextHistoryPage) {
+      fetchNextHistoryPage().catch(() => {});
+    }
+  }, [fetchNextHistoryPage, hasNextHistoryPage]);
+
+  if (!history) {
+    return <ActivityIndicator animate={isFocused} />;
+  }
+
+  return (
+    <Animated.SectionList<HistoryListItem, HistoryGroupByDaySection>
+      ListFooterComponent={
+        isLoading ? <ListPageLoadingIndicator color={colorScheme.accent} style={styles.footer} /> : undefined
+      }
+      contentContainerStyle={[styles.listContent, contentContainerStyle]}
+      keyExtractor={(item) => item.id}
+      onEndReached={onEndReached}
+      onScroll={onScroll}
+      renderItem={({ item, index, section }) => (
+        <HistoryListItemView
+          first={!index}
+          item={item}
+          labels={labels.item}
+          last={index === section.data.length - 1}
+          testID={concatTestID(props.testID, 'item', index.toString())}
+          {...itemProps}
+          {...getItemProps?.(item)}
+        />
+      )}
+      renderSectionHeader={({ section }) => (
+        <HistoryListSectionHeaderView
+          date={section.date}
+          firstYearEntry={section.firstYearEntry}
+          labels={labels.sectionHeader}
+          testID={concatTestID(props.testID, 'section')}
+        />
+      )}
+      sections={history}
+      stickySectionHeadersEnabled={false}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    marginVertical: 16,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+  },
+});

package/src/components/history/index.tsx

@@ -0,0 +1,6 @@
+export * from './history-details-screen';
+export * from './history-list';
+export * from './history-list-item';
+export * from './history-list-item-icon';
+export * from './history-list-screen';
+export * from './history-list-section-header';

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './backup';
+export * from './credential';
+export * from './entity';
+export * from './history';
+export * from './navigation';
+export * from './proof-request';

package/src/components/navigation/header-buttons.tsx

@@ -0,0 +1,64 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { FC, useCallback } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+import { BackButton, BackButtonIcon, GhostButton, InfoIcon, OptionsIcon } from '../../ui-components';
+
+export type HeaderButtonProps = {
+  onPress?: () => void;
+  testID: string;
+};
+
+export const HeaderBackButton: FC<HeaderButtonProps> = ({ onPress, testID }) => {
+  const navigation = useNavigation();
+  const handleBackButtonPress = useCallback(() => {
+    if (onPress) {
+      return onPress();
+    }
+    navigation.goBack();
+  }, [onPress, navigation]);
+  if (!navigation.canGoBack) {
+    return null;
+  }
+  return <BackButton onPress={handleBackButtonPress} testID={testID} />;
+};
+
+export const HeaderCloseButton: FC<HeaderButtonProps> = ({ onPress, testID }) => {
+  const navigation = useNavigation();
+  const handleCloseButtonPress = useCallback(() => {
+    if (onPress) {
+      return onPress();
+    }
+    navigation.goBack();
+  }, [onPress, navigation]);
+  return <BackButton icon={BackButtonIcon.Close} onPress={handleCloseButtonPress} testID={testID} />;
+};
+
+export type HeaderInfoButtonProps = {
+  accessibilityLabel: string;
+  onPress: () => void;
+  testID: string;
+};
+
+export const HeaderInfoButton: FC<HeaderInfoButtonProps> = ({ accessibilityLabel, onPress, testID }) => {
+  return <GhostButton accessibilityLabel={accessibilityLabel} icon={InfoIcon} onPress={onPress} testID={testID} />;
+};
+
+export type HeaderOptionsButtonProps = {
+  accessibilityLabel: string;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+};
+
+export const HeaderOptionsButton: FC<HeaderOptionsButtonProps> = ({ onPress, testID, style, accessibilityLabel }) => {
+  return (
+    <GhostButton
+      accessibilityLabel={accessibilityLabel}
+      icon={OptionsIcon}
+      onPress={onPress}
+      style={style}
+      testID={testID}
+    />
+  );
+};

package/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export * from './header-buttons';

package/src/components/proof-request/group.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useAppColorScheme } from '../../ui-components/theme';
+
+export const ProofRequestGroup: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={styles.group}>
+      <View style={[styles.separator, { backgroundColor: colorScheme.grayDark }]} />
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  group: {
+    marginTop: 16,
+  },
+  separator: {
+    height: 1,
+    marginBottom: 16,
+    marginHorizontal: 4,
+    opacity: 0.5,
+  },
+});

package/src/components/proof-request/index.ts

@@ -0,0 +1,3 @@
+export * from './group';
+export * from './select-credential';
+export * from './share-credential';

package/src/components/proof-request/select-credential.tsx

@@ -0,0 +1,48 @@
+import { PresentationDefinitionRequestedCredential } from '@procivis/react-native-one-core';
+import React, { FC } from 'react';
+import { ImageSourcePropType } from 'react-native';
+
+import { CredentialDetailsCardListItem } from '../../ui-components';
+import { useCoreConfig } from '../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../utils/hooks/core/credentials';
+import { selectCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+
+export const SelectCredential: FC<{
+  credentialId: string;
+  labels: ShareCredentialCardLabels;
+  lastItem: boolean;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onPress?: () => void;
+  request: PresentationDefinitionRequestedCredential;
+  selected: boolean;
+  testID: string;
+}> = ({ credentialId, labels, lastItem, onImagePreview, onPress, request, selected, testID }) => {
+  const { data: credential } = useCredentialDetail(credentialId);
+  const { data: config } = useCoreConfig();
+
+  if (!credential || !config) {
+    return null;
+  }
+
+  const { card, attributes } = selectCredentialCardFromCredential(
+    credential,
+    selected,
+    request,
+    config,
+    testID,
+    labels,
+  );
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        onHeaderPress: onPress,
+      }}
+      expanded={selected}
+      lastItem={lastItem}
+      onImagePreview={onImagePreview}
+    />
+  );
+};

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

@@ -0,0 +1,194 @@
+import {
+  CredentialListItem,
+  CredentialStateEnum,
+  PresentationDefinitionField,
+  PresentationDefinitionRequestedCredential,
+} from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useMemo } from 'react';
+import { ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { Button, ButtonType, CredentialDetailsCardListItem, Typography, useAppColorScheme } from '../../ui-components';
+import { concatTestID } from '../../utils';
+import { useCoreConfig } from '../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../utils/hooks/core/credentials';
+import { getValidityState, ValidityState } from '../../utils/parsers/credential';
+import { shareCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+
+export type ShareCredentialLabels = ShareCredentialCardLabels & {
+  revokedCredentialNotice: string;
+  suspendedCredentialNotice: string;
+  invalidCredentialNotice: string;
+  multipleCredentialsNotice: string;
+  multipleCredentialsSelect: string;
+};
+
+export const ShareCredential: FunctionComponent<{
+  allCredentials: CredentialListItem[];
+  credentialId: string;
+  expanded?: boolean;
+  labels: ShareCredentialLabels;
+  lastItem?: boolean;
+  onHeaderPress?: (_credentialId?: string) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  onSelectCredential?: () => void;
+  onSelectField: (_id: PresentationDefinitionField['id'], _selected: boolean) => void;
+  request: PresentationDefinitionRequestedCredential;
+  selectedCredentialId?: CredentialListItem['id'];
+  selectedFields?: Array<PresentationDefinitionField['id']>;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+}> = ({
+  allCredentials,
+  credentialId,
+  expanded,
+  labels,
+  lastItem,
+  onHeaderPress,
+  onImagePreview,
+  onSelectCredential,
+  onSelectField,
+  request,
+  selectedCredentialId,
+  selectedFields,
+  style,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const { data: credential, isLoading } = useCredentialDetail(selectedCredentialId);
+  const { data: config } = useCoreConfig();
+
+  const selectionOptions = useMemo(
+    () =>
+      request.applicableCredentials.filter((applicableCredentialId) =>
+        allCredentials.some(({ id, state }) => id === applicableCredentialId && state === CredentialStateEnum.ACCEPTED),
+      ),
+    [allCredentials, request],
+  );
+  const multipleCredentialsAvailable = selectionOptions.length > 1;
+
+  const validityState = getValidityState(
+    credential
+      ? {
+          ...credential,
+          issuerDid: credential?.issuerDid?.did,
+        }
+      : undefined,
+  );
+
+  const invalid = useMemo(() => {
+    if (!credential?.lvvcIssuanceDate || !request.validityCredentialNbf) {
+      return false;
+    }
+    return new Date(credential.lvvcIssuanceDate) < new Date(request.validityCredentialNbf);
+  }, [credential, request]);
+
+  const footer = useMemo(() => {
+    if (!expanded) {
+      return;
+    }
+    if (validityState === ValidityState.Revoked) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.revoked')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.revokedCredentialNotice}
+          </Typography>
+        </View>
+      );
+    }
+    if (validityState === ValidityState.Suspended) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.suspended')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.suspendedCredentialNotice}
+          </Typography>
+        </View>
+      );
+    }
+
+    if (invalid) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.invalid')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.invalidCredentialNotice}
+          </Typography>
+        </View>
+      );
+    }
+
+    if (multipleCredentialsAvailable) {
+      return (
+        <View
+          style={[styles.notice, { backgroundColor: colorScheme.background }]}
+          testID={concatTestID(testID, 'notice.multiple')}>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+            {labels.multipleCredentialsNotice}
+          </Typography>
+          <Button
+            onPress={onSelectCredential}
+            style={styles.noticeButton}
+            testID={concatTestID(testID, 'notice.multiple.button')}
+            title={labels.multipleCredentialsSelect}
+            type={ButtonType.Secondary}
+          />
+        </View>
+      );
+    }
+  }, [colorScheme, expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
+
+  if (isLoading || !config) {
+    return null;
+  }
+
+  const { card, attributes } = shareCredentialCardFromCredential(
+    credential,
+    invalid,
+    Boolean(expanded),
+    multipleCredentialsAvailable,
+    request,
+    selectedFields,
+    config,
+    testID,
+    labels,
+  );
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        credentialId,
+        onHeaderPress,
+      }}
+      expanded={expanded}
+      footer={footer}
+      lastItem={lastItem}
+      onAttributeSelected={onSelectField}
+      onImagePreview={onImagePreview}
+      style={[styles.credential, { borderColor: colorScheme.background }, style]}
+      testID={testID}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  credential: {
+    borderRadius: 10,
+    borderWidth: 1,
+    marginBottom: 8,
+  },
+  notice: {
+    marginBottom: 22,
+    marginHorizontal: 12,
+    padding: 12,
+  },
+  noticeButton: {
+    marginTop: 24,
+    paddingVertical: 11,
+  },
+});

package/src/index.ts

@@ -1,26 +1,3 @@
-export * from './accessibility';
-export * from './action-modal';
-export * from './activity-indicator';
-export * from './blur';
-export * from './buttons';
-export * from './camera';
-export * from './control';
-export * from './credential';
-export * from './detail';
-export * from './entity';
-export * from './header';
-export * from './history';
-export * from './icons';
-export * from './image';
-export * from './input';
-export * from './list';
-export * from './loader';
-export * from './nerd-view';
-export * from './pin';
-export * from './screens';
-export * from './searchbar';
-export * from './settings';
-export * from './state';
-export * from './text';
-export * from './theme';
+export * from './components';
+export * from './ui-components';
 export * from './utils';