refactor: add prop elevated, remove old screenshots, add prop annotation

callstack · Mar 27, 2022 · 36d06f4 · 36d06f4
1 parent 8cbbd4d
commit 36d06f4
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 126 deletions.
diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
@@ -9,6 +9,7 @@ import {
   Text,
   useTheme,
   RadioButton,
+  List,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 import { yellowA200 } from '../../../src/styles/themes/v2/colors';
@@ -30,6 +31,7 @@ const AppbarExample = ({ navigation }: Props) => {
   const [showExactTheme, setShowExactTheme] = React.useState(false);
   const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
   const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
+  const [showElevated, setShowElevated] = React.useState(false);
 
   const { isV3 } = useTheme();
 
@@ -39,11 +41,12 @@ const AppbarExample = ({ navigation }: Props) => {
     navigation.setOptions({
       header: () => (
         <Appbar.Header
-          style={showCustomColor ? styles.customColor : null}
+          style={[showCustomColor ? styles.customColor : null]}
           theme={{
             mode: showExactTheme ? 'exact' : 'adaptive',
           }}
           mode={appbarMode}
+          elevated={showElevated}
         >
           {showLeftIcon && (
             <Appbar.BackAction onPress={() => navigation.goBack()} />
@@ -77,81 +80,101 @@ const AppbarExample = ({ navigation }: Props) => {
     appbarMode,
     showCalendarIcon,
     isCenterAlignedMode,
+    showElevated,
   ]);
 
   const TextComponent = isV3 ? Text : Paragraph;
 
-  return (
+  const renderDefaultOptions = () => (
     <>
-      <ScreenWrapper
-        style={styles.container}
-        contentContainerStyle={styles.contentContainer}
-      >
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Left icon</TextComponent>
+        <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
+      </View>
+      {!isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Left icon</TextComponent>
-          <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
+          <TextComponent variant="labelLarge">Subtitle</TextComponent>
+          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
         </View>
-        {!isV3 && (
-          <View style={styles.row}>
-            <TextComponent variant="labelLarge">Subtitle</TextComponent>
-            <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
-          </View>
-        )}
+      )}
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Search icon</TextComponent>
+        <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
+      </View>
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">More icon</TextComponent>
+        <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
+      </View>
+      {isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">Search icon</TextComponent>
-          <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
+          <TextComponent variant="labelLarge">Calendar icon</TextComponent>
+          <Switch
+            value={isCenterAlignedMode ? false : showCalendarIcon}
+            disabled={isCenterAlignedMode}
+            onValueChange={setShowCalendarIcon}
+          />
         </View>
+      )}
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Custom Color</TextComponent>
+        <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
+      </View>
+      <View style={styles.row}>
+        <TextComponent variant="labelLarge">Exact Dark Theme</TextComponent>
+        <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
+      </View>
+      {isV3 && (
         <View style={styles.row}>
-          <TextComponent variant="labelLarge">More icon</TextComponent>
-          <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
+          <TextComponent variant="labelLarge">Elevated</TextComponent>
+          <Switch value={showElevated} onValueChange={setShowElevated} />
         </View>
-        {isV3 && (
-          <View style={styles.row}>
-            <TextComponent variant="labelLarge">Calendar icon</TextComponent>
-            <Switch
-              value={isCenterAlignedMode ? false : showCalendarIcon}
-              disabled={isCenterAlignedMode}
-              onValueChange={setShowCalendarIcon}
-            />
-          </View>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <ScreenWrapper
+        style={styles.container}
+        contentContainerStyle={styles.contentContainer}
+      >
+        {isV3 ? (
+          <List.Section title="Default options">
+            {renderDefaultOptions()}
+          </List.Section>
+        ) : (
+          renderDefaultOptions()
         )}
-        <View style={styles.row}>
-          <TextComponent variant="labelLarge">Custom Color</TextComponent>
-          <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
-        </View>
-        <View style={styles.row}>
-          <TextComponent variant="labelLarge">Exact Dark Theme</TextComponent>
-          <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
-        </View>
         {isV3 && (
-          <RadioButton.Group
-            value={appbarMode}
-            onValueChange={(value: string) =>
-              setAppbarMode(value as AppbarModes)
-            }
-          >
-            <TextComponent variant="labelLarge" style={styles.appbarMode}>
-              Appbar Mode
-            </TextComponent>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">
-                Small (default)
-              </TextComponent>
-              <RadioButton value="small" />
-            </View>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">Medium</TextComponent>
-              <RadioButton value="medium" />
-            </View>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">Large</TextComponent>
-              <RadioButton value="large" />
-            </View>
-            <View style={styles.row}>
-              <TextComponent variant="labelLarge">Center-aligned</TextComponent>
-              <RadioButton value="center-aligned" />
-            </View>
-          </RadioButton.Group>
+          <List.Section title="Appbar Modes">
+            <RadioButton.Group
+              value={appbarMode}
+              onValueChange={(value: string) =>
+                setAppbarMode(value as AppbarModes)
+              }
+            >
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">
+                  Small (default)
+                </TextComponent>
+                <RadioButton value="small" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">Medium</TextComponent>
+                <RadioButton value="medium" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">Large</TextComponent>
+                <RadioButton value="large" />
+              </View>
+              <View style={styles.row}>
+                <TextComponent variant="labelLarge">
+                  Center-aligned
+                </TextComponent>
+                <RadioButton value="center-aligned" />
+              </View>
+            </RadioButton.Group>
+          </List.Section>
         )}
       </ScreenWrapper>
       <Appbar
@@ -200,7 +223,4 @@ const styles = StyleSheet.create({
   customColor: {
     backgroundColor: yellowA200,
   },
-  appbarMode: {
-    textAlign: 'center',
-  },
 });
diff --git a/example/src/RootNavigator.tsx b/example/src/RootNavigator.tsx
@@ -12,12 +12,13 @@ export default function Root() {
       headerMode="screen"
       screenOptions={{
         header: ({ navigation, scene, previous }) => (
-          <Appbar.Header>
+          <Appbar.Header elevated>
             {previous ? (
               <Appbar.BackAction onPress={() => navigation.goBack()} />
             ) : (navigation as any).openDrawer ? (
               <Appbar.Action
                 icon="menu"
+                isLeading
                 onPress={() =>
                   (navigation as any as DrawerNavigationProp<{}>).openDrawer()
                 }

diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
@@ -36,7 +36,7 @@ type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    */
   onPress?: () => void;
   /**
-   * `Available in v3.x`
+   * @supported Available in v3.x with theme version 3
    *
    * Whether it's the leading button.
    */
@@ -47,19 +47,6 @@ type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
 
 /**
  * A component used to display an action item in the appbar.
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-action-android.png" />
- *       <figcaption>Android</figcaption>
- *   </figure>
- * </div>
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-action-ios.png" />
- *       <figcaption>iOS</figcaption>
- *   </figure>
- * </div>
  *
  * ## Usage
  * ```js

diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
@@ -34,20 +34,6 @@ type Props = $Omit<
 /**
  * A component used to display a back button in the appbar.
  *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-backaction-android.png" />
- *     <figcaption>Android</figcaption>
- *   </figure>
- * </div>
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-backaction-ios.png" />
- *     <figcaption>iOS</figcaption>
- *   </figure>
- * </div>
- *
  * ## Usage
  * ```js
  * import * as React from 'react';

diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
@@ -16,7 +16,7 @@ import { withTheme } from '../../core/theming';
 import { white } from '../../styles/themes/v2/colors';
 
 import type { $RemoveChildren, Theme } from '../../types';
-import { AppbarModes, modeTextVariant } from './utils';
+import { modeTextVariant } from './utils';
 
 type Props = $RemoveChildren<typeof View> & {
   /**
@@ -36,12 +36,12 @@ type Props = $RemoveChildren<typeof View> & {
    */
   titleRef?: React.RefObject<Text>;
   /**
-   * @deprecated
+   * @deprecated Deprecated in v3.x
    * Text for the subtitle.
    */
   subtitle?: React.ReactNode;
   /**
-   * @deprecated
+   * @deprecated Deprecated in v3.x
    * Style for the subtitle.
    */
   subtitleStyle?: StyleProp<TextStyle>;
@@ -50,15 +50,15 @@ type Props = $RemoveChildren<typeof View> & {
    */
   onPress?: () => void;
   /**
-   * `Available in v3.x`
+   * @supported Available in v3.x with theme version 3
    *
    * Mode of the Appbar.
    * - `small` - Appbar with default height (56).
    * - `medium` - Appbar with medium height (112).
    * - `large` - Appbar with large height (152).
    * - `center-aligned` - Appbar with default height and center-aligned title.
    */
-  mode?: AppbarModes;
+  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -69,12 +69,6 @@ type Props = $RemoveChildren<typeof View> & {
 /**
  * A component used to display a title and optional subtitle in an appbar.
  *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/appbar-content.png" />
- *   </figure>
- * </div>
- *
  * ## Usage
  * ```js
  * import * as React from 'react';
@@ -122,6 +116,7 @@ const AppbarContent = ({
   return (
     <TouchableWithoutFeedback onPress={onPress} disabled={!onPress}>
       <View
+        pointerEvents="box-none"
         style={[styles.container, isV3 && modeContainerStyles[mode], style]}
         {...rest}
       >