Merge pull request #945 from chainapsis/retto/KM-107

[KM-107] 커스텀 헤더 -> 일반 헤더로 교체 작업
chainapsis · Dec 8, 2023 · 308ada3 · 308ada3
2 parents 5aca3ce + 471793f
commit 308ada3
Show file tree

Hide file tree

Showing 13 changed files with 305 additions and 192 deletions.
diff --git a/packages/mobile/src/components/pageHeader/header-register.tsx b/packages/mobile/src/components/pageHeader/header-register.tsx
@@ -1,43 +1,69 @@
-import React, {FunctionComponent} from 'react';
-import {useStyle} from '../../styles';
-import {StatusBar, Pressable, Text, SafeAreaView} from 'react-native';
+import React, {
+  FunctionComponent,
+  PropsWithChildren,
+  useLayoutEffect,
+} from 'react';
+import {ColorPalette, useStyle} from '../../styles';
+import {Pressable, Text} from 'react-native';
 import {Gutter} from '../gutter';
 import {HeaderBackButtonIcon} from './icon/back';
-import {useNavigation} from '@react-navigation/native';
+import {RouteProp, useNavigation, useRoute} from '@react-navigation/native';
 import {Box} from '../box';
 
-export const RegisterHeader: FunctionComponent<{
-  title: string;
-  paragraph?: string;
-  hideBackButton?: boolean;
-}> = ({title, paragraph, hideBackButton}) => {
+export const RegisterHeaderTitle: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   const style = useStyle();
-  const statusBarHeight = StatusBar.currentHeight;
+  const route = useRoute<
+    RouteProp<
+      Record<
+        string,
+        {
+          paragraph?: string;
+          hideBackButton?: boolean;
+        }
+      >,
+      string
+    >
+  >();
+  const navigation = useNavigation();
+  const paragraph = route.params?.paragraph;
+  const hideBackButton = route.params?.hideBackButton;
 
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: hideBackButton ? null : () => <HeaderBackButton />,
+    });
+  }, [hideBackButton, navigation]);
   return (
-    <SafeAreaView>
-      <Box
-        alignX="center"
-        alignY="center"
-        marginTop={statusBarHeight}
-        paddingY={18}>
-        <Text style={style.flatten(['h3', 'color-text-high'])}>{title}</Text>
-
-        {paragraph ? (
-          <React.Fragment>
-            <Gutter size={4} />
-
-            <Text style={style.flatten(['body2', 'color-text-low'])}>
-              {paragraph}
-            </Text>
-          </React.Fragment>
-        ) : null}
-
-        {hideBackButton ? null : <HeaderBackButton />}
-      </Box>
-    </SafeAreaView>
+    <Box
+      alignX="center"
+      alignY="center"
+      //NOTE 240을 준 이유는 왼쪽에 아이콘이 생길 경우 자체적인 header 길이가 제목을 짜를때가 있음
+      //해서 그냥 find 튜닝으로 안짤리는 최소 값을 지정함
+      minWidth={240}
+      marginBottom={paragraph ? 2 : 0}>
+      <Text style={style.flatten(['h3', 'color-text-high'])}>{children}</Text>
+      {paragraph ? (
+        <React.Fragment>
+          <Gutter size={4} />
+          <Text style={style.flatten(['body2', 'color-text-low'])}>
+            {paragraph}
+          </Text>
+        </React.Fragment>
+      ) : null}
+    </Box>
   );
 };
+export const registerHeaderTitleFunc = () => <RegisterHeaderTitle />;
+export const registerHeaderOptions = {
+  headerTitle: RegisterHeaderTitle,
+  headerTitleAlign: 'center' as 'center' | 'left',
+  headerStyle: {
+    backgroundColor: ColorPalette['gray-700'],
+  },
+  headerShadowVisible: false,
+};
 
 export const HeaderBackButton: FunctionComponent = () => {
   const style = useStyle();

diff --git a/packages/mobile/src/components/pageHeader/header.tsx b/packages/mobile/src/components/pageHeader/header.tsx
@@ -9,10 +9,8 @@ import {Pressable, StyleSheet, Text} from 'react-native';
 import {MenuIcon, QRScanIcon} from '../icon';
 import {observer} from 'mobx-react-lite';
 import {useStore} from '../../stores';
-import {Box} from '../box';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {HeaderBackButtonIcon} from './icon/back';
-import {Column, Columns} from '../column';
+import {Columns} from '../column';
 import {ArrowDownFillIcon} from '../icon/arrow-donw-fill';
 import {StackNavProp} from '../../navigation';
 
@@ -26,7 +24,7 @@ const HomeScreenHeaderLeft: FunctionComponent = () => {
       onPress={() => {
         navigation.dispatch(DrawerActions.toggleDrawer());
       }}
-      style={style.flatten(['margin-y-14'])}>
+      style={style.flatten(['margin-left-20'])}>
       <MenuIcon size={28} color={style.flatten(['color-gray-10']).color} />
     </Pressable>
   );
@@ -42,85 +40,72 @@ const HomeScreenHeaderRight: FunctionComponent = () => {
       onPress={() => {
         navigation.navigate('Camera');
       }}
-      style={style.flatten(['margin-y-14'])}>
+      style={style.flatten(['margin-right-20'])}>
       <QRScanIcon size={28} color={style.flatten(['color-gray-10']).color} />
     </Pressable>
   );
 };
 
-export const HomeScreenHeader = observer(() => {
+export const HomeScreenHeaderTitle = observer(() => {
   const {keyRingStore} = useStore();
   const style = useStyle();
-  const insect = useSafeAreaInsets();
   const navigation = useNavigation();
   const [isPress, setInsPress] = useState(false);
 
   return (
-    <Box
-      alignY="center"
-      style={StyleSheet.flatten([
-        style.flatten(['padding-x-20', 'background-color-gray-700']),
-        {
-          paddingTop: insect.top,
-        },
-      ])}>
-      <Box style={StyleSheet.flatten([style.flatten(['width-full'])])}>
-        <Columns sum={2}>
-          <HomeScreenHeaderLeft />
-          <Column weight={1} />
-          <Pressable
-            onPressIn={() => setInsPress(true)}
-            onPressOut={() => setInsPress(false)}
-            onPress={() => {
-              navigation.dispatch(StackActions.push('SelectWallet'));
-            }}
-            style={style.flatten(
-              ['border-radius-6', 'padding-x-16', 'margin-y-4', 'padding-y-14'],
-              [isPress && 'background-color-gray-600'],
-            )}>
-            <Columns sum={1} alignY="center" gutter={6}>
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={StyleSheet.flatten([
-                  style.flatten([
-                    'color-white',
-                    'h4',
-                    'max-width-160',
-                    'overflow-scroll',
-                    'text-center',
-                  ]),
-                ])}>
-                {keyRingStore.selectedKeyInfo?.name || 'Keplr Account'}
-              </Text>
-              <ArrowDownFillIcon
-                size={20}
-                color={style.get('color-gray-400').color}
-              />
-            </Columns>
-          </Pressable>
-          <Column weight={1} />
-
-          <HomeScreenHeaderRight />
-        </Columns>
-      </Box>
-    </Box>
+    <Pressable
+      onPressIn={() => setInsPress(true)}
+      onPressOut={() => setInsPress(false)}
+      onPress={() => {
+        navigation.dispatch(StackActions.push('SelectWallet'));
+      }}
+      style={style.flatten(
+        ['border-radius-6', 'padding-x-16', 'padding-y-8'],
+        [isPress && 'background-color-gray-600'],
+      )}>
+      <Columns sum={1} alignY="center" gutter={6}>
+        <Text
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={StyleSheet.flatten([
+            style.flatten([
+              'color-white',
+              'h4',
+              'max-width-160',
+              'overflow-scroll',
+              'text-center',
+            ]),
+          ])}>
+          {keyRingStore.selectedKeyInfo?.name || 'Keplr Account'}
+        </Text>
+        <ArrowDownFillIcon
+          size={20}
+          color={style.get('color-gray-400').color}
+        />
+      </Columns>
+    </Pressable>
   );
 });
 
+export const homeHeaderOptions = {
+  headerTitleAlign: 'center' as 'center' | 'left',
+  headerBackVisible: false,
+  headerStyle: {
+    backgroundColor: ColorPalette['gray-700'],
+  },
+  headerShadowVisible: false,
+  headerLeft: () => <HomeScreenHeaderLeft />,
+  headerRight: () => <HomeScreenHeaderRight />,
+};
+
 const DefaultScreenHeaderTitle: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
   const style = useStyle();
   return (
     <Text
       style={StyleSheet.flatten([
-        style.flatten([
-          'h4',
-          'color-white',
-          'text-center',
-          'padding-bottom-18',
-        ]),
+        style.flatten(['h4', 'color-white', 'text-center']),
       ])}>
       {children}
     </Text>
@@ -139,9 +124,7 @@ const DefaultScreenHeaderLeft: FunctionComponent = () => {
               nav.goBack();
             }
           }}
-          style={StyleSheet.flatten([
-            style.flatten(['padding-bottom-18', 'padding-left-20']),
-          ])}>
+          style={StyleSheet.flatten([style.flatten(['padding-left-20'])])}>
           <HeaderBackButtonIcon
             size={28}
             color={style.get('color-gray-300').color}