import React, {Component} from 'react'; import {StyleSheet, View, Animated} from 'react-native'; import colors from '../assets/colors'; export default class Block extends Component { handleMargins() { const {margin} = this.props; if (typeof margin === 'number') { return { marginTop: margin, marginRight: margin, marginBottom: margin, marginLeft: margin, }; } if (typeof margin === 'object') { const marginSize = Object.keys(margin).length; switch (marginSize) { case 1: return { marginTop: margin[0], marginRight: margin[0], marginBottom: margin[0], marginLeft: margin[0], }; case 2: return { marginTop: margin[0], marginRight: margin[1], marginBottom: margin[0], marginLeft: margin[1], }; case 3: return { marginTop: margin[0], marginRight: margin[1], marginBottom: margin[2], marginLeft: margin[1], }; default: return { marginTop: margin[0], marginRight: margin[1], marginBottom: margin[2], marginLeft: margin[3], }; } } } handlePaddings() { const {padding} = this.props; if (typeof padding === 'number') { return { paddingTop: padding, paddingRight: padding, paddingBottom: padding, paddingLeft: padding, }; } if (typeof padding === 'object') { const paddingSize = Object.keys(padding).length; switch (paddingSize) { case 1: return { paddingTop: padding[0], paddingRight: padding[0], paddingBottom: padding[0], paddingLeft: padding[0], }; case 2: return { paddingTop: padding[0], paddingRight: padding[1], paddingBottom: padding[0], paddingLeft: padding[1], }; case 3: return { paddingTop: padding[0], paddingRight: padding[1], paddingBottom: padding[2], paddingLeft: padding[1], }; default: return { paddingTop: padding[0], paddingRight: padding[1], paddingBottom: padding[2], paddingLeft: padding[3], }; } } } render() { const { flex, row, column, center, middle, left, right, top, bottom, card, shadow, color, space, padding, margin, animated, wrap, style, children, ...props } = this.props; const blockStyles = [ styles.block, flex && {flex}, flex === false && {flex: 0}, // reset / disable flex row && styles.row, column && styles.column, center && styles.center, middle && styles.middle, left && styles.left, right && styles.right, top && styles.top, bottom && styles.bottom, margin && {...this.handleMargins()}, padding && {...this.handlePaddings()}, shadow && styles.shadow, space && {justifyContent: `space-${space}`}, wrap && {flexWrap: 'wrap'}, color && styles[color], // predefined styles colors for backgroundColor color && !styles[color] && {backgroundColor: color}, // custom backgroundColor style, // rewrite predefined styles ]; if (animated) { return ( <Animated.View style={blockStyles} {...props}> {children} </Animated.View> ); } return ( <View style={blockStyles} {...props}> {children} </View> ); } } export const styles = StyleSheet.create({ block: { flex: 1, }, row: { flexDirection: 'row', }, column: { flexDirection: 'column', }, center: { alignItems: 'center', }, middle: { justifyContent: 'center', }, left: { justifyContent: 'flex-start', }, right: { justifyContent: 'flex-end', }, top: { justifyContent: 'flex-start', }, bottom: { justifyContent: 'flex-end', }, shadow: { shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 3, }, accent: {backgroundColor: colors.accent}, primary: {backgroundColor: colors.primary}, secondary: {backgroundColor: colors.secondary}, tertiary: {backgroundColor: colors.tertiary}, black: {backgroundColor: colors.black}, white: {backgroundColor: colors.white}, gray: {backgroundColor: colors.gray}, gray2: {backgroundColor: colors.gray2}, orange: {backgroundColor: colors.orange}, });