feat: adjust Appbar, introduce new prop 'mode'

callstack · Feb 4, 2022 · 65bef5a · 65bef5a
1 parent cd43b2a
commit 65bef5a
Show file tree

Hide file tree

Showing 11 changed files with 522 additions and 377 deletions.
diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
@@ -102,13 +102,15 @@ export default function ExampleList({ navigation }: Props) {
 
   const keyExtractor = (item: { id: string }) => item.id;
 
-  const { colors } = useTheme();
+  const { colors, isV3, md } = useTheme();
   const safeArea = useSafeArea();
 
   return (
     <FlatList
       contentContainerStyle={{
-        backgroundColor: colors?.background,
+        backgroundColor: isV3
+          ? (md('md.sys.color.background') as string)
+          : colors?.background,
         paddingBottom: safeArea.bottom,
         paddingLeft: safeArea.left,
         paddingRight: safeArea.right,

diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
@@ -1,14 +1,24 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
-import { Appbar, FAB, Switch, Paragraph } from 'react-native-paper';
+import {
+  Appbar,
+  FAB,
+  Switch,
+  Paragraph,
+  Text,
+  useTheme,
+  RadioButton,
+} from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 import { yellowA200 } from '../../../src/styles/themes/v2/colors';
 
 type Props = {
   navigation: StackNavigationProp<{}>;
 };
 
+type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
+
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 
 const AppbarExample = ({ navigation }: Props) => {
@@ -18,6 +28,10 @@ const AppbarExample = ({ navigation }: Props) => {
   const [showMoreIcon, setShowMoreIcon] = React.useState(true);
   const [showCustomColor, setShowCustomColor] = React.useState(false);
   const [showExactTheme, setShowExactTheme] = React.useState(false);
+  const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
+  const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
+
+  const { isV3 } = useTheme();
 
   React.useLayoutEffect(() => {
     navigation.setOptions({
@@ -27,6 +41,7 @@ const AppbarExample = ({ navigation }: Props) => {
           theme={{
             mode: showExactTheme ? 'exact' : 'adaptive',
           }}
+          mode={appbarMode}
         >
           {showLeftIcon && (
             <Appbar.BackAction onPress={() => navigation.goBack()} />
@@ -35,6 +50,9 @@ const AppbarExample = ({ navigation }: Props) => {
             title="Title"
             subtitle={showSubtitle ? 'Subtitle' : null}
           />
+          {showCalendarIcon && (
+            <Appbar.Action icon="calendar" onPress={() => {}} />
+          )}
           {showSearchIcon && (
             <Appbar.Action icon="magnify" onPress={() => {}} />
           )}
@@ -52,38 +70,84 @@ const AppbarExample = ({ navigation }: Props) => {
     showMoreIcon,
     showCustomColor,
     showExactTheme,
+    appbarMode,
+    showCalendarIcon,
   ]);
 
+  const TextComponent = isV3 ? Text : Paragraph;
+
   return (
     <>
       <ScreenWrapper
         style={styles.container}
         contentContainerStyle={styles.contentContainer}
       >
         <View style={styles.row}>
-          <Paragraph>Left icon</Paragraph>
+          <TextComponent variant="label-large">Left icon</TextComponent>
           <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
         </View>
+        {!isV3 && (
+          <View style={styles.row}>
+            <TextComponent variant="label-large">Subtitle</TextComponent>
+            <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
+          </View>
+        )}
         <View style={styles.row}>
-          <Paragraph>Subtitle</Paragraph>
-          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
-        </View>
-        <View style={styles.row}>
-          <Paragraph>Search icon</Paragraph>
+          <TextComponent variant="label-large">Search icon</TextComponent>
           <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
         </View>
         <View style={styles.row}>
-          <Paragraph>More icon</Paragraph>
+          <TextComponent variant="label-large">More icon</TextComponent>
           <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
         </View>
+        {isV3 && (
+          <View style={styles.row}>
+            <TextComponent variant="label-large">Calendar icon</TextComponent>
+            <Switch
+              value={showCalendarIcon}
+              disabled={appbarMode === 'center-aligned'}
+              onValueChange={setShowCalendarIcon}
+            />
+          </View>
+        )}
         <View style={styles.row}>
-          <Paragraph>Custom Color</Paragraph>
+          <TextComponent variant="label-large">Custom Color</TextComponent>
           <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
         </View>
         <View style={styles.row}>
-          <Paragraph>Exact Dark Theme</Paragraph>
+          <TextComponent variant="label-large">Exact Dark Theme</TextComponent>
           <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
         </View>
+        {isV3 && (
+          <RadioButton.Group
+            value={appbarMode}
+            onValueChange={(value: string) =>
+              setAppbarMode(value as AppbarModes)
+            }
+          >
+            <TextComponent style={styles.appbarMode}>Appbar Mode</TextComponent>
+            <View style={styles.row}>
+              <TextComponent variant="label-large">
+                Small (default)
+              </TextComponent>
+              <RadioButton value="small" />
+            </View>
+            <View style={styles.row}>
+              <TextComponent variant="label-large">Medium</TextComponent>
+              <RadioButton value="medium" />
+            </View>
+            <View style={styles.row}>
+              <TextComponent variant="label-large">Large</TextComponent>
+              <RadioButton value="large" />
+            </View>
+            <View style={styles.row}>
+              <TextComponent variant="label-large">
+                Center-aligned
+              </TextComponent>
+              <RadioButton value="center-aligned" />
+            </View>
+          </RadioButton.Group>
+        )}
       </ScreenWrapper>
       <Appbar
         style={styles.bottom}
@@ -131,4 +195,7 @@ const styles = StyleSheet.create({
   customColor: {
     backgroundColor: yellowA200,
   },
+  appbarMode: {
+    textAlign: 'center',
+  },
 });
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -177,7 +177,7 @@ export default function PaperExample() {
                   <Drawer.Screen name="Home" component={App} />
                 </Drawer.Navigator>
               )}
-              <StatusBar style="light" />
+              <StatusBar style={!theme.dark ? 'dark' : 'light'} />
             </NavigationContainer>
           </React.Fragment>
         </PreferencesContext.Provider>