Использование контекста вместо props в компонентах аутентификации

src/components/auth/PanelTransition.jsx

@@ -10,6 +10,7 @@ import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss';
 import panelStyles from 'components/ui/panel.scss';
 import icons from 'components/ui/icons.scss';
 import authFlow from 'services/authFlow';
+import { userShape } from 'components/user/User';
 
 import * as actions from './actions';
 
@@ -21,6 +22,7 @@ class PanelTransition extends Component {
     static displayName = 'PanelTransition';
 
     static propTypes = {
+        // context props
         auth: PropTypes.shape({
             error: PropTypes.string,
             login: PropTypes.shape({
@@ -28,8 +30,13 @@ class PanelTransition extends Component {
                 password: PropTypes.string
             })
         }).isRequired,
+        user: userShape.isRequired,
         setError: React.PropTypes.func.isRequired,
         clearErrors: React.PropTypes.func.isRequired,
+        resolve: React.PropTypes.func.isRequired,
+        reject: React.PropTypes.func.isRequired,
+
+        // local props
         path: PropTypes.string.isRequired,
         Title: PropTypes.element.isRequired,
         Body: PropTypes.element.isRequired,
@@ -37,6 +44,30 @@ class PanelTransition extends Component {
         Links: PropTypes.element.isRequired
     };
 
+    static childContextTypes = {
+        auth: PropTypes.shape({
+            error: PropTypes.string,
+            login: PropTypes.shape({
+                login: PropTypes.string,
+                password: PropTypes.string
+            })
+        }),
+        user: userShape,
+        clearErrors: React.PropTypes.func,
+        resolve: PropTypes.func,
+        reject: PropTypes.func
+    };
+
+    getChildContext() {
+        return {
+            auth: this.props.auth,
+            user: this.props.user,
+            clearErrors: this.props.clearErrors,
+            resolve: this.props.resolve,
+            reject: this.props.reject
+        };
+    }
+
     state = {
         height: {},
         contextHeight: 0
@@ -236,7 +267,7 @@ class PanelTransition extends Component {
             <div key={`header${key}`} style={style}>
                 {hasBackButton ? backButton : null}
                 <div style={scrollStyle}>
-                    {React.cloneElement(Title, this.props)}
+                    {Title}
                 </div>
             </div>
         );
@@ -264,7 +295,6 @@ class PanelTransition extends Component {
         return (
             <ReactHeight key={`body${key}`} style={style} onHeightReady={this.onUpdateHeight}>
                 {React.cloneElement(Body, {
-                    ...this.props,
                     ref: (body) => {
                         this.body = body;
                     }
@@ -280,7 +310,7 @@ class PanelTransition extends Component {
 
         return (
             <div key={`footer${key}`} style={style}>
-                {React.cloneElement(Footer, this.props)}
+                {Footer}
             </div>
         );
     }
@@ -292,7 +322,7 @@ class PanelTransition extends Component {
 
         return (
             <div key={`links${key}`} style={style}>
-                {React.cloneElement(Links, this.props)}
+                {Links}
             </div>
         );
     }