expo-openpay 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/OPCardForm.js +14 -13
- package/build/components/OPCardForm.js.map +1 -1
- package/build/components/forms/TextInput.js +0 -1
- package/build/components/forms/TextInput.js.map +1 -1
- package/package.json +1 -1
- package/src/components/OPCardForm.tsx +13 -13
- package/src/components/forms/TextInput.tsx +1 -1
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
import { useEffect } from "react";
|
|
2
2
|
import { KeyboardAvoidingView, ScrollView, StyleSheet, View, } from "react-native";
|
|
3
3
|
import { FormProvider, FormThemeProvider } from "../context";
|
|
4
|
-
|
|
4
|
+
import { initialize, createDeviceSessionId } from "../ExpoOpenpayModule";
|
|
5
5
|
import { SubmitButton } from "./forms";
|
|
6
6
|
import { OPCardNumberInput, OPCvv2Input, OPExpInput, OPExpMonthInput, OPExpYearInput, OPHolderNameInput, } from ".";
|
|
7
7
|
export default function OPCardForm({ merchantId, apiKey, isProduction = false, countryCode = "MX", options = {}, }) {
|
|
8
8
|
const { expIsMMYY = true, groupedView = true, handleSubmit, styling = {}, withAnimatedTexts, withIcons, withLabels, withPlaceholders, } = options;
|
|
9
9
|
const { buttonStyle = {}, buttonTextStyle = {}, colorScheme = "light", darkTheme, formFieldStyle = {}, defaultStyling = true, formKeyboardAvoidingViewStyle = {}, formScrollViewStyle = {}, labelStyle = {}, lightTheme, textInputStyle = {}, } = styling;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const initOP = async () => {
|
|
12
|
+
try {
|
|
13
|
+
await initialize(merchantId, apiKey, isProduction, countryCode);
|
|
14
|
+
await createDeviceSessionId();
|
|
15
|
+
}
|
|
16
|
+
catch (e) {
|
|
17
|
+
console.error(e);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
initOP();
|
|
21
|
+
}, []);
|
|
21
22
|
return (<FormThemeProvider colorScheme={colorScheme} dark={darkTheme} light={lightTheme}>
|
|
22
23
|
<FormProvider initialValues={{ cardNumber: "" }} onSubmit={handleSubmit}>
|
|
23
24
|
<KeyboardAvoidingView behavior="padding" enabled keyboardVerticalOffset={100} style={defaultStyling
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardForm.js","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"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","sourcesContent":["// import { useEffect } from \"react\";\nimport {\n KeyboardAvoidingView,\n ScrollView,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\n\nimport { FormProvider, FormThemeColors, FormThemeProvider } from \"../context\";\n// import { initialize, createDeviceSessionId } from \"../ExpoOpenpayModule\";\nimport { SubmitButton } from \"./forms\";\nimport {\n OPCardNumberInput,\n OPCvv2Input,\n OPExpInput,\n OPExpMonthInput,\n OPExpYearInput,\n OPHolderNameInput,\n} from \".\";\n\n// type ThemeColors = {\n// background: string;\n// text: string;\n// error: string;\n// primary: string;\n// placeholder: string;\n// };\n\n// type ThemeProp = {\n// light: Partial<ThemeColors>;\n// dark: Partial<ThemeColors>;\n// };\n\ntype CardFormProps = {\n apiKey: string;\n countryCode?: \"MX\" | \"CO\" | \"PE\";\n isProduction: boolean;\n merchantId: string;\n options?: {\n expIsMMYY?: boolean;\n groupedView?: boolean;\n handleSubmit?: () => any;\n styling?: {\n buttonStyle?: StyleProp<ViewStyle>;\n buttonTextStyle?: StyleProp<TextStyle>;\n colorScheme?: \"light\" | \"dark\";\n darkTheme?: FormThemeColors;\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;\n formScrollViewStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n lightTheme?: FormThemeColors;\n textInputStyle?: StyleProp<TextStyle>;\n };\n withAnimatedTexts?: boolean;\n withIcons?: boolean;\n withLabels?: boolean;\n withPlaceholders?: boolean;\n };\n};\n\nexport default function OPCardForm({\n merchantId,\n apiKey,\n isProduction = false,\n countryCode = \"MX\",\n options = {},\n}: CardFormProps) {\n const {\n expIsMMYY = true,\n groupedView = true,\n handleSubmit,\n styling = {},\n withAnimatedTexts,\n withIcons,\n withLabels,\n withPlaceholders,\n } = options;\n\n const {\n buttonStyle = {},\n buttonTextStyle = {},\n colorScheme = \"light\",\n darkTheme,\n formFieldStyle = {},\n defaultStyling = true,\n formKeyboardAvoidingViewStyle = {},\n formScrollViewStyle = {},\n labelStyle = {},\n lightTheme,\n textInputStyle = {},\n } = styling;\n\n // useEffect(() => {\n // const initOP = async () => {\n // try {\n // await initialize(merchantId, apiKey, isProduction, countryCode);\n // await createDeviceSessionId();\n // } catch (e) {\n // console.error(e);\n // }\n // };\n // initOP();\n // }, []);\n\n return (\n <FormThemeProvider\n colorScheme={colorScheme}\n dark={darkTheme}\n light={lightTheme}\n >\n <FormProvider initialValues={{ cardNumber: \"\" }} onSubmit={handleSubmit}>\n <KeyboardAvoidingView\n behavior=\"padding\"\n enabled\n keyboardVerticalOffset={100}\n style={\n defaultStyling\n ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]\n : formKeyboardAvoidingViewStyle\n }\n >\n <ScrollView\n showsVerticalScrollIndicator={false}\n style={\n defaultStyling\n ? [styles.formView, formScrollViewStyle]\n : formScrollViewStyle\n }\n >\n <OPHolderNameInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPCardNumberInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n {defaultStyling && groupedView ? (\n <View style={{ flexDirection: \"row\", gap: 12 }}>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <OPCvv2Input\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </View>\n ) : (\n <>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle: {},\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n\n <OPCvv2Input\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <SubmitButton\n buttonStyle={buttonStyle}\n buttonTextStyle={buttonTextStyle}\n defaultStyling={defaultStyling}\n />\n </ScrollView>\n </KeyboardAvoidingView>\n </FormProvider>\n </FormThemeProvider>\n );\n}\n\nconst styles = StyleSheet.create({\n formView: {\n height: \"100%\",\n marginHorizontal: 12,\n },\n keyboardAvoidingView: {\n flex: 1,\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"OPCardForm.js","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\nimport {\n KeyboardAvoidingView,\n ScrollView,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\n\nimport { FormProvider, FormThemeColors, FormThemeProvider } from \"../context\";\nimport { initialize, createDeviceSessionId } from \"../ExpoOpenpayModule\";\nimport { SubmitButton } from \"./forms\";\nimport {\n OPCardNumberInput,\n OPCvv2Input,\n OPExpInput,\n OPExpMonthInput,\n OPExpYearInput,\n OPHolderNameInput,\n} from \".\";\n\n// type ThemeColors = {\n// background: string;\n// text: string;\n// error: string;\n// primary: string;\n// placeholder: string;\n// };\n\n// type ThemeProp = {\n// light: Partial<ThemeColors>;\n// dark: Partial<ThemeColors>;\n// };\n\ntype CardFormProps = {\n apiKey: string;\n countryCode?: \"MX\" | \"CO\" | \"PE\";\n isProduction: boolean;\n merchantId: string;\n options?: {\n expIsMMYY?: boolean;\n groupedView?: boolean;\n handleSubmit?: () => any;\n styling?: {\n buttonStyle?: StyleProp<ViewStyle>;\n buttonTextStyle?: StyleProp<TextStyle>;\n colorScheme?: \"light\" | \"dark\";\n darkTheme?: FormThemeColors;\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;\n formScrollViewStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n lightTheme?: FormThemeColors;\n textInputStyle?: StyleProp<TextStyle>;\n };\n withAnimatedTexts?: boolean;\n withIcons?: boolean;\n withLabels?: boolean;\n withPlaceholders?: boolean;\n };\n};\n\nexport default function OPCardForm({\n merchantId,\n apiKey,\n isProduction = false,\n countryCode = \"MX\",\n options = {},\n}: CardFormProps) {\n const {\n expIsMMYY = true,\n groupedView = true,\n handleSubmit,\n styling = {},\n withAnimatedTexts,\n withIcons,\n withLabels,\n withPlaceholders,\n } = options;\n\n const {\n buttonStyle = {},\n buttonTextStyle = {},\n colorScheme = \"light\",\n darkTheme,\n formFieldStyle = {},\n defaultStyling = true,\n formKeyboardAvoidingViewStyle = {},\n formScrollViewStyle = {},\n labelStyle = {},\n lightTheme,\n textInputStyle = {},\n } = styling;\n\n useEffect(() => {\n const initOP = async () => {\n try {\n await initialize(merchantId, apiKey, isProduction, countryCode);\n await createDeviceSessionId();\n } catch (e) {\n console.error(e);\n }\n };\n initOP();\n }, []);\n\n return (\n <FormThemeProvider\n colorScheme={colorScheme}\n dark={darkTheme}\n light={lightTheme}\n >\n <FormProvider initialValues={{ cardNumber: \"\" }} onSubmit={handleSubmit}>\n <KeyboardAvoidingView\n behavior=\"padding\"\n enabled\n keyboardVerticalOffset={100}\n style={\n defaultStyling\n ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]\n : formKeyboardAvoidingViewStyle\n }\n >\n <ScrollView\n showsVerticalScrollIndicator={false}\n style={\n defaultStyling\n ? [styles.formView, formScrollViewStyle]\n : formScrollViewStyle\n }\n >\n <OPHolderNameInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPCardNumberInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n {defaultStyling && groupedView ? (\n <View style={{ flexDirection: \"row\", gap: 12 }}>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <OPCvv2Input\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </View>\n ) : (\n <>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle: {},\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n\n <OPCvv2Input\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <SubmitButton\n buttonStyle={buttonStyle}\n buttonTextStyle={buttonTextStyle}\n defaultStyling={defaultStyling}\n />\n </ScrollView>\n </KeyboardAvoidingView>\n </FormProvider>\n </FormThemeProvider>\n );\n}\n\nconst styles = StyleSheet.create({\n formView: {\n height: \"100%\",\n marginHorizontal: 12,\n },\n keyboardAvoidingView: {\n flex: 1,\n },\n});\n"]}
|
|
@@ -86,7 +86,6 @@ export default function AppTextInput({ defaultStyling, fieldName, icon, onBlur,
|
|
|
86
86
|
? cardIcons[renderedIcon.name]
|
|
87
87
|
: null;
|
|
88
88
|
const Icon = backImageSource;
|
|
89
|
-
console.log(Icon);
|
|
90
89
|
return (<View style={defaultStyling && [
|
|
91
90
|
styles.formFieldContainer,
|
|
92
91
|
{ backgroundColor: formFieldBackground },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/components/forms/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,QAAQ,EACR,KAAK,EAEL,UAAU,EACV,SAAS,EAGT,IAAI,GAEL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAuBxE,MAAM,SAAS,GAAwB;IACrC,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,YAAY;IACtB,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,cAAc,EACd,SAAS,EACT,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,OAAO,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,GAAG,EAAE,EAC3E,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,GAAG,UAAU,EACK;IAClB,MAAM,EACJ,mBAAmB,EACnB,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,EACT,cAAc,GACf,GAAG,mBAAmB,EAAE,CAAC;IAE1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvD,MAAM,UAAU,GAAG,MAAM,CAAqC,IAAI,CAAC,CAAC;IACpE,MAAM,iBAAiB,GAAG,MAAM,CAC9B,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACjD,CAAC,OAAO,CAAC;IACV,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrC,QAAQ,EAAE,GAAG;YACb,eAAe,EAAE,KAAK;SACvB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAsD;QAC1E,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,iBAAiB,CAAC,WAAW,CAAC;YAClC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YAClB,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACtD,CAAC;QACF,GAAG,EAAE,iBAAiB,CAAC,WAAW,CAAC;YACjC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YAClB,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;SACrB,CAAC;QACF,QAAQ,EAAE,iBAAiB,CAAC,WAAW,CAAC;YACtC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YAClB,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;SACtB,CAAC;QACF,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC;YACnC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YAClB,WAAW,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;SAClD,CAAC;KACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,YAAY;YAAE,OAAO;QAElC,MAAM,YAAY,GAAG,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC;QAE1C,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,IAAI,CAAC;gBACH,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC5B,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,SAAS;YACX,CAAC;YACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,CAAC;QAED,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE;YAC9C,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7B,QAAQ,EAAE,GAAG;YACb,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC;QAEH,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC1B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,IAAI,QAAQ,EAAE,CAAC;gBACb,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,OAAO,GAAG,iBAAiB,CAAC,WAAW,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC;QAChD,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;KAClC,CAAC,CAAC;IAEH,MAAM,eAAe,GACnB,IAAI,EAAE,IAAI,KAAK,KAAK;QAClB,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;QACtB,CAAC,CAAC,YAAY,EAAE,IAAI,KAAK,KAAK;YAC9B,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;YAC9B,CAAC,CAAC,IAAI,CAAC;IAEX,MAAM,IAAI,GAAG,eAAe,CAAC;IAC7B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CACJ,cAAc,IAAI;YAChB,MAAM,CAAC,kBAAkB;YACzB,EAAE,eAAe,EAAE,mBAAmB,EAAE;YACxC,cAAc;YACd,QAAQ,IAAI,EAAE,WAAW,EAAE,oBAAoB,EAAE;SAErD,CAAC,CAED;MAAA,CAAC,cAAc,IAAI,QAAQ,IAAI,CAC7B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;YAAA,CAAC;+FACkF,CACnF;YAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,IAAI;gBACX,MAAM,CAAC,KAAK;gBACZ;oBACE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC;iBACzB;aACF,CAAC,CAEF;cAAA,CAAC,+FAA+F,CAChG;cAAA,CAAC,YAAY,EAAE,IAAI,KAAK,UAAU,IAAI,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CACzD,CAAC,sBAAsB,CACrB,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CACxB,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EACxC,CACH,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,KAAK,KAAK,IAAI,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CACvD,CAAC,YAAY,CACX,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CACxB,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EACxC,CACH,CAAC,CAAC,CAAC,CACF,CAAC,sBAAsB,CACrB,IAAI,CAAC,aAAa,CAClB,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EACxC,CACH,CACH;YAAA,EAAE,QAAQ,CAAC,IAAI,CACf;YAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,IAAI;gBACX;oBACE,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,WAAW;yBACrB;qBACF;iBACF;aACF,CAAC,CAEF;cAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAG,CACpC,CAAC,CAAC,CAAC,CACF,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,KAAK,CAAC,CAAC;oBACL,MAAM,CAAC,IAAI;oBACX,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;wBACpB,IAAI,EAAE,IAAI,KAAK,UAAU;wBACzB,YAAY,EAAE,IAAI,KAAK,MAAM;wBAC7B,YAAY,EAAE,IAAI,KAAK,UAAU,CAAC,IAAI;wBACtC,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE,KAAK;qBACd;iBACF,CAAC,EACF,CACH,CACF,CAAC,CAAC,CAAC,CACF,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAC7B,CACH;YAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,eAAe,IAAI,gBAAgB,IAAI,CACtC,CAAC,QAAQ,CAAC,IAAI,CACZ,aAAa,CAAC,MAAM,CACpB,KAAK,CAAC,CACJ,cAAc,IAAI;gBAChB,gBAAgB;gBAChB,QAAQ,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE;aAE3C,CAAC,CAED;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CACrC;QAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CACD;MAAA,CAAC,SAAS,CACR,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QACd,CAAC,CAAC,CACF,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAClC,WAAW,CAAC,CACV,eAAe,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SACvD,CAAC,CACD,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CACvE,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CACJ,cAAc;YACZ,CAAC,CAAC;gBACE,MAAM,CAAC,SAAS;gBAChB,EAAE,KAAK,EAAE,SAAS,EAAE;gBACpB,CAAC,QAAQ,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE;gBAC/B,cAAc;aACf;YACH,CAAC,CAAC,cACN,CAAC,CACD,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,UAAU,CAAC,EAEnB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,kBAAkB,EAAE;QAClB,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,EAAE;QAChB,WAAW,EAAE,CAAC;QACd,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,EAAE;QACnB,SAAS,EAAE,EAAE;KACd;IACD,aAAa,EAAE;QACb,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,CAAC;KACX;IACD,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE;IAEzC,wBAAwB;IACxB,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAI,EAAE,SAAS,EAAE,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,EAAU;KACnD;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,kBAAkB,EAAE,QAAQ;KAC7B;IACD,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACpB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,SAAS;KACtB;CACF,CAAC,CAAC","sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport {\n Animated,\n Image,\n StyleProp,\n StyleSheet,\n TextInput,\n TextInputProps,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\nimport { FontAwesome6, MaterialCommunityIcons } from \"@expo/vector-icons\";\n\nimport Styles from \"../../constants/Styles\";\nimport { useFormThemeContext } from \"../../context/FormThemeContext\";\nimport { AmexLogo, DiscoverLogo, MCLogo, VisaLogo } from \"../../assets\";\n\ntype StylingProps = {\n formFieldStyle?: StyleProp<ViewStyle>;\n inputStyle?: StyleProp<ViewStyle>;\n textInputStyle?: StyleProp<TextStyle>;\n};\n\ntype AppTextInputProps = TextInputProps & {\n defaultStyling?: boolean;\n fieldName?: string;\n icon?:\n | { type: \"material\"; name: keyof typeof MaterialCommunityIcons.glyphMap }\n | { type: \"fa6\"; name: keyof typeof FontAwesome6.glyphMap }\n | { type: \"png\"; name: \"amex\" | \"discover\" | \"mc\" | \"visa\" };\n hasError?: boolean;\n errorText?: string;\n styling?: StylingProps;\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withPlaceholder?: boolean;\n};\n\nconst cardIcons: Record<string, any> = {\n amex: AmexLogo,\n discover: DiscoverLogo,\n mc: MCLogo,\n visa: VisaLogo,\n};\n\nexport default function AppTextInput({\n defaultStyling,\n fieldName,\n icon,\n onBlur,\n onChangeText,\n placeholder,\n hasError = false,\n errorText = \"\",\n styling: { formFieldStyle = {}, inputStyle = {}, textInputStyle = {} } = {},\n value,\n withAnimatedText,\n withIcon,\n withPlaceholder,\n ...otherProps\n}: AppTextInputProps) {\n const {\n formFieldBackground,\n formFieldErrorBorder,\n iconColor,\n iconError,\n placeholderColor,\n placeholderError,\n textInput,\n textInputCarot,\n } = useFormThemeContext();\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [renderedIcon, setRenderedIcon] = useState(icon);\n\n const activeAnim = useRef<Animated.CompositeAnimation | null>(null);\n const animatedIsFlipped = useRef(\n new Animated.Value(icon?.type === \"png\" ? 1 : 0)\n ).current;\n const animatedIsFocused = useRef(new Animated.Value(value ? 1 : 0)).current;\n\n useEffect(() => {\n Animated.timing(animatedIsFocused, {\n toValue: isFocused || !!value ? 1 : 0,\n duration: 200,\n useNativeDriver: false,\n }).start();\n }, [isFocused, value, animatedIsFocused]);\n\n const placeholderStyle: Animated.WithAnimatedObject<StyleProp<TextStyle>> = {\n position: \"absolute\",\n left: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [withIcon ? 40 : 15, withIcon ? 40 : 15],\n }),\n top: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [30, 5],\n }),\n fontSize: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [18, 12],\n }),\n color: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [placeholderColor, placeholderColor],\n }),\n };\n\n useEffect(() => {\n if (icon === renderedIcon) return;\n\n const hasBrandIcon = icon?.type === \"png\";\n\n if (activeAnim.current) {\n try {\n activeAnim.current.stop();\n } catch (e) {\n // ignore\n }\n activeAnim.current = null;\n }\n\n const anim = Animated.timing(animatedIsFlipped, {\n toValue: hasBrandIcon ? 1 : 0,\n duration: 500,\n useNativeDriver: true,\n });\n\n activeAnim.current = anim;\n anim.start(({ finished }) => {\n activeAnim.current = null;\n if (finished) {\n setRenderedIcon(icon);\n } else {\n setRenderedIcon(icon);\n }\n });\n }, [icon]);\n\n const rotateY = animatedIsFlipped.interpolate({\n inputRange: [0, 1],\n outputRange: [\"0deg\", \"180deg\"],\n });\n\n const rotateYBack = animatedIsFlipped.interpolate({\n inputRange: [0, 1],\n outputRange: [\"180deg\", \"360deg\"],\n });\n\n const backImageSource =\n icon?.type === \"png\"\n ? cardIcons[icon.name]\n : renderedIcon?.type === \"png\"\n ? cardIcons[renderedIcon.name]\n : null;\n\n const Icon = backImageSource;\n console.log(Icon);\n return (\n <View\n style={\n defaultStyling && [\n styles.formFieldContainer,\n { backgroundColor: formFieldBackground },\n formFieldStyle,\n hasError && { borderColor: formFieldErrorBorder },\n ]\n }\n >\n {defaultStyling && withIcon && (\n <View style={styles.iconContainer}>\n <View style={styles.flipContainer}>\n {/* Front side: generic card icon or previously rendered icon.\n We use renderedIcon so the old front stays visible until animation completes */}\n <Animated.View\n style={[\n styles.face,\n styles.front,\n {\n transform: [{ rotateY }],\n },\n ]}\n >\n {/* If previously renderedIcon was a material/fa6 show it; otherwise show generic credit-card */}\n {renderedIcon?.type === \"material\" && renderedIcon?.name ? (\n <MaterialCommunityIcons\n name={renderedIcon.name}\n size={25}\n color={hasError ? iconError : iconColor}\n />\n ) : renderedIcon?.type === \"fa6\" && renderedIcon?.name ? (\n <FontAwesome6\n name={renderedIcon.name}\n size={21}\n color={hasError ? iconError : iconColor}\n />\n ) : (\n <MaterialCommunityIcons\n name=\"credit-card\"\n size={25}\n color={hasError ? iconError : iconColor}\n />\n )}\n </Animated.View>\n <Animated.View\n style={[\n styles.face,\n {\n transform: [\n {\n rotateY: rotateYBack,\n },\n ],\n },\n ]}\n >\n {Icon ? (\n typeof Icon === \"function\" ? (\n <Icon width=\"100%\" height=\"100%\" />\n ) : (\n <Image\n source={Icon}\n style={[\n styles.logo,\n (icon?.name === \"visa\" ||\n icon?.name === \"discover\" ||\n renderedIcon?.name === \"visa\" ||\n renderedIcon?.name === \"discover\") && {\n width: \"70%\",\n height: \"70%\",\n },\n ]}\n />\n )\n ) : (\n <View style={styles.logo} />\n )}\n </Animated.View>\n </View>\n </View>\n )}\n {withPlaceholder && withAnimatedText && (\n <Animated.Text\n pointerEvents=\"none\"\n style={\n defaultStyling && [\n placeholderStyle,\n hasError && { color: placeholderError },\n ]\n }\n >\n {hasError ? errorText : placeholder}\n </Animated.Text>\n )}\n <TextInput\n onBlur={(e) => {\n setIsFocused(false);\n onBlur?.(e);\n }}\n onChangeText={onChangeText}\n onFocus={() => setIsFocused(true)}\n placeholder={\n withPlaceholder && !withAnimatedText ? placeholder : undefined\n }\n placeholderTextColor={!withAnimatedText ? placeholderColor : undefined}\n selectionColor={textInputCarot}\n style={\n defaultStyling\n ? [\n styles.textInput,\n { color: textInput },\n !withIcon && { marginLeft: 15 },\n textInputStyle,\n ]\n : textInputStyle\n }\n value={value}\n {...otherProps}\n />\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n formFieldContainer: {\n borderColor: \"#3c3c3c\",\n borderRadius: 25,\n borderWidth: 1,\n flexDirection: \"row\",\n paddingVertical: 20,\n marginTop: 12,\n },\n iconContainer: {\n marginTop: 8,\n width: 40,\n height: 25,\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: 1,\n },\n textInput: { height: 40, ...Styles.text },\n\n // Flip animation styles\n flipContainer: {\n width: \"100%\",\n height: \"100%\",\n ...({ transform: [{ perspective: 1000 }] } as any),\n },\n flipCard: {\n width: \"100%\",\n height: \"100%\",\n },\n face: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n justifyContent: \"center\",\n alignItems: \"center\",\n backfaceVisibility: \"hidden\",\n },\n front: { zIndex: 2 },\n logo: {\n width: \"100%\",\n height: \"100%\",\n resizeMode: \"contain\",\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/components/forms/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport {\n Animated,\n Image,\n StyleProp,\n StyleSheet,\n TextInput,\n TextInputProps,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\nimport { FontAwesome6, MaterialCommunityIcons } from \"@expo/vector-icons\";\n\nimport Styles from \"../../constants/Styles\";\nimport { useFormThemeContext } from \"../../context/FormThemeContext\";\nimport { AmexLogo, DiscoverLogo, MCLogo, VisaLogo } from \"../../assets\";\n\ntype StylingProps = {\n formFieldStyle?: StyleProp<ViewStyle>;\n inputStyle?: StyleProp<ViewStyle>;\n textInputStyle?: StyleProp<TextStyle>;\n};\n\ntype AppTextInputProps = TextInputProps & {\n defaultStyling?: boolean;\n fieldName?: string;\n icon?:\n | { type: \"material\"; name: keyof typeof MaterialCommunityIcons.glyphMap }\n | { type: \"fa6\"; name: keyof typeof FontAwesome6.glyphMap }\n | { type: \"png\"; name: \"amex\" | \"discover\" | \"mc\" | \"visa\" };\n hasError?: boolean;\n errorText?: string;\n styling?: StylingProps;\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withPlaceholder?: boolean;\n};\n\nconst cardIcons: Record<string, any> = {\n amex: AmexLogo,\n discover: DiscoverLogo,\n mc: MCLogo,\n visa: VisaLogo,\n};\n\nexport default function AppTextInput({\n defaultStyling,\n fieldName,\n icon,\n onBlur,\n onChangeText,\n placeholder,\n hasError = false,\n errorText = \"\",\n styling: { formFieldStyle = {}, inputStyle = {}, textInputStyle = {} } = {},\n value,\n withAnimatedText,\n withIcon,\n withPlaceholder,\n ...otherProps\n}: AppTextInputProps) {\n const {\n formFieldBackground,\n formFieldErrorBorder,\n iconColor,\n iconError,\n placeholderColor,\n placeholderError,\n textInput,\n textInputCarot,\n } = useFormThemeContext();\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [renderedIcon, setRenderedIcon] = useState(icon);\n\n const activeAnim = useRef<Animated.CompositeAnimation | null>(null);\n const animatedIsFlipped = useRef(\n new Animated.Value(icon?.type === \"png\" ? 1 : 0)\n ).current;\n const animatedIsFocused = useRef(new Animated.Value(value ? 1 : 0)).current;\n\n useEffect(() => {\n Animated.timing(animatedIsFocused, {\n toValue: isFocused || !!value ? 1 : 0,\n duration: 200,\n useNativeDriver: false,\n }).start();\n }, [isFocused, value, animatedIsFocused]);\n\n const placeholderStyle: Animated.WithAnimatedObject<StyleProp<TextStyle>> = {\n position: \"absolute\",\n left: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [withIcon ? 40 : 15, withIcon ? 40 : 15],\n }),\n top: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [30, 5],\n }),\n fontSize: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [18, 12],\n }),\n color: animatedIsFocused.interpolate({\n inputRange: [0, 1],\n outputRange: [placeholderColor, placeholderColor],\n }),\n };\n\n useEffect(() => {\n if (icon === renderedIcon) return;\n\n const hasBrandIcon = icon?.type === \"png\";\n\n if (activeAnim.current) {\n try {\n activeAnim.current.stop();\n } catch (e) {\n // ignore\n }\n activeAnim.current = null;\n }\n\n const anim = Animated.timing(animatedIsFlipped, {\n toValue: hasBrandIcon ? 1 : 0,\n duration: 500,\n useNativeDriver: true,\n });\n\n activeAnim.current = anim;\n anim.start(({ finished }) => {\n activeAnim.current = null;\n if (finished) {\n setRenderedIcon(icon);\n } else {\n setRenderedIcon(icon);\n }\n });\n }, [icon]);\n\n const rotateY = animatedIsFlipped.interpolate({\n inputRange: [0, 1],\n outputRange: [\"0deg\", \"180deg\"],\n });\n\n const rotateYBack = animatedIsFlipped.interpolate({\n inputRange: [0, 1],\n outputRange: [\"180deg\", \"360deg\"],\n });\n\n const backImageSource =\n icon?.type === \"png\"\n ? cardIcons[icon.name]\n : renderedIcon?.type === \"png\"\n ? cardIcons[renderedIcon.name]\n : null;\n\n const Icon = backImageSource;\n\n return (\n <View\n style={\n defaultStyling && [\n styles.formFieldContainer,\n { backgroundColor: formFieldBackground },\n formFieldStyle,\n hasError && { borderColor: formFieldErrorBorder },\n ]\n }\n >\n {defaultStyling && withIcon && (\n <View style={styles.iconContainer}>\n <View style={styles.flipContainer}>\n {/* Front side: generic card icon or previously rendered icon.\n We use renderedIcon so the old front stays visible until animation completes */}\n <Animated.View\n style={[\n styles.face,\n styles.front,\n {\n transform: [{ rotateY }],\n },\n ]}\n >\n {/* If previously renderedIcon was a material/fa6 show it; otherwise show generic credit-card */}\n {renderedIcon?.type === \"material\" && renderedIcon?.name ? (\n <MaterialCommunityIcons\n name={renderedIcon.name}\n size={25}\n color={hasError ? iconError : iconColor}\n />\n ) : renderedIcon?.type === \"fa6\" && renderedIcon?.name ? (\n <FontAwesome6\n name={renderedIcon.name}\n size={21}\n color={hasError ? iconError : iconColor}\n />\n ) : (\n <MaterialCommunityIcons\n name=\"credit-card\"\n size={25}\n color={hasError ? iconError : iconColor}\n />\n )}\n </Animated.View>\n <Animated.View\n style={[\n styles.face,\n {\n transform: [\n {\n rotateY: rotateYBack,\n },\n ],\n },\n ]}\n >\n {Icon ? (\n typeof Icon === \"function\" ? (\n <Icon width=\"100%\" height=\"100%\" />\n ) : (\n <Image\n source={Icon}\n style={[\n styles.logo,\n (icon?.name === \"visa\" ||\n icon?.name === \"discover\" ||\n renderedIcon?.name === \"visa\" ||\n renderedIcon?.name === \"discover\") && {\n width: \"70%\",\n height: \"70%\",\n },\n ]}\n />\n )\n ) : (\n <View style={styles.logo} />\n )}\n </Animated.View>\n </View>\n </View>\n )}\n {withPlaceholder && withAnimatedText && (\n <Animated.Text\n pointerEvents=\"none\"\n style={\n defaultStyling && [\n placeholderStyle,\n hasError && { color: placeholderError },\n ]\n }\n >\n {hasError ? errorText : placeholder}\n </Animated.Text>\n )}\n <TextInput\n onBlur={(e) => {\n setIsFocused(false);\n onBlur?.(e);\n }}\n onChangeText={onChangeText}\n onFocus={() => setIsFocused(true)}\n placeholder={\n withPlaceholder && !withAnimatedText ? placeholder : undefined\n }\n placeholderTextColor={!withAnimatedText ? placeholderColor : undefined}\n selectionColor={textInputCarot}\n style={\n defaultStyling\n ? [\n styles.textInput,\n { color: textInput },\n !withIcon && { marginLeft: 15 },\n textInputStyle,\n ]\n : textInputStyle\n }\n value={value}\n {...otherProps}\n />\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n formFieldContainer: {\n borderColor: \"#3c3c3c\",\n borderRadius: 25,\n borderWidth: 1,\n flexDirection: \"row\",\n paddingVertical: 20,\n marginTop: 12,\n },\n iconContainer: {\n marginTop: 8,\n width: 40,\n height: 25,\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: 1,\n },\n textInput: { height: 40, ...Styles.text },\n\n // Flip animation styles\n flipContainer: {\n width: \"100%\",\n height: \"100%\",\n ...({ transform: [{ perspective: 1000 }] } as any),\n },\n flipCard: {\n width: \"100%\",\n height: \"100%\",\n },\n face: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n justifyContent: \"center\",\n alignItems: \"center\",\n backfaceVisibility: \"hidden\",\n },\n front: { zIndex: 2 },\n logo: {\n width: \"100%\",\n height: \"100%\",\n resizeMode: \"contain\",\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { useEffect } from "react";
|
|
2
2
|
import {
|
|
3
3
|
KeyboardAvoidingView,
|
|
4
4
|
ScrollView,
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "react-native";
|
|
11
11
|
|
|
12
12
|
import { FormProvider, FormThemeColors, FormThemeProvider } from "../context";
|
|
13
|
-
|
|
13
|
+
import { initialize, createDeviceSessionId } from "../ExpoOpenpayModule";
|
|
14
14
|
import { SubmitButton } from "./forms";
|
|
15
15
|
import {
|
|
16
16
|
OPCardNumberInput,
|
|
@@ -95,17 +95,17 @@ export default function OPCardForm({
|
|
|
95
95
|
textInputStyle = {},
|
|
96
96
|
} = styling;
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
98
|
+
useEffect(() => {
|
|
99
|
+
const initOP = async () => {
|
|
100
|
+
try {
|
|
101
|
+
await initialize(merchantId, apiKey, isProduction, countryCode);
|
|
102
|
+
await createDeviceSessionId();
|
|
103
|
+
} catch (e) {
|
|
104
|
+
console.error(e);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
initOP();
|
|
108
|
+
}, []);
|
|
109
109
|
|
|
110
110
|
return (
|
|
111
111
|
<FormThemeProvider
|