Repository: codypearce/material-bread
Pull request #345 (2019-12-03 13:16:03)

Drawer and Appbar bug fix
-Fix issue #338 DrawerWidth permanent undefined
-Fix issue #343 Page width should calculate drawer width based on prop
-fix issue #340 Appbar title can be a node as well 
-fix issue #342 Appbar Title should not be rendered with no title


Patch:
diff --git a/.storybook/addons.js b/.storybook/addons.js
index ff528f6..f0e1d95 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -5,4 +5,4 @@ import '@storybook/addon-jest/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-google-analytics/register';
 import '@storybook/addon-a11y/register';
-import '@storybook/addon-viewport/register';
+// import '@storybook/addon-viewport/register';
diff --git a/src/Components/Appbar/Appbar.js b/src/Components/Appbar/Appbar.js
index 97cd655..a99c7c1 100644
--- a/src/Components/Appbar/Appbar.js
+++ b/src/Components/Appbar/Appbar.js
@@ -20,7 +20,7 @@ class Appbar extends Component {
     navigation: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
     onNavigation: PropTypes.func,
 
-    title: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
     titleStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     onTitle: PropTypes.func,
     subtitle: PropTypes.string,
@@ -36,7 +36,7 @@ class Appbar extends Component {
   };
 
   _renderAppbarContent() {
-    const { barType, actionItemsStyle } = this.props;
+    const { barType, title, actionItemsStyle} = this.props;
 
     return (
       <Fragment>
@@ -51,7 +51,7 @@ class Appbar extends Component {
             },
           ]}>
           {this._renderNavigation()}
-          {this._renderTitle()}
+          {title && this._renderTitle()}
         </View>
         <View style={[styles.right, actionItemsStyle]}>
           {this._renderActionItems()}
@@ -107,6 +107,19 @@ class Appbar extends Component {
       textContainerStyles,
     } = this.props;
 
+    const titleComponent =
+      typeof title == 'string' || title instanceof String ? (
+        <Text
+          numberOfLines={
+            barType === 'prominent' || barType === 'prominent dense' ? 3 : 1
+          }
+          style={[styles.pageTitle, titleStyles]}>
+          {title}
+        </Text>
+      ) : (
+        title
+      );
+
     return (
       <View
         style={[
@@ -121,13 +134,7 @@ class Appbar extends Component {
           },
           textContainerStyles,
         ]}>
-        <Text
-          numberOfLines={
-            barType === 'prominent' || barType === 'prominent dense' ? 3 : 1
-          }
-          style={[styles.pageTitle, titleStyles]}>
-          {title}
-        </Text>
+        {titleComponent}
         {subtitle && barType !== 'dense' ? (
           <Text
             style={[
diff --git a/src/Components/Drawer/Drawer.js b/src/Components/Drawer/Drawer.js
index fc4da8d..84b3229 100644
--- a/src/Components/Drawer/Drawer.js
+++ b/src/Components/Drawer/Drawer.js
@@ -84,7 +84,11 @@ class Drawer extends PureComponent {
     if (pageWidth) screenWidth = pageWidth;
     if (pageHeight) screenHeight = pageHeight;
 
-    let drawerWidth = screenWidth * (widthPercentage || 0.45);
+    let drawerWidth =
+      Platform.OS == 'web'
+        ? this.state.drawerWidth
+        : screenWidth * (widthPercentage || 0.45);
+
     if (width) drawerWidth = width;
 
     this.setState({
@@ -198,7 +202,7 @@ class Drawer extends PureComponent {
 
   _renderAppContent() {
     const { children, appbar, type, open, contentContainerStyle } = this.props;
-    const { leftOffset } = this.state;
+    const { leftOffset, drawerWidth } = this.state;
 
     const isPush = type == 'push';
     const isPermanent = type == 'permanent';
@@ -213,7 +217,7 @@ class Drawer extends PureComponent {
               flex: 1,
               width:
                 open && Platform.OS == 'web' && isPermanent
-                  ? 'calc(100% - 240px)'
+                  ? `calc(100% - ${drawerWidth}px)`
                   : '100%',
             }}>
             {children}


Test patch:
diff --git a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
index 4d804c0..8e5027e 100644
--- a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
@@ -38,34 +38,7 @@ exports[`Appbar Renders 1`] = `
         },
       ]
     }
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignSelf": "center",
-            "marginBottom": 0,
-            "marginLeft": 0,
-            "zIndex": 100,
-          },
-          undefined,
-        ]
-      }
-    >
-      <Text
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "white",
-              "fontSize": 18,
-            },
-            undefined,
-          ]
-        }
-      />
-    </View>
-  </View>
+  />
   <View
     style={
       Array [