File size: 33,509 Bytes
9375fc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>docs/guides/conditional-fields | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="docs_guides_conditional-fields.html">docs/guides/conditional-fields</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="conditional-field-visibility-and-disabled-state" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Conditional field visibility and disabled state<a href="#conditional-field-visibility-and-disabled-state" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>React-declarative gives you three orthogonal callbacks for controlling how a field appears based on the current form state: <code>isVisible</code> hides or shows the field, <code>isDisabled</code> greys it out and blocks input, and <code>isReadonly</code> renders it as read-only text. All three receive the same arguments — the full data object and the external <code>payload</code> — so you can branch on either form state or application context.</p>
<a id="controlling-visibility-with-isvisible" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Controlling visibility with <code>isVisible</code><a href="#controlling-visibility-with-isvisible" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Return <code>true</code> to show the field, <code>false</code> to remove it from the DOM entirely. The field's value is preserved in the form data even while hidden.</p>
<pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">FieldType</span><span class="hl-1">, </span><span class="hl-2">TypedField</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'react-declarative'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">fields</span><span class="hl-1">: </span><span class="hl-7">TypedField</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Combo</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'contactMethod'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Preferred contact method'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">itemList:</span><span class="hl-1"> [</span><span class="hl-3">'email'</span><span class="hl-1">, </span><span class="hl-3">'phone'</span><span class="hl-1">, </span><span class="hl-3">'post'</span><span class="hl-1">],</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-17">// Only rendered when the user chooses 'phone'</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'phoneNumber'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Phone number'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">isVisible</span><span class="hl-1">({ </span><span class="hl-2">contactMethod</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">contactMethod</span><span class="hl-1"> === </span><span class="hl-3">'phone'</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'emailAddress'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Email address'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">isVisible</span><span class="hl-1">({ </span><span class="hl-2">contactMethod</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">contactMethod</span><span class="hl-1"> === </span><span class="hl-3">'email'</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span>
</code><button type="button">Copy</button></pre>
<a id="disabling-fields-with-isdisabled" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Disabling fields with <code>isDisabled</code><a href="#disabling-fields-with-isdisabled" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Return <code>true</code> to disable a field. The field renders but blocks all user interaction. This is useful for making a button inactive while a request is in flight.</p>
<pre><code class="tsx"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">fields</span><span class="hl-1">: </span><span class="hl-7">TypedField</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'email'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Email'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">isDisabled</span><span class="hl-1">({ </span><span class="hl-2">disabled</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">disabled</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Switch</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'disabled'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Disable the email field'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span>
</code><button type="button">Copy</button></pre>
<p>You can also disable a field permanently with the static <code>disabled: true</code> prop when the condition never changes at runtime.</p>
<a id="making-fields-read-only-with-isreadonly" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Making fields read-only with <code>isReadonly</code><a href="#making-fields-read-only-with-isreadonly" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><code>isReadonly</code> renders the field value as non-editable text. Unlike <code>isDisabled</code>, read-only fields do not appear greyed out — they look like display labels.</p>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">name</span><span class="hl-1">: </span><span class="hl-3">'createdAt'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">title</span><span class="hl-1">: </span><span class="hl-3">'Created at'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">isReadonly</span><span class="hl-1">: () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">, </span><span class="hl-17">// always read-only</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<p>For values computed entirely from other fields, use <code>compute</code> instead. It implies <code>readonly</code> and recalculates automatically:</p>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">name</span><span class="hl-1">: </span><span class="hl-3">'fullName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">title</span><span class="hl-1">: </span><span class="hl-3">'Full name'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">compute</span><span class="hl-1">: ({ </span><span class="hl-2">firstName</span><span class="hl-1">, </span><span class="hl-2">lastName</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-3">`</span><span class="hl-4">${</span><span class="hl-2">firstName</span><span class="hl-4">}</span><span class="hl-3"> </span><span class="hl-4">${</span><span class="hl-2">lastName</span><span class="hl-4">}</span><span class="hl-3">`</span><span class="hl-1">,</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<a id="conditional-groups-with-fieldtypecondition" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Conditional groups with <code>FieldType.Condition</code><a href="#conditional-groups-with-fieldtypecondition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><code>FieldType.Condition</code> evaluates an async or sync predicate and renders its <code>fields</code> children only when the condition is truthy. Use it to gate entire sections of a form.</p>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Condition</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">condition</span><span class="hl-1">: </span><span class="hl-4">async</span><span class="hl-1"> ({ </span><span class="hl-2">accountType</span><span class="hl-1"> }, </span><span class="hl-2">payload</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">accountType</span><span class="hl-1"> === </span><span class="hl-3">'business'</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-20">fields</span><span class="hl-1">: [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'companyName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Company name'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'vatNumber'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'VAT number'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<blockquote>
<p><strong>Tip:</strong> <code>FieldType.Condition</code> supports <code>conditionLoading</code> and <code>conditionElse</code> to render placeholder UI while the async predicate resolves or when the condition is false.</p>
</blockquote>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Condition</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">condition</span><span class="hl-1">: </span><span class="hl-4">async</span><span class="hl-1"> ({ </span><span class="hl-2">accountType</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">accountType</span><span class="hl-1"> === </span><span class="hl-3">'business'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">conditionLoading</span><span class="hl-1">: () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">CircularProgress</span><span class="hl-1"> </span><span class="hl-8">size</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-16">20</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-6">/></span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">conditionElse</span><span class="hl-1">: () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">p</span><span class="hl-6">></span><span class="hl-1">Switch to a business account to see these fields.</span><span class="hl-6"></</span><span class="hl-18">p</span><span class="hl-6">></span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">fields</span><span class="hl-1">: [ </span><span class="hl-17">/* business-only fields */</span><span class="hl-1"> ],</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<a id="static-hiding-with-the-hidden-prop" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Static hiding with the <code>hidden</code> prop<a href="#static-hiding-with-the-hidden-prop" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><code>isVisible</code> removes a field based on other form data. The <code>hidden</code> prop removes a field based on the external <code>payload</code> — things that don't change during form interaction, like feature flags or user roles.</p>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">name</span><span class="hl-1">: </span><span class="hl-3">'phone'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">title</span><span class="hl-1">: </span><span class="hl-3">'Phone'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">hidden</span><span class="hl-1">: ({ </span><span class="hl-2">payload</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> !</span><span class="hl-2">payload</span><span class="hl-1">.</span><span class="hl-2">features</span><span class="hl-1">.</span><span class="hl-5">has</span><span class="hl-1">(</span><span class="hl-3">'show-phone-number'</span><span class="hl-1">);</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<blockquote>
<p><strong>Note:</strong> <code>hidden</code> is evaluated once per render cycle using the payload. Use it for static RBAC or feature-flag gates. Use <code>isVisible</code> for anything that changes as the user fills in the form.</p>
</blockquote>
<a id="responsive-hiding" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Responsive hiding<a href="#responsive-hiding" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>You can hide a field on specific device sizes without JavaScript:</p>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">name</span><span class="hl-1">: </span><span class="hl-3">'detailedNotes'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">title</span><span class="hl-1">: </span><span class="hl-3">'Notes'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">phoneHidden</span><span class="hl-1">: </span><span class="hl-4">true</span><span class="hl-1">, </span><span class="hl-17">// hidden on phones</span><br/><span class="hl-1"> </span><span class="hl-20">tabletHidden</span><span class="hl-1">: </span><span class="hl-4">false</span><span class="hl-1">, </span><span class="hl-17">// visible on tablets</span><br/><span class="hl-1"> </span><span class="hl-20">desktopHidden</span><span class="hl-1">: </span><span class="hl-4">false</span><span class="hl-1">, </span><span class="hl-17">// visible on desktop</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<a id="the-payload-prop-for-passing-context" class="tsd-anchor"></a><h2 class="tsd-anchor-link">The <code>payload</code> prop for passing context<a href="#the-payload-prop-for-passing-context" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><code>payload</code> is an external object you pass to <code><One /></code> that flows into every callback — <code>isVisible</code>, <code>isDisabled</code>, <code>isReadonly</code>, <code>isInvalid</code>, <code>hidden</code>, and others. It is meant for data that belongs to the application context rather than the form data itself, such as user roles, feature flags, or service instances.</p>
<pre><code class="tsx"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">payload</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">userRole:</span><span class="hl-1"> </span><span class="hl-3">'admin'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">features:</span><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-5">Set</span><span class="hl-1">([</span><span class="hl-3">'show-phone-number'</span><span class="hl-1">, </span><span class="hl-3">'export-data'</span><span class="hl-1">]),</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-6"><</span><span class="hl-7">One</span><br/><span class="hl-1"> </span><span class="hl-8">fields</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fields</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">handler</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">initialData</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">payload</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">payload</span><span class="hl-4">}</span><br/><span class="hl-6">/></span>
</code><button type="button">Copy</button></pre>
<p>Inside a field:</p>
<pre><code class="tsx"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Button</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">title</span><span class="hl-1">: </span><span class="hl-3">'Delete record'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-20">isVisible</span><span class="hl-1">: (</span><span class="hl-2">data</span><span class="hl-1">, </span><span class="hl-2">payload</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">payload</span><span class="hl-1">.</span><span class="hl-2">userRole</span><span class="hl-1"> === </span><span class="hl-3">'admin'</span><span class="hl-1">,</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<p><strong>Role-based hiding:</strong></p>
<pre><code class="tsx"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">fields</span><span class="hl-1">: </span><span class="hl-7">TypedField</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'salary'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Salary'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-17">// Visible only to HR and admins</span><br/><span class="hl-1"> </span><span class="hl-5">hidden</span><span class="hl-2">:</span><span class="hl-1"> ({ </span><span class="hl-2">payload</span><span class="hl-1"> }) </span><span class="hl-4">=></span><br/><span class="hl-1"> ![</span><span class="hl-3">'hr'</span><span class="hl-1">, </span><span class="hl-3">'admin'</span><span class="hl-1">].</span><span class="hl-5">includes</span><span class="hl-1">(</span><span class="hl-2">payload</span><span class="hl-1">.</span><span class="hl-2">userRole</span><span class="hl-1">),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-6"><</span><span class="hl-7">One</span><span class="hl-1"> </span><span class="hl-8">fields</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fields</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-8">handler</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fetchEmployee</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-8">payload</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">{ </span><span class="hl-2">userRole:</span><span class="hl-9"> </span><span class="hl-2">currentUser</span><span class="hl-9">.</span><span class="hl-2">role</span><span class="hl-9"> }</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-6">/></span>
</code><button type="button">Copy</button></pre>
<p><strong>Feature-flag hiding:</strong></p>
<pre><code class="tsx"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">fields</span><span class="hl-1">: </span><span class="hl-7">TypedField</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'betaField'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Beta feature'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">hidden</span><span class="hl-2">:</span><span class="hl-1"> ({ </span><span class="hl-2">payload</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> !</span><span class="hl-2">payload</span><span class="hl-1">.</span><span class="hl-2">features</span><span class="hl-1">.</span><span class="hl-5">has</span><span class="hl-1">(</span><span class="hl-3">'beta-form-fields'</span><span class="hl-1">),</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-6"><</span><span class="hl-7">One</span><span class="hl-1"> </span><span class="hl-8">fields</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fields</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-8">handler</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fetchData</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-8">payload</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">{ </span><span class="hl-2">features:</span><span class="hl-9"> </span><span class="hl-2">userFeatureSet</span><span class="hl-9"> }</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-6">/></span>
</code><button type="button">Copy</button></pre>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#conditional-field-visibility-and-disabled-state"><span>Conditional field visibility and disabled state</span></a><ul><li><a href="#controlling-visibility-with-isvisible"><span>Controlling visibility with is<wbr/>Visible</span></a></li><li><a href="#disabling-fields-with-isdisabled"><span>Disabling fields with is<wbr/>Disabled</span></a></li><li><a href="#making-fields-read-only-with-isreadonly"><span>Making fields read-<wbr/>only with is<wbr/>Readonly</span></a></li><li><a href="#conditional-groups-with-fieldtypecondition"><span>Conditional groups with <wbr/>Field<wbr/>Type.<wbr/>Condition</span></a></li><li><a href="#static-hiding-with-the-hidden-prop"><span>Static hiding with the hidden prop</span></a></li><li><a href="#responsive-hiding"><span>Responsive hiding</span></a></li><li><a href="#the-payload-prop-for-passing-context"><span>The payload prop for passing context</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|