Fix collapseBelow implementation (Columns), remove align prop (Column)

Author: mobily

src/Column/index.tsx

@@ -1,21 +1,21 @@
 import React from 'react'
 import { View, ViewProps } from 'react-native'
-import { resolveFlex, resolveAlign, styles, Flex, AxisX, ResponsiveProp } from '../utils'
-import { useBreakpoint } from '../context'
+import { resolveFlex, styles, Flex } from '../utils'
+import { useColumns } from '../context'
 
 export interface Props extends ViewProps {
   children: React.ReactNode
   width?: Flex
-  align?: ResponsiveProp<AxisX>
 }
 
 export const Column = (props: Props) => {
-  const { children, width, align: responsiveAlign, style, ...rest } = props
-  const { resolveResponsiveProp } = useBreakpoint()
-  const align = resolveResponsiveProp(responsiveAlign)
+  const { children, width, style, ...rest } = props
+  const { isCollapsed } = useColumns()
+
+  const columnStyle = isCollapsed ? [styles.fullWidth] : [styles.shrink, resolveFlex(width)]
 
   return (
-    <View style={[style, styles.shrink, resolveFlex(width), resolveAlign(align)]} {...rest}>
+    <View style={[style, ...columnStyle]} {...rest}>
       {children}
     </View>
   )

src/Columns/index.tsx

@@ -13,7 +13,7 @@ import {
   ResponsiveProp,
   Breakpoint,
 } from '../utils'
-import { useBreakpoint, useDebugStyle, useSpacing } from '../context'
+import { ColumnsContext, useBreakpoint, useDebugStyle, useSpacing } from '../context'
 
 export interface Props extends ViewProps {
   children: React.ReactNode
@@ -49,7 +49,7 @@ export const Columns = (props: Props) => {
     noOppositeMargin,
     spacing,
     direction,
-    columnStyle,
+    isCollapsed,
   } = resolveCollapsibleProps({
     currentBreakpoint,
     collapseBelow,
@@ -58,26 +58,28 @@ export const Columns = (props: Props) => {
   })
 
   return (
-    <View
-      style={[
-        style,
-        styles.fullWidth,
-        resolveDirection(direction),
-        resolveAlign(alignY),
-        resolveJustify(alignX),
-      ]}
-      {...rest}
-    >
-      {elements.map((child, index) => {
-        const marginStyle = isLast(index) ? noLastMargin : spacing
+    <ColumnsContext.Provider value={{ isCollapsed }}>
+      <View
+        style={[
+          style,
+          styles.fullWidth,
+          resolveDirection(direction),
+          resolveAlign(alignY),
+          resolveJustify(alignX),
+        ]}
+        {...rest}
+      >
+        {elements.map((child, index) => {
+          const marginStyle = isLast(index) ? noLastMargin : spacing
 
-        return isValidElement(child)
-          ? cloneElement(child, {
-              ...child.props,
-              style: [child.props.style, columnStyle, debugStyle, noOppositeMargin, marginStyle],
-            })
-          : null
-      })}
-    </View>
+          return isValidElement(child)
+            ? cloneElement(child, {
+                ...child.props,
+                style: [child.props.style, debugStyle, noOppositeMargin, marginStyle],
+              })
+            : null
+        })}
+      </View>
+    </ColumnsContext.Provider>
   )
 }

src/context.tsx

@@ -14,6 +14,10 @@ interface Config {
   breakpoints: Breakpoints
 }
 
+interface ColumnsConfig {
+  isCollapsed: boolean
+}
+
 interface Props {
   children: React.ReactNode
   spacing?: number
@@ -29,13 +33,19 @@ const Context = createContext<Config>({
   breakpoints: defaultBreakpoints,
 })
 
+export const ColumnsContext = createContext<ColumnsConfig>({
+  isCollapsed: false,
+})
+
 type UseSpacing = {
   (space: number): number
   (): (space: number) => number
 }
 
 export const useStacks = () => useContext(Context)
 
+export const useColumns = () => useContext(ColumnsContext)
+
 export const useSpacing: UseSpacing = (space?: number): any => {
   const { spacing } = useStacks()
   const multiply = (value: number) => value * spacing

src/utils.ts

@@ -382,7 +382,7 @@ export const resolveCollapsibleProps = (options: CollapsibleOptions) => {
       noOppositeMargin,
       spacing,
       direction,
-      columnStyle: styles.fullWidth,
+      isCollapsed: true,
     }
   }
 
@@ -396,5 +396,6 @@ export const resolveCollapsibleProps = (options: CollapsibleOptions) => {
     noOppositeMargin,
     spacing,
     direction,
+    isCollapsed: false,
   }
 }