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

package/lib/module/ui-components/pin/pin-code-screen.js.map

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