@bifold/core 2.4.5 → 2.5.0

package/src/components/modals/ErrorModal.tsx

@@ -1,107 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, StatusBar, DeviceEventEmitter, useWindowDimensions } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-import { EventTypes } from '../../constants'
-import { TOKENS, useServices } from '../../container-api'
-import { useTheme } from '../../contexts/theme'
-import { BifoldError } from '../../types/error'
-import InfoBox, { InfoBoxType } from '../misc/InfoBox'
-import SafeAreaModal from './SafeAreaModal'
-
-interface ErrorModalProps {
-  enableReport?: boolean
-}
-
-const ErrorModal: React.FC<ErrorModalProps> = ({ enableReport }) => {
-  const { height } = useWindowDimensions()
-  const { t } = useTranslation()
-  const [modalVisible, setModalVisible] = useState<boolean>(false)
-  const [error, setError] = useState<BifoldError>()
-  const [reported, setReported] = useState(false)
-  const [logger] = useServices([TOKENS.UTIL_LOGGER])
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      minHeight: height,
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: ColorPalette.brand.primaryBackground,
-    },
-  })
-
-  const onDismissModalTouched = useCallback(() => {
-    setModalVisible(false)
-  }, [])
-
-  const report = useCallback(() => {
-    if (error) {
-      logger.report(error)
-    }
-    setReported(true)
-  }, [logger, error])
-
-  useEffect(() => {
-    const errorAddedHandle = DeviceEventEmitter.addListener(EventTypes.ERROR_ADDED, (err: BifoldError) => {
-      if (err.title && err.message) {
-        setError(err)
-        setReported(false)
-        setModalVisible(true)
-      }
-    })
-
-    const errorRemovedHandle = DeviceEventEmitter.addListener(EventTypes.ERROR_REMOVED, () => {
-      setError(undefined)
-      setModalVisible(false)
-    })
-
-    return () => {
-      errorAddedHandle.remove()
-      errorRemovedHandle.remove()
-    }
-  }, [])
-
-  const formattedMessageForError = useCallback(
-    (err: BifoldError | null): string | undefined => {
-      if (!err) {
-        return undefined
-      }
-
-      return `${t('Error.ErrorCode')} ${err.code} - ${err.message}`
-    },
-    [t]
-  )
-
-  const secondaryCallToActionIcon = useMemo(
-    () =>
-      reported ? (
-        <Icon style={{ marginRight: 8 }} name={'check-circle'} size={18} color={ColorPalette.semantic.success} />
-      ) : undefined,
-    [reported, ColorPalette.semantic.success]
-  )
-
-  return (
-    <SafeAreaModal visible={modalVisible} transparent={true}>
-      <StatusBar hidden={true} />
-      <SafeAreaView style={styles.container}>
-        <InfoBox
-          notificationType={InfoBoxType.Error}
-          title={error ? error.title : t('Error.Unknown')}
-          description={error ? error.description : t('Error.Problem')}
-          message={formattedMessageForError(error ?? null)}
-          onCallToActionPressed={onDismissModalTouched}
-          secondaryCallToActionTitle={reported ? t('Error.Reported') : t('Error.ReportThisProblem')}
-          secondaryCallToActionDisabled={reported}
-          secondaryCallToActionIcon={secondaryCallToActionIcon}
-          secondaryCallToActionPressed={enableReport && error ? report : undefined}
-          showVersionFooter
-        />
-      </SafeAreaView>
-    </SafeAreaModal>
-  )
-}
-
-export default ErrorModal

package/src/components/modals/ImageModal.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View, useWindowDimensions, TouchableOpacity, TouchableWithoutFeedback, Image } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import { testIdWithKey } from '../../utils/testable'
-import SafeAreaModal from './SafeAreaModal'
-
-interface ImageModalProps {
-  uri: string
-  onDismissPressed: GenericFn
-}
-
-const ImageModal: React.FC<ImageModalProps> = ({ uri, onDismissPressed }) => {
-  const { height, width } = useWindowDimensions()
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-
-  const styles = StyleSheet.create({
-    modalCenter: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: ColorPalette.notification.popupOverlay,
-      minHeight: height,
-      minWidth: width,
-      paddingHorizontal: 20,
-      paddingVertical: 50,
-    },
-    container: {
-      flexShrink: 1,
-      backgroundColor: ColorPalette.brand.primaryBackground,
-    },
-    image: {
-      width: width - 40,
-      aspectRatio: 1,
-      resizeMode: 'contain',
-    },
-    dismissIcon: {
-      zIndex: 10,
-      position: 'absolute',
-      right: 20,
-      top: 20,
-    },
-  })
-
-  const iconSize = 30
-  const dismissIconName = 'clear'
-  const iconColor = ColorPalette.brand.primary
-
-  return (
-    <SafeAreaModal transparent>
-      <TouchableOpacity onPress={onDismissPressed} accessible={false}>
-        <View style={styles.modalCenter}>
-          <TouchableWithoutFeedback accessible={false}>
-            <View style={styles.container}>
-              <View style={styles.dismissIcon}>
-                <TouchableOpacity
-                  onPress={onDismissPressed}
-                  testID={testIdWithKey('Dismiss')}
-                  accessibilityLabel={t('Global.Dismiss')}
-                  accessibilityRole={'button'}
-                  hitSlop={hitSlop}
-                >
-                  <Icon name={dismissIconName} size={iconSize} color={iconColor} />
-                </TouchableOpacity>
-              </View>
-              <Image style={styles.image} source={{ uri }} />
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableOpacity>
-    </SafeAreaModal>
-  )
-}
-
-export default ImageModal

package/src/components/modals/NetInfoModal.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import { InfoBoxType } from '../misc/InfoBox'
-import { GenericFn } from '../../types/fn'
-
-import PopupModal from './PopupModal'
-
-interface NetInfoModalProps {
-  onSubmit?: GenericFn
-  visible: boolean
-}
-
-const NetInfoModal: React.FC<NetInfoModalProps> = ({ visible, onSubmit = () => null }) => {
-  const { t } = useTranslation()
-
-  return (
-    <>
-      {visible && (
-        <SafeAreaView>
-          <PopupModal
-            notificationType={InfoBoxType.Error}
-            title={t('NetInfo.NoInternetConnectionTitle')}
-            description={t('NetInfo.NoInternetConnectionMessage')}
-            onCallToActionLabel={t('Global.Okay')}
-            onCallToActionPressed={() => onSubmit()}
-          ></PopupModal>
-        </SafeAreaView>
-      )}
-    </>
-  )
-}
-
-export default NetInfoModal

package/src/components/modals/PopupModal.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import InfoBox, { InfoBoxType } from '../misc/InfoBox'
-import SafeAreaModal from './SafeAreaModal'
-
-interface PopupModalProps {
-  notificationType: InfoBoxType
-  title: string
-  description?: string
-  message?: string
-  bodyContent?: Element
-  onCallToActionPressed?: GenericFn
-  onCallToActionLabel: string
-}
-
-const PopupModal: React.FC<PopupModalProps> = ({
-  title,
-  bodyContent,
-  description,
-  message,
-  onCallToActionPressed,
-  notificationType,
-  onCallToActionLabel,
-}) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    modalCenter: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: ColorPalette.notification.popupOverlay,
-      padding: 20,
-    },
-  })
-
-  return (
-    <SafeAreaModal transparent>
-      <View style={styles.modalCenter}>
-        <InfoBox
-          notificationType={notificationType}
-          title={title}
-          description={description}
-          message={message}
-          bodyContent={bodyContent}
-          onCallToActionLabel={onCallToActionLabel}
-          onCallToActionPressed={onCallToActionPressed}
-        />
-      </View>
-    </SafeAreaModal>
-  )
-}
-
-export default PopupModal

package/src/components/modals/ProofCancelModal.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import { testIdWithKey } from '../../utils/testable'
-import Button, { ButtonType } from '../buttons/Button'
-import { ThemedText } from '../texts/ThemedText'
-import SafeAreaModal from './SafeAreaModal'
-
-interface ProofCancelModalProps {
-  visible?: boolean
-  onDone?: GenericFn
-}
-
-const ProofCancelModal: React.FC<ProofCancelModalProps> = ({ visible, onDone }) => {
-  const { t } = useTranslation()
-  const { ColorPalette, Assets } = useTheme()
-
-  const styles = StyleSheet.create({
-    safeAreaView: {
-      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
-      flex: 1,
-    },
-    container: {
-      flexGrow: 1,
-      padding: 20,
-    },
-    controlsContainer: {
-      marginHorizontal: 20,
-      marginBottom: 10,
-    },
-    content: {
-      justifyContent: 'space-around',
-    },
-    heading: {
-      marginTop: 60,
-      marginBottom: 30,
-      textAlign: 'center',
-    },
-    image: {
-      alignSelf: 'center',
-      marginBottom: 50,
-    },
-  })
-
-  return (
-    <SafeAreaModal visible={visible} animationType="slide">
-      <SafeAreaView style={styles.safeAreaView}>
-        <ScrollView style={styles.container}>
-          <View style={styles.content}>
-            <ThemedText variant="modalTitle" style={styles.heading}>
-              {t('ProofRequest.NoInfoShared')}
-            </ThemedText>
-            <Assets.svg.noInfoShared style={styles.image} height={200} />
-            <ThemedText variant="modalNormal" style={{ textAlign: 'center' }}>
-              {t('ProofRequest.YourInfo')}
-            </ThemedText>
-          </View>
-        </ScrollView>
-        <View style={styles.controlsContainer}>
-          <View style={{ paddingTop: 10 }}>
-            <Button
-              title={t('Global.Done')}
-              accessibilityLabel={t('Global.Done')}
-              testID={testIdWithKey('Done')}
-              onPress={onDone}
-              buttonType={ButtonType.ModalPrimary}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    </SafeAreaModal>
-  )
-}
-
-export default ProofCancelModal

package/src/components/modals/SafeAreaModal.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { Modal, ModalProps } from 'react-native'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
-
-interface SafeAreaModalProps extends ModalProps {
-  children: React.ReactNode
-}
-
-const SafeAreaModal: React.FC<SafeAreaModalProps> = ({ children, ...modalProps }) => {
-  return (
-    <Modal {...modalProps}>
-      <SafeAreaProvider>{children}</SafeAreaProvider>
-    </Modal>
-  )
-}
-
-export default SafeAreaModal

package/src/components/record/Record.tsx

@@ -1,100 +0,0 @@
-import { BrandingOverlayType, Field } from '@bifold/oca/build/legacy'
-import React, { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-
-import RecordField from './RecordField'
-import RecordFooter from './RecordFooter'
-import RecordHeader from './RecordHeader'
-import { TOKENS, useServices } from '../../container-api'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface RecordProps {
-  header?: () => React.ReactElement | null
-  footer?: () => React.ReactElement | null
-  fields: Field[]
-  hideFieldValues?: boolean
-  field?: (field: Field, index: number, fields: Field[]) => React.ReactElement | null
-}
-
-const Record: React.FC<RecordProps> = ({ header, footer, fields, hideFieldValues = false, field = null }) => {
-  const { t } = useTranslation()
-  const [shown, setShown] = useState<boolean[]>([])
-  const { ListItems, TextTheme } = useTheme()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-
-  const styles = StyleSheet.create({
-    linkContainer: {
-      ...ListItems.recordContainer,
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-      paddingHorizontal: bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10 ? 25 : 16,
-      paddingVertical: 16,
-    },
-    link: {
-      minHeight: TextTheme.normal.fontSize,
-      paddingVertical: 2,
-    },
-  })
-
-  const hideAll = useCallback((): void => {
-    setShown(fields.map(() => false))
-  }, [fields])
-
-  useEffect(() => {
-    hideAll()
-  }, [hideAll])
-
-  return (
-    <FlatList
-      data={fields}
-      keyExtractor={({ name }, index) => name || index.toString()}
-      showsVerticalScrollIndicator={false}
-      renderItem={({ item: attr, index }) =>
-        field ? (
-          field(attr, index, fields)
-        ) : (
-          <RecordField
-            field={attr}
-            hideFieldValue={hideFieldValues}
-            onToggleViewPressed={() => {
-              const newShowState = [...shown]
-              newShowState[index] = !shown[index]
-              setShown(newShowState)
-            }}
-            shown={hideFieldValues ? !!shown[index] : true}
-            hideBottomBorder={index === fields.length - 1}
-          />
-        )
-      }
-      ListHeaderComponent={
-        header ? (
-          <RecordHeader>
-            {header()}
-            {hideFieldValues ? (
-              <View style={styles.linkContainer}>
-                <TouchableOpacity
-                  style={styles.link}
-                  activeOpacity={1}
-                  onPress={hideAll}
-                  testID={testIdWithKey('HideAll')}
-                  accessible={true}
-                  accessibilityLabel={t('Record.HideAll')}
-                  accessibilityRole="button"
-                >
-                  <ThemedText style={ListItems.recordLink}>{t('Record.HideAll')}</ThemedText>
-                </TouchableOpacity>
-              </View>
-            ) : null}
-          </RecordHeader>
-        ) : null
-      }
-      ListFooterComponent={footer ? <RecordFooter>{footer()}</RecordFooter> : null}
-    />
-  )
-}
-
-export default Record

package/src/components/record/RecordBinaryField.tsx

@@ -1,55 +0,0 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Image, StyleSheet, TouchableOpacity, View } from 'react-native'
-
-import ImageModal from '../modals/ImageModal'
-import { hiddenFieldValue } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-interface RecordBinaryFieldProps {
-  attributeValue: string
-  shown?: boolean
-  style?: Record<string, unknown>
-}
-
-const RecordBinaryField: React.FC<RecordBinaryFieldProps> = ({ attributeValue, shown, style }) => {
-  const { ListItems } = useTheme()
-  const { t } = useTranslation()
-  const [showImageModal, setShowImageModal] = useState(false)
-
-  const styles = StyleSheet.create({
-    text: {
-      ...ListItems.recordAttributeText,
-    },
-    image: {
-      height: 150,
-      aspectRatio: 1,
-      resizeMode: 'contain',
-      borderRadius: 10,
-    },
-  })
-
-  return (
-    <View>
-      {shown ? (
-        <TouchableOpacity
-          accessibilityLabel={t('Record.Zoom')}
-          testID={testIdWithKey('zoom')}
-          onPress={() => setShowImageModal(true)}
-          accessibilityRole="imagebutton"
-        >
-          <Image style={styles.image} source={{ uri: attributeValue }} />
-        </TouchableOpacity>
-      ) : (
-        <ThemedText style={style || styles.text} testID={testIdWithKey('AttributeValue')}>
-          {hiddenFieldValue}
-        </ThemedText>
-      )}
-      {showImageModal && <ImageModal uri={attributeValue} onDismissPressed={() => setShowImageModal(false)} />}
-    </View>
-  )
-}
-
-export default RecordBinaryField

package/src/components/record/RecordDateIntField.tsx

@@ -1,63 +0,0 @@
-import { Attribute } from '@bifold/oca/build/legacy'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet } from 'react-native'
-
-import { dateIntFormat, hiddenFieldValue } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { formatTime } from '../../utils/helpers'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-interface RecordBinaryFieldProps {
-  field: Attribute
-  shown?: boolean
-  style?: Record<string, unknown>
-}
-
-const RecordDateIntField: React.FC<RecordBinaryFieldProps> = ({ field, shown, style }) => {
-  const { t } = useTranslation()
-
-  const { ListItems } = useTheme()
-  const [date, setDate] = useState<string | undefined>()
-
-  useEffect(() => {
-    const dateint = field.value as string
-    if (!dateint) {
-      setDate('')
-      return
-    }
-    if (dateint.length === dateIntFormat.length) {
-      const year = dateint.substring(0, 4)
-      const month = dateint.substring(4, 6)
-      const day = dateint.substring(6, 8)
-      //NOTE: JavaScript counts months from 0 to 11: January = 0, December = 11.
-      const date = new Date(Number(year), Number(month) - 1, Number(day))
-      if (!isNaN(date.getDate())) {
-        setDate(formatTime(date, { shortMonth: true }))
-        return
-      }
-    }
-    setDate(t('Record.InvalidDate') + dateint)
-  }, [field, t])
-
-  const styles = StyleSheet.create({
-    text: {
-      ...ListItems.recordAttributeText,
-    },
-    image: {
-      height: 150,
-      aspectRatio: 1,
-      resizeMode: 'contain',
-      borderRadius: 10,
-    },
-  })
-
-  return (
-    <ThemedText style={style || styles.text} testID={testIdWithKey('AttributeValue')}>
-      {shown ? date : hiddenFieldValue}
-    </ThemedText>
-  )
-}
-
-export default RecordDateIntField