box.tsx

/**
* simple class for Box component 
* wrapping View
* do not use style
* best for quick layout
* @author hunje
*/

import React from 'react';
import {StyleProp, View, ViewStyle, GestureResponderEvent} from 'react-native';

type Props = {
  flex?:number;
  size?:number;
  width?:number;
  height?:number;
  color?:string;
  opacity?:number;
  margin?:number;
  marginVertical?:number;
  marginHorizontal?:number;
  marginStart?:number;
  marginEnd?:number;
  marginTop?:number;
  marginBottom?:number;
  paddingVertical?:number;
  paddingTop?:number;
  paddingBottom?:number;
  paddingStart?:number;
  paddingEnd?:number;
  borderColor?:string;
  borderStartColor?:string;
  borderEndColor?:string;
  borderTopColor?:string;
  borderBottomColor?:string;
  borderWidth?:number;
  borderStartWidth?:number;
  borderEndWidth?:number;
  borderTopWidth?:number;
  borderBottomWidth?:number;
  direction?: 'column' | 'row';
  children?: React.ReactNode;
  onPress?: () => void;
  alignItems?: 'center' | 'flex-start' | 'flex-end' ;
  justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between';
  position?: 'absolute' | 'relative';
  radius?:number;
  top?:number;
  bottom?:number;
  left?:number;
  right?:number;
};

/**
 * Simple Box Component
 */
export class Box extends React.PureComponent<Props> {

  static defaultProps = {
    direction: 'column',
    color: 'transparent',
  };

  constructor(props:Props) {
    super(props);
  }

  private getBoxSize() {
    const {size, width, height} = this.props;
    if (size) {
      return {width: size, height: size};
    }
    return {width: width, height: height};
  }

  private getMargin() {
    const {margin, marginVertical, marginHorizontal, marginEnd, marginStart,
    marginTop, marginBottom} = this.props;

    return {
      marginStart: marginStart || marginHorizontal || margin,
      marginEnd:  marginEnd || marginHorizontal || margin,
      marginTop: marginTop || marginVertical || margin,
      marginBottom: marginBottom || marginVertical || margin,
    }
  }

  private getPadding() {
    const {paddingVertical, paddingStart, paddingEnd, paddingTop, paddingBottom} = this.props;

    return {
      paddingTop: paddingTop || paddingVertical,
      paddingBottom: paddingBottom || paddingVertical,
      paddingStart: paddingStart,
      paddingEnd: paddingEnd
    };
  }

  private getBorderColor() {
    const {borderColor, borderStartColor, borderEndColor, borderTopColor, 
      borderBottomColor } = this.props;
    return {
      borderStartColor: borderStartColor || borderColor,
      borderEndColor: borderEndColor || borderColor,
      borderTopColor: borderTopColor || borderColor,
      borderBottomColor: borderBottomColor || borderColor
    };
  }

  private getBorderWidth() {
    const {borderWidth, borderStartWidth, borderEndWidth, borderTopWidth, 
      borderBottomWidth} = this.props;

    return {
      borderStartWidth: borderStartWidth || borderWidth,
      borderEndWidth: borderEndWidth || borderWidth,
      borderTopWidth: borderTopWidth || borderWidth,
      borderBottomWidth: borderBottomWidth || borderWidth
    };
  }

  private getPosition() {
    const {position, top, bottom, left, right} = this.props;
    return {
      position: position,
      top: top,
      bottom: bottom,
      left: left, 
      right: right
    };
  }

  private getStyle(): StyleProp<ViewStyle> {
    const {props} = this;
    const {width, height} = this.getBoxSize();
    const {marginStart, marginEnd, marginTop, marginBottom} = this.getMargin();

    return {
      backgroundColor: props.color,
      opacity: props.opacity,
      flex: props.flex,
      width: width,
      height: height,
      flexDirection: props.direction,
      justifyContent: props.justifyContent,
      alignItems: props.alignItems,
      marginTop: marginTop,
      marginBottom: marginBottom,
      marginStart: marginStart,
      marginEnd: marginEnd,
      borderRadius: props.radius,
      ...this.getPosition(),
      ...this.getBorderColor(),
      ...this.getBorderWidth(),
      ...this.getPadding(),
    };
  }

  private touchDidRelease = () => {
    const {onPress} = this.props;
    if (onPress) {
      onPress();
    }
  }
  
  private shouldSetResponder = (event:GestureResponderEvent) => {
    const {props} = this;
    if (props.onPress) {
      return true;
    }
    return false;
  }

  componentDidUpdate() {

  }

  render() {
    const {props} = this;
    return (
      <View style={this.getStyle()} onResponderRelease={this.touchDidRelease}
        onStartShouldSetResponder={this.shouldSetResponder}
      >
        { props.children && props.children}
      </View>
    );
  }
}