Implemented styling overrides based on active size

docs/api/README.md

@@ -19,12 +19,14 @@ A component which contains sections and blocks.
 - **horizontal** - if provided it will flow horizontally, it goes hand in hand with `horizontal` property of `ScrollView`
 - **stretchable** - whether the grid should stretch the available space, this has no effect on sections that do not have the `stretch` property
 - **scrollable** - option which enables scrolling on a grid, if grid content doesn't fit the screen
-- **style** - enables overriding generated style
+- **xsStyle, smStyle, mdStyle, lgStyle, xlStyle, xxlStyle** - style used when specific size class is active; similar to the size in a Block, it will override the style based on the active size.
+- **style** - general style regardless of active size
 
 ### Section
 Container for blocks, in default grid direction (vertical) it behaves the same as a row in web-based grid systems. Its purpose is to group elements (blocks) and enable breaking into the new row.
 - **stretch** - whether section should stretch the available space, only works when grid is `stretchable`
-- **style** - enables overriding generated style
+- **xsStyle, smStyle, mdStyle, lgStyle, xlStyle, xxlStyle** - style used when specific size class is active; similar to the size in a Block, it will override the style based on the active size.
+- **style** - general style regardless of active size
 
 ### Block
 The smallest building block of grid elements. It renders itself depending on grid size.
@@ -37,7 +39,8 @@ The smallest building block of grid elements. It renders itself depending on gri
   - **numeric points**, fixed size in points (eg. `100`)
 - **hidden, xsHidden, smHidden, mdHidden, lgHidden, xlHidden, xxlHidden** - just like sizes, it will hide element attribute depending on current size
 - **visible, xsVisible, smVisible, mdVisible, lgVisible, xlVisible, xxlVisible** - counterparts to the hidden classes
-- **style** - enables overriding generated style
+- **xsStyle, smStyle, mdStyle, lgStyle, xlStyle, xxlStyle** - style used when specific size class is active; similar to the size above, it will override the style based on the active size.
+- **style** - general style regardless of active size
 
 ## Wrappers
 

src/components/block/index.js

@@ -8,7 +8,7 @@ import {
   VERTICAL,
 } from '../../shared/constants';
 
-import { roundForPercentage } from '../../shared/methods';
+import { roundForPercentage, getStyle } from '../../shared/methods';
 import { ContainerSizeProp, DirectionProp } from '../../shared/props';
 import { checkInsideGrid } from '../../utils';
 import { determineSize, isHidden } from './methods';
@@ -58,14 +58,15 @@ const Block = ({
   const size = determineSize(SIZE_NAMES, gridSizeClass, props);
   const constantSize = { [styleProperty]: size };
   const sizeStyle = (size === 'stretch') ? style.stretchSize : constantSize;
+  const viewStyle = getStyle(SIZE_NAMES, gridSizeClass, props);
 
   // flexDirection depends on direction
   const directionStyle = {
     flexDirection: (gridContentDirection === VERTICAL ? 'column' : 'row'),
   };
 
   return (
-    <View style={[directionStyle, sizeStyle, props.style]}>
+    <View style={[directionStyle, sizeStyle, viewStyle]}>
       {children}
     </View>
   );

src/components/block/methods.js

@@ -62,7 +62,6 @@ const getSize = (sizeNames, activeSize, props) => {
   return valueForSize(sizeNames, activeSize, props, initialValue, keySelector);
 };
 
-
 /**
  * Determines width percentage of component depended on currently active size.
  *

src/components/grid/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View, ViewPropTypes } from 'react-native';
 
 import {
   BREAKPOINT_VALUES,
@@ -10,6 +10,7 @@ import {
 } from '../../shared/constants';
 
 import { ContainerSizeProp, DirectionProp } from '../../shared/props';
+import { getStyle } from '../../shared/methods';
 import { determineSizeClass } from './methods';
 import { BreakpointsProp } from './props';
 import SizeSubscriber from './Subscriber';
@@ -184,7 +185,7 @@ class Grid extends Component {
         style={[
           (this.props.horizontal ? styles.horizontal : styles.vertical),
           this.props.stretchable ? styles.stretchable : null,
-          this.props.style,
+          getStyle(SIZE_NAMES, this.state.gridSizeClass, this.props)
         ]}
         onLayout={this.onLayoutHandler}
       >
@@ -213,7 +214,7 @@ Grid.propTypes = {
   horizontal: PropTypes.bool,
   scrollable: PropTypes.bool,
   relativeTo: PropTypes.oneOf(['parent', 'self', 'window']),
-  style: PropTypes.shape({}),
+  style: ViewPropTypes.style,
   stretchable: PropTypes.bool,
 
   children: PropTypes.oneOfType([

src/components/section/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewPropTypes } from 'react-native';
 
-import { DirectionProp } from '../../shared/props';
+import { SIZE_NAMES } from '../../shared/constants';
+
+import { ContainerSizeProp, DirectionProp } from '../../shared/props';
+import { getStyle } from '../../shared/methods';
 import { checkInsideGrid, warn } from '../../utils';
 
 
@@ -28,7 +31,7 @@ const styles = StyleSheet.create({
  *
  * @type {React.StatelessComponent<{stretch: boolean, style: any, children: any}>}
  */
-const Section = ({ children, style, stretch }, { gridContentDirection, gridStretch }) => {
+const Section = ({ children, stretch, ...props }, { gridContentDirection, gridSizeClass, gridStretch }) => {
   if (process.env.NODE_ENV === 'development') {
     warn(
       !gridStretch && !!stretch,
@@ -41,7 +44,7 @@ const Section = ({ children, style, stretch }, { gridContentDirection, gridStret
       style={[
         (gridContentDirection === 'vertical' ? styles.vertical : styles.horizontal),
         (stretch ? styles.stretch : null),
-        style,
+        getStyle(SIZE_NAMES, gridSizeClass, props),
       ]}
     >
       {children}
@@ -52,6 +55,7 @@ const Section = ({ children, style, stretch }, { gridContentDirection, gridStret
 
 Section.contextTypes = {
   gridContentDirection: checkInsideGrid(DirectionProp),
+  gridSizeClass: checkInsideGrid(ContainerSizeProp),
   gridStretch: checkInsideGrid(PropTypes.bool),
 };
 
@@ -60,7 +64,7 @@ Section.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
-  style: PropTypes.shape({}),
+  style: ViewPropTypes.style,
   stretch: PropTypes.bool,
 };
 

src/shared/methods.js

@@ -45,3 +45,18 @@ export const valueForSize = (sizeNames, activeSize, props, initialValue, keySele
 
   return value;
 };
+
+/**
+ * Determines style of component depended on sizing class.
+ *
+ * @param {Array<string>} sizeNames that grid supports ordered from smallest
+ * @param {string} activeSize that is determined by grid
+ * @param {Object} props object use as reference for values
+ * @return {any}
+ */
+export const getStyle = (sizeNames, activeSize, props) => {
+  const initialValue = props.style;
+  const keySelector = size => `${size}Style`;
+
+  return valueForSize(sizeNames, activeSize, props, initialValue, keySelector);
+};