Merge pull request #1076 from rvsia/addValueListenerExample

Add example for a value listener

Author: Hyperkid123

packages/react-renderer-demo/src/components/navigation/schemas/custom-examples.schema.js

@@ -26,6 +26,10 @@ const customExamplesSchema = [
   {
     component: 'form-level-errors',
     linkText: 'Form level errors'
+  },
+  {
+    component: 'value-listener',
+    linkText: 'Value listener'
   }
 ];
 

packages/react-renderer-demo/src/examples/components/examples/value-listener-b.js

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/text-field';
+
+const FieldListener = () => {
+  const { getState, change } = useFormApi();
+
+  const { original } = getState().values;
+
+  useEffect(() => {
+    if (original) {
+      change('updated', `${original} ${new Date().toGMTString()}`);
+    }
+  }, [original]);
+
+  return null;
+};
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'original',
+      label: 'Change me'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'updated',
+      label: 'Updated value',
+      isReadOnly: true
+    },
+    {
+      component: 'field-listener',
+      name: 'listener',
+      hideField: true
+    }
+  ]
+};
+
+const ValueListener = () => (
+  <FormRenderer
+    schema={schema}
+    componentMapper={{
+      [componentTypes.TEXT_FIELD]: TextField,
+      'field-listener': FieldListener
+    }}
+    FormTemplate={FormTemplate}
+    onSubmit={console.log}
+    subscription={{ values: true }}
+  />
+);
+
+export default ValueListener;

packages/react-renderer-demo/src/examples/components/examples/value-listener.js

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
+import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/text-field';
+
+const FieldListener = () => {
+  const { getState, change } = useFormApi();
+
+  const { original } = getState().values;
+
+  useEffect(() => {
+    if (original) {
+      change('updated', `${original} ${new Date().toGMTString()}`);
+    }
+  }, [original]);
+
+  return null;
+};
+
+const FieldListenerWrapper = () => <FormSpy subcription={{ values: true }}>{() => <FieldListener />}</FormSpy>;
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'original',
+      label: 'Change me'
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'updated',
+      label: 'Updated value',
+      isReadOnly: true
+    },
+    {
+      component: 'field-listener',
+      name: 'listener',
+      hideField: true
+    }
+  ]
+};
+
+const ValueListener = () => (
+  <FormRenderer
+    schema={schema}
+    componentMapper={{
+      [componentTypes.TEXT_FIELD]: TextField,
+      'field-listener': FieldListenerWrapper
+    }}
+    FormTemplate={FormTemplate}
+    onSubmit={console.log}
+  />
+);
+
+export default ValueListener;

packages/react-renderer-demo/src/pages/examples/value-listener.md

@@ -0,0 +1,29 @@
+import DocPage from '@docs/doc-page';
+import CodeExample from '@docs/code-example';
+
+<DocPage>
+
+
+# Value listener
+
+This example shows how to update a value of one field according to a value of others without using the set [condition](/schema/condition-set).
+
+## Description
+
+Basically you have to just a set up a new component, that will listen to the form state and updates the intended fields.
+
+**FormSpy** with a correct subscription ensures that the component will be always updated. You can also set the [subcription](/components/renderer#subscription) on the form level in the form renderer.
+
+**hideField** ensures that the listener component is not visible in the dom and it won't affect the form layout.
+
+## FormSpy example
+
+<CodeExample source="components/examples/value-listener" mode="preview" />
+
+## Form subscription example
+
+**Global subscription can affect the form performance.** It's recommended to use it in smaller forms with less form fields.
+
+<CodeExample source="components/examples/value-listener" mode="preview" />
+
+</DocPage>