feat(components): add SideBar dynamic side

Author: nampdn

src/App.tsx

@@ -15,7 +15,11 @@ export default class App extends Component<Props> {
         <>
           <GlobalStyles />
           <View style={styles.container}>
-            <SideBar horizontal={true}>
+            <SideBar
+              horizontal={false}
+              horizontalSide="bottom"
+              verticalSide="left"
+            >
               <SideBarItem name="home" iconMaterial="home" />
               <SideBarItem
                 name="settings"

src/components/SideBar/Sidebar.tsx

@@ -1,25 +1,85 @@
-import { Text } from 'bara-react'
+import { BaraReactView, Text, View } from 'bara-react'
 import React, { ReactNode } from 'react'
-import { View } from 'react-native'
+import { ViewStyle } from 'react-native'
 
 import { sidebarSize } from '../variables'
 import { styles } from './styles'
 
-export interface SideBarProps {
+export type SideBarDynamicSide = 'top' | 'bottom' | 'left' | 'right'
+export interface SideBarProps extends BaraReactView {
   children?: ReactNode
+  side?: string
   horizontal?: boolean
+  horizontalSide?: SideBarDynamicSide
+  verticalSide?: SideBarDynamicSide
 }
 
-export const SideBar = ({ children, horizontal = true }: SideBarProps) => {
+interface DynamicPreset {
+  [k: string]: {
+    wrap: any
+    inner: any
+  }
+}
+
+const dynamicPreset: DynamicPreset = {
+  bottom: {
+    wrap: {
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    inner: {
+      flexDirection: 'row',
+      height: sidebarSize,
+    },
+  },
+  left: {
+    wrap: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+    },
+    inner: {
+      flexDirection: 'column',
+      width: sidebarSize,
+    },
+  },
+}
+
+dynamicPreset.top = {
+  ...dynamicPreset.bottom,
+  ...{ wrap: { top: 0, left: 0, right: 0 } },
+}
+
+dynamicPreset.right = {
+  ...dynamicPreset.left,
+  ...{ wrap: { top: 0, bottom: 0, right: 0 } },
+}
+
+export const SideBar = ({
+  children,
+  horizontalSide,
+  verticalSide,
+  horizontal = true,
+  ...props
+}: SideBarProps) => {
+  const currentSide = horizontal ? horizontalSide! : verticalSide!
   return (
-    <View style={{ zIndex: 1000 }}>
+    <View
+      kind="sidebar-container"
+      style={[
+        styles.sideBarPosition as ViewStyle,
+        {
+          ...(dynamicPreset[currentSide].wrap as ViewStyle),
+        },
+      ]}
+      {...props}
+    >
       <View
         style={[
-          styles.sideBar,
+          styles.sideBar as ViewStyle,
           {
-            flexDirection: horizontal ? 'row' : 'column',
-            width: horizontal ? '100%' : sidebarSize,
-            height: horizontal ? sidebarSize : '100%',
+            ...(dynamicPreset[currentSide].inner as ViewStyle),
           },
         ]}
       >

src/components/SideBar/hook.ts renamed to src/components/SideBar/api.ts

@@ -1,3 +1,3 @@
 export * from './SideBar'
 export * from './SideBarItem'
-export * from './hook'
+export * from './api'

src/components/SideBar/index.ts

@@ -5,18 +5,28 @@ import {
 } from '../variables'
 
 export const sharedStyles = {
+  sideBarPosition: {
+    zIndex: 1000,
+    position: 'absolute',
+    backgroundColor: '#ccc',
+  },
   sideBar: {
+    position: 'relative',
     flexGrow: 1,
-    backgroundColor: '#ccc',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: '100%',
   },
   sideBarItem: {
     alignSelf: 'center',
     justifyContent: 'center',
     alignItems: 'center',
     alignContent: 'center',
     width: sidebarSize,
-    height: '100%',
+    height: sidebarSize,
     overflow: 'hidden',
+    paddingLeft: 8,
+    paddingRight: 8,
   },
   sideBarIcon: {
     textAlign: 'center',