updated docs code to have keep state section

daniel3830 · Nov 29, 2022 · 3c204cc · 3c204cc
1 parent 564dc3a
commit 3c204cc
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 1 deletion.
diff --git a/stories/KeepState/Keep/README.md b/stories/KeepState/Keep/README.md
@@ -0,0 +1,38 @@
+# Keep
+
+Sometimes you need to keep the state of a field even when it gets unmounted ( no longer rendered on screen ). In the below example we have a field that gets hidden when the hide button is clicked, when it gets unmounted its state would normally get removed, by passing `keep={{ value: true }}` we can control what state ( if any ) should be kept.
+
+Note: Click on the "Submit" button. See how the state shows an error and the value.
+
+Next: Click on the "Hide" button and note fields error state gets removed but NOT the value.
+
+Next: Click on the "Show" button and note the fields value state comes back but NOT the error state.
+
+<!-- STORY -->
+
+```jsx
+import { Form, Input, Checkbox, Relevant, Debug } from 'informed';
+
+const Example = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <Form>
+      {show ? (
+        <Input
+          name="name"
+          label="Name:"
+          defaultValue="Hello"
+          minLength={10}
+          keep={{ value: true }}
+        />
+      ) : null}
+      <button type="button" onClick={toggle}>
+        {show ? 'Hide' : 'Show'}
+      </button>
+      <button type="submit">Submit</button>
+      <Debug values errors />
+    </Form>
+  );
+};
+```
diff --git a/stories/KeepState/Keep/index.js b/stories/KeepState/Keep/index.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import withDocs from '../../utils/withDocs';
+import readme from './README.md';
+
+import { Form, Input, Checkbox, Relevant, Debug } from '../../../src';
+
+const Example = () => {
+  const [show, setShow] = useState(true);
+
+  const toggle = () => setShow(prev => !prev);
+
+  return (
+    <Form>
+      {show ? (
+        <Input
+          name="name"
+          label="Name:"
+          defaultValue="Hello"
+          minLength={10}
+          keep={{ value: true }}
+        />
+      ) : null}
+      <button type="button" onClick={toggle}>
+        {show ? 'Hide' : 'Show'}
+      </button>
+      <button type="submit">Submit</button>
+      <Debug values errors />
+    </Form>
+  );
+};
+
+export default withDocs(readme, Example);
diff --git a/stories/KeepState/KeepState/README.md b/stories/KeepState/KeepState/README.md
@@ -0,0 +1,26 @@
+# Keep State
+
+Sometimes you need to keep the state of a field even when it gets unmounted ( no longer rendered on screen ). In the below example, when you toggle showing the fields the `name1` field will get removed from the form state but the name2 fields state will be kept.
+
+Note: Fill in both fields then click on the hide button and then show. Pay attention to how name2's state stays but name1's gets removed
+
+<!-- STORY -->
+
+```jsx
+import { Form, Input, Debug } from 'informed';
+
+const Example = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <Form>
+      {show ? <Input name="name1" label="Name:" /> : null}
+      {show ? <Input name="name2" label="Name:" keepState /> : null}
+      <button type="button" onClick={toggle}>
+        {show ? 'Hide' : 'Show'}
+      </button>
+      <Debug values />
+    </Form>
+  );
+};
+```
diff --git a/stories/KeepState/KeepState/index.js b/stories/KeepState/KeepState/index.js
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import withDocs from '../../utils/withDocs';
+import readme from './README.md';
+
+import { Form, Input, Debug } from '../../../src';
+
+const Example = () => {
+  const [show, setShow] = useState(true);
+
+  const toggle = () => setShow(prev => !prev);
+
+  return (
+    <Form>
+      {show ? <Input name="name1" label="Name:" /> : null}
+      {show ? <Input name="name2" label="Name:" keepState /> : null}
+      <button type="button" onClick={toggle}>
+        {show ? 'Hide' : 'Show'}
+      </button>
+      <Debug values />
+    </Form>
+  );
+};
+
+export default withDocs(readme, Example);
diff --git a/stories/KeepState/KeepStateIfRelevant/README.md b/stories/KeepState/KeepStateIfRelevant/README.md
@@ -0,0 +1,32 @@
+# Keep State If Relevant
+
+Sometimes you need to keep the state of a field even when it gets unmounted ( no longer rendered on screen ). In the below example, when you toggle showing the fields the `name1` field will get removed from the form state but the name2 fields state will be kept. However if that field is irrelevant it will NOT be kept.
+
+Note: Fill in both fields then click on the hide button and then show. Pay attention to how name2's state stays but name1's gets removed
+
+Next: Click on the toggle input and note how name2's state gets removed as its irrelevant.
+
+<!-- STORY -->
+
+```jsx
+import { Form, Input, Checkbox, Relevant, Debug } from 'informed';
+
+const Example = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <Form>
+      {show ? <Input name="name1" label="Name:" /> : null}
+      <Checkbox name="show" label="Show" defaultValue={true} />
+      <Relevant when={({ formState }) => formState.values.show}>
+        {show ? <Input name="name2" label="Name:" keepStateIfRelevant /> : null}
+      </Relevant>
+      <br />
+      <button type="button" onClick={toggle}>
+        {show ? 'Hide' : 'Show'}
+      </button>
+      <Debug values />
+    </Form>
+  );
+};
+```
diff --git a/stories/KeepState/KeepStateIfRelevant/index.js b/stories/KeepState/KeepStateIfRelevant/index.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import withDocs from '../../utils/withDocs';
+import readme from './README.md';
+
+import { Form, Input, Checkbox, Relevant, Debug } from '../../../src';
+
+const Example = () => {
+  const [show, setShow] = useState(true);
+
+  const toggle = () => setShow(prev => !prev);
+
+  return (
+    <Form>
+      {show ? <Input name="name1" label="Name:" /> : null}
+      <Checkbox name="show" label="Show" defaultValue={true} />
+      <Relevant when={({ formState }) => formState.values.show}>
+        {show ? <Input name="name2" label="Name:" keepStateIfRelevant /> : null}
+      </Relevant>
+      <br />
+      <button type="button" onClick={toggle}>
+        {show ? 'Hide' : 'Show'}
+      </button>
+      <Debug values />
+    </Form>
+  );
+};
+
+export default withDocs(readme, Example);
diff --git a/stories/Relevance/RelevantComponent/README.md b/stories/Relevance/RelevantComponent/README.md
@@ -11,7 +11,7 @@ import { Form, Input, Checkbox, Relevant } from 'informed';
 const RelevantComonent = () => (
   <Form>
     <Input name="name" label="First name:" />
-    <Input name="married" label="First name:" />
+    <Checkbox name="married" label="Are you married?" />
     <Relevant when={({ formState }) => formState.values.married}>
       <Input name="spouse" label="Spouse name:" />
     </Relevant>

diff --git a/stories/index.js b/stories/index.js
@@ -100,6 +100,8 @@ import RelevanceProp from './Relevance/RelevanceProp';
 import ComplexRelevance from './Relevance/ComplexRelevance';
 import ScopedRelevance from './Relevance/ScopedRelevance';
 
+import KeepState from './KeepState/KeepState';
+
 import ScopeComponent from './Scope/ScopeComponent';
 
 // import {
@@ -130,6 +132,8 @@ import NumberFormatter from './Formatting/NumberFormatter';
 import ConditionalProps from './Conditionals/ConditionalProps';
 import ConditionalPropsSchema from './Conditionals/ConditionalPropsSchema';
 import ChangingSchema from './Schema/ChangingSchema';
+import KeepStateIfRelevant from './KeepState/KeepStateIfRelevant';
+import Keep from './KeepState/Keep';
 
 addDecorator(StoryWrapper);
 
@@ -256,6 +260,11 @@ storiesOf('Relevance', module)
   .add('Relevance Optimization', ComplexRelevance)
   .add('Scoped Relevance', ScopedRelevance);
 
+storiesOf('KeepState', module)
+  .add('KeepState', KeepState)
+  .add('Keep State If Relevant', KeepStateIfRelevant)
+  .add('Keep', Keep);
+
 storiesOf('Scope', module).add('Scope Comonent', ScopeComponent);
 
 storiesOf('Schema', module)