mayoiga 0.1.7 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Binary file
Binary file
package/docs/index.html DELETED
@@ -1,41 +0,0 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>mayoiga</title><meta name="description" content="Documentation for mayoiga"/><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 async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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">mayoiga</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1>mayoiga </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography"><p><a href="https://github.com/hachibeeDI/mayoiga/actions/workflows/checker.yml"><img src="https://github.com/hachibeeDI/mayoiga/actions/workflows/checker.yml/badge.svg" alt="Lint Check"></a></p>
2
-
3
- <a href="#mayoiga" id="mayoiga" style="color: inherit; text-decoration: none;">
4
- <h1>Mayoiga</h1>
5
- </a>
6
- <p>Fully typed form state management system for React.</p>
7
- <p>No magic, ref free. It&#39;s built for complicated form state management.</p>
8
-
9
- <a href="#feature" id="feature" style="color: inherit; text-decoration: none;">
10
- <h2>Feature</h2>
11
- </a>
12
- <p>Support strong typed form state.
13
- Every form should have two kind of types:</p>
14
- <ol>
15
- <li>form state before validation</li>
16
- <li>state after validation succeed</li>
17
- </ol>
18
- <p>i.e. before validation, a field named &quot;bio&quot; might be nullable (<code>{bio: null | string}</code>) but it must not empty to submit (<code>{bio: zod.string().nonempty()}</code>).</p>
19
- <p>Also considers:</p>
20
- <ul>
21
- <li>No ref, DOM free</li>
22
- <li>High performance, high tuning possibility<ul>
23
- <li>Mayoiga uses &quot;external state and selector&quot; pattern. You can built your own form if you known what you would like to</li>
24
- </ul>
25
- </li>
26
- </ul>
27
-
28
- <a href="#features-does-not-support" id="features-does-not-support" style="color: inherit; text-decoration: none;">
29
- <h2>Features does not support</h2>
30
- </a>
31
- <ul>
32
- <li>Short coding</li>
33
- </ul>
34
- <p>It&#39;s not a library for short coding or copy and paste template.</p>
35
-
36
- <a href="#quickstart" id="quickstart" style="color: inherit; text-decoration: none;">
37
- <h3>Quickstart</h3>
38
- </a>
39
- <pre><code class="language-typeScript"><br/><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-2">schema</span><span class="hl-1"> = </span><span class="hl-3">zod</span><span class="hl-1">.</span><span class="hl-4">object</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-3">zod</span><span class="hl-1">.</span><span class="hl-4">string</span><span class="hl-1">(),</span><br/><span class="hl-1"> </span><span class="hl-3">age:</span><span class="hl-1"> </span><span class="hl-3">zod</span><br/><span class="hl-1"> .</span><span class="hl-4">string</span><span class="hl-1">()</span><br/><span class="hl-1"> .</span><span class="hl-4">transform</span><span class="hl-1">((</span><span class="hl-3">val</span><span class="hl-1">) </span><span class="hl-0">=&gt;</span><span class="hl-1"> </span><span class="hl-5">Number</span><span class="hl-1">(</span><span class="hl-3">val</span><span class="hl-1">))</span><br/><span class="hl-1"> .</span><span class="hl-4">refine</span><span class="hl-1">((</span><span class="hl-3">val</span><span class="hl-1">) </span><span class="hl-0">=&gt;</span><span class="hl-1"> (</span><span class="hl-5">Number</span><span class="hl-1">.</span><span class="hl-4">isNaN</span><span class="hl-1">(</span><span class="hl-3">val</span><span class="hl-1">) ? </span><span class="hl-6">0</span><span class="hl-1"> : </span><span class="hl-3">val</span><span class="hl-1">)),</span><br/><span class="hl-1"> </span><span class="hl-3">marked:</span><span class="hl-1"> </span><span class="hl-3">zod</span><span class="hl-1">.</span><span class="hl-4">literal</span><span class="hl-1">(</span><span class="hl-0">true</span><span class="hl-1">),</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-0">type</span><span class="hl-1"> </span><span class="hl-5">BeforeValidation</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-3">name</span><span class="hl-1">: </span><span class="hl-5">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">age</span><span class="hl-1">: </span><span class="hl-5">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">marked</span><span class="hl-1">: </span><span class="hl-5">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">const</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">components</span><span class="hl-1">: {</span><span class="hl-2">Field</span><span class="hl-1">, </span><span class="hl-2">Slicer</span><span class="hl-1">},</span><br/><span class="hl-1"> </span><span class="hl-2">handleSubmit</span><span class="hl-1">,</span><br/><span class="hl-1">} = </span><span class="hl-4">createFormHook</span><span class="hl-1">({</span><span class="hl-3">name:</span><span class="hl-7">&#39;test&#39;</span><span class="hl-1">, </span><span class="hl-3">age:</span><span class="hl-1"> </span><span class="hl-7">&#39;42&#39;</span><span class="hl-1">, </span><span class="hl-3">marked:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1">} </span><span class="hl-8">as</span><span class="hl-1"> </span><span class="hl-5">BeforeValidation</span><span class="hl-1">, </span><span class="hl-3">schema</span><span class="hl-1">);</span><br/><br/><span class="hl-0">function</span><span class="hl-1"> </span><span class="hl-4">App</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-2">submitHandler</span><span class="hl-1"> = </span><span class="hl-4">handleSubmit</span><span class="hl-1">((</span><span class="hl-3">e</span><span class="hl-1">) </span><span class="hl-0">=&gt;</span><span class="hl-1"> (</span><span class="hl-3">result</span><span class="hl-1">) </span><span class="hl-0">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">if</span><span class="hl-1"> (</span><span class="hl-3">result</span><span class="hl-1">.</span><span class="hl-3">error</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">return</span><span class="hl-1"> </span><span class="hl-4">alert</span><span class="hl-1">(</span><span class="hl-7">&#39;Err!&#39;</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-3">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-3">result</span><span class="hl-1">.</span><span class="hl-3">data</span><span class="hl-1">); </span><span class="hl-9">/*</span><br/><span class="hl-9"> {</span><br/><span class="hl-9"> name: &#39;test&#39;,</span><br/><span class="hl-9"> age: 42, &lt;- age is typed &quot;number&quot; before validation because of definition</span><br/><span class="hl-9"> marked: true, &lt;- have to be &quot;true&quot;, not as boolean. it&#39;s power of zod</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> */</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-8">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> &lt;</span><span class="hl-3">form</span><span class="hl-1"> </span><span class="hl-3">onSubmit</span><span class="hl-1">={</span><span class="hl-4">handleSubmit</span><span class="hl-1">(</span><span class="hl-3">onSubmit</span><span class="hl-1">)}&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-3">Field</span><span class="hl-1"> </span><span class="hl-3">name</span><span class="hl-1">=</span><span class="hl-7">&quot;name&quot;</span><span class="hl-1">&gt;{(tool) =&gt; &lt;input {...</span><span class="hl-3">tool</span><span class="hl-1">} /&gt;}&lt;/</span><span class="hl-3">Field</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-3">Field</span><span class="hl-1"> </span><span class="hl-3">name</span><span class="hl-1">=</span><span class="hl-7">&quot;age&quot;</span><span class="hl-1">&gt;{(tool) =&gt; &lt;input {...</span><span class="hl-3">tool</span><span class="hl-1">} /&gt;}&lt;/</span><span class="hl-3">Field</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-3">Field</span><span class="hl-1"> </span><span class="hl-3">name</span><span class="hl-1">=</span><span class="hl-7">&quot;marked&quot;</span><span class="hl-1">&gt;{(tool) =&gt; &lt;input {...</span><span class="hl-3">tool</span><span class="hl-1">} /&gt;}&lt;/</span><span class="hl-3">Field</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-3">input</span><span class="hl-1"> </span><span class="hl-3">type</span><span class="hl-1">=</span><span class="hl-7">&quot;submit&quot;</span><span class="hl-1"> /&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-3">form</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span><br/>
40
- </code></pre>
41
- </div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#Controller" class="tsd-kind-icon">Controller</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#FieldProps" class="tsd-kind-icon">Field<wbr/>Props</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#FullFormState" class="tsd-kind-icon">Full<wbr/>Form<wbr/>State</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#HandleChangeAction" class="tsd-kind-icon">Handle<wbr/>Change<wbr/>Action</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#SliceProps" class="tsd-kind-icon">Slice<wbr/>Props</a></li><li class="tsd-kind-type-alias"><a href="modules.html#StateRestriction" class="tsd-kind-icon">State<wbr/>Restriction</a></li><li class="tsd-kind-function tsd-has-type-parameter"><a href="modules.html#createFormHook" class="tsd-kind-icon">create<wbr/>Form<wbr/>Hook</a></li><li class="tsd-kind-function tsd-has-type-parameter"><a href="modules.html#useFormSlice" class="tsd-kind-icon">use<wbr/>Form<wbr/>Slice</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>
package/docs/modules.html DELETED
@@ -1,4 +0,0 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>mayoiga</title><meta name="description" content="Documentation for mayoiga"/><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 async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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">mayoiga</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1>mayoiga </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Type aliases</h3><ul class="tsd-index-list"><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#Controller" class="tsd-kind-icon">Controller</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#FieldProps" class="tsd-kind-icon">Field<wbr/>Props</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#FullFormState" class="tsd-kind-icon">Full<wbr/>Form<wbr/>State</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#HandleChangeAction" class="tsd-kind-icon">Handle<wbr/>Change<wbr/>Action</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#SliceProps" class="tsd-kind-icon">Slice<wbr/>Props</a></li><li class="tsd-kind-type-alias"><a href="modules.html#StateRestriction" class="tsd-kind-icon">State<wbr/>Restriction</a></li></ul></section><section class="tsd-index-section "><h3>Functions</h3><ul class="tsd-index-list"><li class="tsd-kind-function tsd-has-type-parameter"><a href="modules.html#createFormHook" class="tsd-kind-icon">create<wbr/>Form<wbr/>Hook</a></li><li class="tsd-kind-function tsd-has-type-parameter"><a href="modules.html#useFormSlice" class="tsd-kind-icon">use<wbr/>Form<wbr/>Slice</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Type aliases</h2><section class="tsd-panel tsd-member tsd-kind-type-alias tsd-has-type-parameter"><a id="Controller" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Controller<a href="#Controller" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">Controller<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>actions<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ActionsCanBePublic</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span>components<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>Field<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>Slicer<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>useInitialize<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>useSelector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L194">index.ts:194</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
2
- <p>Restricted type interface of the form store
3
- TODO: more restriction</p>
4
- </div></div><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>State<span class="tsd-signature-symbol">: </span><a href="modules.html#StateRestriction" class="tsd-signature-type" data-tsd-kind="Type alias">StateRestriction</a></h4></li></ul><div class="tsd-type-declaration"><h4>Type declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5>actions<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ActionsCanBePublic</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5>components<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>Field<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>Slicer<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span></h5><ul class="tsd-parameters"><li class="tsd-parameter"><h5>Field<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">Field<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>props<span class="tsd-signature-symbol">: </span><a href="modules.html#FieldProps" class="tsd-signature-type" data-tsd-kind="Type alias">FieldProps</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ReactElement</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L200">index.ts:200</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>Name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>props: <a href="modules.html#FieldProps" class="tsd-signature-type" data-tsd-kind="Type alias">FieldProps</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ReactElement</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul></li><li class="tsd-parameter"><h5>Slicer<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">Slicer<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>props<span class="tsd-signature-symbol">: </span><a href="modules.html#SliceProps" class="tsd-signature-type" data-tsd-kind="Type alias">SliceProps</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ReactElement</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L201">index.ts:201</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>Selected<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">readonly </span><span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">[]</span></h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>props: <a href="modules.html#SliceProps" class="tsd-signature-type" data-tsd-kind="Type alias">SliceProps</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ReactElement</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>use<wbr/>Initialize<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon">use<wbr/>Initialize<span class="tsd-signature-symbol">(</span>initialValue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L195">index.ts:195</a></li></ul></aside><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>initialValue: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li><li class="tsd-parameter"><h5>use<wbr/>Selector<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">use<wbr/>Selector<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>state<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span>, isEqual<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span>prev<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span>, current<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L196">index.ts:196</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>R</h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>selector: <span class="tsd-signature-symbol">(</span>state<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>state<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>state: <a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></h4></li></ul></li></ul></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> isEqual: <span class="tsd-signature-symbol">(</span>prev<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span>, current<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>prev<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span>, current<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>prev: <span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></h5></li><li><h5>current: <span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></li></ul></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></h4></li></ul></li></ul></div></section><section class="tsd-panel tsd-member tsd-kind-type-alias tsd-has-type-parameter"><a id="FieldProps" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Field<wbr/>Props<a href="#FieldProps" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">Field<wbr/>Props<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">; </span>children<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L26">index.ts:26</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>State<span class="tsd-signature-symbol">: </span><a href="modules.html#StateRestriction" class="tsd-signature-type" data-tsd-kind="Type alias">StateRestriction</a></h4></li><li><h4>Name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">keyof </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span></h4></li></ul><div class="tsd-type-declaration"><h4>Type declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span></h5></li><li class="tsd-parameter"><h5>children<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon">children<span class="tsd-signature-symbol">(</span>tool<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">; </span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">; </span>onChange<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span>, value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span>, errorMessage<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReactNode</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L28">index.ts:28</a></li></ul></aside><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>tool: <span class="tsd-signature-symbol">{ </span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">; </span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">; </span>onChange<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span></h5><ul class="tsd-parameters"><li class="tsd-parameter"><h5>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span></h5></li><li class="tsd-parameter"><h5>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span></h5></li><li class="tsd-parameter"><h5>on<wbr/>Change<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon">on<wbr/>Change<span class="tsd-signature-symbol">(</span>this<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span>, name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span>, value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li><li class="tsd-signature tsd-kind-icon">on<wbr/>Change<span class="tsd-signature-symbol">(</span>this<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span>, e<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ChangeEvent</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L32">index.ts:32</a></li></ul></aside><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>this: <span class="tsd-signature-type">void</span></h5></li><li><h5>name: <span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span></h5></li><li><h5>value: <span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L33">index.ts:33</a></li></ul></aside><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>this: <span class="tsd-signature-type">void</span></h5></li><li><h5>e: <span class="tsd-signature-type">ChangeEvent</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li><h5>value: <span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span></h5></li><li><h5>errorMessage: <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ReactNode</span></h4></li></ul></li></ul></div></section><section class="tsd-panel tsd-member tsd-kind-type-alias tsd-has-type-parameter"><a id="FullFormState" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Full<wbr/>Form<wbr/>State<a href="#FullFormState" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">Full<wbr/>Form<wbr/>State<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">FormStatus</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-symbol">{ </span>errors<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FormErrors</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol"> }</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L22">index.ts:22</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>State<span class="tsd-signature-symbol">: </span><a href="modules.html#StateRestriction" class="tsd-signature-type" data-tsd-kind="Type alias">StateRestriction</a></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-type-alias tsd-has-type-parameter"><a id="HandleChangeAction" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Handle<wbr/>Change<wbr/>Action<a href="#HandleChangeAction" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">Handle<wbr/>Change<wbr/>Action<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span>, value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L24">index.ts:24</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>State<span class="tsd-signature-symbol">: </span><a href="modules.html#StateRestriction" class="tsd-signature-type" data-tsd-kind="Type alias">StateRestriction</a></h4></li><li><h4>R = <span class="tsd-signature-type">void</span></h4></li></ul><div class="tsd-type-declaration"><h4>Type declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span>, value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>Name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">keyof </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span></h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>name: <span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span></h5></li><li><h5>value: <span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Name</span><span class="tsd-signature-symbol">]</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type" data-tsd-kind="Type parameter">R</span></h4></li></ul></li></ul></div></section><section class="tsd-panel tsd-member tsd-kind-type-alias tsd-has-type-parameter"><a id="SliceProps" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Slice<wbr/>Props<a href="#SliceProps" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">Slice<wbr/>Props<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>children<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span>selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> }</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L40">index.ts:40</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>State<span class="tsd-signature-symbol">: </span><a href="modules.html#StateRestriction" class="tsd-signature-type" data-tsd-kind="Type alias">StateRestriction</a></h4></li><li><h4>Selected<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyArray</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul><div class="tsd-type-declaration"><h4>Type declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5>children<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon">children<span class="tsd-signature-symbol">(</span>tool<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>handleChange<span class="tsd-signature-symbol">: </span><a href="modules.html#HandleChangeAction" class="tsd-signature-type" data-tsd-kind="Type alias">HandleChangeAction</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> }</span>, <span class="tsd-signature-symbol">...</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Readonly</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReactNode</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L42">index.ts:42</a></li></ul></aside><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>tool: <span class="tsd-signature-symbol">{ </span>handleChange<span class="tsd-signature-symbol">: </span><a href="modules.html#HandleChangeAction" class="tsd-signature-type" data-tsd-kind="Type alias">HandleChangeAction</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> }</span></h5><ul class="tsd-parameters"><li class="tsd-parameter"><h5>handle<wbr/>Change<span class="tsd-signature-symbol">: </span><a href="modules.html#HandleChangeAction" class="tsd-signature-type" data-tsd-kind="Type alias">HandleChangeAction</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul></li><li><h5><span class="tsd-flag ts-flagRest">Rest</span> <span class="tsd-signature-symbol">...</span>value: <span class="tsd-signature-type">Readonly</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ReactNode</span></h4></li></ul></li><li class="tsd-parameter"><h5>selector<span class="tsd-signature-symbol">:</span>function</h5><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon">selector<span class="tsd-signature-symbol">(</span>s<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L41">index.ts:41</a></li></ul></aside><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>s: <a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span></h4></li></ul></li></ul></div></section><section class="tsd-panel tsd-member tsd-kind-type-alias"><a id="StateRestriction" class="tsd-anchor"></a><h3 class="tsd-anchor-link">State<wbr/>Restriction<a href="#StateRestriction" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">State<wbr/>Restriction<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L11">index.ts:11</a></li></ul></aside></section></section><section class="tsd-panel-group tsd-member-group "><h2>Functions</h2><section class="tsd-panel tsd-member tsd-kind-function tsd-has-type-parameter"><a id="createFormHook" class="tsd-anchor"></a><h3 class="tsd-anchor-link">create<wbr/>Form<wbr/>Hook<a href="#createFormHook" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-function tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">create<wbr/>Form<wbr/>Hook<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">StateBeforeValidation</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Schema</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>initialState<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">StateBeforeValidation</span>, schema<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Schema</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FormHook</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">StateBeforeValidation</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Schema</span><span class="tsd-signature-symbol">&gt;</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L222">index.ts:222</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>StateBeforeValidation</h4></li><li><h4>Schema<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ZodType</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Schema</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>initialState: <span class="tsd-signature-type" data-tsd-kind="Type parameter">StateBeforeValidation</span></h5></li><li><h5>schema: <span class="tsd-signature-type" data-tsd-kind="Type parameter">Schema</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">FormHook</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">StateBeforeValidation</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Schema</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-function tsd-has-type-parameter"><a id="useFormSlice" class="tsd-anchor"></a><h3 class="tsd-anchor-link">use<wbr/>Form<wbr/>Slice<a href="#useFormSlice" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-function tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">use<wbr/>Form<wbr/>Slice<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>formController<span class="tsd-signature-symbol">: </span><a href="modules.html#Controller" class="tsd-signature-type" data-tsd-kind="Type alias">Controller</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span>, selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>s<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">readonly </span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">ActionsCanBePublic</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">]</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/hachibeeDI/mayoiga/blob/1927b5f/src/index.ts#L305">index.ts:305</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>State<span class="tsd-signature-symbol">: </span><a href="modules.html#StateRestriction" class="tsd-signature-type" data-tsd-kind="Type alias">StateRestriction</a></h4></li><li><h4>Sliced</h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>formController: <a href="modules.html#Controller" class="tsd-signature-type" data-tsd-kind="Type alias">Controller</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li><li><h5>selector: <span class="tsd-signature-symbol">(</span>s<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>s<span class="tsd-signature-symbol">: </span><a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>s: <a href="modules.html#FullFormState" class="tsd-signature-type" data-tsd-kind="Type alias">FullFormState</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span></h4></li></ul></li></ul></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">readonly </span><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Sliced</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">ActionsCanBePublic</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">]</span></h4></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#Controller" class="tsd-kind-icon">Controller</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#FieldProps" class="tsd-kind-icon">Field<wbr/>Props</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#FullFormState" class="tsd-kind-icon">Full<wbr/>Form<wbr/>State</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#HandleChangeAction" class="tsd-kind-icon">Handle<wbr/>Change<wbr/>Action</a></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><a href="modules.html#SliceProps" class="tsd-kind-icon">Slice<wbr/>Props</a></li><li class="tsd-kind-type-alias"><a href="modules.html#StateRestriction" class="tsd-kind-icon">State<wbr/>Restriction</a></li><li class="tsd-kind-function tsd-has-type-parameter"><a href="modules.html#createFormHook" class="tsd-kind-icon">create<wbr/>Form<wbr/>Hook</a></li><li class="tsd-kind-function tsd-has-type-parameter"><a href="modules.html#useFormSlice" class="tsd-kind-icon">use<wbr/>Form<wbr/>Slice</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>
@@ -1,123 +0,0 @@
1
- import * as React from 'react';
2
- import {FC, SyntheticEvent, useCallback, useMemo} from 'react';
3
-
4
- import {useForm, useFormState, createFormScope} from '../../src/';
5
- import {InputProtocol} from '../../src/inputProtocol';
6
- import {Input, NumberInput, MappedRadioFactory, MappedSelectFactory} from '../../src/forms';
7
-
8
- type FormState = {
9
- freeSpace: string;
10
- name: string;
11
- height: number;
12
- age: number;
13
- race: 'squid' | 'octopus' | 'jellyfish';
14
- looks: null | 'unknown' | 'boy' | 'girl';
15
- };
16
-
17
- const required = (target: string | null) => (!target ? 'required' : undefined);
18
-
19
- const between = (min: number, max: number) => (target: number) => {
20
- if (target < min) {
21
- return `more than ${min}`;
22
- }
23
- if (target > max) {
24
- return `less than ${max}`;
25
- }
26
- };
27
-
28
- const choice = function<T>(...candidates: Array<T>) {
29
- return (target: T) => (candidates.includes(target) ? undefined : 'You should choose from the candidates.');
30
- };
31
-
32
- const validateLooks = (value: any, record: FormState) => {
33
- if (record.race === 'jellyfish') {
34
- return value === 'unknown' ? undefined : 'It should be unknown';
35
- }
36
- };
37
-
38
- const INITIAL_FORM_STATE: FormState = {
39
- freeSpace: '',
40
- name: '',
41
- height: 130,
42
- age: 13,
43
- race: 'jellyfish',
44
- looks: null,
45
- };
46
-
47
- const {context, scope} = createFormScope<FormState>();
48
-
49
- // NOTE: After TypeScript 3.4, you can `componen={useMemo(MappedRadioFactory([...]))}` but so far type inference is not working correctly.
50
- const RaceChoice = MappedRadioFactory([
51
- {label: 'Squid', value: 'squid'},
52
- {label: 'Octopus', value: 'octopus'},
53
- {label: 'Jellyfish', value: 'jellyfish'},
54
- ]);
55
- const LooksChoice = MappedSelectFactory([
56
- {label: 'Unknown', value: 'unknown'},
57
- {label: 'Boy', value: 'boy'},
58
- {label: 'Girl', value: 'girl'},
59
- ]);
60
-
61
- const DemoForm = scope(props => {
62
- const {Form, Field} = useForm(context);
63
- // const {touched, errors} = props;
64
- const [store] = useFormState(context);
65
- return (
66
- <Form onSubmit={value => console.log(value)}>
67
- <div style={{margin: '16px auto'}}>
68
- <Field name="name" component={props => <Input<FormState, 'name'> {...props} />} validations={[required]} />
69
- </div>
70
- <div style={{margin: '16px auto'}}>
71
- <Field
72
- name="height"
73
- component={props => (
74
- <div>
75
- <input value={props.value.toString()} onChange={e => props.onChange(props.name, parseInt(e.target.value, 10) || 0)} />
76
- <div style={{color: 'red'}}>{props.errors[0]}</div>
77
- </div>
78
- )}
79
- validations={[between(30, 250)]}
80
- />
81
- </div>
82
- <div style={{margin: '16px auto'}}>
83
- <Field name="age" component={props => <NumberInput<FormState, 'age'> {...props} />} validations={[between(5, 20)]} />
84
- </div>
85
- <div style={{margin: '16px auto'}}>
86
- <Field
87
- name="race"
88
- component={props => <RaceChoice<FormState, 'race'> {...props} />}
89
- validations={[choice('jellyfish', 'squid', 'octopus')]}
90
- />
91
- </div>
92
- <div style={{margin: '16px auto'}}>
93
- <Field name="looks" component={props => <LooksChoice<FormState, 'looks'> {...props} />} validations={[required, validateLooks]} />
94
- </div>
95
- <div style={{margin: '16px auto'}}>
96
- <Field
97
- name="freeSpace"
98
- component={props => <textarea value={props.value} onChange={e => props.onChange(props.name, e.target.value)} />}
99
- validations={[required]}
100
- />
101
- </div>
102
-
103
- <button disabled={Object.values(store.errors).some(e => !!e.length)}>submit</button>
104
- </Form>
105
- );
106
- });
107
-
108
- export default function DemoApp() {
109
- return (
110
- <section>
111
- <h2>Mayoiga form demo</h2>
112
- <DemoForm
113
- initialState={INITIAL_FORM_STATE}
114
- onSubmit={(hasError, value, {errors}) => {
115
- if (hasError) {
116
- return alert(`errors! ${JSON.stringify(errors)}`);
117
- }
118
- alert(`submit ${JSON.stringify(value)}`);
119
- }}
120
- />
121
- </section>
122
- );
123
- }
@@ -1,15 +0,0 @@
1
- import * as React from 'react';
2
-
3
- import {render} from 'react-dom';
4
-
5
- import Demo from './demo-app';
6
-
7
- function App() {
8
- return (
9
- <div style={{width: '100%', textAlign: 'center'}}>
10
- <Demo />
11
- </div>
12
- );
13
- }
14
-
15
- render(<App />, window.document.getElementById('app'));
@@ -1 +0,0 @@
1
- globalThis.IS_REACT_ACT_ENVIRONMENT = true;
File without changes
@@ -1,204 +0,0 @@
1
- import {render, screen, waitFor} from '@testing-library/react';
2
- import userEvent from '@testing-library/user-event';
3
- import React from 'react';
4
-
5
- import {test, expect} from 'vitest';
6
-
7
- import * as zod from 'zod';
8
-
9
- import {Field, Slicer} from './component';
10
-
11
- import {createFormHook} from './index';
12
-
13
- import type {Controller} from './index';
14
-
15
- const testSchema = zod.object({
16
- name: zod.string(),
17
- description: zod.string(),
18
- age: zod
19
- .string()
20
- .transform((val) => Number(val))
21
- .refine((val) => (Number.isNaN(val) ? 0 : val)),
22
- marked: zod.boolean(),
23
- });
24
-
25
- // every fields are optional for test
26
- type FormStateBeforeValidation = {
27
- name: string;
28
- description: string;
29
- age: string;
30
- marked: boolean;
31
- };
32
-
33
- const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
34
-
35
- // afterEach(cleanup);
36
-
37
- test('Field component works fine in basic usage.', async () => {
38
- const TestFormHook = createTestHook();
39
-
40
- const Top = () => {
41
- return (
42
- <div>
43
- <Field controller={TestFormHook.controller} name="age">
44
- {(tool) => <input data-testid="age-input" {...tool} />}
45
- </Field>
46
- </div>
47
- );
48
- };
49
-
50
- render(<Top />);
51
-
52
- const INPUT_AGE = '42';
53
-
54
- // calling `userEvent` in here will cause race condition...
55
- await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
56
-
57
- await waitFor(() => {
58
- const ageInput: HTMLInputElement = screen.getByTestId('age-input');
59
- expect(ageInput.value).toBe(INPUT_AGE);
60
- TestFormHook.api.actions.peek((s) => {
61
- expect(s.value.age).toBe(INPUT_AGE);
62
- expect(s.errors.age).toBeNull();
63
- });
64
- });
65
- });
66
-
67
- test('Slice component works fine in basic usage.', async () => {
68
- const TestFormHook = createTestHook();
69
-
70
- const Top = () => {
71
- return (
72
- <div>
73
- <Slicer controller={TestFormHook.controller} selector={(s) => [s.value.age] as const}>
74
- {(tool, age: string) => (
75
- <input data-testid="age-input" name="age" value={age} onChange={(e) => tool.handleChange('age' as const, e.target.value)} />
76
- )}
77
- </Slicer>
78
- </div>
79
- );
80
- };
81
-
82
- render(<Top />);
83
-
84
- const INPUT_AGE = '42';
85
-
86
- // calling `userEvent` in here will cause race condition...
87
- await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
88
-
89
- await waitFor(() => {
90
- const ageInput: HTMLInputElement = screen.getByTestId('age-input');
91
- expect(ageInput.value).toBe(INPUT_AGE);
92
- TestFormHook.api.actions.peek((s) => {
93
- expect(s.value.age).toBe(INPUT_AGE);
94
- expect(s.errors.age).toBeNull();
95
- });
96
- });
97
- });
98
-
99
- test('A user able to create a reusable component', async () => {
100
- const TestFormHook = createTestHook();
101
-
102
- function NarrowTypedExpected(props: {controller: Controller<{age: string}>}) {
103
- return (
104
- <Field controller={props.controller} name="age">
105
- {(tool) => <input data-testid="age-input" {...tool} />}
106
- </Field>
107
- );
108
- }
109
-
110
- function ErrorDisplayer(props: {controller: Controller<{age: string}>}) {
111
- const {controller} = props;
112
- return (
113
- <Slicer controller={controller} selector={(s) => [s.value.age] as const}>
114
- {(tool, age: string) => (
115
- <button
116
- onClick={(e) => {
117
- controller.actions.pushFormErrors((_state) => ({age: age === '42' ? 'yes!!!' : 'noooo'}));
118
- }}
119
- />
120
- )}
121
- </Slicer>
122
- );
123
- }
124
-
125
- render(
126
- <div>
127
- <NarrowTypedExpected controller={TestFormHook.controller} />
128
- <ErrorDisplayer controller={TestFormHook.controller} />
129
- </div>,
130
- );
131
-
132
- const INPUT_AGE = '42';
133
-
134
- // calling `userEvent` in here will cause race condition...
135
- await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
136
- await userEvent.click(screen.getByRole('button'));
137
-
138
- await waitFor(() => {
139
- const ageInput: HTMLInputElement = screen.getByTestId('age-input');
140
- expect(ageInput.value).toBe(INPUT_AGE);
141
- TestFormHook.api.actions.peek((s) => {
142
- expect(s.value.age).toBe(INPUT_AGE);
143
- expect(s.errors.age).toBe('yes!!!');
144
- });
145
- });
146
- });
147
-
148
- test('`deps` field could destruct memoization', async () => {
149
- const TestFormHook = createTestHook();
150
- // intentional sample to replicate the situation
151
- const OtherFormHook = createFormHook({minAge: '30'}, zod.object({minAge: zod.string()}));
152
-
153
- const DATA_ID_RE_RENDER_BY_DEPS = 'refresh-by-deps';
154
- const DATA_ID_NOT_RERENDER_NO_DEPS = 'no-refersh-no-deps';
155
-
156
- function App() {
157
- const minAge = OtherFormHook.useSelector((s) => Number(s.value.minAge));
158
-
159
- return (
160
- <div>
161
- <Field controller={OtherFormHook.controller} name="minAge">
162
- {(tool) => <input data-testid="minAgeInput" type="number" {...tool} />}
163
- </Field>
164
- <Field controller={TestFormHook.controller} name="age">
165
- {(tool) => <input data-testid="ageInput" type="number" {...tool} />}
166
- </Field>
167
- <Slicer controller={TestFormHook.controller} selector={(s) => [Number(s.value.age)]} deps={[minAge]}>
168
- {(_tool, age: number) => (
169
- <div data-testid={DATA_ID_RE_RENDER_BY_DEPS}>{age >= minAge ? 'You can buy this content' : 'go home'}</div>
170
- )}
171
- </Slicer>
172
- <Slicer controller={TestFormHook.controller} selector={(s) => [Number(s.value.age)]}>
173
- {(_tool, age: number) => (
174
- <div data-testid={DATA_ID_NOT_RERENDER_NO_DEPS}>{age >= minAge ? 'You can buy this content' : 'go home'}</div>
175
- )}
176
- </Slicer>
177
- </div>
178
- );
179
- }
180
-
181
- render(<App />);
182
-
183
- await userEvent.type(screen.getByTestId('ageInput'), '16');
184
-
185
- await waitFor(() => {
186
- expect(screen.getByTestId(DATA_ID_RE_RENDER_BY_DEPS).textContent).toBe('go home');
187
- // expect(await screen.findByText('You can buy this content')).toBeDefined();
188
- });
189
-
190
- await userEvent.clear(screen.getByTestId('minAgeInput'));
191
- await userEvent.type(screen.getByTestId('minAgeInput'), '10');
192
-
193
- await waitFor(() => {
194
- expect(screen.getByTestId(DATA_ID_RE_RENDER_BY_DEPS).textContent, 'Slicer should re-execute renderProps if `deps` are changed').toBe(
195
- 'You can buy this content',
196
- );
197
- });
198
- await waitFor(() => {
199
- expect(
200
- screen.getByTestId(DATA_ID_NOT_RERENDER_NO_DEPS).textContent,
201
- 'Same logic but would not refresh because external dependencies are not applied',
202
- ).toBe('go home');
203
- });
204
- });