@meatech/payblend_app_ui_component 1.1.26 → 1.1.28
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/.trunk/trunk.yaml
CHANGED
|
@@ -77,6 +77,7 @@ const Header: React.FC<CustomHeaderProps> = ({
|
|
|
77
77
|
onLeftPress,
|
|
78
78
|
onClose,
|
|
79
79
|
webBackground,
|
|
80
|
+
isShowControllButton = false,
|
|
80
81
|
}) => {
|
|
81
82
|
const headerRef = useAnimatedRef<View>();
|
|
82
83
|
const opacity = useSharedValue(0);
|
|
@@ -112,7 +113,7 @@ const Header: React.FC<CustomHeaderProps> = ({
|
|
|
112
113
|
<>
|
|
113
114
|
{Platform.OS === "web" ? (
|
|
114
115
|
<View>
|
|
115
|
-
<View style={[style, styles.headerContainer, { backgroundColor: webBackground }]}>
|
|
116
|
+
{/* <View style={[style, styles.headerContainer, { backgroundColor: webBackground }]}>
|
|
116
117
|
{isShowLeftIcon && (
|
|
117
118
|
<Icon
|
|
118
119
|
tintColor={textColors}
|
|
@@ -131,7 +132,7 @@ const Header: React.FC<CustomHeaderProps> = ({
|
|
|
131
132
|
{children || ""}
|
|
132
133
|
</Text>
|
|
133
134
|
<View />
|
|
134
|
-
</View>
|
|
135
|
+
</View> */}
|
|
135
136
|
{subScreenName && (
|
|
136
137
|
<View style={styles.headerScreenNameContainer}>
|
|
137
138
|
<View style={styles.headerScreenNameTextWrapper}>
|
|
@@ -140,7 +141,7 @@ const Header: React.FC<CustomHeaderProps> = ({
|
|
|
140
141
|
</Text>
|
|
141
142
|
</View>
|
|
142
143
|
|
|
143
|
-
|
|
144
|
+
{isShowControllButton && (<View style={styles.headerScreenNameRightBoxContainer}>
|
|
144
145
|
<Icon
|
|
145
146
|
name="ic_back"
|
|
146
147
|
tintColor={colors.neutral[90]}
|
|
@@ -151,7 +152,7 @@ const Header: React.FC<CustomHeaderProps> = ({
|
|
|
151
152
|
tintColor={colors.neutral[90]}
|
|
152
153
|
onPress={handleRightClick}
|
|
153
154
|
/>
|
|
154
|
-
</View>
|
|
155
|
+
</View>)}
|
|
155
156
|
</View>
|
|
156
157
|
)}
|
|
157
158
|
</View>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAwD3C,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAwD3C,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6JvC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -8,7 +8,7 @@ import { styles } from './styles.js';
|
|
|
8
8
|
import '../../themes/base/styles.js';
|
|
9
9
|
import { colors } from '../../themes/colors.js';
|
|
10
10
|
import { Images } from '../../themes/images.js';
|
|
11
|
-
import
|
|
11
|
+
import '../../themes/metrics.js';
|
|
12
12
|
import '../../themes/stats.js';
|
|
13
13
|
|
|
14
14
|
const hamburgerBussinessServicesList = [
|
|
@@ -59,7 +59,7 @@ const hamburgerWalletList = [
|
|
|
59
59
|
title: "アカウント",
|
|
60
60
|
},
|
|
61
61
|
];
|
|
62
|
-
const Header = ({ style, screenName, subScreenName, isShowLeftIcon = true, textColors = colors.white[10], children, leftIcon = "ic_close", onRightPress, onLeftPress, onClose, webBackground, }) => {
|
|
62
|
+
const Header = ({ style, screenName, subScreenName, isShowLeftIcon = true, textColors = colors.white[10], children, leftIcon = "ic_close", onRightPress, onLeftPress, onClose, webBackground, isShowControllButton = false, }) => {
|
|
63
63
|
const headerRef = useAnimatedRef();
|
|
64
64
|
const opacity = useSharedValue(0);
|
|
65
65
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -86,18 +86,12 @@ const Header = ({ style, screenName, subScreenName, isShowLeftIcon = true, textC
|
|
|
86
86
|
onLeftPress();
|
|
87
87
|
}
|
|
88
88
|
};
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
React.createElement(
|
|
94
|
-
React.createElement(
|
|
95
|
-
subScreenName && (React.createElement(View, { style: styles.headerScreenNameContainer },
|
|
96
|
-
React.createElement(View, { style: styles.headerScreenNameTextWrapper },
|
|
97
|
-
React.createElement(Text, { size: "medium", fontWeight: "700" }, subScreenName)),
|
|
98
|
-
React.createElement(View, { style: styles.headerScreenNameRightBoxContainer },
|
|
99
|
-
React.createElement(Icon, { name: "ic_back", tintColor: colors.neutral[90], onPress: handleLeftClick }),
|
|
100
|
-
React.createElement(Icon, { name: "ic_chevron_right", tintColor: colors.neutral[90], onPress: handleRightClick })))))) : (React.createElement(View, null,
|
|
89
|
+
return (React.createElement(React.Fragment, null, Platform.OS === "web" ? (React.createElement(View, null, subScreenName && (React.createElement(View, { style: styles.headerScreenNameContainer },
|
|
90
|
+
React.createElement(View, { style: styles.headerScreenNameTextWrapper },
|
|
91
|
+
React.createElement(Text, { size: "medium", fontWeight: "700" }, subScreenName)),
|
|
92
|
+
isShowControllButton && (React.createElement(View, { style: styles.headerScreenNameRightBoxContainer },
|
|
93
|
+
React.createElement(Icon, { name: "ic_back", tintColor: colors.neutral[90], onPress: handleLeftClick }),
|
|
94
|
+
React.createElement(Icon, { name: "ic_chevron_right", tintColor: colors.neutral[90], onPress: handleRightClick }))))))) : (React.createElement(View, null,
|
|
101
95
|
React.createElement(Animated.View, { ref: headerRef, style: styles.shadowWrapper },
|
|
102
96
|
React.createElement(View, { style: [style, styles.headerUpperContentWrapper] },
|
|
103
97
|
React.createElement(Pressable, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../components/Header/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport { View, Image, Pressable, TextStyle, Platform } from \"react-native\";\nimport Animated, {\n Easing,\n measure,\n useAnimatedRef,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\nimport { CustomHeaderProps } from \"./type\";\nimport Text from \"../Text\";\nimport { Icon } from \"../Icons\";\nimport { styles } from \"./styles\";\nimport { colors, Images, ph, pw } from \"@ui/themes\";\n\nconst hamburgerBussinessServicesList = [\n {\n id: 1,\n title: \"Home\",\n },\n {\n id: 2,\n title: \"試合情報\",\n },\n {\n id: 3,\n title: \"選手紹介\",\n },\n {\n id: 4,\n title: \"****\",\n },\n {\n id: 5,\n title: \"******\",\n },\n {\n id: 6,\n title: \"****\",\n },\n];\n\nconst hamburgerWalletList = [\n {\n id: 1,\n title: \"口座一覧\",\n },\n {\n id: 2,\n title: \"Visaプリペイド\",\n },\n {\n id: 3,\n title: \"***Pay\",\n },\n {\n id: 4,\n title: \"ファンDX\",\n },\n {\n id: 5,\n title: \"アカウント\",\n },\n];\n\nconst Header: React.FC<CustomHeaderProps> = ({\n style,\n screenName,\n subScreenName,\n isShowLeftIcon = true,\n textColors = colors.white[10],\n children,\n leftIcon = \"ic_close\",\n onRightPress,\n onLeftPress,\n onClose,\n webBackground,\n}) => {\n const headerRef = useAnimatedRef<View>();\n const opacity = useSharedValue(0);\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleDropdown = () => {\n setIsOpen(!isOpen);\n opacity.value = withTiming(isOpen ? 0 : 1, {\n duration: 300,\n easing: Easing.out(Easing.quad),\n });\n };\n\n const animatedStyle = useAnimatedStyle(() => {\n const layout = measure(headerRef);\n return {\n pointerEvents: opacity.value === 0 ? \"none\" : \"auto\",\n opacity: opacity.value,\n top: layout?.height,\n };\n });\n\n const handleRightClick = () => {\n onRightPress && onRightPress();\n };\n const handleLeftClick = () => {\n if (onLeftPress) {\n onLeftPress();\n }\n };\n const colorStyle: TextStyle = textColors ? { color: textColors } : {};\n return (\n <>\n {Platform.OS === \"web\" ? (\n <View>\n <View style={[style, styles.headerContainer, { backgroundColor: webBackground }]}>\n {isShowLeftIcon && (\n <Icon\n tintColor={textColors}\n width={pw(24)}\n height={ph(24)}\n name={leftIcon}\n onPress={onClose}\n />\n )}\n <Text\n style={colorStyle}\n size=\"medium\"\n fontFamily={\"Inter\"}\n fontWeight=\"700\"\n >\n {children || \"\"}\n </Text>\n <View />\n </View>\n {subScreenName && (\n <View style={styles.headerScreenNameContainer}>\n <View style={styles.headerScreenNameTextWrapper}>\n <Text size=\"medium\" fontWeight=\"700\">\n {subScreenName}\n </Text>\n </View>\n\n <View style={styles.headerScreenNameRightBoxContainer}>\n <Icon\n name=\"ic_back\"\n tintColor={colors.neutral[90]}\n onPress={handleLeftClick}\n />\n <Icon\n name=\"ic_chevron_right\"\n tintColor={colors.neutral[90]}\n onPress={handleRightClick}\n />\n </View>\n </View>\n )}\n </View>\n ) : (\n <View>\n <Animated.View ref={headerRef} style={styles.shadowWrapper}>\n <View style={[style, styles.headerUpperContentWrapper]}>\n <Pressable>\n <Image source={Images.payblend_logo} />\n </Pressable>\n <Pressable onPress={toggleDropdown} style={styles.rightBox}>\n <View style={styles.line} />\n <View style={styles.line} />\n <View style={styles.line} />\n </Pressable>\n </View>\n </Animated.View>\n <Animated.View style={[styles.dropdown, animatedStyle]}>\n <View style={styles.dropdownContentWrapper}>\n <View style={styles.dropdownTitleNameContainer}>\n <Text size=\"medium\" fontWeight=\"700\" color={\"white\"}>\n 事業者のサービス\n </Text>\n </View>\n {hamburgerBussinessServicesList.map((item) => (\n <Pressable\n key={item.id}\n style={styles.dropdownMenuNameContainer}\n >\n <Text size=\"medium\" fontWeight=\"400\" color={\"white\"}>\n {item.title}\n </Text>\n </Pressable>\n ))}\n <View style={styles.dropdownTitleNameContainer}>\n <Text size=\"medium\" fontWeight=\"700\" color={\"white\"}>\n Wallet\n </Text>\n </View>\n {hamburgerWalletList.map((item) => (\n <Pressable\n key={item.id}\n style={styles.dropdownMenuNameContainer}\n >\n <Text size=\"medium\" fontWeight=\"400\" color={\"white\"}>\n {item.title}\n </Text>\n </Pressable>\n ))}\n </View>\n </Animated.View>\n {screenName && (\n <View style={styles.headerScreenNameContainer}>\n <View style={styles.headerScreenNameTextWrapper}>\n <Text size=\"medium\" fontWeight=\"700\">\n {screenName}\n </Text>\n </View>\n\n <View style={styles.headerScreenNameRightBoxContainer}>\n <Icon name=\"ic_back\" onPress={handleLeftClick} />\n <Icon name=\"ic_chevron_right\" onPress={handleRightClick} />\n </View>\n </View>\n )}\n </View>\n )}\n </>\n );\n};\n\nexport default Header;\n"],"names":["pw","ph"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../components/Header/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport { View, Image, Pressable, TextStyle, Platform } from \"react-native\";\nimport Animated, {\n Easing,\n measure,\n useAnimatedRef,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\nimport { CustomHeaderProps } from \"./type\";\nimport Text from \"../Text\";\nimport { Icon } from \"../Icons\";\nimport { styles } from \"./styles\";\nimport { colors, Images, ph, pw } from \"@ui/themes\";\n\nconst hamburgerBussinessServicesList = [\n {\n id: 1,\n title: \"Home\",\n },\n {\n id: 2,\n title: \"試合情報\",\n },\n {\n id: 3,\n title: \"選手紹介\",\n },\n {\n id: 4,\n title: \"****\",\n },\n {\n id: 5,\n title: \"******\",\n },\n {\n id: 6,\n title: \"****\",\n },\n];\n\nconst hamburgerWalletList = [\n {\n id: 1,\n title: \"口座一覧\",\n },\n {\n id: 2,\n title: \"Visaプリペイド\",\n },\n {\n id: 3,\n title: \"***Pay\",\n },\n {\n id: 4,\n title: \"ファンDX\",\n },\n {\n id: 5,\n title: \"アカウント\",\n },\n];\n\nconst Header: React.FC<CustomHeaderProps> = ({\n style,\n screenName,\n subScreenName,\n isShowLeftIcon = true,\n textColors = colors.white[10],\n children,\n leftIcon = \"ic_close\",\n onRightPress,\n onLeftPress,\n onClose,\n webBackground,\n isShowControllButton = false,\n}) => {\n const headerRef = useAnimatedRef<View>();\n const opacity = useSharedValue(0);\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleDropdown = () => {\n setIsOpen(!isOpen);\n opacity.value = withTiming(isOpen ? 0 : 1, {\n duration: 300,\n easing: Easing.out(Easing.quad),\n });\n };\n\n const animatedStyle = useAnimatedStyle(() => {\n const layout = measure(headerRef);\n return {\n pointerEvents: opacity.value === 0 ? \"none\" : \"auto\",\n opacity: opacity.value,\n top: layout?.height,\n };\n });\n\n const handleRightClick = () => {\n onRightPress && onRightPress();\n };\n const handleLeftClick = () => {\n if (onLeftPress) {\n onLeftPress();\n }\n };\n const colorStyle: TextStyle = textColors ? { color: textColors } : {};\n return (\n <>\n {Platform.OS === \"web\" ? (\n <View>\n {/* <View style={[style, styles.headerContainer, { backgroundColor: webBackground }]}>\n {isShowLeftIcon && (\n <Icon\n tintColor={textColors}\n width={pw(24)}\n height={ph(24)}\n name={leftIcon}\n onPress={onClose}\n />\n )}\n <Text\n style={colorStyle}\n size=\"medium\"\n fontFamily={\"Inter\"}\n fontWeight=\"700\"\n >\n {children || \"\"}\n </Text>\n <View />\n </View> */}\n {subScreenName && (\n <View style={styles.headerScreenNameContainer}>\n <View style={styles.headerScreenNameTextWrapper}>\n <Text size=\"medium\" fontWeight=\"700\">\n {subScreenName}\n </Text>\n </View>\n\n {isShowControllButton && (<View style={styles.headerScreenNameRightBoxContainer}>\n <Icon\n name=\"ic_back\"\n tintColor={colors.neutral[90]}\n onPress={handleLeftClick}\n />\n <Icon\n name=\"ic_chevron_right\"\n tintColor={colors.neutral[90]}\n onPress={handleRightClick}\n />\n </View>)}\n </View>\n )}\n </View>\n ) : (\n <View>\n <Animated.View ref={headerRef} style={styles.shadowWrapper}>\n <View style={[style, styles.headerUpperContentWrapper]}>\n <Pressable>\n <Image source={Images.payblend_logo} />\n </Pressable>\n <Pressable onPress={toggleDropdown} style={styles.rightBox}>\n <View style={styles.line} />\n <View style={styles.line} />\n <View style={styles.line} />\n </Pressable>\n </View>\n </Animated.View>\n <Animated.View style={[styles.dropdown, animatedStyle]}>\n <View style={styles.dropdownContentWrapper}>\n <View style={styles.dropdownTitleNameContainer}>\n <Text size=\"medium\" fontWeight=\"700\" color={\"white\"}>\n 事業者のサービス\n </Text>\n </View>\n {hamburgerBussinessServicesList.map((item) => (\n <Pressable\n key={item.id}\n style={styles.dropdownMenuNameContainer}\n >\n <Text size=\"medium\" fontWeight=\"400\" color={\"white\"}>\n {item.title}\n </Text>\n </Pressable>\n ))}\n <View style={styles.dropdownTitleNameContainer}>\n <Text size=\"medium\" fontWeight=\"700\" color={\"white\"}>\n Wallet\n </Text>\n </View>\n {hamburgerWalletList.map((item) => (\n <Pressable\n key={item.id}\n style={styles.dropdownMenuNameContainer}\n >\n <Text size=\"medium\" fontWeight=\"400\" color={\"white\"}>\n {item.title}\n </Text>\n </Pressable>\n ))}\n </View>\n </Animated.View>\n {screenName && (\n <View style={styles.headerScreenNameContainer}>\n <View style={styles.headerScreenNameTextWrapper}>\n <Text size=\"medium\" fontWeight=\"700\">\n {screenName}\n </Text>\n </View>\n\n <View style={styles.headerScreenNameRightBoxContainer}>\n <Icon name=\"ic_back\" onPress={handleLeftClick} />\n <Icon name=\"ic_chevron_right\" onPress={handleRightClick} />\n </View>\n </View>\n )}\n </View>\n )}\n </>\n );\n};\n\nexport default Header;\n"],"names":[],"mappings":"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"}
|