mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed fa58b94cd5 to master with MkDocs 1.2.2 and mike 1.0.1
This commit is contained in:
parent
a85c6b8b9c
commit
e0eb08a4e2
@ -1083,9 +1083,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1138,12 +1138,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1036,9 +1036,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1067,12 +1067,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1044,9 +1044,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1075,12 +1075,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1091,9 +1091,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1125,12 +1125,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1142,9 +1142,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1173,12 +1173,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1084,9 +1084,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1115,12 +1115,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1036,9 +1036,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1067,12 +1067,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1083,9 +1083,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1114,12 +1114,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1211,9 +1211,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1251,12 +1251,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1067,9 +1067,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1107,12 +1107,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1080,9 +1080,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1111,12 +1111,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1159,9 +1159,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1190,12 +1190,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1044,9 +1044,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1075,12 +1075,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1036,9 +1036,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1067,12 +1067,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1038,9 +1038,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1069,12 +1069,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1187,9 +1187,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1229,12 +1229,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1052,9 +1052,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1089,12 +1089,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1051,9 +1051,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1082,12 +1082,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1107,9 +1107,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1138,12 +1138,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1084,9 +1084,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1118,12 +1118,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1054,9 +1054,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1085,12 +1085,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1060,9 +1060,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1091,12 +1091,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1044,9 +1044,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1075,12 +1075,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1060,9 +1060,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1091,12 +1091,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1083,9 +1083,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1114,12 +1114,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1054,9 +1054,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1085,12 +1085,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1036,9 +1036,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1067,12 +1067,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1036,9 +1036,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1067,12 +1067,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1116,9 +1116,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1147,12 +1147,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1083,9 +1083,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1114,12 +1114,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1036,9 +1036,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1067,12 +1067,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1044,9 +1044,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1078,12 +1078,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1126,9 +1126,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from">Inherited from<a class="headerlink" href="#inherited-from" title="Permanent link">#</a></h4>
|
||||
@ -1163,12 +1163,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1123,9 +1123,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1154,12 +1154,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1028,9 +1028,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1059,12 +1059,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -1068,9 +1068,9 @@
|
||||
Should be used with type annotation or static contextType.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">MyContext</span>
|
||||
<span class="c1">// For TS pre-3.7:</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="c1">// For TS 3.7 and above:</span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
<span class="kr">declare</span> <span class="nx">context</span>: <span class="kt">React.ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">MyContext</span><span class="o">></span>
|
||||
</code></pre></div>
|
||||
<p><strong><code>see</code></strong> https://reactjs.org/docs/context.html</p>
|
||||
<h4 id="inherited-from_2">Inherited from<a class="headerlink" href="#inherited-from_2" title="Permanent link">#</a></h4>
|
||||
@ -1099,12 +1099,12 @@ https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs</p>
|
||||
<p>▪ <code>Static</code> <code>Optional</code> <strong>contextType</strong>: <code>Context</code><any></p>
|
||||
<p>If set, <code>this.context</code> will be set at runtime to the current value of the given Context.</p>
|
||||
<p>Usage:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">type</span> <span class="nx">MyContext</span> <span class="o">=</span> <span class="kt">number</span>
|
||||
<span class="kd">const</span> <span class="nx">Ctx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="o"><</span><span class="nx">MyContext</span><span class="o">></span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
|
||||
|
||||
<span class="kd">class</span> <span class="nx">Foo</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="k">static</span> <span class="nx">contextType</span> <span class="o">=</span> <span class="nx">Ctx</span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="k">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">context</span><span class="o">!:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ContextType</span><span class="o"><</span><span class="ow">typeof</span> <span class="nx">Ctx</span><span class="o">></span>
|
||||
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><></span><span class="nx">My</span> <span class="nx">context</span><span class="err">'</span><span class="nx">s</span> <span class="nx">value</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">}</span><span class="o"><</span><span class="err">/>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -989,7 +989,7 @@ It adds app menu items to the Lens UI.
|
||||
In order to see logs from this extension, you need to start Lens from the command line.</p>
|
||||
<h3 id="activate">Activate<a class="headerlink" href="#activate" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is activated (started).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -999,7 +999,7 @@ In order to see logs from this extension, you need to start Lens from the comman
|
||||
</code></pre></div>
|
||||
<h3 id="deactivate">Deactivate<a class="headerlink" href="#deactivate" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">onDeactivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -1010,7 +1010,7 @@ In order to see logs from this extension, you need to start Lens from the comman
|
||||
<h3 id="app-menus">App Menus<a class="headerlink" href="#app-menus" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom app menus that will be displayed on OS native menus.</p>
|
||||
<p>Example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">appMenus</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -1029,7 +1029,7 @@ In order to see logs from this extension, you need to start Lens from the comman
|
||||
In order to see logs from this extension you need to check them via <strong>View</strong> > <strong>Toggle Developer Tools</strong> > <strong>Console</strong>.</p>
|
||||
<h3 id="activate_1">Activate<a class="headerlink" href="#activate_1" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is activated (started).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -1039,7 +1039,7 @@ In order to see logs from this extension you need to check them via <strong>View
|
||||
</code></pre></div>
|
||||
<h3 id="deactivate_1">Deactivate<a class="headerlink" href="#deactivate_1" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleMainExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">onDeactivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -1050,9 +1050,9 @@ In order to see logs from this extension you need to check them via <strong>View
|
||||
<h3 id="global-pages">Global Pages<a class="headerlink" href="#global-pages" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom global pages (views) to Lens's main window.
|
||||
The global page is a full-screen page that hides all other content from a window.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-page"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-page"</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1075,7 +1075,7 @@ The global page is a full-screen page that hides all other content from a window
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example page"</span><span class="p">,</span> <span class="c1">// used in icon's tooltip</span>
|
||||
<span class="nx">target</span><span class="o">:</span> <span class="p">{</span> <span class="nx">pageId</span><span class="o">:</span> <span class="s2">"example"</span> <span class="p">}</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Icon</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">Icon</span> <span class="nx">material</span><span class="o">=</span><span class="s2">"arrow"</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Icon</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">Icon</span> <span class="nx">material</span><span class="o">=</span><span class="s2">"arrow"</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
@ -1084,10 +1084,10 @@ The global page is a full-screen page that hides all other content from a window
|
||||
<h3 id="app-preferences">App Preferences<a class="headerlink" href="#app-preferences" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom app preferences.
|
||||
It is responsible for storing a state for custom preferences.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">myCustomPreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/my-custom-preferences-store"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">MyCustomPreferenceHint</span><span class="p">,</span> <span class="nx">MyCustomPreferenceInput</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/my-custom-preference"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">myCustomPreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/my-custom-preferences-store"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">MyCustomPreferenceHint</span><span class="p">,</span> <span class="nx">MyCustomPreferenceInput</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/my-custom-preference"</span>
|
||||
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleRendererExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
@ -1095,8 +1095,8 @@ It is responsible for storing a state for custom preferences.</p>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"My Custom Preference"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">MyCustomPreferenceHint</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">MyCustomPreferenceInput</span> <span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">myCustomPreferencesStore</span><span class="p">}</span><span class="o">/></span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">MyCustomPreferenceHint</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">MyCustomPreferenceInput</span> <span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">myCustomPreferencesStore</span><span class="p">}</span><span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
@ -1105,9 +1105,9 @@ It is responsible for storing a state for custom preferences.</p>
|
||||
<h3 id="cluster-pages">Cluster Pages<a class="headerlink" href="#cluster-pages" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom cluster pages.
|
||||
These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/page"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/page"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -1115,7 +1115,7 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"extension-example"</span><span class="p">,</span> <span class="c1">// optional</span>
|
||||
<span class="nx">exact</span>: <span class="kt">true</span><span class="p">,</span> <span class="c1">// optional</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
@ -1133,8 +1133,8 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
</code></pre></div>
|
||||
<h3 id="top-bar-items">Top Bar Items<a class="headerlink" href="#top-bar-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom components to a top bar area.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1147,7 +1147,7 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Item</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Icon</span> <span class="nx">material</span><span class="o">=</span><span class="s2">"favorite"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"/example-page"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Icon</span> <span class="nx">material</span><span class="o">=</span><span class="s2">"favorite"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"/example-page"</span> <span class="o">/></span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
@ -1156,8 +1156,8 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
</code></pre></div>
|
||||
<h3 id="status-bar-items">Status Bar Items<a class="headerlink" href="#status-bar-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom icons and text to a status bar area.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1170,7 +1170,7 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Item</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps hover-highlight"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"/example-page"</span><span class="p">)}</span> <span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps hover-highlight"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"/example-page"</span><span class="p">)}</span> <span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Icon</span> <span class="nx">material</span><span class="o">=</span><span class="s2">"favorite"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">)</span>
|
||||
@ -1181,15 +1181,15 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-workloads-overview-items">Kubernetes Workloads Overview Items<a class="headerlink" href="#kubernetes-workloads-overview-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom workloads overview items.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">CustomWorkloadsOverviewItem</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/custom-workloads-overview-item"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">CustomWorkloadsOverviewItem</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/custom-workloads-overview-item"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeWorkloadsOverviewItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">components</span> <span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">CustomWorkloadsOverviewItem</span> <span class="o">/></span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CustomWorkloadsOverviewItem</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
@ -1197,9 +1197,9 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-object-menu-items">Kubernetes Object Menu Items<a class="headerlink" href="#kubernetes-object-menu-items" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">CustomMenuItem</span><span class="p">,</span> <span class="nx">CustomMenuItemProps</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/custom-menu-item"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">CustomMenuItem</span><span class="p">,</span> <span class="nx">CustomMenuItemProps</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/custom-menu-item"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeObjectMenuItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -1207,7 +1207,7 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<span class="nx">kind</span><span class="o">:</span> <span class="s2">"Node"</span><span class="p">,</span>
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CustomMenuItemProps</span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">CustomMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CustomMenuItemProps</span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CustomMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
@ -1215,9 +1215,9 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-object-details">Kubernetes Object Details<a class="headerlink" href="#kubernetes-object-details" title="Permanent link">#</a></h3>
|
||||
<p>This extension can register custom details (content) for specified Kubernetes kinds/apiVersions.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">CustomKindDetails</span><span class="p">,</span> <span class="nx">CustomKindDetailsProps</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/custom-kind-details"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">CustomKindDetails</span><span class="p">,</span> <span class="nx">CustomKindDetailsProps</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/custom-kind-details"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeObjectDetailItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -1225,7 +1225,7 @@ These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<span class="nx">kind</span><span class="o">:</span> <span class="s2">"CustomKind"</span><span class="p">,</span>
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"custom.acme.org/v1"</span><span class="p">],</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CustomKindDetailsProps</span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">CustomKindDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CustomKindDetailsProps</span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CustomKindDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
|
||||
@ -961,9 +961,9 @@ For example:</p>
|
||||
If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
|
||||
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
|
||||
<p>There is a way of detect active theme and its changes in JS. <a href="https://github.com/mobxjs/mobx-react#observercomponent">MobX observer function/decorator</a> can be used for this purpose.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="err">@</span><span class="nx">observer</span>
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">SupportPage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
|
||||
@ -883,16 +883,16 @@ On the <code>renderer</code> entry point, the Hello World sample extension defin
|
||||
The <code>Cluster Page</code> object registers the <code>/extension-example</code> path, and this path renders the <code>ExamplePage</code> React component.
|
||||
It also registers the <code>MenuItem</code> component that displays the <code>ExampleIcon</code> React component and the "Hello World" text in the left-side menu of the cluster dashboard.
|
||||
These React components are defined in the additional <code>./src/page.tsx</code> file.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"extension-example"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
|
||||
@ -885,8 +885,8 @@ Only <code>renderer</code> can initiate this kind of request, and only <code>mai
|
||||
</ul>
|
||||
<p>To register either a handler or a listener, you should do something like the following:</p>
|
||||
<p><code>main.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcMain</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./helpers/main"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcMain</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./helpers/main"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExampleExtensionMain</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -898,7 +898,7 @@ Only <code>renderer</code> can initiate this kind of request, and only <code>mai
|
||||
Lens will automatically clean up that store and all the handlers on deactivation and uninstall.</p>
|
||||
<hr />
|
||||
<p><code>helpers/main.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">IpcMain</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">Ipc</span> <span class="p">{</span>
|
||||
<span class="kr">constructor</span><span class="p">(</span><span class="nx">extension</span>: <span class="kt">Main.LensExtension</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -916,21 +916,21 @@ Lens will automatically clean up that store and all the handlers on deactivation
|
||||
You should be able to just call <code>IpcMain.getInstance()</code> anywhere it is needed in your extension.</p>
|
||||
<hr />
|
||||
<p><code>renderer.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcRenderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./helpers/renderer"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">IpcRenderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./helpers/renderer"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExampleExtensionRenderer</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">ipc</span> <span class="o">=</span> <span class="nx">IpcRenderer</span><span class="p">.</span><span class="nx">createInstance</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">ipc</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">(</span><span class="s2">"initialize"</span><span class="p">,</span> <span class="s2">"an-id"</span><span class="p">),</span> <span class="mf">5000</span><span class="p">);</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=></span> <span class="nx">ipc</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">(</span><span class="s2">"initialize"</span><span class="p">,</span> <span class="s2">"an-id"</span><span class="p">),</span> <span class="mf">5000</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div></p>
|
||||
<p>It is also needed to create an instance to broadcast messages too.</p>
|
||||
<hr />
|
||||
<p><code>helpers/renderer.ts</code>:
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">IpcRenderer</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Ipc</span> <span class="p">{}</span>
|
||||
</code></pre></div></p>
|
||||
|
||||
@ -779,9 +779,9 @@ We will do this in our extension class <code>CrdSampleExtension</code> that is d
|
||||
<p>To register menu item in the cluster menu we need to register <code>PageMenuRegistration</code> object.
|
||||
This object will register a menu item with "Certificates" text.
|
||||
It will also use <code>CertificateIcon</code> component to render an icon and navigate to cluster page that is having <code>certificates</code> page id.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -813,7 +813,7 @@ It will also use <code>CertificateIcon</code> component to render an icon and na
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"certificates"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">CertificatePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CertificatePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">MenuIcon</span>: <span class="kt">CertificateIcon</span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}]</span>
|
||||
@ -828,7 +828,7 @@ In this step we will actually implement that.
|
||||
Lens Extensions API provides easy mechanism to do this.
|
||||
We just need to define <code>Certificate</code> class derived from <code>Renderer.K8sApi.KubeObject</code>, <code>CertificatesApi</code>derived from <code>Renderer.K8sApi.KubeApi</code> and <code>CertificatesStore</code> derived from <code>Renderer.K8sApi.KubeObjectStore</code>.</p>
|
||||
<p><code>Certificate</code> class defines properties found in the CRD object:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">K8sApi</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -875,7 +875,7 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<span class="nx">message</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="nx">reason</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="nx">status</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="kd">type</span><span class="o">?:</span> <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="kr">type</span><span class="nx">?</span>: <span class="kt">string</span><span class="p">;</span>
|
||||
<span class="p">}[];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
@ -883,7 +883,7 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<p>With <code>CertificatesApi</code> class we are able to manage <code>Certificate</code> objects in Kubernetes API:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">export</span> <span class="kd">class</span> <span class="nx">CertificatesApi</span> <span class="k">extends</span> <span class="nx">KubeApi</span><span class="o"><</span><span class="nx">Certificate</span><span class="o">></span> <span class="p">{}</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesApi</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CertificatesApi</span><span class="p">({</span>
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesApi</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">CertificatesApi</span><span class="p">({</span>
|
||||
<span class="nx">objectConstructor</span>: <span class="kt">Certificate</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
@ -892,7 +892,7 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<span class="nx">api</span> <span class="o">=</span> <span class="nx">certificatesApi</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesStore</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CertificatesStore</span><span class="p">();</span>
|
||||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">certificatesStore</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">CertificatesStore</span><span class="p">();</span>
|
||||
</code></pre></div>
|
||||
<p>And, finally, we register this store to Lens's API manager.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nx">apiManager</span><span class="p">.</span><span class="nx">registerStore</span><span class="p">(</span><span class="nx">certificatesStore</span><span class="p">);</span>
|
||||
@ -901,10 +901,10 @@ We just need to define <code>Certificate</code> class derived from <code>Rendere
|
||||
<p>Now we have created mechanism to manage <code>Certificate</code> objects in Kubernetes API.
|
||||
Then we need to fetch those and render them in the UI.</p>
|
||||
<p>First we define <code>CertificatePage</code> class that extends <code>React.Component</code>.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">certificatesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"../certificate-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"../certificate"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">certificatesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"../certificate-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"../certificate"</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">CertificatePage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="p">{</span> <span class="nx">extension</span>: <span class="kt">Renderer.LensExtension</span> <span class="p">}</span><span class="o">></span> <span class="p">{</span>
|
||||
|
||||
@ -915,7 +915,7 @@ To do that, we just need to add <code>Renderer.Component.KubeObjectListLayout</c
|
||||
To define which objects the list is showing, we need to pass <code>certificateStore</code> object to <code>Renderer.Component.KubeObjectListLayout</code> in <code>store</code> property.
|
||||
<code>Renderer.Component.KubeObjectListLayout</code> will fetch automatically items from the given store when component is mounted.
|
||||
Also, we can define needed sorting callbacks and search filters for the list:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -939,12 +939,12 @@ Also, we can define needed sorting callbacks and search filters for the list:</p
|
||||
<span class="o"><</span><span class="nx">KubeObjectListLayout</span>
|
||||
<span class="nx">className</span><span class="o">=</span><span class="s2">"Certificates"</span> <span class="nx">store</span><span class="o">=</span><span class="p">{</span><span class="nx">certificatesStore</span><span class="p">}</span>
|
||||
<span class="nx">sortingCallbacks</span><span class="o">=</span><span class="p">{{</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">name</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">namespace</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">namespace</span><span class="p">,</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">issuer</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">issuerRef</span><span class="p">.</span><span class="nx">name</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">name</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">namespace</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">namespace</span><span class="p">,</span>
|
||||
<span class="p">[</span><span class="nx">sortBy</span><span class="p">.</span><span class="nx">issuer</span><span class="p">]</span><span class="o">:</span> <span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">issuerRef</span><span class="p">.</span><span class="nx">name</span>
|
||||
<span class="p">}}</span>
|
||||
<span class="nx">searchFilters</span><span class="o">=</span><span class="p">{[</span>
|
||||
<span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getSearchFields</span><span class="p">()</span>
|
||||
<span class="p">(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="nx">certificate</span><span class="p">.</span><span class="nx">getSearchFields</span><span class="p">()</span>
|
||||
<span class="p">]}</span>
|
||||
<span class="nx">renderHeaderTitle</span><span class="o">=</span><span class="s2">"Certificates"</span>
|
||||
<span class="nx">renderTableHeader</span><span class="o">=</span><span class="p">{[</span>
|
||||
@ -952,7 +952,7 @@ Also, we can define needed sorting callbacks and search filters for the list:</p
|
||||
<span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Namespace"</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s2">"namespace"</span><span class="p">,</span> <span class="nx">sortBy</span>: <span class="kt">sortBy.namespace</span> <span class="p">},</span>
|
||||
<span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Issuer"</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s2">"issuer"</span><span class="p">,</span> <span class="nx">sortBy</span>: <span class="kt">sortBy.namespace</span> <span class="p">},</span>
|
||||
<span class="p">]}</span>
|
||||
<span class="nx">renderTableContents</span><span class="o">=</span><span class="p">{(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="o">=></span> <span class="p">[</span>
|
||||
<span class="nx">renderTableContents</span><span class="o">=</span><span class="p">{(</span><span class="nx">certificate</span>: <span class="kt">Certificate</span><span class="p">)</span> <span class="p">=></span> <span class="p">[</span>
|
||||
<span class="nx">certificate</span><span class="p">.</span><span class="nx">getName</span><span class="p">(),</span>
|
||||
<span class="nx">certificate</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">namespace</span><span class="p">,</span>
|
||||
<span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">issuerRef</span><span class="p">.</span><span class="nx">name</span>
|
||||
@ -975,7 +975,7 @@ We will do this again in <code>CrdSampleExtension</code> class:</p>
|
||||
<span class="nx">kind</span>: <span class="kt">Certificate.kind</span><span class="p">,</span>
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"cert-manager.io/v1alpha2"</span><span class="p">],</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CertificateDetailsProps</span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">CertificateDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">CertificateDetailsProps</span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">CertificateDetails</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}]</span>
|
||||
<span class="p">}</span>
|
||||
@ -984,9 +984,9 @@ We will do this again in <code>CrdSampleExtension</code> class:</p>
|
||||
So, next we need to implement that component.
|
||||
Lens will inject <code>Certificate</code> object into our component so we just need to render some information out of it.
|
||||
We can use <code>Renderer.Component.DrawerItem</code> component from Lens Extensions API to give the same look and feel as Lens is using elsewhere:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"../certificate"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Certificate</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"../certificate"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1016,9 +1016,9 @@ We can use <code>Renderer.Component.DrawerItem</code> component from Lens Extens
|
||||
<span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">spec</span><span class="p">.</span><span class="nx">secretName</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/DrawerItem></span>
|
||||
<span class="o"><</span><span class="nx">DrawerItem</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"Status"</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"status"</span> <span class="nx">labelsOnly</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">status</span><span class="p">.</span><span class="nx">conditions</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">condition</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="kd">type</span><span class="p">,</span> <span class="nx">reason</span><span class="p">,</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">status</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">condition</span><span class="p">;</span>
|
||||
<span class="kd">const</span> <span class="nx">kind</span> <span class="o">=</span> <span class="kd">type</span> <span class="o">||</span> <span class="nx">reason</span><span class="p">;</span>
|
||||
<span class="p">{</span><span class="nx">certificate</span><span class="p">.</span><span class="nx">status</span><span class="p">.</span><span class="nx">conditions</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">condition</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="kr">type</span><span class="p">,</span> <span class="nx">reason</span><span class="p">,</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">status</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">condition</span><span class="p">;</span>
|
||||
<span class="kd">const</span> <span class="nx">kind</span> <span class="o">=</span> <span class="kr">type</span> <span class="o">||</span> <span class="nx">reason</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">kind</span><span class="p">)</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Badge</span>
|
||||
|
||||
@ -822,7 +822,7 @@ It also provides convenient methods for navigating to built-in Lens pages and ex
|
||||
<h2 id="mainlensextension-class"><code>Main.LensExtension</code> Class<a class="headerlink" href="#mainlensextension-class" title="Permanent link">#</a></h2>
|
||||
<h3 id="onactivate-and-ondeactivate-methods"><code>onActivate()</code> and <code>onDeactivate()</code> Methods<a class="headerlink" href="#onactivate-and-ondeactivate-methods" title="Permanent link">#</a></h3>
|
||||
<p>To create a main extension simply extend the <code>Main.LensExtension</code> class:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtensionMain</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -852,7 +852,7 @@ Achieve this by starting Lens from the command prompt.</p>
|
||||
<p>The Main Extension API allows you to customize the UI application menu.
|
||||
Note that this is the only UI feature that the Main Extension API allows you to customize.
|
||||
The following example demonstrates adding an item to the <strong>Help</strong> menu.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">SamplePageMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">appMenus</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -880,14 +880,14 @@ However, you would typically have this navigate to a specific page or perform an
|
||||
Note that pages are associated with the <a href="../renderer-extension/"><code>Renderer.LensExtension</code></a> class and can be defined in the process of extending it.</li>
|
||||
</ul>
|
||||
<p>The following example demonstrates how an application menu can be used to navigate to such a page:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">SamplePageMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">appMenus</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">parentId</span><span class="o">:</span> <span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="s2">"Sample"</span><span class="p">,</span>
|
||||
<span class="nx">click</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"myGlobalPage"</span><span class="p">)</span>
|
||||
<span class="nx">click</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"myGlobalPage"</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -801,7 +801,7 @@ Handlers will be run in both <code>main</code> and <code>renderer</code> in para
|
||||
Furthermore, both <code>main</code> and <code>renderer</code> are routed separately.
|
||||
In other words, which handler is selected in either process is independent from the list of possible handlers in the other.</p>
|
||||
<p>Example of registering a handler:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">function</span> <span class="nx">rootHandler</span><span class="p">(</span><span class="nx">params</span>: <span class="kt">Common.Types.ProtocolRouteParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"routed to ExampleExtension"</span><span class="p">,</span> <span class="nx">params</span><span class="p">);</span>
|
||||
|
||||
@ -1028,7 +1028,7 @@ The Renderer Extension API allows you to access, configure, and customize Lens d
|
||||
<h2 id="rendererlensextension-class"><code>Renderer.LensExtension</code> Class<a class="headerlink" href="#rendererlensextension-class" title="Permanent link">#</a></h2>
|
||||
<h3 id="onactivate-and-ondeactivate-methods"><code>onActivate()</code> and <code>onDeactivate()</code> Methods<a class="headerlink" href="#onactivate-and-ondeactivate-methods" title="Permanent link">#</a></h3>
|
||||
<p>To create a renderer extension, extend the <code>Renderer.LensExtension</code> class:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtensionMain</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -1060,16 +1060,16 @@ Use cluster pages to display information about or add functionality to the activ
|
||||
It is also possible to include custom details from other clusters.
|
||||
Use your extension to access Kubernetes resources in the active cluster with <a href="../stores#Clusterstore"><code>ClusterStore.getInstance()</code></a>.</p>
|
||||
<p>Add a cluster page definition to a <code>Renderer.LensExtension</code> subclass with the following example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"hello"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1084,8 +1084,8 @@ The properties of the <code>clusterPages</code> array objects are defined as fol
|
||||
It offers flexibility in defining the appearance and behavior of your page.</li>
|
||||
</ul>
|
||||
<p><code>ExamplePage</code> in the example above can be defined in <code>page.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExamplePage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="p">{</span> <span class="nx">extension</span>: <span class="kt">LensRendererExtension</span> <span class="p">}</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -1105,16 +1105,16 @@ Use <code>clusterPageMenus</code>, covered in the next section, to add cluster p
|
||||
<h3 id="clusterpagemenus"><code>clusterPageMenus</code><a class="headerlink" href="#clusterpagemenus" title="Permanent link">#</a></h3>
|
||||
<p><code>clusterPageMenus</code> allows you to add cluster page menu items to the secondary left nav, below Lens's standard cluster menus like <strong>Workloads</strong>, <strong>Custom Resources</strong>, etc.</p>
|
||||
<p>By expanding on the above example, you can add a cluster page menu item to the <code>ExampleExtension</code> definition:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"hello"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1142,10 +1142,10 @@ The properties of the <code>clusterPageMenus</code> array objects are defined as
|
||||
<p>The above example creates a menu item that reads <strong>Hello World</strong>.
|
||||
When users click <strong>Hello World</strong>, the cluster dashboard will show the contents of <code>Example Page</code>.</p>
|
||||
<p>This example requires the definition of another React-based component, <code>ExampleIcon</code>, which has been added to <code>page.tsx</code>, as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">IconProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">IconProps</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span> <span class="nx">Icon</span> <span class="p">},</span>
|
||||
@ -1174,22 +1174,22 @@ The properties that <code>Renderer.Component.Icon</code> uses are defined as fol
|
||||
</ul>
|
||||
<p><code>clusterPageMenus</code> can also be used to define sub menu items, so that you can create groups of cluster pages.
|
||||
The following example groups two sub menu items under one parent menu item:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">clusterPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"hello"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"bonjour"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExemplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExemplePage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1239,16 +1239,16 @@ A cluster page menu object is defined to be a submenu item by setting the <code>
|
||||
Their primary use is to display information and provide functionality across clusters (or catalog entities), including customized data and functionality unique to your extension.</p>
|
||||
<p>Unlike cluster pages, users can trigger global pages even when there is no active cluster (or catalog entity).</p>
|
||||
<p>The following example defines a <code>Renderer.LensExtension</code> subclass with a single global page definition:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./page'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./page'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">HelpExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">globalPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">HelpPage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">HelpPage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1263,8 +1263,8 @@ The properties of the <code>globalPages</code> array objects are defined as foll
|
||||
It offers flexibility in defining the appearance and behavior of your page.</li>
|
||||
</ul>
|
||||
<p><code>HelpPage</code> in the example above can be defined in <code>page.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">HelpPage</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="p">{</span> <span class="nx">extension</span>: <span class="kt">LensRendererExtension</span> <span class="p">}</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -1291,10 +1291,10 @@ Global pages are typically made available in the following ways:</p>
|
||||
<p>The Lens <strong>Preferences</strong> page is a built-in global page.
|
||||
You can use Lens extensions to add custom preferences to the Preferences page, providing a single location for users to configure global options.</p>
|
||||
<p>The following example demonstrates adding a custom preference:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleRendererExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
|
||||
@ -1304,8 +1304,8 @@ You can use Lens extensions to add custom preferences to the Preferences page, p
|
||||
<span class="p">{</span>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example Preferences"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="nx">preference</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">preference</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="nx">preference</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">preference</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1329,10 +1329,10 @@ The properties of the <code>appPreferences</code> array objects are defined as f
|
||||
This is how <code>ExampleRendererExtension</code> handles the state of the preference input.
|
||||
<code>ExampleRendererExtension</code> has a <code>preference</code> field, which you will add to <code>ExamplePreferenceInput</code>.</p>
|
||||
<p>In this example <code>ExamplePreferenceInput</code>, <code>ExamplePreferenceHint</code>, and <code>ExamplePreferenceProps</code> are defined in <code>./src/example-preference.tsx</code> as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1360,7 +1360,7 @@ This is how <code>ExampleRendererExtension</code> handles the state of the prefe
|
||||
<span class="o"><</span><span class="nx">Checkbox</span>
|
||||
<span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="p">=></span> <span class="p">{</span> <span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@ -1400,16 +1400,16 @@ However, we recommend that you manage your extension's state data using <a href=
|
||||
They can be used to display status information, or act as links to global pages as well as external pages.</p>
|
||||
<p>The following example adds a <code>statusBarItems</code> definition and a <code>globalPages</code> definition to a <code>LensRendererExtension</code> subclass.
|
||||
It configures the status bar item to navigate to the global page upon activation (normally a mouse click):</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpIcon</span><span class="p">,</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@k8slens/extensions'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">HelpIcon</span><span class="p">,</span> <span class="nx">HelpPage</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./page"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">HelpExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">globalPages</span> <span class="o">=</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s2">"help"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">HelpPage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Page</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">HelpPage</span> <span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="o">/></span><span class="p">,</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1420,7 +1420,7 @@ It configures the status bar item to navigate to the global page upon activation
|
||||
<span class="nx">Item</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span>
|
||||
<span class="nx">className</span><span class="o">=</span><span class="s2">"flex align-center gaps"</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"help"</span><span class="p">)}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="s2">"help"</span><span class="p">)}</span>
|
||||
<span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">HelpIcon</span> <span class="o">/></span>
|
||||
<span class="nx">My</span> <span class="nx">Status</span> <span class="nx">Bar</span> <span class="nx">Item</span>
|
||||
@ -1449,12 +1449,12 @@ Thus, clicking the status bar item activates the associated global pages.</li>
|
||||
<p>They also appear on the title bar of the details page for specific resources:</p>
|
||||
<p><img alt="Details" src="../images/kubeobjectmenuitemdetail.png" /></p>
|
||||
<p>The following example shows how to add a <code>kubeObjectMenuItems</code> for namespace resources with an associated action:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceMenuItem</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/namespace-menu-item"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceMenuItem</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/namespace-menu-item"</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeObjectMenuItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -1462,7 +1462,7 @@ Thus, clicking the status bar item activates the associated global pages.</li>
|
||||
<span class="nx">kind</span><span class="o">:</span> <span class="s2">"Namespace"</span><span class="p">,</span>
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectMenuProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">NamespaceMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">MenuItem</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectMenuProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">NamespaceMenuItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1479,8 +1479,8 @@ The properties of the <code>kubeObjectMenuItems</code> array objects are defined
|
||||
In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
</ul>
|
||||
<p><code>NamespaceMenuItem</code> is defined in <code>./src/namespace-menu-item.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1491,8 +1491,8 @@ In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
<span class="nx">Navigation</span><span class="p">,</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">function</span> <span class="nx">NamespaceMenuItem</span><span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectMenuProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="p">{</span> <span class="nx">object</span>: <span class="kt">namespace</span><span class="p">,</span> <span class="nx">toolbar</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">props</span><span class="p">;</span>
|
||||
@ -1500,7 +1500,7 @@ In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">namespaceName</span> <span class="o">=</span> <span class="nx">namespace</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">sendToTerminal</span> <span class="o">=</span> <span class="p">(</span><span class="nx">command</span>: <span class="kt">string</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">sendToTerminal</span> <span class="o">=</span> <span class="p">(</span><span class="nx">command</span>: <span class="kt">string</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="nx">terminalStore</span><span class="p">.</span><span class="nx">sendCommand</span><span class="p">(</span><span class="nx">command</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">enter</span>: <span class="kt">true</span><span class="p">,</span>
|
||||
<span class="nx">newTab</span>: <span class="kt">true</span><span class="p">,</span>
|
||||
@ -1508,7 +1508,7 @@ In this example a <code>NamespaceMenuItem</code> object is returned.</li>
|
||||
<span class="nx">Navigation</span><span class="p">.</span><span class="nx">hideDetails</span><span class="p">();</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">getPods</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">getPods</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="nx">sendToTerminal</span><span class="p">(</span><span class="sb">`kubectl get pods -n </span><span class="si">${</span><span class="nx">namespaceName</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
@ -1532,13 +1532,13 @@ Thus, <code>kubeObjectMenuItems</code> afford convenient access to the specific
|
||||
These custom details appear on the details page for a specific resource, such as a Namespace as shown here:</p>
|
||||
<p><img alt="Details" src="../images/kubeobjectdetailitem.png" /></p>
|
||||
<p>The following example shows how to use <code>kubeObjectDetailItems</code> to add a tabulated list of pods to the Namespace resource details page:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceDetailsItem</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/namespace-details-item"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">NamespaceDetailsItem</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/namespace-details-item"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectDetailsProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectDetailsProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectDetailsProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectDetailsProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">kubeObjectDetailItems</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -1547,7 +1547,7 @@ These custom details appear on the details page for a specific resource, such as
|
||||
<span class="nx">apiVersions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"v1"</span><span class="p">],</span>
|
||||
<span class="nx">priority</span>: <span class="kt">10</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="o">=></span> <span class="o"><</span><span class="nx">NamespaceDetailsItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="nx">Details</span><span class="o">:</span> <span class="p">(</span><span class="nx">props</span>: <span class="kt">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">></span><span class="p">)</span> <span class="p">=></span> <span class="o"><</span><span class="nx">NamespaceDetailsItem</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -1564,11 +1564,11 @@ The properties of the <code>kubeObjectDetailItems</code> array objects are defin
|
||||
In this example a <code>NamespaceDetailsItem</code> object is returned.</li>
|
||||
</ul>
|
||||
<p><code>NamespaceDetailsItem</code> is defined in <code>./src/namespace-details-item.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">PodsDetailsList</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./pods-details-list"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">PodsDetailsList</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./pods-details-list"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">K8sApi</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1579,9 +1579,9 @@ In this example a <code>NamespaceDetailsItem</code> object is returned.</li>
|
||||
<span class="p">},</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubeObjectMenuProps</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">Component</span><span class="p">.</span><span class="nx">KubeObjectMenuProps</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Namespace</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Namespace</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">@observer</span>
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">NamespaceDetailsItem</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">KubeObjectDetailsProps</span><span class="o"><</span><span class="nx">Namespace</span><span class="o">>></span> <span class="p">{</span>
|
||||
@ -1620,8 +1620,8 @@ This is done simply by marking the <code>pods</code> field as an <code>observabl
|
||||
Details are placed in drawers, and using <code>Renderer.Component.DrawerTitle</code> provides a separator from details above this one.
|
||||
Multiple details in a drawer can be placed in <code><Renderer.Component.DrawerItem></code> elements for further separation, if desired.
|
||||
The rest of this example's details are defined in <code>PodsDetailsList</code>, found in <code>./pods-details-list.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -1632,14 +1632,14 @@ The rest of this example's details are defined in <code>PodsDetailsList</code>,
|
||||
<span class="p">},</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">interface</span> <span class="nx">Props</span> <span class="p">{</span>
|
||||
<span class="nx">pods?</span>: <span class="kt">Pod</span><span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">PodsDetailsList</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o"><</span><span class="nx">Props</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">getTableRow</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pod</span>: <span class="kt">Pod</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="nx">getTableRow</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pod</span>: <span class="kt">Pod</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">TableRow</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">index</span><span class="p">}</span> <span class="nx">nowrap</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">TableCell</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"podName"</span><span class="o">></span><span class="p">{</span><span class="nx">pods</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">getName</span><span class="p">()}</span><span class="o"><</span><span class="err">/TableCell></span>
|
||||
|
||||
@ -737,8 +737,8 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
</code></pre></div>
|
||||
<p>It is simply a pod named <code>example-pod</code>, running nginx. Assume this content is in the file <code>../resources/example-pod.yml</code>.</p>
|
||||
<p>The following code sample shows how to use the <code>Renderer.K8sApi.ResourceStack</code> to manage installing and uninstalling this resource stack:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">path</span> <span class="k">from</span> <span class="s2">"path"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span><span class="p">,</span> <span class="nx">Common</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">path</span> <span class="kr">from</span> <span class="s2">"path"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">K8sApi</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -748,27 +748,27 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">type</span> <span class="nx">ResourceStack</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">ResourceStack</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kd">type</span> <span class="nx">KubernetesCluster</span> <span class="o">=</span> <span class="nx">Common</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">KubernetesCluster</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">ResourceStack</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">ResourceStack</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">Pod</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">K8sApi</span><span class="p">.</span><span class="nx">Pod</span><span class="p">;</span>
|
||||
<span class="kr">type</span> <span class="nx">KubernetesCluster</span> <span class="o">=</span> <span class="nx">Common</span><span class="p">.</span><span class="nx">Catalog</span><span class="p">.</span><span class="nx">KubernetesCluster</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">class</span> <span class="nx">ExampleClusterFeature</span> <span class="p">{</span>
|
||||
<span class="k">protected</span> <span class="nx">stack</span>: <span class="kt">ResourceStack</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">constructor</span><span class="p">(</span><span class="k">protected</span> <span class="nx">cluster</span>: <span class="kt">KubernetesCluster</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">stack</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ResourceStack</span><span class="p">(</span><span class="nx">cluster</span><span class="p">,</span> <span class="s2">"example-resource-stack"</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">stack</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">ResourceStack</span><span class="p">(</span><span class="nx">cluster</span><span class="p">,</span> <span class="s2">"example-resource-stack"</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">get</span> <span class="nx">resourceFolder</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">path</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">,</span> <span class="s2">"../resources/"</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">install</span><span class="p">()</span><span class="o">:</span> <span class="nx">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">install</span><span class="p">()</span><span class="o">:</span> <span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"installing example-pod"</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">stack</span><span class="p">.</span><span class="nx">kubectlApplyFolder</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resourceFolder</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">async</span> <span class="nx">isInstalled</span><span class="p">()</span><span class="o">:</span> <span class="nx">Promise</span><span class="o"><</span><span class="kr">boolean</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">isInstalled</span><span class="p">()</span><span class="o">:</span> <span class="nb">Promise</span><span class="o"><</span><span class="kt">boolean</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="k">try</span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">podApi</span> <span class="o">=</span> <span class="nx">forCluster</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cluster</span><span class="p">,</span> <span class="nx">Pod</span><span class="p">);</span>
|
||||
<span class="kd">const</span> <span class="nx">examplePod</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">podApi</span><span class="p">.</span><span class="nx">get</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="s2">"example-pod"</span><span class="p">,</span> <span class="nx">namespace</span><span class="o">:</span> <span class="s2">"default"</span><span class="p">});</span>
|
||||
@ -785,7 +785,7 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">async</span> <span class="nx">uninstall</span><span class="p">()</span><span class="o">:</span> <span class="nx">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">uninstall</span><span class="p">()</span><span class="o">:</span> <span class="nb">Promise</span><span class="o"><</span><span class="kt">string</span><span class="o">></span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"uninstalling example-pod"</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">stack</span><span class="p">.</span><span class="nx">kubectlDeleteFolder</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">resourceFolder</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@ -801,11 +801,11 @@ Similarly, <code>ExampleClusterFeature</code> implements an <code>uninstall()</c
|
||||
<code>isInstalled()</code> simply tries to find a pod named <code>example-pod</code>, as a way to determine if the pod is already installed.
|
||||
This method can be useful in creating a context-sensitive UI for installing/uninstalling the feature, as demonstrated in the next sample code.</p>
|
||||
<p>To allow the end-user to control the life cycle of this cluster feature the following code sample shows how to implement a user interface based on React and custom Lens UI components:</p>
|
||||
<div class="highlight"><pre><span></span><code> <span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">computed</span><span class="p">,</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeature</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./example-cluster-feature"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code> <span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">computed</span><span class="p">,</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeature</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./example-cluster-feature"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -830,7 +830,7 @@ This method can be useful in creating a context-sensitive UI for installing/unin
|
||||
<span class="nx">feature</span>: <span class="kt">ExampleClusterFeature</span><span class="p">;</span>
|
||||
|
||||
<span class="k">async</span> <span class="nx">componentDidMount</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">feature</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ExampleClusterFeature</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">cluster</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">feature</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">ExampleClusterFeature</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">cluster</span><span class="p">);</span>
|
||||
|
||||
<span class="k">await</span> <span class="k">this</span><span class="p">.</span><span class="nx">updateFeatureState</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
@ -874,7 +874,7 @@ This method can be useful in creating a context-sensitive UI for installing/unin
|
||||
<span class="o"><</span><span class="nx">Button</span>
|
||||
<span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">buttonLabel</span><span class="p">}</span>
|
||||
<span class="nx">waiting</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">inProgress</span><span class="p">}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">()}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">()}</span>
|
||||
<span class="nx">primary</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="o"><</span><span class="err">/></span>
|
||||
@ -894,9 +894,9 @@ The <code>ExampleClusterFeatureSettings</code> class is marked as an <code>@obse
|
||||
As well, the <code>installed</code> and <code>inProgress</code> fields are marked as <code>@observable</code>, ensuring that the button gets rerendered any time these fields change.</p>
|
||||
<p>Finally, <code>ExampleClusterFeatureSettings</code> needs to be connected to the extension, and would typically appear on the cluster <strong>Settings</strong> page via a <code>Renderer.LensExtension.entitySettings</code> entry.
|
||||
The <code>ExampleExtension</code> would look like this:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeatureSettings</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-cluster-feature-settings"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span><span class="p">,</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExampleClusterFeatureSettings</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-cluster-feature-settings"</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="nx">entitySettings</span> <span class="o">=</span> <span class="p">[</span>
|
||||
@ -906,7 +906,7 @@ The <code>ExampleExtension</code> would look like this:</p>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example Cluster Feature"</span><span class="p">,</span>
|
||||
<span class="nx">priority</span>: <span class="kt">5</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">View</span><span class="o">:</span> <span class="p">({</span> <span class="nx">entity</span> <span class="o">=</span> <span class="kc">null</span> <span class="p">}</span><span class="o">:</span> <span class="p">{</span> <span class="nx">entity</span>: <span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="nx">View</span><span class="o">:</span> <span class="p">({</span> <span class="nx">entity</span> <span class="o">=</span> <span class="kc">null</span> <span class="p">}</span><span class="o">:</span> <span class="p">{</span> <span class="nx">entity</span>: <span class="kt">Common.Catalog.KubernetesCluster</span><span class="p">})</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">ExampleClusterFeatureSettings</span> <span class="nx">cluster</span><span class="o">=</span><span class="p">{</span><span class="nx">entity</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
|
||||
@ -779,10 +779,10 @@ It is also recommenced to delete the instance, using the inherited static method
|
||||
Everywhere else in your code you should use the <code>getInstance()</code> static method.
|
||||
This is so that your data is kept up to date and not persisted longer than expected.</p>
|
||||
<p>The following example code creates a store for the <code>appPreferences</code> guide example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Common</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">makeObservable</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="kd">type</span> <span class="nx">ExamplePreferencesModel</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="k">export</span> <span class="kr">type</span> <span class="nx">ExamplePreferencesModel</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">enabled</span>: <span class="kt">boolean</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
@ -800,7 +800,7 @@ This is so that your data is kept up to date and not persisted longer than expec
|
||||
<span class="nx">makeObservable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">protected</span> <span class="nx">fromStore</span><span class="p">({</span> <span class="nx">enabled</span> <span class="p">}</span><span class="o">:</span> <span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span> <span class="k">void</span> <span class="p">{</span>
|
||||
<span class="k">protected</span> <span class="nx">fromStore</span><span class="p">({</span> <span class="nx">enabled</span> <span class="p">}</span><span class="o">:</span> <span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">enabled</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -835,8 +835,8 @@ Thus it prevents an instance from being created when the constructor args are no
|
||||
<p>The following example code, modified from the <a href="../renderer-extension#apppreferences"><code>appPreferences</code></a> guide demonstrates how to use the extension store.
|
||||
<code>ExamplePreferencesStore</code> must be loaded in the main process, where loaded stores are automatically saved when exiting Lens.
|
||||
This can be done in <code>./main.ts</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Main</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleMainExtension</span> <span class="k">extends</span> <span class="nx">Main</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
<span class="k">async</span> <span class="nx">onActivate</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -847,10 +847,10 @@ This can be done in <code>./main.ts</code>:</p>
|
||||
<p>Here, <code>ExamplePreferencesStore</code> loads with <code>ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this)</code>, which is conveniently called from the <code>onActivate()</code> method of <code>ExampleMainExtension</code>.
|
||||
Similarly, <code>ExamplePreferencesStore</code> must load in the renderer process where the <code>appPreferences</code> are handled.
|
||||
This can be done in <code>./renderer.ts</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./src/example-preference-store"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">ExampleRendererExtension</span> <span class="k">extends</span> <span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span> <span class="p">{</span>
|
||||
|
||||
@ -862,8 +862,8 @@ This can be done in <code>./renderer.ts</code>:</p>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">title</span><span class="o">:</span> <span class="s2">"Example Preferences"</span><span class="p">,</span>
|
||||
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceInput</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></span> <span class="o"><</span><span class="nx">ExamplePreferenceHint</span><span class="o">/></span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">];</span>
|
||||
@ -871,10 +871,10 @@ This can be done in <code>./renderer.ts</code>:</p>
|
||||
</code></pre></div>
|
||||
<p>Again, <code>ExamplePreferencesStore.getInstanceOrCreate().loadExtension(this)</code> is called to load <code>ExamplePreferencesStore</code>, this time from the <code>onActivate()</code> method of <code>ExampleRendererExtension</code>.</p>
|
||||
<p><code>ExamplePreferenceInput</code> is defined in <code>./src/example-preference.tsx</code>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./example-preference-store"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"mobx-react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"./example-preference-store"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -890,7 +890,7 @@ This can be done in <code>./renderer.ts</code>:</p>
|
||||
<span class="o"><</span><span class="nx">Checkbox</span>
|
||||
<span class="nx">label</span><span class="o">=</span><span class="s2">"I understand appPreferences"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">().</span><span class="nx">enabled</span><span class="p">}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">().</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="p">=></span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">().</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@ -850,8 +850,8 @@ These components can be tested by popular React testing tools like <a href="http
|
||||
Just use <code>npm start</code> or <code>yarn test</code> to run the tests.</p>
|
||||
<p>For example, I have a component <code>GlobalPageMenuIcon</code> and want to test if <code>props.navigate</code> is called when user clicks the icon.</p>
|
||||
<p>My component <code>GlobalPageMenuIcon</code></p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">Renderer</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="p">{</span>
|
||||
<span class="nx">Component</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -859,19 +859,19 @@ Just use <code>npm start</code> or <code>yarn test</code> to run the tests.</p>
|
||||
<span class="p">},</span>
|
||||
<span class="p">}</span> <span class="o">=</span> <span class="nx">Renderer</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">const</span> <span class="nx">GlobalPageMenuIcon</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">navigate</span> <span class="p">}</span><span class="o">:</span> <span class="p">{</span> <span class="nx">navigate</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=></span> <span class="k">void</span> <span class="p">})</span><span class="o">:</span> <span class="nx">JSX</span><span class="p">.</span><span class="nx">Element</span> <span class="o">=></span> <span class="p">(</span>
|
||||
<span class="kd">const</span> <span class="nx">GlobalPageMenuIcon</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">navigate</span> <span class="p">}</span><span class="o">:</span> <span class="p">{</span> <span class="nx">navigate</span><span class="o">?:</span> <span class="p">()</span> <span class="p">=></span> <span class="ow">void</span> <span class="p">})</span><span class="o">:</span> <span class="nx">JSX</span><span class="p">.</span><span class="nx">Element</span> <span class="p">=></span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Icon</span>
|
||||
<span class="nx">material</span><span class="o">=</span><span class="s2">"trip_origin"</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="nx">navigate</span><span class="p">()}</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="nx">navigate</span><span class="p">()}</span>
|
||||
<span class="nx">data</span><span class="o">-</span><span class="nx">testid</span><span class="o">=</span><span class="s2">"global-page-menu-icon"</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>The test</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span><span class="p">,</span> <span class="nx">fireEvent</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"@testing-library/react"</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span>
|
||||
<span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span><span class="p">,</span> <span class="nx">fireEvent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@testing-library/react"</span><span class="p">;</span>
|
||||
|
||||
<span class="k">import</span> <span class="nx">GlobalPageMenuIcon</span> <span class="k">from</span> <span class="s2">"./GlobalPageMenuIcon"</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="nx">GlobalPageMenuIcon</span> <span class="kr">from</span> <span class="s2">"./GlobalPageMenuIcon"</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">test</span><span class="p">(</span><span class="s2">"click called navigate()"</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
<span class="kd">const</span> <span class="nx">navigate</span> <span class="o">=</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">();</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Loading…
Reference in New Issue
Block a user