Delete radio-choice example

Fix MenuItems onClick function
Add liveValidation option and disabled

Author: agustin107

example/src/body/Example.tsx

@@ -2,32 +2,32 @@ import React from 'react';
 
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
-import { createStyles, withStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+import { JSONSchema6 } from 'json-schema';
 
 import styles from './example-styles';
 import Source from './Source';
 
 import Form from '../../../src';
 
-const formStyles = theme =>
-  createStyles({
-    field: {
-      paddingLeft: theme.spacing.unit * 4,
-    },
-    formButtons: {
-      order: 2,
-    },
-    root: {
-      display: 'flex',
-      padding: theme.spacing.unit,
-    },
-  });
+const liveSettingsSchema: JSONSchema6 = {
+  type: 'object',
+  properties: {
+    validate: { type: 'boolean', title: 'Live validation' },
+    disabled: { type: 'boolean', title: 'Disable whole form' },
+  },
+};
 
 class Example extends React.Component<any, any> {
   state = {
     ...this.props.data,
+    liveSettings: {
+      validate: true,
+      disabled: false,
+    },
   };
 
   componentWillReceiveProps = ({ data }) => {
@@ -47,25 +47,39 @@ class Example extends React.Component<any, any> {
   };
 
   onSubmit = value => {
-    console.log('onSubmit:', value); // eslint-disable-line no-console
+    console.log('onSubmit:', value);
   };
 
   onCancel = () => {
     const { data } = this.props;
+
     this.setState({
       ...data,
     });
   };
 
+  setLiveSettings = ({ formData }: any) =>
+    this.setState({ liveSettings: formData });
+
   render() {
     const { data, classes } = this.props;
     const { title } = data;
-    const { schema, uiSchema, formData } = this.state;
+    const { schema, uiSchema, formData, liveSettings } = this.state;
+
     return (
       <Paper className={classes.root}>
-        <Typography component="h4" variant="h4">
-          {title}
-        </Typography>
+        <>
+          <Typography component="h4" variant="h4">
+            {title}
+          </Typography>
+          <Form
+            schema={liveSettingsSchema}
+            formData={liveSettings}
+            onChange={this.setLiveSettings}
+          >
+            <div />
+          </Form>
+        </>
         <br />
         <div className={classes.ctr}>
           <div className={classes.sourceCtr}>
@@ -98,8 +112,8 @@ class Example extends React.Component<any, any> {
                   formData={formData}
                   onSubmit={this.onSubmit}
                   onChange={this.onFormChanged}
-                  //showErrorList={showErrorList}
-                  //showHelperError={showHelperError}
+                  liveValidate={liveSettings.validate}
+                  disabled={liveSettings.disabled}
                 >
                   <Box mt={2}>
                     <Button

example/src/examples/index.ts

@@ -3,7 +3,6 @@ import budget from './budget';
 import nested from './nested';
 import numbers from './numbers';
 import multipleChoice from './multiple-choice';
-import radioChoice from './radio-choice';
 import simple from './simple';
 import single from './single';
 import validation from './validation';
@@ -14,8 +13,7 @@ export default {
   nested,
   numbers,
   multipleChoice,
-  radioChoice,
   simple,
   single,
   validation,
-};
+};

example/src/examples/radio-choice/form-data.json

@@ -9,7 +9,7 @@ import menuStyles from './menu-styles';
 
 export default withStyles(menuStyles)(
   ({ classes, open, toggleDrawer, onSelectMenuItem }: any) => (
-    <div>
+    <>
       <Hidden only={['xs', 'sm', 'md']}>
         <Drawer variant={'permanent'} className={classes.permanentLeftDrawer}>
           <MenuItems
@@ -30,6 +30,6 @@ export default withStyles(menuStyles)(
           />
         </Drawer>
       </Hidden>
-    </div>
+    </>
   )
 );

example/src/examples/radio-choice/index.ts

@@ -23,11 +23,12 @@ export default withStyles(menuStyles)(
     >
       <List subheader={<ListSubheader component="div">Showcase</ListSubheader>}>
         {keys(examples).map(e => (
-          <ListItem key={e} button>
-            <ListItemText
-              primary={examples[e].title}
-              onClick={onSelectMenuItem(examples[e])}
-            />
+          <ListItem
+            key={e}
+            button={true}
+            onClick={onSelectMenuItem(examples[e])}
+          >
+            <ListItemText primary={examples[e].title} />
           </ListItem>
         ))}
       </List>