Merge pull request #1401 from kaloudis/component-header

Components: Header
ZeusLN · Apr 3, 2023 · 6e24a2c · 6e24a2c
2 parents 20ced06 + 2759c95
commit 6e24a2c
Show file tree

Hide file tree

Showing 53 changed files with 606 additions and 1,131 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Header, Icon } from 'react-native-elements';
+import { themeColor } from '../utils/ThemeUtils';
+
+interface HeaderProps {
+    leftComponent?: 'Back' | 'Close' | JSX.Element;
+    centerComponent?: JSX.Element;
+    rightComponent?: JSX.Element;
+    containerStyle?: any;
+    placement?: 'left' | 'center' | 'right' | undefined;
+    navigation?: any;
+    onBack?: () => void;
+}
+
+function ZeusHeader(props: HeaderProps) {
+    const BackButton = (onBack?: () => void) => (
+        <Icon
+            name="arrow-back"
+            onPress={() => {
+                if (onBack) onBack();
+                props.navigation.goBack();
+            }}
+            color={themeColor('text')}
+            underlayColor="transparent"
+        />
+    );
+
+    const CloseButton = (onBack?: () => void) => (
+        <Icon
+            name="close"
+            onPress={() => {
+                if (onBack) onBack();
+                props.navigation.goBack();
+            }}
+            color={themeColor('text')}
+            underlayColor="transparent"
+        />
+    );
+
+    const {
+        leftComponent,
+        centerComponent,
+        rightComponent,
+        containerStyle,
+        placement,
+        onBack
+    } = props;
+    return (
+        <Header
+            leftComponent={
+                leftComponent === 'Back'
+                    ? BackButton(onBack)
+                    : leftComponent === 'Close'
+                    ? CloseButton(onBack)
+                    : leftComponent
+                    ? leftComponent
+                    : undefined
+            }
+            centerComponent={centerComponent ? centerComponent : undefined}
+            rightComponent={rightComponent ? rightComponent : undefined}
+            backgroundColor="transparent"
+            containerStyle={{
+                ...containerStyle,
+                borderBottomWidth: 0
+            }}
+            placement={placement}
+        />
+    );
+}
+
+export default ZeusHeader;
diff --git a/components/WalletHeader.tsx b/components/WalletHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge, Header } from 'react-native-elements';
+import { Badge } from 'react-native-elements';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { inject, observer } from 'mobx-react';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -10,6 +10,7 @@ import NodeInfoStore from '../stores/NodeInfoStore';
 import PosStore from '../stores/PosStore';
 
 import Button from '../components/Button';
+import Header from './Header';
 import LoadingIndicator from '../components/LoadingIndicator';
 import NodeIdenticon from '../components/NodeIdenticon';
 
@@ -342,10 +343,6 @@ export default class WalletHeader extends React.Component<
                         </View>
                     )
                 }
-                backgroundColor="transparent"
-                containerStyle={{
-                    borderBottomWidth: 0
-                }}
             />
         );
     }

diff --git a/views/Accounts/Accounts.tsx b/views/Accounts/Accounts.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
-import { Header, Icon } from 'react-native-elements';
+import { Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
-import Button from './../../components/Button';
-import LayerBalances from './../../components/LayerBalances';
-import LoadingIndicator from './../../components/LoadingIndicator';
-import Screen from './../../components/Screen';
+import Button from '../../components/Button';
+import Header from '../../components/Header';
+import LayerBalances from '../../components/LayerBalances';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import Screen from '../../components/Screen';
 
-import BalanceStore from './../../stores/BalanceStore';
-import UnitsStore from './../../stores/UnitsStore';
-import UTXOsStore from './../../stores/UTXOsStore';
-import SettingsStore from './../../stores/SettingsStore';
+import BalanceStore from '../../stores/BalanceStore';
+import UnitsStore from '../../stores/UnitsStore';
+import UTXOsStore from '../../stores/UTXOsStore';
+import SettingsStore from '../../stores/SettingsStore';
 
-import BackendUtils from './../../utils/BackendUtils';
-import { localeString } from './../../utils/LocaleUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import BackendUtils from '../../utils/BackendUtils';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
 interface AccountsProps {
     navigation: any;
@@ -83,19 +84,6 @@ export default class Accounts extends React.Component<
         const { value, amount, lightning } = this.state;
         const { loadingAccounts } = UTXOsStore;
 
-        const BackButton = () => (
-            <Icon
-                name="arrow-back"
-                onPress={() =>
-                    value
-                        ? navigation.goBack()
-                        : navigation.navigate('Settings', { refresh: true })
-                }
-                color={themeColor('text')}
-                underlayColor="transparent"
-            />
-        );
-
         const AddButton = () => (
             <Icon
                 name="add"
@@ -108,18 +96,15 @@ export default class Accounts extends React.Component<
         return (
             <Screen>
                 <Header
-                    leftComponent={<BackButton />}
+                    leftComponent="Back"
                     centerComponent={{
                         text: amount
                             ? localeString('views.Accounts.select')
                             : localeString('views.Accounts.title'),
                         style: { color: themeColor('text') }
                     }}
                     rightComponent={value ? null : <AddButton />}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
+                    navigation={navigation}
                 />
                 {loadingAccounts && <LoadingIndicator />}
                 {!loadingAccounts && (

diff --git a/views/Accounts/ImportAccount.tsx b/views/Accounts/ImportAccount.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import { Button, Header, Icon } from 'react-native-elements';
+import { Button } from 'react-native-elements';
 
-import TextInput from './../../components/TextInput';
-import { localeString } from './../../utils/LocaleUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import Header from '../../components/Header';
+import TextInput from '../../components/TextInput';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
 interface ImportAccountProps {
     exitSetup: any;
@@ -64,30 +65,20 @@ export default class ImportAccount extends React.Component<
             address_type
         } = this.state;
 
-        const BackButton = () => (
-            <Icon
-                name="arrow-back"
-                onPress={() => navigation.goBack()}
-                color={themeColor('text')}
-                underlayColor="transparent"
-            />
-        );
-
         return (
             <ScrollView
                 style={{
                     flex: 1,
-                    backgroundColor: themeColor('background'),
-                    color: themeColor('text')
+                    backgroundColor: themeColor('background')
                 }}
             >
                 <Header
-                    leftComponent={<BackButton />}
+                    leftComponent="Back"
                     centerComponent={{
                         text: localeString('views.ImportAccount.title'),
                         style: { color: themeColor('text') }
                     }}
-                    backgroundColor="grey"
+                    navigation={navigation}
                 />
                 <View style={styles.content}>
                     <Text

diff --git a/views/Activity/Activity.tsx b/views/Activity/Activity.tsx
@@ -6,10 +6,11 @@ import {
     TouchableOpacity,
     View
 } from 'react-native';
-import { Button, Header, Icon, ListItem } from 'react-native-elements';
+import { Button, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import Amount from '../../components/Amount';
+import Header from '../../components/Header';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import Screen from '../../components/Screen';
 
@@ -116,15 +117,6 @@ export default class Activity extends React.Component<ActivityProps, {}> {
         const { loading, filteredActivity, getActivityAndFilter } =
             ActivityStore;
 
-        const CloseButton = () => (
-            <Icon
-                name="arrow-back"
-                onPress={() => navigation.navigate('Wallet')}
-                color={themeColor('text')}
-                underlayColor="transparent"
-            />
-        );
-
         const FilterButton = () => (
             <TouchableOpacity
                 onPress={() => navigation.navigate('ActivityFilter')}
@@ -136,7 +128,7 @@ export default class Activity extends React.Component<ActivityProps, {}> {
         return (
             <Screen>
                 <Header
-                    leftComponent={<CloseButton />}
+                    leftComponent="Close"
                     centerComponent={{
                         text: localeString('general.activity'),
                         style: {
@@ -145,10 +137,7 @@ export default class Activity extends React.Component<ActivityProps, {}> {
                         }
                     }}
                     rightComponent={<FilterButton />}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
+                    navigation={navigation}
                 />
                 {loading ? (
                     <View style={{ padding: 50 }}>

diff --git a/views/Activity/ActivityFilter.tsx b/views/Activity/ActivityFilter.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
-import { Button, Header, Icon, ListItem } from 'react-native-elements';
+import { Button, Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 import { isEqual } from 'lodash';
 
 import DatePicker from 'react-native-date-picker';
 
-import { localeString } from './../../utils/LocaleUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
-import ActivityStore, { DEFAULT_FILTERS } from './../../stores/ActivityStore';
+import ActivityStore, { DEFAULT_FILTERS } from '../../stores/ActivityStore';
 
-import Screen from './../../components/Screen';
-import Switch from './../../components/Switch';
-import TextInput from './../../components/TextInput';
-import ZeusButton from './../../components/Button';
+import Header from '../../components/Header';
+import Screen from '../../components/Screen';
+import Switch from '../../components/Switch';
+import TextInput from '../../components/TextInput';
+import ZeusButton from '../../components/Button';
 
 interface ActivityFilterProps {
     navigation: any;
@@ -75,17 +76,6 @@ export default class ActivityFilter extends React.Component<
             endDate
         } = filters;
 
-        const CloseButton = () => (
-            <Icon
-                name="arrow-back"
-                onPress={() =>
-                    navigation.navigate('Activity', { refresh: true })
-                }
-                color={themeColor('text')}
-                underlayColor="transparent"
-            />
-        );
-
         const DateFilter = () => (
             <View
                 style={{
@@ -284,7 +274,7 @@ export default class ActivityFilter extends React.Component<
         return (
             <Screen>
                 <Header
-                    leftComponent={<CloseButton />}
+                    leftComponent="Close"
                     centerComponent={{
                         text: localeString('views.ActivityFilter.title'),
                         style: {
@@ -297,10 +287,7 @@ export default class ActivityFilter extends React.Component<
                             <ClearButton />
                         )
                     }
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
+                    navigation={navigation}
                 />
                 <FlatList
                     data={FILTERS}

diff --git a/views/BumpFee.tsx b/views/BumpFee.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
-import { ButtonGroup, Header, Icon } from 'react-native-elements';
+import { ButtonGroup } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import Button from '../components/Button';
+import Header from '../components/Header';
 import LoadingIndicator from '../components/LoadingIndicator';
 import Screen from '../components/Screen';
 import {
@@ -79,15 +80,6 @@ export default class BumpFee extends React.PureComponent<
 
         const isChannel = navigation.getParam('channel', false);
 
-        const BackButton = () => (
-            <Icon
-                name="arrow-back"
-                onPress={() => navigation.goBack()}
-                color={themeColor('text')}
-                underlayColor="transparent"
-            />
-        );
-
         const feeRateButton = () => (
             <Text
                 style={{
@@ -124,7 +116,7 @@ export default class BumpFee extends React.PureComponent<
         return (
             <Screen>
                 <Header
-                    leftComponent={<BackButton />}
+                    leftComponent="Back"
                     centerComponent={{
                         text: isChannel
                             ? localeString('views.BumpFee.titleAlt')
@@ -134,10 +126,7 @@ export default class BumpFee extends React.PureComponent<
                             fontFamily: 'Lato-Regular'
                         }
                     }}
-                    backgroundColor="transparent"
-                    containerStyle={{
-                        borderBottomWidth: 0
-                    }}
+                    navigation={navigation}
                 />
                 <View
                     style={{