♻️ Reuse topappbar from native paper

ZeroGachis · Sep 1, 2023 · bded347 · bded347
1 parent 88ed496
commit bded347
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 288 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -14,7 +14,7 @@ import { DropDownPage } from './DropDown/DropDownPage';
 import { SnackBarPage } from './SnackBar/SnackBarPage';
 import { TogglePage } from './TogglePage/TogglePage';
 import { MenuPage } from './Menu/MenuPage';
-import { AppBarPage } from './AppBar/AppBarPage';
+import { TopAppBarPage } from './TopAppBar/TopAppBarPage';
 import { PrintPage } from './PrintStatePage/PrintPage';
 import { ActionCardPage } from './ActionCard/ActionCardPage';
 import { CardPage } from './Card/CardPage';
@@ -25,7 +25,6 @@ import { TabPage } from './Tab/TabPage';
 import { LabelPage } from './Label/LabelPage';
 import { ProductPage } from './Product/ProductPage';
 import { DividerPage } from './DividerPage/DividerPage';
-import { TopAppBarPage } from './TopAppBarPage/TopAppBarPage';
 import { BodyPage } from './Body/BodyPage';
 
 export type RootStackParamList = {
@@ -40,7 +39,7 @@ export type RootStackParamList = {
     SnackBar: undefined;
     Toggle: undefined;
     Menu: undefined;
-    AppBar: undefined;
+    TopAppBar: undefined;
     PrintState: undefined;
     ActionCard: undefined;
     BodyPage: undefined;
@@ -53,7 +52,6 @@ export type RootStackParamList = {
     Label: undefined;
     ProductPage: undefined;
     DividerPage: undefined;
-    TopAppBarPage: undefined;
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -89,8 +87,8 @@ const App = () => {
                     <Stack.Screen name="PrintState" component={PrintPage} />
                     <Stack.Screen
                         options={{ headerShown: false }}
-                        name="AppBar"
-                        component={AppBarPage}
+                        name="TopAppBar"
+                        component={TopAppBarPage}
                     />
                     <Stack.Screen
                         options={{ headerShown: false }}
@@ -104,7 +102,6 @@ const App = () => {
                     <Stack.Screen name="Label" component={LabelPage} />
                     <Stack.Screen name="ProductPage" component={ProductPage} />
                     <Stack.Screen name="DividerPage" component={DividerPage} />
-                    <Stack.Screen name="TopAppBarPage" component={TopAppBarPage} />
                 </Stack.Navigator>
             </NavigationContainer>
         </ThemeProvider>

diff --git a/example/src/AppBar/AppBarPage.tsx b/example/src/AppBar/AppBarPage.tsx
diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx
@@ -115,7 +115,7 @@ export const HomeScreen = ({ navigation }: Props) => {
                     <Button
                         style={styles.button}
                         onPress={() => {
-                            navigation.navigate('AppBar');
+                            navigation.navigate('TopAppBar');
                         }}
                     >
                         AppBar
@@ -216,14 +216,6 @@ export const HomeScreen = ({ navigation }: Props) => {
                     >
                         Divider
                     </Button>
-                    <Button
-                        style={styles.button}
-                        onPress={() => {
-                            navigation.navigate('TopAppBarPage');
-                        }}
-                    >
-                        TopAppBarPage
-                    </Button>
                 </Pressable>
             </ScrollView>
         </View>

diff --git a/example/src/TopAppBar/TopAppBarPage.tsx b/example/src/TopAppBar/TopAppBarPage.tsx
@@ -0,0 +1,79 @@
+import type { NavigationProp } from '@react-navigation/native';
+import React, { useState } from 'react';
+import { Alert, View } from 'react-native';
+import {
+    TopAppBar,
+    BottomSheet,
+    Button,
+    Headline,
+    Screen,
+    useTheme,
+} from 'smartway-react-native-ui';
+
+interface Props {
+    navigation: NavigationProp<any>;
+}
+
+export const TopAppBarPage = ({ navigation }: Props) => {
+    const theme = useTheme();
+    const [isOpened, setOpened] = useState<boolean>(false);
+
+    const goBack = () => {
+        navigation.goBack();
+    };
+
+    const showSettings = () => {
+        Alert.alert('Click');
+    };
+
+    const menu = (
+        <View>
+            <Button mode="outlined" onPress={() => setOpened(true)}>
+                {'Aujourdhui'}
+            </Button>
+        </View>
+    );
+
+    return (
+        <Screen
+            style={{
+                backgroundColor: theme.sw.colors.neutral[50],
+                paddingLeft: 0,
+                paddingRight: 0,
+            }}
+        >
+            <TopAppBar
+                size="small"
+                title={{ value: <Headline size="h1">Headline H1</Headline> }}
+                icon={{ name: 'dots-vertical', onPress: showSettings }}
+            />
+            <TopAppBar
+                size="center-aligned"
+                onBack={goBack}
+                title={{ value: menu, onPress: () => setOpened(true) }}
+                icon={{ name: 'dots-vertical', onPress: showSettings }}
+            />
+            <TopAppBar
+                size="center-aligned"
+                onBack={goBack}
+                title={{ value: menu, onPress: () => setOpened(true) }}
+            />
+            <TopAppBar
+                size="medium"
+                onBack={goBack}
+                title={{ value: 'Headline H2' }}
+                icon={{ name: 'dots-vertical', onPress: showSettings }}
+            />
+            <BottomSheet
+                snapPoints={['40%']}
+                swipeable={true}
+                title="Title"
+                titleProps={{ style: { textAlign: 'center', marginBottom: theme.sw.spacing.s } }}
+                isOpened={isOpened}
+                onClose={() => setOpened(false)}
+            >
+                <Button onPress={() => setOpened(false)}>Option</Button>
+            </BottomSheet>
+        </Screen>
+    );
+};
diff --git a/example/src/TopAppBarPage/TopAppBarPage.tsx b/example/src/TopAppBarPage/TopAppBarPage.tsx
diff --git a/src/components/appBar/AppBar.tsx b/src/components/appBar/AppBar.tsx
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -15,7 +15,7 @@ import { DropDown } from './dropDown/DropDown';
 import { SnackBar } from './snackBar/SnackBar';
 import { Toggle } from './toggle/Toggle';
 import { Menu } from './menu/Menu';
-import { AppBar } from './appBar/AppBar';
+import { TopAppBar } from './topAppBar/TopAppBar';
 import { PrintState } from './printState/PrintState';
 import { EANInput } from './EANInput/EANInput';
 import { ModifyQuantity } from './modifyQuantity/ModifyQuantity';
@@ -25,7 +25,6 @@ import { Tab } from './tab/Tab';
 import { Label } from './label/Label';
 import { Product } from './product/Product';
 import { Divider } from './divider/Divider';
-import { TopAppBar } from './topAppBar/TopAppBar';
 
 export {
     Body,
@@ -43,7 +42,7 @@ export {
     BottomSheet,
     Toggle,
     Menu,
-    AppBar,
+    TopAppBar,
     Keyboard,
     PrintState,
     EANInput,
@@ -55,5 +54,4 @@ export {
     Label,
     Product,
     Divider,
-    TopAppBar,
 };