@meatech/payblend_app_ui_component 1.0.80 → 1.0.82
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/components/IconWithLabel/IconWithLabel.tsx +14 -13
- package/components/IconWithLabel/type.ts +1 -0
- package/components/PaymentMethodCard/PaymentMethodCard.tsx +31 -27
- package/dist/components/IconWithLabel/IconWithLabel.d.ts.map +1 -1
- package/dist/components/IconWithLabel/IconWithLabel.js +7 -7
- package/dist/components/IconWithLabel/IconWithLabel.js.map +1 -1
- package/dist/components/IconWithLabel/type.d.ts +1 -0
- package/dist/components/IconWithLabel/type.d.ts.map +1 -1
- package/dist/components/PaymentMethodCard/PaymentMethodCard.d.ts.map +1 -1
- package/dist/components/PaymentMethodCard/PaymentMethodCard.js +18 -17
- package/dist/components/PaymentMethodCard/PaymentMethodCard.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { StyleSheet, TouchableOpacity } from
|
|
3
|
-
import { IconWithLabelProps } from
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleSheet, TouchableOpacity } from "react-native";
|
|
3
|
+
import { IconWithLabelProps } from "./type";
|
|
4
4
|
import {
|
|
5
5
|
ACTIVE_OPACITY,
|
|
6
6
|
colors,
|
|
@@ -8,10 +8,10 @@ import {
|
|
|
8
8
|
metrics,
|
|
9
9
|
pf,
|
|
10
10
|
pw,
|
|
11
|
-
} from
|
|
12
|
-
import { Icon } from
|
|
13
|
-
import { formatNumber } from
|
|
14
|
-
import Text from
|
|
11
|
+
} from "@ui/themes";
|
|
12
|
+
import { Icon } from "@ui/components";
|
|
13
|
+
import { formatNumber } from "@ui/utils";
|
|
14
|
+
import Text from "@ui/components/Text";
|
|
15
15
|
|
|
16
16
|
export const SIZE_ICON_WITH_LABEL_DEFAULT = (deviceWidth() - 52) / 3;
|
|
17
17
|
|
|
@@ -21,6 +21,7 @@ export const IconWithLabel: React.FC<IconWithLabelProps> = ({
|
|
|
21
21
|
balance = 0,
|
|
22
22
|
width = SIZE_ICON_WITH_LABEL_DEFAULT,
|
|
23
23
|
height = SIZE_ICON_WITH_LABEL_DEFAULT,
|
|
24
|
+
isFlex = false,
|
|
24
25
|
disabled,
|
|
25
26
|
style,
|
|
26
27
|
labelStyle,
|
|
@@ -33,7 +34,7 @@ export const IconWithLabel: React.FC<IconWithLabelProps> = ({
|
|
|
33
34
|
style={[
|
|
34
35
|
styles.container,
|
|
35
36
|
style,
|
|
36
|
-
{ width: pw(width), height: pw(height) },
|
|
37
|
+
isFlex ? { flex: 1 } : { width: pw(width), height: pw(height) },
|
|
37
38
|
disabled && styles.disabled,
|
|
38
39
|
]}
|
|
39
40
|
activeOpacity={ACTIVE_OPACITY}
|
|
@@ -43,7 +44,7 @@ export const IconWithLabel: React.FC<IconWithLabelProps> = ({
|
|
|
43
44
|
name={icon}
|
|
44
45
|
width={metrics.iconSemiLarge}
|
|
45
46
|
height={metrics.iconSemiLarge}
|
|
46
|
-
tintColor={colors.neutral[
|
|
47
|
+
tintColor={colors.neutral["60"]}
|
|
47
48
|
/>
|
|
48
49
|
<Text
|
|
49
50
|
size="xs"
|
|
@@ -70,14 +71,14 @@ export const IconWithLabel: React.FC<IconWithLabelProps> = ({
|
|
|
70
71
|
const styles = StyleSheet.create({
|
|
71
72
|
container: {
|
|
72
73
|
borderWidth: metrics.borderWidthMedium,
|
|
73
|
-
borderColor: colors.neutral[
|
|
74
|
-
alignItems:
|
|
75
|
-
justifyContent:
|
|
74
|
+
borderColor: colors.neutral["20"],
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
justifyContent: "center",
|
|
76
77
|
padding: metrics.width.spacingTiny,
|
|
77
78
|
},
|
|
78
79
|
label: {
|
|
79
80
|
lineHeight: pf(18),
|
|
80
|
-
textAlign:
|
|
81
|
+
textAlign: "center",
|
|
81
82
|
},
|
|
82
83
|
txtBalance: {
|
|
83
84
|
lineHeight: pf(30),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
import {
|
|
3
3
|
StyleProp,
|
|
4
4
|
StyleSheet,
|
|
@@ -6,9 +6,9 @@ import {
|
|
|
6
6
|
ViewStyle,
|
|
7
7
|
TouchableOpacity,
|
|
8
8
|
ActivityIndicator,
|
|
9
|
-
} from
|
|
10
|
-
import { EPaymentCardTypes, paymentCardDataByTypes } from
|
|
11
|
-
import { Text, Icon, Image } from
|
|
9
|
+
} from "react-native";
|
|
10
|
+
import { EPaymentCardTypes, paymentCardDataByTypes } from "@ui/constants";
|
|
11
|
+
import { Text, Icon, Image } from "@ui/components";
|
|
12
12
|
import {
|
|
13
13
|
ACTIVE_OPACITY,
|
|
14
14
|
colors,
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
FontSizes,
|
|
17
17
|
metrics,
|
|
18
18
|
ph,
|
|
19
|
-
} from
|
|
19
|
+
} from "@ui/themes";
|
|
20
20
|
|
|
21
21
|
interface PaymentMethodCardProps {
|
|
22
22
|
type?: EPaymentCardTypes;
|
|
@@ -36,7 +36,7 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
36
36
|
hideShadow = false,
|
|
37
37
|
disabled = false,
|
|
38
38
|
onPress,
|
|
39
|
-
loadingColor = colors.neutral[
|
|
39
|
+
loadingColor = colors.neutral["80"],
|
|
40
40
|
loading,
|
|
41
41
|
}) => {
|
|
42
42
|
const data = paymentCardDataByTypes[type];
|
|
@@ -46,11 +46,13 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
46
46
|
styles.container,
|
|
47
47
|
style,
|
|
48
48
|
!hideShadow && styles.shadow,
|
|
49
|
-
|
|
49
|
+
disabled && styles.disabled,
|
|
50
|
+
loading && styles.disabled,
|
|
50
51
|
]}
|
|
51
52
|
activeOpacity={ACTIVE_OPACITY}
|
|
52
53
|
disabled={disabled || !onPress}
|
|
53
|
-
onPress={onPress}
|
|
54
|
+
onPress={onPress}
|
|
55
|
+
>
|
|
54
56
|
<View style={[styles.bannerContainer, styles.banner]}>
|
|
55
57
|
<Image
|
|
56
58
|
uri={photo}
|
|
@@ -59,16 +61,18 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
59
61
|
height={ph(70)}
|
|
60
62
|
style={styles.banner}
|
|
61
63
|
/>
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
64
|
+
{loading && (
|
|
65
|
+
<View style={styles.loadingContainer}>
|
|
66
|
+
<ActivityIndicator size="large" color={loadingColor} />
|
|
67
|
+
</View>
|
|
68
|
+
)}
|
|
65
69
|
</View>
|
|
66
70
|
<View style={styles.content}>
|
|
67
71
|
<Icon
|
|
68
72
|
name={data.icon}
|
|
69
73
|
width={metrics.iconMediumPlus}
|
|
70
74
|
height={metrics.iconMediumPlus}
|
|
71
|
-
tintColor={colors.neutral[
|
|
75
|
+
tintColor={colors.neutral["80"]}
|
|
72
76
|
/>
|
|
73
77
|
<Text size="medium" color="tertiary" lineHeight={FontSizes.fontXL}>
|
|
74
78
|
{data.label}
|
|
@@ -80,9 +84,9 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
80
84
|
|
|
81
85
|
const styles = StyleSheet.create({
|
|
82
86
|
container: {
|
|
83
|
-
flexDirection:
|
|
84
|
-
alignItems:
|
|
85
|
-
backgroundColor: colors.white[
|
|
87
|
+
flexDirection: "row",
|
|
88
|
+
alignItems: "flex-end",
|
|
89
|
+
backgroundColor: colors.white["10"],
|
|
86
90
|
margin: metrics.width.spacingBase,
|
|
87
91
|
borderRadius: metrics.borderRadiusSemiLarge,
|
|
88
92
|
paddingHorizontal: metrics.width.spacingBase,
|
|
@@ -93,15 +97,15 @@ const styles = StyleSheet.create({
|
|
|
93
97
|
},
|
|
94
98
|
shadow: {
|
|
95
99
|
shadowColor: colors.neutral[100],
|
|
96
|
-
shadowOffset: {width: 0, height: 2},
|
|
100
|
+
shadowOffset: { width: 0, height: 2 },
|
|
97
101
|
shadowOpacity: 0.05,
|
|
98
102
|
shadowRadius: 4,
|
|
99
103
|
elevation: 4,
|
|
100
104
|
},
|
|
101
105
|
bannerContainer: {
|
|
102
|
-
backgroundColor: colors.white[
|
|
106
|
+
backgroundColor: colors.white["10"],
|
|
103
107
|
shadowColor: colors.neutral[100],
|
|
104
|
-
shadowOffset: {width: 0, height: 4},
|
|
108
|
+
shadowOffset: { width: 0, height: 4 },
|
|
105
109
|
shadowOpacity: 0.25,
|
|
106
110
|
shadowRadius: 12,
|
|
107
111
|
elevation: 12,
|
|
@@ -110,17 +114,17 @@ const styles = StyleSheet.create({
|
|
|
110
114
|
borderRadius: metrics.borderRadiusSemiLarge,
|
|
111
115
|
},
|
|
112
116
|
content: {
|
|
113
|
-
flexDirection:
|
|
117
|
+
flexDirection: "row",
|
|
114
118
|
flex: 1,
|
|
115
|
-
justifyContent:
|
|
116
|
-
alignItems:
|
|
119
|
+
justifyContent: "flex-end",
|
|
120
|
+
alignItems: "center",
|
|
117
121
|
gap: metrics.width.spacingExtraSmall,
|
|
118
122
|
},
|
|
119
123
|
loadingContainer: {
|
|
120
|
-
position:
|
|
121
|
-
justifyContent:
|
|
122
|
-
alignItems:
|
|
123
|
-
width:
|
|
124
|
-
height:
|
|
124
|
+
position: "absolute",
|
|
125
|
+
justifyContent: "center",
|
|
126
|
+
alignItems: "center",
|
|
127
|
+
width: "100%",
|
|
128
|
+
height: "100%",
|
|
125
129
|
},
|
|
126
|
-
});
|
|
130
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWithLabel.d.ts","sourceRoot":"","sources":["../../../components/IconWithLabel/IconWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAa5C,eAAO,MAAM,4BAA4B,QAA2B,CAAC;AAErE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"IconWithLabel.d.ts","sourceRoot":"","sources":["../../../components/IconWithLabel/IconWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAa5C,eAAO,MAAM,4BAA4B,QAA2B,CAAC;AAErE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmDtD,CAAC"}
|
|
@@ -34,14 +34,14 @@ import '../../utils/dayjs.js';
|
|
|
34
34
|
import { formatNumber } from '../../utils/utils.js';
|
|
35
35
|
|
|
36
36
|
const SIZE_ICON_WITH_LABEL_DEFAULT = (deviceWidth() - 52) / 3;
|
|
37
|
-
const IconWithLabel = ({ label, icon, balance = 0, width = SIZE_ICON_WITH_LABEL_DEFAULT, height = SIZE_ICON_WITH_LABEL_DEFAULT, disabled, style, labelStyle, isShowBalance = false, ...rest }) => {
|
|
37
|
+
const IconWithLabel = ({ label, icon, balance = 0, width = SIZE_ICON_WITH_LABEL_DEFAULT, height = SIZE_ICON_WITH_LABEL_DEFAULT, isFlex = false, disabled, style, labelStyle, isShowBalance = false, ...rest }) => {
|
|
38
38
|
return (React.createElement(TouchableOpacity, { disabled: disabled, style: [
|
|
39
39
|
styles.container,
|
|
40
40
|
style,
|
|
41
|
-
{ width: responsiveWidth(width), height: responsiveWidth(height) },
|
|
41
|
+
isFlex ? { flex: 1 } : { width: responsiveWidth(width), height: responsiveWidth(height) },
|
|
42
42
|
disabled && styles.disabled,
|
|
43
43
|
], activeOpacity: ACTIVE_OPACITY, ...rest },
|
|
44
|
-
React.createElement(Icon, { name: icon, width: metrics.iconSemiLarge, height: metrics.iconSemiLarge, tintColor: colors.neutral[
|
|
44
|
+
React.createElement(Icon, { name: icon, width: metrics.iconSemiLarge, height: metrics.iconSemiLarge, tintColor: colors.neutral["60"] }),
|
|
45
45
|
React.createElement(Text, { size: "xs", color: "tertiary", style: [styles.label, labelStyle], numberOfLines: 2 }, label),
|
|
46
46
|
isShowBalance && (React.createElement(Text, { fontWeight: "700", size: "large", color: "tertiary", style: styles.txtBalance },
|
|
47
47
|
"\u00A5",
|
|
@@ -50,14 +50,14 @@ const IconWithLabel = ({ label, icon, balance = 0, width = SIZE_ICON_WITH_LABEL_
|
|
|
50
50
|
const styles = StyleSheet.create({
|
|
51
51
|
container: {
|
|
52
52
|
borderWidth: metrics.borderWidthMedium,
|
|
53
|
-
borderColor: colors.neutral[
|
|
54
|
-
alignItems:
|
|
55
|
-
justifyContent:
|
|
53
|
+
borderColor: colors.neutral["20"],
|
|
54
|
+
alignItems: "center",
|
|
55
|
+
justifyContent: "center",
|
|
56
56
|
padding: metrics.width.spacingTiny,
|
|
57
57
|
},
|
|
58
58
|
label: {
|
|
59
59
|
lineHeight: responsiveFont(18),
|
|
60
|
-
textAlign:
|
|
60
|
+
textAlign: "center",
|
|
61
61
|
},
|
|
62
62
|
txtBalance: {
|
|
63
63
|
lineHeight: responsiveFont(30),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWithLabel.js","sources":["../../../../components/IconWithLabel/IconWithLabel.tsx"],"sourcesContent":["import * as React from
|
|
1
|
+
{"version":3,"file":"IconWithLabel.js","sources":["../../../../components/IconWithLabel/IconWithLabel.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { StyleSheet, TouchableOpacity } from \"react-native\";\nimport { IconWithLabelProps } from \"./type\";\nimport {\n ACTIVE_OPACITY,\n colors,\n deviceWidth,\n metrics,\n pf,\n pw,\n} from \"@ui/themes\";\nimport { Icon } from \"@ui/components\";\nimport { formatNumber } from \"@ui/utils\";\nimport Text from \"@ui/components/Text\";\n\nexport const SIZE_ICON_WITH_LABEL_DEFAULT = (deviceWidth() - 52) / 3;\n\nexport const IconWithLabel: React.FC<IconWithLabelProps> = ({\n label,\n icon,\n balance = 0,\n width = SIZE_ICON_WITH_LABEL_DEFAULT,\n height = SIZE_ICON_WITH_LABEL_DEFAULT,\n isFlex = false,\n disabled,\n style,\n labelStyle,\n isShowBalance = false,\n ...rest\n}) => {\n return (\n <TouchableOpacity\n disabled={disabled}\n style={[\n styles.container,\n style,\n isFlex ? { flex: 1 } : { width: pw(width), height: pw(height) },\n disabled && styles.disabled,\n ]}\n activeOpacity={ACTIVE_OPACITY}\n {...rest}\n >\n <Icon\n name={icon}\n width={metrics.iconSemiLarge}\n height={metrics.iconSemiLarge}\n tintColor={colors.neutral[\"60\"]}\n />\n <Text\n size=\"xs\"\n color=\"tertiary\"\n style={[styles.label, labelStyle]}\n numberOfLines={2}\n >\n {label}\n </Text>\n {isShowBalance && (\n <Text\n fontWeight=\"700\"\n size=\"large\"\n color=\"tertiary\"\n style={styles.txtBalance}\n >\n ¥{formatNumber(balance.toString())}\n </Text>\n )}\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderWidth: metrics.borderWidthMedium,\n borderColor: colors.neutral[\"20\"],\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: metrics.width.spacingTiny,\n },\n label: {\n lineHeight: pf(18),\n textAlign: \"center\",\n },\n txtBalance: {\n lineHeight: pf(30),\n marginTop: metrics.width.spacingTiny,\n },\n disabled: {\n opacity: 0.4,\n },\n});\n"],"names":["pw","pf"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,4BAA4B,GAAG,CAAC,WAAW,EAAE,GAAG,EAAE,IAAI;AAEtD,MAAA,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,KAAK,GAAG,4BAA4B,EACpC,MAAM,GAAG,4BAA4B,EACrC,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,KAAK,EACL,UAAU,EACV,aAAa,GAAG,KAAK,EACrB,GAAG,IAAI,EACR,KAAI;IACH,QACE,oBAAC,gBAAgB,EAAA,EACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;AACL,YAAA,MAAM,CAAC,SAAS;YAChB,KAAK;YACL,MAAM,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAEA,eAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAEA,eAAE,CAAC,MAAM,CAAC,EAAE;YAC/D,QAAQ,IAAI,MAAM,CAAC,QAAQ;AAC5B,SAAA,EACD,aAAa,EAAE,cAAc,EAAA,GACzB,IAAI,EAAA;QAER,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,OAAO,CAAC,aAAa,EAC5B,MAAM,EAAE,OAAO,CAAC,aAAa,EAC7B,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAC/B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,EACjC,aAAa,EAAE,CAAC,EAEf,EAAA,KAAK,CACD;QACN,aAAa,KACZ,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,UAAU,EAAC,KAAK,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,MAAM,CAAC,UAAU,EAAA;;YAEtB,YAAY,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAC7B,CACR,CACgB;AAEvB;AAEA,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;AAC/B,IAAA,SAAS,EAAE;QACT,WAAW,EAAE,OAAO,CAAC,iBAAiB;AACtC,QAAA,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;AACjC,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;AACnC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAEC,cAAE,CAAC,EAAE,CAAC;AAClB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,UAAU,EAAEA,cAAE,CAAC,EAAE,CAAC;AAClB,QAAA,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;AACrC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,GAAG;AACb,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../components/IconWithLabel/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,qBAAqB,EACrB,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAC9C;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../components/IconWithLabel/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,qBAAqB,EACrB,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAC9C;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentMethodCard.d.ts","sourceRoot":"","sources":["../../../components/PaymentMethodCard/PaymentMethodCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,SAAS,EAGT,SAAS,EAGV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAA0B,MAAM,eAAe,CAAC;AAW1E,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"PaymentMethodCard.d.ts","sourceRoot":"","sources":["../../../components/PaymentMethodCard/PaymentMethodCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,SAAS,EAGT,SAAS,EAGV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAA0B,MAAM,eAAe,CAAC;AAW1E,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmD9D,CAAC"}
|
|
@@ -32,27 +32,28 @@ import '../LoadingOverlay/LoadingOverlay.js';
|
|
|
32
32
|
import '../BalanceCard/BalanceCard.js';
|
|
33
33
|
import '../PaymentMethodCardWithAmount/PaymentMethodCardWithAmount.js';
|
|
34
34
|
|
|
35
|
-
const PaymentMethodCard = ({ photo, type = EPaymentCardTypes.DIRECT, style, hideShadow = false, disabled = false, onPress, loadingColor = colors.neutral[
|
|
35
|
+
const PaymentMethodCard = ({ photo, type = EPaymentCardTypes.DIRECT, style, hideShadow = false, disabled = false, onPress, loadingColor = colors.neutral["80"], loading, }) => {
|
|
36
36
|
const data = paymentCardDataByTypes[type];
|
|
37
37
|
return (React__default.createElement(TouchableOpacity, { style: [
|
|
38
38
|
styles.container,
|
|
39
39
|
style,
|
|
40
40
|
!hideShadow && styles.shadow,
|
|
41
|
-
|
|
41
|
+
disabled && styles.disabled,
|
|
42
|
+
loading && styles.disabled,
|
|
42
43
|
], activeOpacity: ACTIVE_OPACITY, disabled: disabled || !onPress, onPress: onPress },
|
|
43
44
|
React__default.createElement(View, { style: [styles.bannerContainer, styles.banner] },
|
|
44
45
|
React__default.createElement(Image, { uri: photo, resizeMode: "cover", width: deviceWidth() * 0.3, height: responsiveHeight(70), style: styles.banner }),
|
|
45
|
-
React__default.createElement(View, { style: styles.loadingContainer },
|
|
46
|
-
React__default.createElement(ActivityIndicator, { size: "large", color: loadingColor }))),
|
|
46
|
+
loading && (React__default.createElement(View, { style: styles.loadingContainer },
|
|
47
|
+
React__default.createElement(ActivityIndicator, { size: "large", color: loadingColor })))),
|
|
47
48
|
React__default.createElement(View, { style: styles.content },
|
|
48
|
-
React__default.createElement(Icon, { name: data.icon, width: metrics.iconMediumPlus, height: metrics.iconMediumPlus, tintColor: colors.neutral[
|
|
49
|
+
React__default.createElement(Icon, { name: data.icon, width: metrics.iconMediumPlus, height: metrics.iconMediumPlus, tintColor: colors.neutral["80"] }),
|
|
49
50
|
React__default.createElement(Text, { size: "medium", color: "tertiary", lineHeight: FontSizes.fontXL }, data.label))));
|
|
50
51
|
};
|
|
51
52
|
const styles = StyleSheet.create({
|
|
52
53
|
container: {
|
|
53
|
-
flexDirection:
|
|
54
|
-
alignItems:
|
|
55
|
-
backgroundColor: colors.white[
|
|
54
|
+
flexDirection: "row",
|
|
55
|
+
alignItems: "flex-end",
|
|
56
|
+
backgroundColor: colors.white["10"],
|
|
56
57
|
margin: metrics.width.spacingBase,
|
|
57
58
|
borderRadius: metrics.borderRadiusSemiLarge,
|
|
58
59
|
paddingHorizontal: metrics.width.spacingBase,
|
|
@@ -69,7 +70,7 @@ const styles = StyleSheet.create({
|
|
|
69
70
|
elevation: 4,
|
|
70
71
|
},
|
|
71
72
|
bannerContainer: {
|
|
72
|
-
backgroundColor: colors.white[
|
|
73
|
+
backgroundColor: colors.white["10"],
|
|
73
74
|
shadowColor: colors.neutral[100],
|
|
74
75
|
shadowOffset: { width: 0, height: 4 },
|
|
75
76
|
shadowOpacity: 0.25,
|
|
@@ -80,18 +81,18 @@ const styles = StyleSheet.create({
|
|
|
80
81
|
borderRadius: metrics.borderRadiusSemiLarge,
|
|
81
82
|
},
|
|
82
83
|
content: {
|
|
83
|
-
flexDirection:
|
|
84
|
+
flexDirection: "row",
|
|
84
85
|
flex: 1,
|
|
85
|
-
justifyContent:
|
|
86
|
-
alignItems:
|
|
86
|
+
justifyContent: "flex-end",
|
|
87
|
+
alignItems: "center",
|
|
87
88
|
gap: metrics.width.spacingExtraSmall,
|
|
88
89
|
},
|
|
89
90
|
loadingContainer: {
|
|
90
|
-
position:
|
|
91
|
-
justifyContent:
|
|
92
|
-
alignItems:
|
|
93
|
-
width:
|
|
94
|
-
height:
|
|
91
|
+
position: "absolute",
|
|
92
|
+
justifyContent: "center",
|
|
93
|
+
alignItems: "center",
|
|
94
|
+
width: "100%",
|
|
95
|
+
height: "100%",
|
|
95
96
|
},
|
|
96
97
|
});
|
|
97
98
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentMethodCard.js","sources":["../../../../components/PaymentMethodCard/PaymentMethodCard.tsx"],"sourcesContent":["import React from
|
|
1
|
+
{"version":3,"file":"PaymentMethodCard.js","sources":["../../../../components/PaymentMethodCard/PaymentMethodCard.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n TouchableOpacity,\n ActivityIndicator,\n} from \"react-native\";\nimport { EPaymentCardTypes, paymentCardDataByTypes } from \"@ui/constants\";\nimport { Text, Icon, Image } from \"@ui/components\";\nimport {\n ACTIVE_OPACITY,\n colors,\n deviceWidth,\n FontSizes,\n metrics,\n ph,\n} from \"@ui/themes\";\n\ninterface PaymentMethodCardProps {\n type?: EPaymentCardTypes;\n style?: StyleProp<ViewStyle>;\n hideShadow?: boolean;\n onPress?: () => void;\n photo: string;\n disabled?: boolean;\n loading?: boolean;\n loadingColor?: string;\n}\n\nexport const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({\n photo,\n type = EPaymentCardTypes.DIRECT,\n style,\n hideShadow = false,\n disabled = false,\n onPress,\n loadingColor = colors.neutral[\"80\"],\n loading,\n}) => {\n const data = paymentCardDataByTypes[type];\n return (\n <TouchableOpacity\n style={[\n styles.container,\n style,\n !hideShadow && styles.shadow,\n disabled && styles.disabled,\n loading && styles.disabled,\n ]}\n activeOpacity={ACTIVE_OPACITY}\n disabled={disabled || !onPress}\n onPress={onPress}\n >\n <View style={[styles.bannerContainer, styles.banner]}>\n <Image\n uri={photo}\n resizeMode=\"cover\"\n width={deviceWidth() * 0.3}\n height={ph(70)}\n style={styles.banner}\n />\n {loading && (\n <View style={styles.loadingContainer}>\n <ActivityIndicator size=\"large\" color={loadingColor} />\n </View>\n )}\n </View>\n <View style={styles.content}>\n <Icon\n name={data.icon}\n width={metrics.iconMediumPlus}\n height={metrics.iconMediumPlus}\n tintColor={colors.neutral[\"80\"]}\n />\n <Text size=\"medium\" color=\"tertiary\" lineHeight={FontSizes.fontXL}>\n {data.label}\n </Text>\n </View>\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: \"row\",\n alignItems: \"flex-end\",\n backgroundColor: colors.white[\"10\"],\n margin: metrics.width.spacingBase,\n borderRadius: metrics.borderRadiusSemiLarge,\n paddingHorizontal: metrics.width.spacingBase,\n paddingVertical: metrics.height.spacingExtraSmall,\n },\n disabled: {\n opacity: 0.5,\n },\n shadow: {\n shadowColor: colors.neutral[100],\n shadowOffset: { width: 0, height: 2 },\n shadowOpacity: 0.05,\n shadowRadius: 4,\n elevation: 4,\n },\n bannerContainer: {\n backgroundColor: colors.white[\"10\"],\n shadowColor: colors.neutral[100],\n shadowOffset: { width: 0, height: 4 },\n shadowOpacity: 0.25,\n shadowRadius: 12,\n elevation: 12,\n },\n banner: {\n borderRadius: metrics.borderRadiusSemiLarge,\n },\n content: {\n flexDirection: \"row\",\n flex: 1,\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: metrics.width.spacingExtraSmall,\n },\n loadingContainer: {\n position: \"absolute\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"100%\",\n height: \"100%\",\n },\n});\n"],"names":["React","ph"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ba,MAAA,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,IAAI,GAAG,iBAAiB,CAAC,MAAM,EAC/B,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EACnC,OAAO,GACR,KAAI;AACH,IAAA,MAAM,IAAI,GAAG,sBAAsB,CAAC,IAAI,CAAC;AACzC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,KAAK,EAAE;AACL,YAAA,MAAM,CAAC,SAAS;YAChB,KAAK;AACL,YAAA,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM;YAC5B,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAC3B,OAAO,IAAI,MAAM,CAAC,QAAQ;AAC3B,SAAA,EACD,aAAa,EAAE,cAAc,EAC7B,QAAQ,EAAE,QAAQ,IAAI,CAAC,OAAO,EAC9B,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA;AAClD,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,GAAG,EAAE,KAAK,EACV,UAAU,EAAC,OAAO,EAClB,KAAK,EAAE,WAAW,EAAE,GAAG,GAAG,EAC1B,MAAM,EAAEC,gBAAE,CAAC,EAAE,CAAC,EACd,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,CAAA;YACD,OAAO,KACND,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAA;AAClC,gBAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAA,CAAI,CAClD,CACR,CACI;AACP,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,KAAK,EAAE,MAAM,CAAC,OAAO,EAAA;AACzB,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,OAAO,CAAC,cAAc,EAC7B,MAAM,EAAE,OAAO,CAAC,cAAc,EAC9B,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAC/B,CAAA;YACFA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAE,SAAS,CAAC,MAAM,EAAA,EAC9D,IAAI,CAAC,KAAK,CACN,CACF,CACU;AAEvB;AAEA,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;AAC/B,IAAA,SAAS,EAAE;AACT,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;AACnC,QAAA,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;QACjC,YAAY,EAAE,OAAO,CAAC,qBAAqB;AAC3C,QAAA,iBAAiB,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;AAC5C,QAAA,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB;AAClD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,GAAG;AACb,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QAChC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACrC,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,SAAS,EAAE,CAAC;AACb,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC;AACnC,QAAA,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QAChC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACrC,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,SAAS,EAAE,EAAE;AACd,KAAA;AACD,IAAA,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC,qBAAqB;AAC5C,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,cAAc,EAAE,UAAU;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,iBAAiB;AACrC,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACF,CAAA,CAAC;;;;"}
|