mayoiga 0.1.1 → 0.1.4
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.
- package/.eslintrc.js +111 -0
- package/.github/workflows/checker.yml +42 -0
- package/.gitignore +217 -0
- package/.prettierrc +5 -0
- package/README.md +55 -35
- package/component.d.ts +1 -0
- package/component.js +1 -0
- package/dist/component.test.js +62 -3
- package/dist/index.d.ts +19 -1
- package/dist/index.js +11 -7
- package/dist/index.test.js +5 -2
- package/docs/.nojekyll +1 -0
- package/docs/assets/highlight.css +92 -0
- package/docs/assets/icons.css +1043 -0
- package/docs/assets/icons.png +0 -0
- package/docs/assets/icons@2x.png +0 -0
- package/docs/assets/main.js +52 -0
- package/docs/assets/search.js +1 -0
- package/docs/assets/style.css +1414 -0
- package/docs/assets/widgets.png +0 -0
- package/docs/assets/widgets@2x.png +0 -0
- package/docs/index.html +41 -0
- package/docs/modules.html +4 -0
- package/example/src/demo-app.tsx +123 -0
- package/example/src/index.tsx +15 -0
- package/package.json +10 -5
- package/setup/vite-global-setup.js +1 -0
- package/setup/vite-set-global.js +0 -0
- package/src/component.test.tsx +204 -0
- package/src/component.tsx +23 -0
- package/src/index.test.tsx +122 -0
- package/src/index.ts +332 -0
- package/src/utils.ts +8 -0
- package/tsconfig.json +38 -0
- package/vite.config.js +10 -0
- package/yarn.lock +2202 -0
|
Binary file
|
|
Binary file
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
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'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 "bio" 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 "external state and selector" 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'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">=></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">=></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">'test'</span><span class="hl-1">, </span><span class="hl-3">age:</span><span class="hl-1"> </span><span class="hl-7">'42'</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">=></span><span class="hl-1"> (</span><span class="hl-3">result</span><span class="hl-1">) </span><span class="hl-0">=></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">'Err!'</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: 'test',</span><br/><span class="hl-9"> age: 42, <- age is typed "number" before validation because of definition</span><br/><span class="hl-9"> marked: true, <- have to be "true", not as boolean. it'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"> <</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">)}></span><br/><span class="hl-1"> <</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">"name"</span><span class="hl-1">>{(tool) => <input {...</span><span class="hl-3">tool</span><span class="hl-1">} />}</</span><span class="hl-3">Field</span><span class="hl-1">></span><br/><span class="hl-1"> <</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">"age"</span><span class="hl-1">>{(tool) => <input {...</span><span class="hl-3">tool</span><span class="hl-1">} />}</</span><span class="hl-3">Field</span><span class="hl-1">></span><br/><span class="hl-1"> <</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">"marked"</span><span class="hl-1">>{(tool) => <input {...</span><span class="hl-3">tool</span><span class="hl-1">} />}</</span><span class="hl-3">Field</span><span class="hl-1">></span><br/><span class="hl-1"> <</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">"submit"</span><span class="hl-1"> /></span><br/><span class="hl-1"> </</span><span class="hl-3">form</span><span class="hl-1">></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>
|
|
@@ -0,0 +1,4 @@
|
|
|
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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</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>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"><</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">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ReactElement</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></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"><</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></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"><</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></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">></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"><</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">></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"><</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></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"><</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">></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"><</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></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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></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"><</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>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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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>, 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"> => </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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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-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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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></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"> => </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"><</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>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"><</span><span class="tsd-signature-type">HTMLElement</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></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"><</span><span class="tsd-signature-type">HTMLElement</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></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">FormStatus</span><span class="tsd-signature-symbol"> & </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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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" 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"><</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">></span><span class="tsd-signature-symbol">:</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>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></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"><</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>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"><</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">></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"><</span><span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">Selected</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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">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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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">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"><</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">></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"><</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">></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"><</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">></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"><</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">></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"><</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">></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"><</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">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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">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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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">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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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">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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</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">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"><</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">State</span><span class="tsd-signature-symbol">></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>
|
|
@@ -0,0 +1,123 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
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'));
|
package/package.json
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mayoiga",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Type safe hook based form library for React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"files": [
|
|
8
|
-
"dist"
|
|
8
|
+
"dist",
|
|
9
|
+
"/component.js",
|
|
10
|
+
"/component.d.ts",
|
|
11
|
+
"!*.test.js"
|
|
9
12
|
],
|
|
10
13
|
"scripts": {
|
|
11
14
|
"clean": "rm -rf dist",
|
|
12
15
|
"test": "vitest run",
|
|
13
16
|
"prebuild": "npm run clean",
|
|
14
17
|
"build": "tsc",
|
|
15
|
-
"check:
|
|
18
|
+
"check:type": "tsc --noEmit",
|
|
19
|
+
"check:style": "prettier --check 'src/**/*.{js,ts,jsx,tsx}'",
|
|
16
20
|
"check:lint": "eslint 'src/**/*.{ts,tsx}'",
|
|
17
|
-
"check-all": "npm run check:style && npm run check:lint && npm run build --noEmit && npm run test",
|
|
18
|
-
"fix-all": "npm run check:style --write && npm run check:lint --fix",
|
|
21
|
+
"check-all": "npm run check:type && npm run check:style && npm run check:lint && npm run build --noEmit && npm run test",
|
|
22
|
+
"fix-all": "npm run check:style -- --write && npm run check:lint -- --fix",
|
|
19
23
|
"prepublish": "npm run check-all && npm run build"
|
|
20
24
|
},
|
|
21
25
|
"repository": {
|
|
@@ -56,6 +60,7 @@
|
|
|
56
60
|
"prettier": "^2.6.2",
|
|
57
61
|
"react": "^18.0.0",
|
|
58
62
|
"react-dom": "^18.0.0",
|
|
63
|
+
"typedoc": "^0.22.15",
|
|
59
64
|
"typescript": "^4.6.3",
|
|
60
65
|
"use-sync-external-store": "^1.0.0",
|
|
61
66
|
"vitest": "^0.9.3",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
|
|
File without changes
|