@meatech/payblend_app_ui_component 1.0.78 → 1.0.80
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/BalanceCard/BalanceCard.tsx +1 -1
- package/components/PaymentMethodCard/PaymentMethodCard.tsx +20 -8
- package/dist/components/BalanceCard/BalanceCard.js +3 -1
- package/dist/components/BalanceCard/BalanceCard.js.map +1 -1
- package/dist/components/PaymentMethodCard/PaymentMethodCard.d.ts +2 -0
- package/dist/components/PaymentMethodCard/PaymentMethodCard.d.ts.map +1 -1
- package/dist/components/PaymentMethodCard/PaymentMethodCard.js +13 -5
- package/dist/components/PaymentMethodCard/PaymentMethodCard.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
View,
|
|
6
6
|
ViewStyle,
|
|
7
7
|
TouchableOpacity,
|
|
8
|
+
ActivityIndicator,
|
|
8
9
|
} from 'react-native';
|
|
9
10
|
import { EPaymentCardTypes, paymentCardDataByTypes } from '@ui/constants';
|
|
10
11
|
import { Text, Icon, Image } from '@ui/components';
|
|
@@ -24,6 +25,8 @@ interface PaymentMethodCardProps {
|
|
|
24
25
|
onPress?: () => void;
|
|
25
26
|
photo: string;
|
|
26
27
|
disabled?: boolean;
|
|
28
|
+
loading?: boolean;
|
|
29
|
+
loadingColor?: string;
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
@@ -33,9 +36,9 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
33
36
|
hideShadow = false,
|
|
34
37
|
disabled = false,
|
|
35
38
|
onPress,
|
|
39
|
+
loadingColor = colors.neutral['80'],
|
|
40
|
+
loading,
|
|
36
41
|
}) => {
|
|
37
|
-
// console.log('disabled', disabled);
|
|
38
|
-
|
|
39
42
|
const data = paymentCardDataByTypes[type];
|
|
40
43
|
return (
|
|
41
44
|
<TouchableOpacity
|
|
@@ -43,12 +46,11 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
43
46
|
styles.container,
|
|
44
47
|
style,
|
|
45
48
|
!hideShadow && styles.shadow,
|
|
46
|
-
disabled && styles.disabled,
|
|
49
|
+
(disabled || loading) && styles.disabled,
|
|
47
50
|
]}
|
|
48
51
|
activeOpacity={ACTIVE_OPACITY}
|
|
49
52
|
disabled={disabled || !onPress}
|
|
50
|
-
onPress={onPress}
|
|
51
|
-
>
|
|
53
|
+
onPress={onPress}>
|
|
52
54
|
<View style={[styles.bannerContainer, styles.banner]}>
|
|
53
55
|
<Image
|
|
54
56
|
uri={photo}
|
|
@@ -57,6 +59,9 @@ export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
|
|
|
57
59
|
height={ph(70)}
|
|
58
60
|
style={styles.banner}
|
|
59
61
|
/>
|
|
62
|
+
<View style={styles.loadingContainer}>
|
|
63
|
+
<ActivityIndicator size="large" color={loadingColor} />
|
|
64
|
+
</View>
|
|
60
65
|
</View>
|
|
61
66
|
<View style={styles.content}>
|
|
62
67
|
<Icon
|
|
@@ -88,7 +93,7 @@ const styles = StyleSheet.create({
|
|
|
88
93
|
},
|
|
89
94
|
shadow: {
|
|
90
95
|
shadowColor: colors.neutral[100],
|
|
91
|
-
shadowOffset: {
|
|
96
|
+
shadowOffset: {width: 0, height: 2},
|
|
92
97
|
shadowOpacity: 0.05,
|
|
93
98
|
shadowRadius: 4,
|
|
94
99
|
elevation: 4,
|
|
@@ -96,7 +101,7 @@ const styles = StyleSheet.create({
|
|
|
96
101
|
bannerContainer: {
|
|
97
102
|
backgroundColor: colors.white['10'],
|
|
98
103
|
shadowColor: colors.neutral[100],
|
|
99
|
-
shadowOffset: {
|
|
104
|
+
shadowOffset: {width: 0, height: 4},
|
|
100
105
|
shadowOpacity: 0.25,
|
|
101
106
|
shadowRadius: 12,
|
|
102
107
|
elevation: 12,
|
|
@@ -111,4 +116,11 @@ const styles = StyleSheet.create({
|
|
|
111
116
|
alignItems: 'center',
|
|
112
117
|
gap: metrics.width.spacingExtraSmall,
|
|
113
118
|
},
|
|
114
|
-
|
|
119
|
+
loadingContainer: {
|
|
120
|
+
position: 'absolute',
|
|
121
|
+
justifyContent: 'center',
|
|
122
|
+
alignItems: 'center',
|
|
123
|
+
width: '100%',
|
|
124
|
+
height: '100%',
|
|
125
|
+
},
|
|
126
|
+
});
|
|
@@ -38,7 +38,9 @@ const BalanceCard = ({ datetime, balance = '0', delay = 300, waitRefreshTime = 5
|
|
|
38
38
|
React.createElement(TouchableOpacity, { style: styles.balanceContainer, activeOpacity: ACTIVE_OPACITY, onPress: handleToggleHideBalance },
|
|
39
39
|
hideBalance ? (React.createElement(Text, { size: "medium", color: "primary", fontWeight: "700", lineHeight: responsiveFont(30) }, "****")) : (React.createElement(React.Fragment, null,
|
|
40
40
|
React.createElement(Text, { size: "medium", color: "primary", fontWeight: "700", lineHeight: responsiveFont(30) }, "\u00A5"),
|
|
41
|
-
React.createElement(Text, { size: "xl", color: "primary", fontWeight: "700", lineHeight: responsiveFont(30) },
|
|
41
|
+
React.createElement(Text, { size: "xl", color: "primary", fontWeight: "700", lineHeight: responsiveFont(30) },
|
|
42
|
+
formatNumber(balance),
|
|
43
|
+
"\u5186"),
|
|
42
44
|
React.createElement(Text, { size: "medium", color: "primary", fontWeight: "700", lineHeight: responsiveFont(30) }, "-"))),
|
|
43
45
|
React.createElement(Icon, { name: hideBalance ? 'ic_eye_off' : 'ic_eye', width: metrics.iconSmall, height: metrics.iconSmall, tintColor: colors.neutral['80'] }))));
|
|
44
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BalanceCard.js","sources":["../../../../components/BalanceCard/BalanceCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n StyleSheet,\n TouchableOpacity,\n View,\n StyleProp,\n ViewStyle,\n} from 'react-native';\nimport { debounce } from 'lodash';\nimport { ACTIVE_OPACITY, colors, FontSizes, metrics, pf } from '@ui/themes';\nimport { Icon } from '../Icons';\nimport Text from '../Text';\nimport { formatDateToJapaneseStyle, formatNumber } from '@ui/utils';\n\nexport interface BalanceCardProps {\n datetime?: string;\n balance?: string;\n delay?: number;\n waitRefreshTime?: number;\n style?: StyleProp<ViewStyle>;\n onPress?: () => void;\n}\n\nexport const BalanceCard: React.FC<BalanceCardProps> = ({\n datetime,\n balance = '0',\n delay = 300,\n waitRefreshTime = 5000,\n style,\n onPress,\n}) => {\n const [disabled, setDisabled] = useState<boolean>(false);\n const [hideBalance, setHideBalance] = useState<boolean>(false);\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n if (disabled) {\n timeout = setTimeout(() => {\n setDisabled(false);\n }, waitRefreshTime);\n }\n return () => clearTimeout(timeout);\n }, [waitRefreshTime, disabled]);\n\n const handleBalanceUpdate = debounce(() => {\n setDisabled(true);\n onPress?.();\n }, delay);\n\n const handleToggleHideBalance = () => setHideBalance((prev) => !prev);\n\n return (\n <View style={[styles.container, style]}>\n {datetime && (\n <Text size=\"xs\" color=\"disabled\" lineHeight={pf(18)}>\n {formatDateToJapaneseStyle(datetime)}\n </Text>\n )}\n <TouchableOpacity\n style={[styles.balanceButton, disabled && styles.buttonDisabled]}\n disabled={!onPress || disabled}\n activeOpacity={ACTIVE_OPACITY}\n onPress={handleBalanceUpdate}\n >\n <Icon\n name=\"ic_white_rotate_right\"\n width={metrics.height.spacingExtraSmall}\n height={metrics.height.spacingExtraSmall}\n />\n <Text size=\"xxs\" color=\"white\" lineHeight={FontSizes.fontXS}>\n 残高更新\n </Text>\n </TouchableOpacity>\n <TouchableOpacity\n style={styles.balanceContainer}\n activeOpacity={ACTIVE_OPACITY}\n onPress={handleToggleHideBalance}\n >\n {hideBalance ? (\n <Text\n size=\"medium\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n ****\n </Text>\n ) : (\n <>\n <Text\n size=\"medium\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n ¥\n </Text>\n <Text\n size=\"xl\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n {formatNumber(balance)}
|
|
1
|
+
{"version":3,"file":"BalanceCard.js","sources":["../../../../components/BalanceCard/BalanceCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n StyleSheet,\n TouchableOpacity,\n View,\n StyleProp,\n ViewStyle,\n} from 'react-native';\nimport { debounce } from 'lodash';\nimport { ACTIVE_OPACITY, colors, FontSizes, metrics, pf } from '@ui/themes';\nimport { Icon } from '../Icons';\nimport Text from '../Text';\nimport { formatDateToJapaneseStyle, formatNumber } from '@ui/utils';\n\nexport interface BalanceCardProps {\n datetime?: string;\n balance?: string;\n delay?: number;\n waitRefreshTime?: number;\n style?: StyleProp<ViewStyle>;\n onPress?: () => void;\n}\n\nexport const BalanceCard: React.FC<BalanceCardProps> = ({\n datetime,\n balance = '0',\n delay = 300,\n waitRefreshTime = 5000,\n style,\n onPress,\n}) => {\n const [disabled, setDisabled] = useState<boolean>(false);\n const [hideBalance, setHideBalance] = useState<boolean>(false);\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n if (disabled) {\n timeout = setTimeout(() => {\n setDisabled(false);\n }, waitRefreshTime);\n }\n return () => clearTimeout(timeout);\n }, [waitRefreshTime, disabled]);\n\n const handleBalanceUpdate = debounce(() => {\n setDisabled(true);\n onPress?.();\n }, delay);\n\n const handleToggleHideBalance = () => setHideBalance((prev) => !prev);\n\n return (\n <View style={[styles.container, style]}>\n {datetime && (\n <Text size=\"xs\" color=\"disabled\" lineHeight={pf(18)}>\n {formatDateToJapaneseStyle(datetime)}\n </Text>\n )}\n <TouchableOpacity\n style={[styles.balanceButton, disabled && styles.buttonDisabled]}\n disabled={!onPress || disabled}\n activeOpacity={ACTIVE_OPACITY}\n onPress={handleBalanceUpdate}\n >\n <Icon\n name=\"ic_white_rotate_right\"\n width={metrics.height.spacingExtraSmall}\n height={metrics.height.spacingExtraSmall}\n />\n <Text size=\"xxs\" color=\"white\" lineHeight={FontSizes.fontXS}>\n 残高更新\n </Text>\n </TouchableOpacity>\n <TouchableOpacity\n style={styles.balanceContainer}\n activeOpacity={ACTIVE_OPACITY}\n onPress={handleToggleHideBalance}\n >\n {hideBalance ? (\n <Text\n size=\"medium\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n ****\n </Text>\n ) : (\n <>\n <Text\n size=\"medium\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n ¥\n </Text>\n <Text\n size=\"xl\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n {formatNumber(balance)}円\n </Text>\n <Text\n size=\"medium\"\n color=\"primary\"\n fontWeight=\"700\"\n lineHeight={pf(30)}\n >\n -\n </Text>\n </>\n )}\n <Icon\n name={hideBalance ? 'ic_eye_off' : 'ic_eye'}\n width={metrics.iconSmall}\n height={metrics.iconSmall}\n tintColor={colors.neutral['80']}\n />\n </TouchableOpacity>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignItems: 'center',\n gap: metrics.height.spacingTiny,\n },\n balanceButton: {\n flexDirection: 'row',\n backgroundColor: colors.neutral['60'],\n paddingVertical: metrics.height.spacingNano,\n paddingHorizontal: metrics.width.spacingExtraSmall,\n borderRadius: metrics.borderRadiusMassive,\n gap: metrics.width.spacingNano,\n alignItems: 'center',\n },\n buttonDisabled: {\n opacity: 0.5,\n },\n balanceContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: metrics.width.spacingTiny,\n },\n});\n"],"names":["pf"],"mappings":";;;;;;;;;;;;;;;AAwBa,MAAA,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,OAAO,GAAG,GAAG,EACb,KAAK,GAAG,GAAG,EACX,eAAe,GAAG,IAAI,EACtB,KAAK,EACL,OAAO,GACR,KAAI;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE9D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,OAAsC;QAC1C,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,GAAG,UAAU,CAAC,MAAK;gBACxB,WAAW,CAAC,KAAK,CAAC;aACnB,EAAE,eAAe,CAAC;;AAErB,QAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;AACpC,KAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAE/B,IAAA,MAAM,mBAAmB,GAAG,QAAQ,CAAC,MAAK;QACxC,WAAW,CAAC,IAAI,CAAC;AACjB,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,EAAI;KACZ,EAAE,KAAK,CAAC;AAET,IAAA,MAAM,uBAAuB,GAAG,MAAM,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;AAErE,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,EAAA;QACnC,QAAQ,KACP,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAEA,cAAE,CAAC,EAAE,CAAC,EAChD,EAAA,yBAAyB,CAAC,QAAQ,CAAC,CAC/B,CACR;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,KAAK,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,IAAI,MAAM,CAAC,cAAc,CAAC,EAChE,QAAQ,EAAE,CAAC,OAAO,IAAI,QAAQ,EAC9B,aAAa,EAAE,cAAc,EAC7B,OAAO,EAAE,mBAAmB,EAAA;YAE5B,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EACvC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EACxC,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,UAAU,EAAE,SAAS,CAAC,MAAM,+BAEpD,CACU;AACnB,QAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAC9B,aAAa,EAAE,cAAc,EAC7B,OAAO,EAAE,uBAAuB,EAAA;AAE/B,YAAA,WAAW,IACV,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,KAAK,EAChB,UAAU,EAAEA,cAAE,CAAC,EAAE,CAAC,EAGb,EAAA,MAAA,CAAA,KAEP,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;gBACE,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,KAAK,EAChB,UAAU,EAAEA,cAAE,CAAC,EAAE,CAAC,EAGb,EAAA,QAAA,CAAA;AACP,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,KAAK,EAChB,UAAU,EAAEA,cAAE,CAAC,EAAE,CAAC,EAAA;oBAEjB,YAAY,CAAC,OAAO,CAAC;AACjB,oBAAA,QAAA,CAAA;gBACP,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,KAAK,EAChB,UAAU,EAAEA,cAAE,CAAC,EAAE,CAAC,EAGb,EAAA,GAAA,CAAA,CACN,CACJ;AACD,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,IAAI,EAAE,WAAW,GAAG,YAAY,GAAG,QAAQ,EAC3C,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,MAAM,EAAE,OAAO,CAAC,SAAS,EACzB,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAC/B,CACe,CACd;AAEX;AAEA,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;AAC/B,IAAA,SAAS,EAAE;AACT,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW;AAChC,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;AACrC,QAAA,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW;AAC3C,QAAA,iBAAiB,EAAE,OAAO,CAAC,KAAK,CAAC,iBAAiB;QAClD,YAAY,EAAE,OAAO,CAAC,mBAAmB;AACzC,QAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;AAC9B,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,OAAO,EAAE,GAAG;AACb,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;AAC/B,KAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -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,
|
|
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,CA+C9D,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
2
|
+
import { StyleSheet, TouchableOpacity, View, ActivityIndicator } from 'react-native';
|
|
3
3
|
import { EPaymentCardTypes } from '../../constants/enum.js';
|
|
4
4
|
import { paymentCardDataByTypes } from '../../constants/const.js';
|
|
5
5
|
import '../Toasts/Toast.js';
|
|
@@ -32,17 +32,18 @@ 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, }) => {
|
|
36
|
-
// console.log('disabled', disabled);
|
|
35
|
+
const PaymentMethodCard = ({ photo, type = EPaymentCardTypes.DIRECT, style, hideShadow = false, disabled = false, onPress, loadingColor = colors.neutral['80'], loading, }) => {
|
|
37
36
|
const data = paymentCardDataByTypes[type];
|
|
38
37
|
return (React__default.createElement(TouchableOpacity, { style: [
|
|
39
38
|
styles.container,
|
|
40
39
|
style,
|
|
41
40
|
!hideShadow && styles.shadow,
|
|
42
|
-
disabled && styles.disabled,
|
|
41
|
+
(disabled || loading) && styles.disabled,
|
|
43
42
|
], activeOpacity: ACTIVE_OPACITY, disabled: disabled || !onPress, onPress: onPress },
|
|
44
43
|
React__default.createElement(View, { style: [styles.bannerContainer, styles.banner] },
|
|
45
|
-
React__default.createElement(Image, { uri: photo, resizeMode: "cover", width: deviceWidth() * 0.3, height: responsiveHeight(70), style: styles.banner })
|
|
44
|
+
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
47
|
React__default.createElement(View, { style: styles.content },
|
|
47
48
|
React__default.createElement(Icon, { name: data.icon, width: metrics.iconMediumPlus, height: metrics.iconMediumPlus, tintColor: colors.neutral['80'] }),
|
|
48
49
|
React__default.createElement(Text, { size: "medium", color: "tertiary", lineHeight: FontSizes.fontXL }, data.label))));
|
|
@@ -85,6 +86,13 @@ const styles = StyleSheet.create({
|
|
|
85
86
|
alignItems: 'center',
|
|
86
87
|
gap: metrics.width.spacingExtraSmall,
|
|
87
88
|
},
|
|
89
|
+
loadingContainer: {
|
|
90
|
+
position: 'absolute',
|
|
91
|
+
justifyContent: 'center',
|
|
92
|
+
alignItems: 'center',
|
|
93
|
+
width: '100%',
|
|
94
|
+
height: '100%',
|
|
95
|
+
},
|
|
88
96
|
});
|
|
89
97
|
|
|
90
98
|
export { PaymentMethodCard };
|
|
@@ -1 +1 @@
|
|
|
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} 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}\n\nexport const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({\n photo,\n type = EPaymentCardTypes.DIRECT,\n style,\n hideShadow = false,\n disabled = false,\n onPress,\n}) => {\n
|
|
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 || loading) && styles.disabled,\n ]}\n activeOpacity={ACTIVE_OPACITY}\n disabled={disabled || !onPress}\n onPress={onPress}>\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 <View style={styles.loadingContainer}>\n <ActivityIndicator size=\"large\" color={loadingColor} />\n </View>\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});"],"names":["React","ph"],"mappings":"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"}
|