Merge pull request #353 from data-driven-forms/sync-demo-with-v2

[V2]Sync demo with v2

Author: rvsia

packages/react-renderer-demo/src/app/pages/live-editor.js

@@ -1,17 +1,12 @@
 /* eslint no-console: "off" */
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Typography from '@material-ui/core/Typography';
 import FormRenderer from '@data-driven-forms/react-form-renderer';
 import { componentTypes as components, validatorTypes as validators, defaultSchemaValidator } from '@data-driven-forms/react-form-renderer';
+import { FormTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
 
 import dynamic from 'next/dynamic';
-
-import MapperContext from '@docs/components/mappers-context';
 const CodeEditor = dynamic(import('@docs/components/code-editor'), {
   ssr: false
 });
@@ -79,7 +74,7 @@ const baseStructure = {
                   name: 'text_box_6',
                   label: 'Text Box unvisible',
                   title: 'Text Box unvisible',
-                  isVisible: false,
+                  hideField: true,
                   component: components.TEXT_FIELD
                 },
                 {
@@ -491,8 +486,6 @@ const LiveEditor = () => {
     parsedSchema: baseStructure
   });
 
-  const mappers = useContext(MapperContext);
-
   const onChange = (value) => {
     let schema;
     try {
@@ -503,7 +496,7 @@ const LiveEditor = () => {
     }
 
     try {
-      defaultSchemaValidator(schema, mappers.mappers.pf4.componentMapper);
+      defaultSchemaValidator(schema, componentMapper);
       setState((state) => ({ ...state, parsedSchema: schema }));
     } catch (error) {
       console.warn('not correct json schema', error);
@@ -517,40 +510,21 @@ const LiveEditor = () => {
         <div style={{ width: '100%', paddingTop: 10, background: '#1d1f21' }}>
           <CodeEditor readOnly={false} mode="json" onChange={onChange} value={value} maxLines={50} />
         </div>
-        <div>
-          <Grid container spacing={6}>
-            <Grid item xs={12} md={6}>
-              <Typography variant="h6">Avaiable components:</Typography>
-              <div>
-                <List>
-                  {[...new Set(Object.values(components))].map((item) =>
-                    item === 'wizard' ? null : (
-                      <ListItem key={item}>
-                        <ListItemText primary={item} />
-                      </ListItem>
-                    )
-                  )}
-                </List>
-              </div>
-            </Grid>
-          </Grid>
-        </div>
       </Grid>
       <Grid item md={6} xs={12}>
         <Paper square style={{ padding: 16, paddingLeft: 24 }}>
           <Grid container spacing={6}>
             <Grid item xs={12}>
-              {mappers.loaded && (
-                <div className="pf4">
-                  <FormRenderer
-                    componentMapper={mappers.mappers.pf4.componentMapper}
-                    schema={parsedSchema}
-                    onSubmit={console.log}
-                    onCancel={() => console.log('Cancel clicked')}
-                    canReset
-                  />
-                </div>
-              )}
+              <div className="pf4">
+                <FormRenderer
+                  componentMapper={componentMapper}
+                  FormTemplate={FormTemplate}
+                  schema={parsedSchema}
+                  onSubmit={console.log}
+                  onCancel={() => console.log('Cancel clicked')}
+                  canReset
+                />
+              </div>
             </Grid>
           </Grid>
         </Paper>

packages/react-renderer-demo/src/app/pages/renderer/form-controls.md

@@ -6,6 +6,8 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
+# Obsolete page
+
 # Custom form buttons
 
 If you need completely customized buttons, you can pass a component to form renderer via `renderFormButtons` prop.

packages/react-renderer-demo/src/app/src/components/component-example.js

@@ -147,21 +147,21 @@ class ComponentExample extends Component {
           [componentTypes.WIZARD]: MuiWizard,
           summary: Summary
         },
-        formTemplate: props.mappers.mui.formTemplate
+        FormTemplate: props.mappers.mui.FormTemplate
       },
       pf3: {
         componentMapper: {
           ...props.mappers.pf3.componentMapper,
           summary: Summary
         },
-        formTemplate: props.mappers.pf3.formTemplate
+        FormTemplate: props.mappers.pf3.FormTemplate
       },
       pf4: {
         componentMapper: {
           ...props.mappers.pf4.componentMapper,
           summary: Summary
         },
-        formTemplate: props.mappers.pf4.formTemplate
+        FormTemplate: props.mappers.pf4.FormTemplate
       }
     };
   }

packages/react-renderer-demo/src/app/src/components/navigation/mapper.js

@@ -27,8 +27,8 @@ const Item = ({ href, linkText, component }) => {
       selected={href.replace('/?', '?') === router.asPath}
       key={href || linkText}
       className={classes.nested}
-      component={forwardRef((props) => (
-        <RouterNavLink key={component} href={href.replace('/?', '?')}>
+      component={forwardRef((props, ref) => (
+        <RouterNavLink ref={ref} key={component} href={href.replace('/?', '?')}>
           <Link style={{ color: 'rgba(0, 0, 0, 0.87)' }} {...props} href={href.replace('/?', '?')} />
         </RouterNavLink>
       ))}
@@ -70,8 +70,8 @@ const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems
 };
 
 const Mapper = {
-  wrapper: FinalList,
-  item: Item
+  Wrapper: FinalList,
+  Item
 };
 
 export default Mapper;

packages/react-renderer-demo/src/app/src/components/navigation/menu-renderer.js

@@ -23,7 +23,7 @@ const renderItems = (items, level = 0, previousLinks = ['']) => {
 
   if (fields) {
     return (
-      <Mapper.wrapper
+      <Mapper.Wrapper
         key={`${link}-${title}-${open}`}
         open={open}
         fields={fields}
@@ -38,7 +38,7 @@ const renderItems = (items, level = 0, previousLinks = ['']) => {
   }
 
   return (
-    <Mapper.item
+    <Mapper.Item
       href={createLink(...previousLinks, link || component)}
       level={level}
       key={`${link || component}-${linkText}`}

packages/react-renderer-demo/src/app/src/doc-components/cleared-value.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
-import { componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
 import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
 
 const schema = {
@@ -15,7 +15,7 @@ const schema = {
   }],
 };
 
-const DataTypesExample = () => {
+const ClearedValueExample = () => {
   const [ values, setValues ] = useState({});
   return (
     <div className="pf4">
@@ -24,7 +24,7 @@ const DataTypesExample = () => {
           'field-with-initial-value': 'Delete me!',
         }}
         clearedValue={ null }
-        FormTemplate={ formTemplate }
+        FormTemplate={ FormTemplate }
         componentMapper={ componentMapper }
         schema={ schema }
         onSubmit={ console.log }
@@ -39,4 +39,4 @@ const DataTypesExample = () => {
     </div>
   );};
 
-export default DataTypesExample;
+export default ClearedValueExample;

packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js

@@ -1,90 +1,112 @@
 /* eslint react/prop-types: "off" */
-import React, { Fragment } from 'react';
-import FormRender, { componentTypes, useFieldApi } from '@data-driven-forms/react-form-renderer';
+import React, { useState } from 'react';
+import FormRender, { componentTypes, useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
 
 import './form-fields-mapper-docs.css';
 
-const wrapperStyles = {
-  padding: 16,
-  borderRadius: 4,
-  fontFamily: 'Roboto',
-};
-
-const FormWrapper = ({ children, ...props }) => (<form style={ wrapperStyles } { ...props }>{ children }</form>);
-
-const Title = ({ children, ...props }) => <h1>{ children }</h1>;
-
-const Description = ({ children, ...props }) => <p >{ children }</p>;
-
-const getButtonStyle = variant => ({
+const getButtonStyle = (variant) => ({
   color: 'White',
   backgroundColor: variant === 'primary' ? 'RebeccaPurple' : '#888',
   padding: '8px 16px',
   borderRadius: 4,
   cursor: 'pointer',
   border: 'none',
-  marginRight: 4,
+  marginRight: 4
 });
 
-const Button = ({ children, label, variant, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
-
-const TextField = ({ customProp, label, input, isRequired, meta: { error, touched }, FieldArrayProvider, dataType, ...props }) => (
-  <div className={ `ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}` }>
-    <label htmlFor={ input.name }>{ label }</label>
-    <input id={ input.name } { ...input } { ...props } />
-    { touched && error && <p className="error-text">{ error }</p> }
-    { customProp && <p>This is a custom prop and has nothing to do with form schema</p> }
-  </div>
+const Button = ({ children, label, variant, ...props }) => (
+  <button style={getButtonStyle(variant)} {...props}>
+    {label}
+  </button>
 );
 
-const CustomComponent = (props) => {
-  const { input, meta, ...rest } = useFieldApi(props)
-  return <TextField input={ input } meta={ input } { ...rest } />
+const FormTemplate = ({ formFields }) => {
+  const { handleSubmit, onCancel } = useFormApi();
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        handleSubmit();
+      }}
+    >
+      {formFields}
+      <Button type="submit" variant="primary" label="Submit" />
+      <Button type="button" label="cancel" onClick={onCancel} />
+    </form>
+  );
+};
+
+const TextField = (props) => {
+  const {
+    customProp,
+    label,
+    input,
+    isRequired,
+    meta: { error, touched },
+    FieldArrayProvider,
+    dataType,
+    ...rest
+  } = useFieldApi(props);
+  return (
+    <div className={`ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}`}>
+      <label htmlFor={input.name}>{label}</label>
+      <input id={input.name} {...input} {...rest} />
+      {touched && error && <p className="error-text">{error}</p>}
+      {customProp && <p>This is a custom prop and has nothing to do with form schema</p>}
+    </div>
+  );
 };
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField,
-  'custom-component-type': CustomComponent,
+  'custom-component-type': TextField
 };
 
 const ComponentMapper = () => {
+  const [values, setValues] = useState({});
   const schema = {
-    fields: [{
-      component: componentTypes.TEXT_FIELD,
-      name: 'first-name',
-      label: 'First name',
-      isRequired: true,
-      validate: [ value => !value || value.lenght === 0 ? 'Required' : undefined ],
-      customProp: true,
-    }, {
-      component: componentTypes.TEXT_FIELD,
-      name: 'last-name',
-      label: 'Last name',
-      isRequired: true,
-      validate: [ value => !value || value.lenght === 0 ? 'Required' : undefined ],
-    }, {
-      component: componentTypes.TEXT_FIELD,
-      name: 'age',
-      label: 'Your age',
-      type: 'number',
-    }, {
-      component: 'custom-component-type',
-      name: 'password',
-      label: 'Your password',
-      type: 'password',
-    }],
+    fields: [
+      {
+        component: componentTypes.TEXT_FIELD,
+        name: 'first-name',
+        label: 'First name',
+        isRequired: true,
+        validate: [(value) => (!value || value.lenght === 0 ? 'Required' : undefined)],
+        customProp: true
+      },
+      {
+        component: componentTypes.TEXT_FIELD,
+        name: 'last-name',
+        label: 'Last name',
+        isRequired: true,
+        validate: [(value) => (!value || value.lenght === 0 ? 'Required' : undefined)]
+      },
+      {
+        component: componentTypes.TEXT_FIELD,
+        name: 'age',
+        label: 'Your age',
+        type: 'number'
+      },
+      {
+        component: 'custom-component-type',
+        name: 'password',
+        label: 'Your password',
+        type: 'password'
+      }
+    ],
     title: 'Custom form fields mapper and layout mapper',
-    description: 'If you want to see the source code, please expand the code example.',
+    description: 'If you want to see the source code, please expand the code example.'
   };
   return (
     <div>
       <FormRender
-        componentMapper={ componentMapper }
-        FormTemplate={ () => null }
-        schema={ schema }
-        onSubmit={ console.log }
-        onCancel={ () => console.log('cancel action') }
+        componentMapper={componentMapper}
+        FormTemplate={FormTemplate}
+        schema={schema}
+        onSubmit={(values) => setValues(values)}
+        onCancel={() => console.log('cancel action')}
       />
+      <pre>{JSON.stringify(values, null, 2)}</pre>
     </div>
   );
 };

packages/react-renderer-demo/src/app/src/doc-components/custom-buttons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
-import { componentMapper } from '@data-driven-forms/pf4-component-mapper';
+import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
 import { Button } from '@material-ui/core';
 
 const schema = {
@@ -31,7 +31,7 @@ const asyncSubmit = (values, api) => new Promise(resolve => setTimeout(() => res
 const FormControls = () => (
   <div className="pf4">
     <FormRenderer
-      FormTemplate={ formTemplate }
+      FormTemplate={ FormTemplate }
       componentMapper={ componentMapper }
       schema={ schema }
       onSubmit={ asyncSubmit }