Merge pull request GeekyAnts#3351 from GeekyAnts/fix/v3-appbar-themeing

fix: added themeing and dark mode support

example/storybook/stories/components/composites/AppBar/AppBarExamples.tsx

@@ -23,7 +23,7 @@ export default function Examples() {
 
 function Material() {
   return (
-    <AppBar shadow={1} bg="gray.900" height={80}>
+    <AppBar shadow={1} colorScheme="lightBlue">
       <AppBar.Left>
         <LeftArrowIconButton />
       </AppBar.Left>
@@ -86,29 +86,20 @@ function IOSLike() {
 
 function Customized() {
   return (
-    <AppBar bg="blue.900" shadow={1}>
+    <AppBar colorScheme="dark" shadow={1}>
       <AppBar.Left>
         <IconButton
-          icon={
-            <Icon
-              name="angle-left"
-              type="FontAwesome"
-              size={10}
-              color="white"
-            />
-          }
+          icon={<Icon name="angle-left" type="FontAwesome" size={10} />}
         />
       </AppBar.Left>
       <AppBar.Content>
-        <Text isTruncated color="white" fontWeight="bold" fontSize={22}>
+        <Text isTruncated fontWeight="bold" fontSize={22}>
           Library
         </Text>
       </AppBar.Content>
       <AppBar.Right>
         <IconButton
-          icon={
-            <Icon name="folder-music" type="Entypo" size={8} color="white" />
-          }
+          icon={<Icon name="folder-music" type="Entypo" size={8} />}
         />
       </AppBar.Right>
     </AppBar>
@@ -117,7 +108,7 @@ function Customized() {
 
 function CustomizedWithBorder() {
   return (
-    <AppBar bg="white" shadow={3} px={4} space={3}>
+    <AppBar colorScheme="teal" shadow={3} px={4} space={3}>
       <AppBar.Left>
         <IconButton icon={<Icon name="menu" size={6} />} />
       </AppBar.Left>

src/components/composites/AppBar/AppBar.tsx

@@ -1,55 +1,26 @@
 import React from 'react';
-import { SafeAreaView } from 'react-native';
+import { usePropsConfig } from '../../../hooks';
 import AppBarLeft from './AppBarLeft';
 import AppBarRight from './AppBarRight';
 import AppBarContent from './AppBarContent';
-import { Box, HStack, View, IBoxProps } from '../../primitives';
+import { HStack, IBoxProps } from '../../primitives';
 import { APPROX_STATUSBAR_HEIGHT } from './utils';
 
 export type IAppBarProps = IBoxProps & {
+  colorScheme?: string;
   statusBarHeight?: number;
   space?: number;
 };
 
-const APPBAR_HEADER_HEIGHT = 56;
-const DEFAULT_SPACING_BETWEEN_LEFT_CONTENT_AND_RIGHT = 2;
-const DEFAULT_HORIZONTAL_PADDING = 2;
-
-const AppBar = ({
-  height = APPBAR_HEADER_HEIGHT,
-  statusBarHeight = APPROX_STATUSBAR_HEIGHT,
-  space = DEFAULT_SPACING_BETWEEN_LEFT_CONTENT_AND_RIGHT,
-  ...props
-}: IAppBarProps) => {
-  let childMap = new Map();
-
-  React.Children.toArray(props.children).reduce((prevVal, child) => {
-    if (React.isValidElement(child)) {
-      childMap.set(child.type, child);
-    }
-    return prevVal;
-  }, childMap);
-
-  let defaultStyle = {
-    height,
-    marginTop: statusBarHeight,
-  };
-
-  // If status bar height is present, no need for SafeAreaView as View will handle the topOffset using marginTop
-  const Wrapper = statusBarHeight ? React.Fragment : SafeAreaView;
-
+const AppBar = ({ children, ...props }: IAppBarProps) => {
+  const {
+    statusBarHeight = APPROX_STATUSBAR_HEIGHT,
+    ...newProps
+  } = usePropsConfig('AppBar', props);
   return (
-    <Wrapper>
-      <View style={defaultStyle}>
-        <Box flex={1} px={DEFAULT_HORIZONTAL_PADDING} {...props}>
-          <HStack space={space} flex={1}>
-            {childMap.get(AppBarLeft)}
-            {childMap.get(AppBarContent)}
-            {childMap.get(AppBarRight)}
-          </HStack>
-        </Box>
-      </View>
-    </Wrapper>
+    <HStack mt={statusBarHeight} {...newProps}>
+      {children}
+    </HStack>
   );
 };
 

src/components/composites/AppBar/AppBarContent.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 import { Box, IBoxProps } from '../../primitives';
+import { usePropsConfig } from '../../../hooks';
 
 export type IAppBarContentProps = IBoxProps;
 
 const AppBarContent = (props: IAppBarContentProps) => {
-  return <Box flex={1} alignItems="center" flexDirection="row" {...props} />;
+  const { color } = usePropsConfig('AppBar', props);
+  return (
+    <Box
+      flex={1}
+      alignItems="center"
+      flexDirection="row"
+      color={color}
+      {...props}
+    />
+  );
 };
 
 export default AppBarContent;

src/components/composites/AppBar/AppBarLeft.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { HStack, IStackProps } from '../../primitives';
+import { usePropsConfig } from '../../../hooks';
 
 const AppBarLeft = ({ ...props }: IStackProps) => {
-  return <HStack alignItems="center" {...props} />;
+  const { color } = usePropsConfig('AppBar', props);
+  return <HStack alignItems="center" color={color} {...props} />;
 };
 
 export default AppBarLeft;

src/components/composites/AppBar/AppBarRight.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import { HStack, IStackProps } from '../../primitives';
+import { usePropsConfig } from '../../../hooks';
 
 const AppBarRight = ({ ...props }: IStackProps) => {
-  return <HStack alignItems="center" justifyContent="flex-end" {...props} />;
+  const { color } = usePropsConfig('AppBar', props);
+  return (
+    <HStack
+      alignItems="center"
+      justifyContent="flex-end"
+      color={color}
+      {...props}
+    />
+  );
 };
 
 export default AppBarRight;

src/theme/components/app-bar.ts

@@ -0,0 +1,17 @@
+import { mode, getColorScheme } from './../tools';
+
+const baseStyle = (props: Record<string, any>) => {
+  let colorScheme = getColorScheme(props);
+  return {
+    bg: mode(`${colorScheme}.500`, `${colorScheme}.300`)(props),
+    color: mode('gray.800', 'gray.50')(props),
+    px: 2,
+    height: '56px',
+  };
+};
+const defaultProps = {};
+
+export default {
+  baseStyle,
+  defaultProps,
+};

src/theme/components/index.ts

@@ -32,6 +32,7 @@ import Switch from './switch';
 import Tabs from './tabs';
 import Tag from './tag';
 import Text from './text';
+import AppBar from './app-bar';
 import TextArea from './textarea';
 import Toast from './toast';
 import { Fade, ScaleFade, Slide, SlideFade } from './transitions';
@@ -82,6 +83,7 @@ export default {
   Tabs,
   Tag,
   Text,
+  AppBar,
   TextArea,
   Toast,
   Wrap,