From 4998a51817053c7271b3db341de8b83458971edb Mon Sep 17 00:00:00 2001
From: Sean Landsman <sean@thelandsmans.com>
Date: Tue, 16 Oct 2018 17:42:29 +0100
Subject: [PATCH] AG-2178 Add docs and example on how to use Context API with
 React

---
 .../simpleReduxDynamicComponentExample/GridComponent.jsx  | 2 ++
 .../simpleReduxDynamicComponentExample/PriceRenderer.jsx  | 8 ++++++--
 .../SimpleReduxExample.jsx                                | 6 +++++-
 .../simpleReduxDynamicComponentExample/fontContext.js     | 3 +++
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 src-examples/simpleReduxDynamicComponentExample/fontContext.js

diff --git a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx b/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
index 428284a..6fa1d1f 100644
--- a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
@@ -6,6 +6,8 @@ import {connect} from "react-redux";
 
 import PriceRenderer from "./PriceRenderer";
 
+const ThemeContext = React.createContext('light');
+
 /*
  * This component serves to display the row data (provided by redux)
  */
diff --git a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx b/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
index 07f7c75..a4ab2ff 100644
--- a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
@@ -1,6 +1,8 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
+import FontContext from './fontContext'
+
 class PriceRenderer extends Component {
     constructor(props) {
         super(props);
@@ -18,7 +20,9 @@ class PriceRenderer extends Component {
 
     render() {
         return (
-            <span>{this.props.currencySymbol}{this.state.convertedValue}</span>
+            <FontContext.Consumer>
+                {fontWeight => <span style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span> }
+            </FontContext.Consumer>
         );
     }
 
@@ -36,5 +40,5 @@ export default connect(
     },
     null,
     null,
-    { withRef: true } // must be supplied for react/redux when using GridOptions.reactNext
+    {withRef: true} // must be supplied for react/redux when using GridOptions.reactNext
 )(PriceRenderer);
\ No newline at end of file
diff --git a/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx b/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
index ab25600..e46a03e 100644
--- a/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
@@ -9,6 +9,8 @@ import GridComponent from "./GridComponent";
 
 import gridData from "./gridDataReducer";
 
+import FontContext from './fontContext'
+
 let store = createStore(gridData);
 
 /*
@@ -26,7 +28,9 @@ export default class SimpleReduxExample extends Component {
                 <div>
                     <h1>Simple Redux Example using Connected React Components</h1>
                     <HeaderComponent/>
-                    <GridComponent/>
+                    <FontContext.Provider value="bold">
+                        <GridComponent/>
+                    </FontContext.Provider>
                 </div>
             </Provider>
         )
diff --git a/src-examples/simpleReduxDynamicComponentExample/fontContext.js b/src-examples/simpleReduxDynamicComponentExample/fontContext.js
new file mode 100644
index 0000000..661c581
--- /dev/null
+++ b/src-examples/simpleReduxDynamicComponentExample/fontContext.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+export default React.createContext('normal');
\ No newline at end of file