feat(screen): 💄 Profile components + rn-sm

#99

screens/Profile/components/atoms/Circles.tsx

@@ -1,19 +1,29 @@
-import { View } from "react-native"
+import { useMemo } from "react"
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native"
+import { useLayout } from "@react-native-community/hooks"
 import { hexAlpha } from "utils"
 
 type Props = {
 	children: React.ReactNode
+	style?: StyleProp<ViewStyle>
 }
 
-export default ({ children }: Props) => (
-	<Circle size={300} opacity={0.1}>
-		<Circle size={200} opacity={0.3}>
-			<Circle size={150} opacity={0.5}>
-				{children}
+export default ({ children, style }: Props) => {
+	const { onLayout, height, width } = useLayout()
+	const size = useMemo(() => (width > height ? height : width), [width, height])
+
+	return (
+		<View style={[styles.container, style]} onLayout={onLayout}>
+			<Circle size={size} opacity={0.1}>
+				<Circle size={(size * 2) / 3} opacity={0.3}>
+					<Circle size={size / 2} opacity={0.5}>
+						{children}
+					</Circle>
+				</Circle>
 			</Circle>
-		</Circle>
-	</Circle>
-)
+		</View>
+	)
+}
 
 type CircleProps = {
 	children: React.ReactNode
@@ -31,7 +41,14 @@ const Circle = ({ children, size, opacity = 1 }: CircleProps) => (
 			alignItems: "center",
 			justifyContent: "center",
 		}}
-	>
-		{children}
-	</View>
+		children={children}
+	/>
 )
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+})

screens/Profile/components/atoms/SwipeActions.tsx

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, View, ViewStyle } from "react-native"
 import { RectButton } from "react-native-gesture-handler"
 import { Button, Icon2 } from "components/atoms"
 import { COLOR, hexAlpha } from "utils"
-import { ProfileWallets } from "stores/WalletStore"
+import { s } from "react-native-size-matters"
 
 type Props = {
 	item: any
@@ -32,17 +32,17 @@ export default memo(({ onPressEdit, onPressTrash, item, style, edited = true }:
 
 const styles = StyleSheet.create({
 	container: {
-		width: 100,
+		width: s(100),
 		flexDirection: "row",
 		alignItems: "center",
 	},
 
 	button: {
-		marginRight: 15,
+		marginRight: s(15),
 	},
 	buttonContent: {
 		backgroundColor: hexAlpha(COLOR.Lavender, 10),
-		paddingHorizontal: 14,
-		paddingVertical: 8,
+		paddingHorizontal: s(14),
+		paddingVertical: s(8),
 	},
 })

screens/Profile/components/moleculs/ContactItem.tsx

@@ -1,19 +1,21 @@
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
 import { Image, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native"
 import { RectButton, Swipeable } from "react-native-gesture-handler"
 import { COLOR, hexAlpha } from "utils"
 import { SwipeActions } from "../atoms"
 import { Icon2 } from "components/atoms"
 import { Contact } from "stores/ContactsStore"
+import { s } from "react-native-size-matters"
 
 type Props = {
 	value: Contact
-	onPress(person: Contact): void
+	onPress?(person: Contact): void
 	onPressStar(person: Contact): void
 	onPressEdit?(person: Contact): void
 	onPressDelete(person: Contact): void
 	mapItemsRef: Map<Contact, React.RefObject<Swipeable>>
 	style?: StyleProp<ViewStyle>
+	wrapper?: number
 }
 
 export default ({
@@ -24,11 +26,9 @@ export default ({
 	onPressStar,
 	mapItemsRef,
 	style,
+	wrapper,
 }: Props) => {
-	const handlePress = useCallback(() => onPress(value), [onPress, value])
-	// const { name, metadata } = value.data;
-
-	// const iconName: IconName = metadata.type === "one" ? "wallet" : "eye";
+	const handlePress = useCallback(() => onPress && onPress(value), [onPress, value])
 
 	const ref = useRef<Swipeable>(null)
 
@@ -41,12 +41,15 @@ export default ({
 		[value, mapItemsRef],
 	)
 
+	const wrapperStyle = useMemo<ViewStyle>(() => ({ paddingHorizontal: wrapper || 26 }), [wrapper])
+	const actionStyle = useMemo<ViewStyle>(() => ({ marginRight: wrapper || 26 }), [wrapper])
+
 	const renderRightActions = () => (
 		<SwipeActions
 			item={value}
 			onPressEdit={onPressEdit}
 			onPressTrash={onPressDelete}
-			style={styles.actions}
+			style={actionStyle}
 		/>
 	)
 
@@ -56,7 +59,7 @@ export default ({
 			onSwipeableRightWillOpen={closeOther}
 			renderRightActions={renderRightActions}
 		>
-			<View style={styles.wrapper}>
+			<View style={wrapperStyle}>
 				<RectButton onPress={handlePress} style={styles.buttonContainer}>
 					<View style={[styles.container, style]}>
 						<Image source={{ uri: value.avatar }} style={styles.avatar} />
@@ -82,57 +85,52 @@ export default ({
 const styles = StyleSheet.create({
 	container: {
 		overflow: "hidden",
-		borderRadius: 22,
 		backgroundColor: hexAlpha(COLOR.Lavender, 16),
-		paddingVertical: 22,
-		paddingHorizontal: 24,
+		borderRadius: s(22),
+		paddingVertical: s(22),
+		paddingHorizontal: s(24),
 
 		flexDirection: "row",
 	},
 	active: {
-		padding: 2,
-		borderRadius: 20,
+		padding: s(2),
+		borderRadius: s(20),
 		justifyContent: "center",
 	},
 
 	avatar: {
-		width: 32,
-		height: 32,
-		borderRadius: 32,
+		width: s(32),
+		height: s(32),
+		borderRadius: s(32),
 
-		marginRight: 16,
+		marginRight: s(16),
 	},
 
 	name: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 		color: COLOR.White,
 	},
 	wallet: {
 		//
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 12,
-		lineHeight: 15,
+		fontSize: s(12),
+		lineHeight: s(15),
 		color: hexAlpha(COLOR.White, 60),
 	},
 
 	buttonContainer: {
-		borderRadius: 22,
+		borderRadius: s(22),
 	},
 	buttonStar: {
-		borderRadius: 22,
+		borderRadius: s(22),
 		alignItems: "center",
 		justifyContent: "center",
-		padding: 5,
-	},
-
-	actions: { marginRight: 26 },
-	wrapper: {
-		paddingHorizontal: 26,
+		padding: s(5),
 	},
 })