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

package/src/ui-components/nerd-view/nerd-mode-item.tsx

@@ -0,0 +1,299 @@
+import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, Linking, StyleSheet, View, ViewStyle } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import Animated, {
+  clamp,
+  SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { reportException } from '../../utils';
+import { concatTestID } from '../../utils/testID';
+import { Button, ButtonType } from '../buttons/button';
+import { CopyContentIcon, OpenLinkIcon } from '../icons/nerd-view';
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+const VALUE_PREVIEW_LENGTH = 80;
+const ICON_HEIGHT = 48;
+const CONTAINER_PADDING = 8;
+
+// The onExpand and expandedAttributes props are used to notify other expanded fields
+// that the layout (and thus the scrollOffset / icon position) has changed. This
+// will trigger a view measurement and repositioning of the icon on all expanded fields.
+
+export type NerdModeItemProps = {
+  attributeKey: string;
+  attributeText?: string;
+  canBeCopied?: boolean;
+  element?: React.ReactElement;
+  expandedAttributes?: number;
+  highlightedText?: string;
+  labels: {
+    expand: string;
+    collapse: string;
+  };
+  last?: boolean;
+  link?: string;
+  onCopyToClipboard: (value: string) => void;
+  onExpand?: (expanded: boolean) => void;
+  scrollOffset?: SharedValue<number>;
+  testID?: string;
+};
+
+const styles = StyleSheet.create({
+  actionIcon: {
+    alignItems: 'center',
+    flex: 0.15,
+    height: ICON_HEIGHT,
+    justifyContent: 'center',
+  },
+  actionIconSingleLine: {
+    height: 24,
+  },
+  attributeLabel: {
+    marginBottom: 4,
+    paddingHorizontal: 6,
+  },
+  attributeValue: {
+    flex: 0.85,
+    flexGrow: 1,
+  },
+  attributeValueContainer: {
+    borderRadius: 2,
+    borderWidth: 0.2,
+    flexDirection: 'row',
+    padding: CONTAINER_PADDING,
+  },
+  container: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+  },
+  expandValueButton: {
+    borderRadius: 4,
+    borderWidth: 0,
+    marginTop: 4,
+  },
+  lastAttribute: {
+    paddingBottom: 30,
+  },
+});
+
+export const ActionIcon: FunctionComponent<{
+  copy?: boolean;
+  link?: string;
+  onCopyToClipboard: (value: string) => void;
+  style?: ViewStyle;
+  testID?: string;
+  value: string;
+}> = ({ value, link, onCopyToClipboard, testID, copy }) => {
+  const handleCopy = useCallback(() => {
+    onCopyToClipboard(value);
+  }, [onCopyToClipboard, value]);
+
+  const openLink = useCallback(() => {
+    if (link) {
+      Linking.openURL(link).catch((e) => {
+        reportException(e, 'Error opening nerd link');
+      });
+    }
+  }, [link]);
+
+  if (copy) {
+    return (
+      <TouchableOpacity onPress={handleCopy} testID={testID}>
+        <CopyContentIcon />
+      </TouchableOpacity>
+    );
+  }
+
+  if (link) {
+    return (
+      <TouchableOpacity onPress={openLink} testID={testID}>
+        <OpenLinkIcon />
+      </TouchableOpacity>
+    );
+  }
+
+  return null;
+};
+
+const TextWithHighlight: FunctionComponent<{
+  highlightedText: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  testID: string;
+  text: string;
+}> = ({ highlightedText, onLayout, testID, text }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Typography
+      color={colorScheme.white}
+      onLayout={onLayout}
+      preset="s/code"
+      style={styles.attributeValue}
+      testID={testID}>
+      <Typography color={colorScheme.nerdView.codeHighlightText} preset="s/code">
+        {highlightedText}
+      </Typography>
+      {text}
+    </Typography>
+  );
+};
+
+const NerdModeItem: FunctionComponent<NerdModeItemProps> = ({
+  highlightedText = '',
+  attributeText = '',
+  attributeKey,
+  labels,
+  link,
+  canBeCopied,
+  onCopyToClipboard,
+  onExpand,
+  expandedAttributes,
+  last = false,
+  scrollOffset,
+  element,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const valueViewRef = React.useRef<View>(null);
+  const [isSingleLine, setIsSingleLine] = useState<boolean>();
+
+  const expandedView = useSharedValue({
+    expandedAtOffset: 0,
+    viewHeight: 0,
+    viewStart: 0,
+  });
+
+  const expandable = attributeText.length > VALUE_PREVIEW_LENGTH;
+  const [expanded, setExpanded] = useState(!expandable);
+
+  const screenMiddle = useMemo(() => Dimensions.get('screen').height / 2, []);
+
+  const iconTopPosition = useDerivedValue(() => {
+    if (isSingleLine === undefined) {
+      return 0;
+    }
+    if (!expanded || !expandable || !scrollOffset || isSingleLine) {
+      const iconHeight = isSingleLine ? 0 : ICON_HEIGHT;
+      return expandedView.value.viewHeight / 2 - iconHeight / 2;
+    }
+
+    const viewEnd = expandedView.value.viewStart + expandedView.value.viewHeight;
+    let zeroedOffset = scrollOffset.value - expandedView.value.expandedAtOffset;
+
+    if (expandedView.value.viewStart > screenMiddle) {
+      zeroedOffset = zeroedOffset - (expandedView.value.viewStart - screenMiddle + ICON_HEIGHT / 2);
+    } else {
+      if (viewEnd < screenMiddle + ICON_HEIGHT) {
+        zeroedOffset = zeroedOffset + (screenMiddle - expandedView.value.viewStart - ICON_HEIGHT / 2);
+      } else if (expandedView.value.viewStart < screenMiddle && viewEnd > screenMiddle) {
+        zeroedOffset = zeroedOffset + (screenMiddle - expandedView.value.viewStart - ICON_HEIGHT / 2);
+      }
+    }
+
+    return clamp(zeroedOffset, 0, expandedView.value.viewHeight - ICON_HEIGHT - 8);
+  });
+
+  const iconStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: iconTopPosition.value,
+        },
+      ],
+    };
+  });
+
+  const previewText = expanded ? attributeText : attributeText.slice(0, VALUE_PREVIEW_LENGTH) + '...';
+
+  useEffect(() => {
+    if (!scrollOffset || isSingleLine === undefined) {
+      return;
+    }
+
+    setTimeout(() => {
+      valueViewRef.current?.measure((x, y, w, h, px, py) => {
+        expandedView.value = {
+          expandedAtOffset: isSingleLine ? 0 : scrollOffset.value,
+          viewHeight: isSingleLine ? 0 : h - 2 * CONTAINER_PADDING,
+          viewStart: py,
+        };
+      });
+    }, 0);
+    // We only recompute when any attribute is expanded
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expandedAttributes, isSingleLine]);
+
+  const onTextLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setIsSingleLine(height <= 24);
+  }, []);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: colorScheme.nerdView.attributeSectionBackground },
+        last ? styles.lastAttribute : {},
+      ]}
+      testID={testID}>
+      <Typography
+        color={colorScheme.nerdView.attributeLabel}
+        preset="s/code"
+        style={styles.attributeLabel}
+        testID={concatTestID(testID, 'attributeLabel')}>
+        {attributeKey}
+      </Typography>
+      <View
+        ref={valueViewRef}
+        style={[
+          styles.attributeValueContainer,
+          {
+            backgroundColor: colorScheme.nerdView.attributeValueBackground,
+            borderColor: colorScheme.nerdView.attributeValueBorder,
+          },
+        ]}>
+        {element ? (
+          element
+        ) : (
+          <TextWithHighlight
+            highlightedText={highlightedText}
+            onLayout={onTextLayout}
+            testID={concatTestID(testID, 'attributeValue')!}
+            text={previewText}
+          />
+        )}
+        {(canBeCopied || link) && isSingleLine !== undefined ? (
+          <Animated.View style={[styles.actionIcon, isSingleLine ? styles.actionIconSingleLine : undefined, iconStyle]}>
+            {
+              <ActionIcon
+                copy={canBeCopied}
+                link={link}
+                onCopyToClipboard={onCopyToClipboard}
+                testID={concatTestID(testID, 'actionIcon')}
+                value={`${highlightedText}${attributeText}`}
+              />
+            }
+          </Animated.View>
+        ) : null}
+      </View>
+      {expandable ? (
+        <Button
+          onPress={() => {
+            onExpand && onExpand(!expanded);
+            setExpanded(!expanded);
+          }}
+          style={styles.expandValueButton}
+          testID={concatTestID(testID, 'expandValueButton')}
+          title={expanded ? labels.collapse : labels.expand}
+          type={ButtonType.SmallTech}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+export default NerdModeItem;

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

@@ -0,0 +1,5 @@
+import { Biometry } from './keypad';
+import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
+import PinLockModal, { PinLockModalLabels } from './pin-lock';
+
+export { Biometry, PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps, PinLockModal, PinLockModalLabels };

package/src/ui-components/pin/keypad.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { LayoutChangeEvent, LayoutRectangle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils/testID';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { FaceIDIcon, FingerprintIcon, KeypadBackspaceIcon, KeypadClearIcon } from '../icons/keypad';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+interface DigitKeyProps {
+  testID: string | undefined;
+  digit: number;
+  onPress?: (digit: number) => void;
+}
+
+const DigitKey = React.forwardRef<TouchableOpacityRef, DigitKeyProps>(({ onPress, testID, digit }, ref) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <TouchableOpacity
+      testID={concatTestID(testID, String(digit))}
+      ref={ref}
+      accessibilityRole="button"
+      style={[styles.key, { backgroundColor: colorScheme.background }]}
+      disabled={!onPress}
+      onPress={() => onPress?.(digit)}>
+      <Typography maxFontSizeMultiplier={1.5} color={colorScheme.text} preset="xl">
+        {digit}
+      </Typography>
+    </TouchableOpacity>
+  );
+});
+
+DigitKey.displayName = 'DigitKey';
+
+export enum Biometry {
+  FaceID = 'faceID',
+  Other = 'other',
+}
+
+export interface KeypadProps {
+  testID?: string;
+  biometry?: Biometry | null;
+  onBiometricPress?: () => void;
+  onPressDigit?: (digit: number) => void;
+  onPressDelete?: () => void;
+  style?: StyleProp<ViewStyle>;
+  onDeleteAll?: () => void;
+}
+
+const MIN_HEIGHT = 360;
+const MIN_WIDTH = 264;
+const KEY_SIZE = 72;
+
+export const Keypad = React.forwardRef<TouchableOpacityRef, KeypadProps>(
+  ({ testID, onPressDigit, onPressDelete, biometry, onBiometricPress, style, onDeleteAll }, ref) => {
+    const t = useAccessibilityTranslation();
+    const colorScheme = useAppColorScheme();
+
+    const [layout, setLayout] = useState<LayoutRectangle>();
+    const onLayout = useCallback((event: LayoutChangeEvent) => setLayout(event.nativeEvent.layout), []);
+
+    const { width, height } = useMemo(() => {
+      if (!layout) {
+        return {};
+      }
+
+      const RATIO = MIN_WIDTH / MIN_HEIGHT;
+      if (layout.width > layout.height * RATIO) {
+        return { height: layout.height, width: layout.height * RATIO };
+      } else {
+        return { width: layout.width, height: layout.width / RATIO };
+      }
+    }, [layout]);
+
+    const gap = width ? (width - 3 * KEY_SIZE) / 4 : undefined;
+    const lineStyles = [styles.line, { width, marginBottom: gap }];
+
+    return (
+      <View testID={testID} style={[styles.cover, style]} onLayout={onLayout}>
+        <View style={{ height }}>
+          <View style={lineStyles}>
+            <DigitKey testID={testID} ref={ref} digit={1} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={2} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={3} onPress={onPressDigit} />
+          </View>
+          <View style={lineStyles}>
+            <DigitKey testID={testID} digit={4} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={5} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={6} onPress={onPressDigit} />
+          </View>
+          <View style={lineStyles}>
+            <DigitKey testID={testID} digit={7} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={8} onPress={onPressDigit} />
+            <DigitKey testID={testID} digit={9} onPress={onPressDigit} />
+          </View>
+          <View style={lineStyles}>
+            <TouchableOpacity
+              testID={concatTestID(testID, 'delete-all')}
+              accessibilityRole="button"
+              accessibilityLabel={t('accessibility.control.clear')}
+              style={styles.key}
+              disabled={!onDeleteAll}
+              onPress={onDeleteAll}>
+              {onDeleteAll ? <KeypadClearIcon color={colorScheme.text} /> : null}
+            </TouchableOpacity>
+            <DigitKey testID={testID} digit={0} onPress={onPressDigit} />
+            {biometry ? (
+              <TouchableOpacity
+                testID={concatTestID(testID, 'biometry')}
+                accessibilityRole="button"
+                accessibilityLabel={t(
+                  biometry === Biometry.FaceID ? 'accessibility.key.faceId' : 'accessibility.key.fingerprint',
+                )}
+                style={styles.key}
+                disabled={!onBiometricPress}
+                onPress={onBiometricPress}>
+                {biometry === Biometry.FaceID ? (
+                  <FaceIDIcon color={colorScheme.text} />
+                ) : (
+                  <FingerprintIcon color={colorScheme.text} />
+                )}
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                testID={concatTestID(testID, 'delete')}
+                accessibilityRole="button"
+                accessibilityLabel={t('accessibility.control.delete')}
+                style={styles.key}
+                disabled={!onPressDelete}
+                onPress={onPressDelete}>
+                {onPressDelete ? <KeypadBackspaceIcon color={colorScheme.text} /> : null}
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  },
+);
+
+Keypad.displayName = 'Keypad';
+
+const styles = StyleSheet.create({
+  cover: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    maxHeight: 2 * MIN_HEIGHT,
+    maxWidth: 2 * MIN_WIDTH,
+    minHeight: MIN_HEIGHT,
+    minWidth: MIN_WIDTH,
+    width: '100%',
+  },
+  key: {
+    alignItems: 'center',
+    borderRadius: KEY_SIZE / 2,
+    height: KEY_SIZE,
+    justifyContent: 'center',
+    width: KEY_SIZE,
+  },
+  line: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});

package/src/ui-components/pin/pin-code-screen.tsx

@@ -0,0 +1,195 @@
+import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { concatTestID } from '../../utils';
+import ContrastingStatusBar from '../../utils/contrasting-status-bar';
+import type { TouchableOpacityRef } from '../accessibility';
+import { BackButton } from '../buttons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+import { Biometry, Keypad } from './keypad';
+import { Pins } from './pins';
+
+export type PinCodeScreenProps = {
+  title: string;
+
+  testID?: string;
+  length: number;
+  enteredLength: number;
+  onBack?: () => void;
+  error?: string;
+
+  keypadRef?: Ref<TouchableOpacityRef>;
+  onPressDigit: (digit: number) => void;
+  onPressDelete: () => void;
+  onDeleteAll: () => void;
+
+  biometry?: Biometry | null;
+  onBiometricPress?: () => void;
+} & (
+  | {
+      instruction: string;
+      onAccessibilityAnnounced?: (finished: boolean) => void;
+    }
+  | {
+      instruction?: undefined;
+      onAccessibilityAnnounced?: undefined;
+    }
+);
+
+export interface PinCodeScreenActions {
+  shakeKeypad: (params?: { amount?: number; duration?: number }) => Promise<{ finished: boolean }>;
+}
+const SHAKE_ITERATIONS = 4;
+const animationConfig = {
+  useNativeDriver: true,
+  easing: Easing.linear,
+};
+
+export const PinCodeScreen = forwardRef<PinCodeScreenActions, PinCodeScreenProps>(
+  (
+    {
+      testID,
+      length,
+      instruction,
+      title,
+      onBack,
+      enteredLength,
+      error,
+      onPressDigit,
+      onPressDelete,
+      biometry,
+      onBiometricPress,
+      keypadRef,
+      onDeleteAll,
+      ...props
+    },
+    ref,
+  ) => {
+    const colorScheme = useAppColorScheme();
+    const [shakePosition] = useState(() => new Animated.Value(0));
+    useImperativeHandle(
+      ref,
+      () => ({
+        shakeKeypad: (params) => {
+          const { amount = 10, duration = 300 } = params ?? {};
+          const partialDuration = duration / SHAKE_ITERATIONS / 4;
+          return new Promise((resolve) =>
+            Animated.loop(
+              Animated.sequence([
+                Animated.timing(shakePosition, { ...animationConfig, toValue: -amount, duration: partialDuration }),
+                Animated.timing(shakePosition, {
+                  ...animationConfig,
+                  toValue: amount,
+                  duration: 2 * partialDuration,
+                }),
+                Animated.timing(shakePosition, { ...animationConfig, toValue: 0, duration: partialDuration }),
+              ]),
+              { iterations: SHAKE_ITERATIONS },
+            ).start(resolve),
+          );
+        },
+      }),
+      [shakePosition],
+    );
+
+    return (
+      <SafeAreaView testID={testID} style={[styles.container, { backgroundColor: colorScheme.white }]}>
+        <ContrastingStatusBar backgroundColor={colorScheme.white} />
+        <View style={styles.backButton}>
+          {onBack && <BackButton testID={concatTestID(testID, 'back')} onPress={onBack} />}
+        </View>
+        <View style={styles.content}>
+          <View style={styles.upperContent}>
+            <Typography
+              testID={concatTestID(testID, 'title')}
+              accessible={false}
+              color={colorScheme.text}
+              align="center"
+              preset="l"
+              style={styles.title}>
+              {title}
+            </Typography>
+            <Pins style={styles.pins} enteredLength={enteredLength} maxLength={length} />
+            {instruction ? (
+              <Typography
+                testID={concatTestID(testID, 'instruction')}
+                align="center"
+                announcementActive={true}
+                onAnnouncementFinished={props.onAccessibilityAnnounced}
+                color={colorScheme.text}
+                style={styles.instruction}>
+                {instruction}
+              </Typography>
+            ) : null}
+            <Typography
+              testID={concatTestID(testID, 'error')}
+              announcementActive={true}
+              accessible={Boolean(error)}
+              color={colorScheme.error}>
+              {error ?? '' /* always displayed to keep the same layout */}
+            </Typography>
+          </View>
+          <Animated.View
+            style={[
+              styles.keyboard,
+              {
+                transform: [{ translateX: shakePosition }],
+              },
+            ]}>
+            <Keypad
+              testID={concatTestID(testID, 'keypad')}
+              ref={keypadRef}
+              onPressDigit={enteredLength < length ? onPressDigit : undefined}
+              onPressDelete={enteredLength && enteredLength < length ? onPressDelete : undefined}
+              biometry={!enteredLength ? biometry : undefined}
+              onBiometricPress={onBiometricPress}
+              onDeleteAll={enteredLength && enteredLength < length ? onDeleteAll : undefined}
+            />
+          </Animated.View>
+        </View>
+      </SafeAreaView>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  backButton: {
+    minHeight: 24,
+    paddingHorizontal: 24,
+  },
+  container: {
+    flex: 1,
+    paddingTop: 8,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+  },
+  instruction: {
+    marginVertical: 24,
+    opacity: 0.7,
+  },
+  keyboard: {
+    alignItems: 'center',
+    flex: 5,
+    justifyContent: 'center',
+    marginVertical: 24,
+  },
+  pins: {
+    paddingHorizontal: 20,
+  },
+  title: {
+    marginBottom: 24,
+  },
+  upperContent: {
+    alignItems: 'center',
+    flex: 3,
+    marginTop: 12,
+    paddingHorizontal: 20,
+  },
+});
+
+PinCodeScreen.displayName = 'PinCodeScreen';