From 2fd24c402355983d5284e1239edd917195b8e068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=B8=D1=80=D0=B8=D0=BB=D0=BB=20=D0=A1=D0=B0=D0=BC?=
 =?UTF-8?q?=D1=81=D0=BE=D0=BD=D0=BE=D0=B2?=
 <ksamsonov@Kirills-MacBook-Pro.local>
Date: Thu, 19 Sep 2019 22:05:57 +0300
Subject: [PATCH] Add gridColumn prop to Container and Provide it

---
 index.d.ts                   |  3 ++-
 src/grid/Col/index.jsx       | 16 ++++++++++------
 src/grid/Container/index.jsx | 15 ++++++++++++---
 src/grid/Readme.md           | 21 +++++++++++++++++++++
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 154a73ab..b7ac92c2 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -50,7 +50,8 @@ declare module 'react-grid-system' {
         xl?: boolean
         fluid?: boolean,
         style?: object,
-        component?: () => string | string
+        component?: () => string | string,
+        gridColumns?: number,
     }
 
     type RowProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
diff --git a/src/grid/Col/index.jsx b/src/grid/Col/index.jsx
index 79077943..77096ee8 100644
--- a/src/grid/Col/index.jsx
+++ b/src/grid/Col/index.jsx
@@ -1,9 +1,9 @@
 import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
 import getStyle from './style';
-import { getConfiguration } from '../../config';
 import { GutterWidthContext } from '../Row';
 import ScreenClassResolver from '../../context/ScreenClassResolver';
+import { CustomGridColumnsContext } from '../Container';
 
 export default class Col extends React.PureComponent {
   static propTypes = {
@@ -105,7 +105,7 @@ export default class Col extends React.PureComponent {
     component: 'div',
   };
 
-  renderCol = (gutterWidth, screenClass) => {
+  renderCol = (gutterWidth, screenClass, gridColumns) => {
     const {
       children,
       xs,
@@ -135,7 +135,7 @@ export default class Col extends React.PureComponent {
       debug,
       screenClass,
       gutterWidth,
-      gridColumns: getConfiguration().gridColumns,
+      gridColumns,
       moreStyle: style,
     });
     return createElement(component, { style: theStyle, ...otherProps, children });
@@ -144,9 +144,13 @@ export default class Col extends React.PureComponent {
   render = () => (
     <ScreenClassResolver>
       {screenClass => (
-        <GutterWidthContext.Consumer>
-          {gutterWidth => this.renderCol(gutterWidth, screenClass)}
-        </GutterWidthContext.Consumer>
+        <CustomGridColumnsContext.Consumer>
+          {gridColumns => (
+            <GutterWidthContext.Consumer>
+              {gutterWidth => this.renderCol(gutterWidth, screenClass, gridColumns)}
+            </GutterWidthContext.Consumer>
+          )}
+        </CustomGridColumnsContext.Consumer>
       )}
     </ScreenClassResolver>
   );
diff --git a/src/grid/Container/index.jsx b/src/grid/Container/index.jsx
index b100bf7d..8db8ebf2 100644
--- a/src/grid/Container/index.jsx
+++ b/src/grid/Container/index.jsx
@@ -4,6 +4,8 @@ import getStyle, { getAfterStyle } from './style';
 import { getConfiguration } from '../../config';
 import ScreenClassResolver from '../../context/ScreenClassResolver';
 
+export const CustomGridColumnsContext = React.createContext(getConfiguration().gridColumns);
+
 export default class Container extends React.PureComponent {
   static propTypes = {
     /**
@@ -47,6 +49,10 @@ export default class Container extends React.PureComponent {
      * Use your own component
      */
     component: PropTypes.elementType,
+    /**
+     * Use your own gridColumns value for Container
+     */
+    gridColumns: PropTypes.number,
   };
 
   static defaultProps = {
@@ -58,11 +64,12 @@ export default class Container extends React.PureComponent {
     xl: false,
     style: {},
     component: 'div',
+    gridColumns: getConfiguration().gridColumns,
   };
 
   render() {
     const {
-      children, fluid, xs, sm, md, lg, xl, style, component, ...otherProps
+      children, fluid, xs, sm, md, lg, xl, style, component, gridColumns, ...otherProps
     } = this.props;
 
     return (
@@ -85,8 +92,10 @@ export default class Container extends React.PureComponent {
             ...otherProps,
           },
           <React.Fragment>
-            {children}
-            <span style={getAfterStyle()} />
+            <CustomGridColumnsContext.Provider value={gridColumns}>
+              {children}
+              <span style={getAfterStyle()} />
+            </CustomGridColumnsContext.Provider>
           </React.Fragment>,
         )
         }
diff --git a/src/grid/Readme.md b/src/grid/Readme.md
index e5b0fb2d..4845fcf3 100644
--- a/src/grid/Readme.md
+++ b/src/grid/Readme.md
@@ -247,3 +247,24 @@ Resize your browser or load on different devices to test the grid system.
   </Row>
 </Container>
 ```
+
+You can define a custom grid columns value to specific Container
+
+### Example: Custom grid columns param
+
+```
+<Container fluid style={{ lineHeight: '32px' }} gridColumns={15}>
+  <Row debug>
+    <Col lg={10} debug>1 of 2</Col>
+    <Col lg={5} debug>2 of 2</Col>
+  </Row>
+  <br />
+  <Row debug>
+    <Col debug>1 of 3</Col>
+    <Col debug>2 of 3</Col>
+    <Col debug>3 of 3</Col>
+  </Row>
+</Container>
+```
+
+