Doc: Add onDecorated reference and fix component hierarchy (#1711)

* Doc: Add TermGroup in component hierarchy
* Doc: Add SplitPane in component hierarchy
* Doc: Add onDecorated reference
This commit is contained in:
CHaBou 2017-05-13 16:57:41 +02:00 committed by GitHub
parent eeaf4be151
commit e57b8691f7

View file

@ -833,7 +833,7 @@
extend <code>Hyper</code> is that of its underlying open extend <code>Hyper</code> is that of its underlying open
source libraries.</p> source libraries.</p>
<p>Your module has to expose at least one of these methods:.</p> <p>Your module has to expose at least one of these methods:</p>
<table class="api"> <table class="api">
<thead> <thead>
@ -1243,7 +1243,16 @@
&lt;/Tabs&gt; &lt;/Tabs&gt;
&lt;/Header&gt; &lt;/Header&gt;
&lt;Terms&gt; &lt;Terms&gt;
&lt;Term /&gt; ... &lt;TermGroup&gt;
&lt;SplitPane&gt;
&lt;TermGroup&gt;
&lt;Term /&gt; ...
&lt;/TermGroup&gt;
&lt;TermGroup&gt;
&lt;Term /&gt; ...
&lt;/TermGroup&gt;
&lt;/TermGroup&gt;
&lt;/SplitPane&gt;
&lt;/Terms&gt; &lt;/Terms&gt;
&lt;Notifications&gt; &lt;Notifications&gt;
&lt;Notification /&gt; ... &lt;Notification /&gt; ...
@ -1292,9 +1301,14 @@
</tbody> </tbody>
</table> </table>
<p>Your higher order component can supply a <code>onDecorated</code>
property to the decorated component to get a reference to its instance.</p>
<p>We encourage you to maintain compatibility with other decorators. <p>We encourage you to maintain compatibility with other decorators.
Since many can be set, don't assume that yours is the only one. Since many can be set, don't assume that yours is the only one.<p>
For example, if you're passing children, compose potential existing
<p>For example, if you're passing children, compose potential existing
values:</p> values:</p>
<pre><code>render () { <pre><code>render () {
@ -1303,6 +1317,14 @@
return &lt;Tab {...this.props} customChildren={customChildren} /&gt; return &lt;Tab {...this.props} customChildren={customChildren} /&gt;
}</code></pre> }</code></pre>
<p>Or if you use <code>onDecorated</code> property</p>
<pre><code>onDecorated (term) {
this.term = term;
if (this.props.onDecorated) {
this.props.onDecorated(term);
}
}</code></pre>
<h3 id="actions-and-effects"><a href="#actions-and-effects">Actions and Effects</a></h3> <h3 id="actions-and-effects"><a href="#actions-and-effects">Actions and Effects</a></h3>