Adds actions icons and fixes eslint error (#19)

* chore(appBar): adds actions and fixes esLint error ♻️
GeekyAnts · Apr 28, 2020 · 8c50ef3 · 8c50ef3
1 parent c31d3d1
commit 8c50ef3
Showing 1 changed file with 8 additions and 13 deletions.
diff --git a/src/components/composites/AppBar/index.tsx b/src/components/composites/AppBar/index.tsx
@@ -27,30 +27,25 @@ const defaultTitleProps: TextProps = {
 };
 
 const AppBar = ({ actions, leading, title, ...props }: AppBarProps) => {
-  const getTitleJSX = (headerTitle: JSX.Element | string) =>
-    typeof headerTitle === "string" ? (
+  const getTitleJSX = (headerTitle: JSX.Element | string | undefined) => {
+    if (!headerTitle) return undefined;
+
+    return typeof headerTitle === "string" ? (
       <Text {...defaultTitleProps}>{title}</Text>
     ) : (
       React.cloneElement(headerTitle, defaultTitleProps, headerTitle.props.children)
     );
+  };
 
   return (
     <StyledAppBar {...defaultAppBarProps} {...props}>
       <Box justifyContent="center" mr={4}>
-        {leading || <Box width={40} />}
+        {leading || <Box width={40} height={40} />}
       </Box>
 
       <Box flexDirection="row" flexGrow={1} justifyContent="space-between" alignItems="center">
-        <Box>{title && getTitleJSX(title)}</Box>
-        <Box flexDirection="row">
-          {actions &&
-            actions.map((action: JSX.Element) => {
-              return (
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                <Box key={action.key!} ml={5} />
-              );
-            })}
-        </Box>
+        <Box>{getTitleJSX(title)}</Box>
+        <Box flexDirection="row">{actions && actions.map((action: JSX.Element) => action)}</Box>
       </Box>
     </StyledAppBar>
   );