Update Box props (add alignSelf)

Author: mobily

src/Box/index.tsx

@@ -6,6 +6,7 @@ import {
   resolveAlign,
   resolveJustify,
   resolveWrap,
+  resolveAlignSelf,
   AxisX,
   AxisY,
   Space,
@@ -46,21 +47,22 @@ type StyleProps = ResponsiveProps<
 
 export interface Props<T extends Direction> extends StyleProps, ViewProps {
   children?: React.ReactNode
-  flex?: Flex
+  flex?: ResponsiveProps<Flex>
   direction?: ResponsiveProp<T>
   paddingX?: ResponsiveProp<number>
   paddingY?: ResponsiveProp<number>
   marginX?: ResponsiveProp<number>
   marginY?: ResponsiveProp<number>
   alignX?: ResponsiveProp<ExtractAlignX<T>>
   alignY?: ResponsiveProp<ExtractAlignY<T>>
+  alignSelf?: ResponsiveProp<ExtractAlignY<T>>
   wrap?: Wrap
 }
 
 export const Box = <T extends Direction>(props: Props<T>) => {
   const {
     children,
-    flex = 'content',
+    flex: responsiveFlex = 'content',
     direction: responsiveDirection = 'column',
     padding,
     paddingX,
@@ -82,6 +84,7 @@ export const Box = <T extends Direction>(props: Props<T>) => {
     marginStart,
     alignX: responsiveAlignX,
     alignY: responsiveAlignY,
+    alignSelf: responsiveAlignSelf,
     style,
     wrap,
     ...rest
@@ -116,6 +119,9 @@ export const Box = <T extends Direction>(props: Props<T>) => {
   const direction = resolveResponsiveProp(responsiveDirection)
   const alignX = resolveResponsiveProp(responsiveAlignX)
   const alignY = resolveResponsiveProp(responsiveAlignY)
+  const alignSelf = resolveResponsiveProp(responsiveAlignSelf)
+  const flex = resolveResponsiveProp(responsiveFlex)
+
   const alignments =
     direction === 'column' || direction === 'column-reverse'
       ? [resolveAlign(alignX as AxisX), resolveJustify(alignY)]
@@ -129,6 +135,7 @@ export const Box = <T extends Direction>(props: Props<T>) => {
         resolveFlex(flex),
         resolveDirection(direction as Direction),
         resolveWrap(wrap),
+        resolveAlignSelf(alignSelf),
         debugStyle,
         ...alignments,
       ]}

src/utils.ts

@@ -154,6 +154,18 @@ export const styles = StyleSheet.create({
   alignStretch: {
     alignItems: 'stretch',
   },
+  alignSelfStart: {
+    alignSelf: 'flex-start',
+  },
+  alignSelfCenter: {
+    alignSelf: 'center',
+  },
+  alignSelfEnd: {
+    alignSelf: 'flex-end',
+  },
+  alignSelfStretch: {
+    alignSelf: 'stretch',
+  },
   justifyStart: {
     justifyContent: 'flex-start',
   },
@@ -234,6 +246,21 @@ export const resolveAlign = (dir?: AxisX | AxisY) => {
   }
 }
 
+export const resolveAlignSelf = (dir?: AxisX | AxisY) => {
+  switch (dir) {
+    case 'center':
+      return styles.alignSelfCenter
+    case 'bottom':
+    case 'right':
+      return styles.alignSelfEnd
+    case 'top':
+    case 'left':
+      return styles.alignSelfStart
+    case 'stretch':
+      return styles.alignSelfStretch
+  }
+}
+
 export const resolveJustify = (dir?: AxisX | AxisY | Space) => {
   switch (dir) {
     case 'center':