replace context with props

addons/info/src/components/Node.js

@@ -10,7 +10,14 @@ const stylesheet = {
 
 export default class Node extends React.Component {
   render() {
-    const { node, depth } = this.props;
+    const {
+      node,
+      depth,
+      maxPropsIntoLine,
+      maxPropObjectKeys,
+      maxPropArrayLength,
+      maxPropStringLength,
+    } = this.props;
     const { tagStyle, containerStyle } = stylesheet;
 
     const leftPad = {
@@ -36,7 +43,14 @@ export default class Node extends React.Component {
       return (
         <div style={containerStyle}>
           <span style={tagStyle}>&lt;{name}</span>
-          <Props node={node} singleLine />
+          <Props
+            node={node}
+            singleLine
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
           <span style={tagStyle}>/&gt;</span>
         </div>
       );
@@ -50,11 +64,24 @@ export default class Node extends React.Component {
       <div>
         <div style={containerStyleCopy}>
           <span style={tagStyle}>&lt;{name}</span>
-          <Props node={node} />
+          <Props
+            node={node}
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
           <span style={tagStyle}>&gt;</span>
         </div>
         {React.Children.map(children, childElement => (
-          <Node node={childElement} depth={depth + 1} />
+          <Node
+            node={childElement}
+            depth={depth + 1}
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
         ))}
         <div style={containerStyleCopy}>
           <span style={tagStyle}>&lt;/{name}&gt;</span>

addons/info/src/components/PropTable.js

@@ -22,7 +22,7 @@ const stylesheet = {
 
 export default class PropTable extends React.Component {
   render() {
-    const type = this.props.type;
+    const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
 
     if (!type) {
       return null;
@@ -96,7 +96,16 @@ export default class PropTable extends React.Component {
               <td>{row.property}</td>
               <td>{row.propType}</td>
               <td>{row.required}</td>
-              <td>{row.defaultValue === undefined ? '-' : <PropVal val={row.defaultValue} />}</td>
+              <td>
+                {row.defaultValue === undefined
+                  ? '-'
+                  : <PropVal
+                      val={row.defaultValue}
+                      maxPropObjectKeys={maxPropObjectKeys}
+                      maxPropArrayLength={maxPropArrayLength}
+                      maxPropStringLength={maxPropStringLength}
+                    />}
+              </td>
               <td>{row.description}</td>
             </tr>
           ))}

addons/info/src/components/PropVal.js

@@ -76,7 +76,7 @@ function previewObject(val, maxPropObjectKeys) {
   );
 }
 
-function previewProp(val, { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength }) {
+function previewProp({ val, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength }) {
   let braceWrap = true;
   let content = null;
   if (typeof val === 'number') {
@@ -113,14 +113,8 @@ function previewProp(val, { maxPropObjectKeys, maxPropArrayLength, maxPropString
 
 export default class PropVal extends React.Component {
   render() {
-    return previewProp(this.props.val, this.context);
+    return previewProp(this.props);
   }
 }
 
-PropVal.contextTypes = {
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
-};
-
 module.exports = PropVal;

addons/info/src/components/Props.js

@@ -10,6 +10,12 @@ const stylesheet = {
 
 export default class Props extends React.Component {
   render() {
+    const {
+      maxPropsIntoLine,
+      maxPropObjectKeys,
+      maxPropArrayLength,
+      maxPropStringLength,
+    } = this.props;
     const props = this.props.node.props;
     const defaultProps = this.props.node.type.defaultProps;
     if (!props || typeof props !== 'object') {
@@ -25,7 +31,7 @@ export default class Props extends React.Component {
         (!defaultProps || props[name] != defaultProps[name])
     );
 
-    const breakIntoNewLines = names.length > this.context.maxPropsIntoLine;
+    const breakIntoNewLines = names.length > maxPropsIntoLine;
     const endingSpace = this.props.singleLine ? ' ' : '';
 
     const items = [];
@@ -42,7 +48,14 @@ export default class Props extends React.Component {
           {(!props[name] || typeof props[name] !== 'boolean') &&
             <span>
               =
-              <span style={propValueStyle}><PropVal val={props[name]} /></span>
+              <span style={propValueStyle}>
+                <PropVal
+                  val={props[name]}
+                  maxPropObjectKeys={maxPropObjectKeys}
+                  maxPropArrayLength={maxPropArrayLength}
+                  maxPropStringLength={maxPropStringLength}
+                />
+              </span>
             </span>}
 
           {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
@@ -53,7 +66,3 @@ export default class Props extends React.Component {
     return <span>{items}</span>;
   }
 }
-
-Props.contextTypes = {
-  maxPropsIntoLine: PropTypes.number,
-};

addons/info/src/components/Story.js

@@ -93,15 +93,6 @@ export default class Story extends React.Component {
     MTRC.configure(this.props.mtrcConf);
   }
 
-  getChildContext() {
-    return {
-      maxPropsIntoLine: this.props.maxPropsIntoLine,
-      maxPropObjectKeys: this.props.maxPropObjectKeys,
-      maxPropArrayLength: this.props.maxPropArrayLength,
-      maxPropStringLength: this.props.maxPropStringLength,
-    };
-  }
-
   componentWillReceiveProps(nextProps) {
     this.setState({
       stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))),
@@ -248,12 +239,27 @@ export default class Story extends React.Component {
       return null;
     }
 
+    const {
+      maxPropsIntoLine,
+      maxPropObjectKeys,
+      maxPropArrayLength,
+      maxPropStringLength,
+    } = this.props;
+
     return (
       <div>
         <h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
         <Pre>
           {React.Children.map(this.props.children, (root, idx) => (
-            <Node key={idx} node={root} depth={0} />
+            <Node
+              key={idx}
+              node={root}
+              depth={0}
+              maxPropsIntoLine={maxPropsIntoLine}
+              maxPropObjectKeys={maxPropObjectKeys}
+              maxPropArrayLength={maxPropArrayLength}
+              maxPropStringLength={maxPropStringLength}
+            />
           ))}
         </Pre>
       </div>
@@ -308,12 +314,19 @@ export default class Story extends React.Component {
     const array = Array.from(types.keys());
     array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
 
+    const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
+
     const propTables = array.map((type, idx) => (
       <div key={idx}>
         <h2 style={this.state.stylesheet.propTableHead}>
           "{type.displayName || type.name}" Component
         </h2>
-        <PropTable type={type} />
+        <PropTable
+          type={type}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
       </div>
     ));
 
@@ -363,10 +376,3 @@ Story.defaultProps = {
   showSource: true,
   mtrcConf: {},
 };
-
-Story.childContextTypes = {
-  maxPropsIntoLine: PropTypes.number,
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
-};