From 9e4fcd6a0b901212480b13ddc110b70c4b15e404 Mon Sep 17 00:00:00 2001
From: "v.pavlov" <v.pavlov@aimprosoft.com>
Date: Tue, 24 Jul 2018 12:48:13 +0300
Subject: [PATCH] Radio button not selected

---
 src/ui/common/filter/BooleanFilter.tsx        |   2 +-
 .../steps/creators/DatasetCreatorForm.tsx     |  23 ++--
 src/ui/pages/descriptor/c/DescriptorForm.tsx  | 122 +++++++++---------
 3 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/src/ui/common/filter/BooleanFilter.tsx b/src/ui/common/filter/BooleanFilter.tsx
index 843168b..421c76d 100644
--- a/src/ui/common/filter/BooleanFilter.tsx
+++ b/src/ui/common/filter/BooleanFilter.tsx
@@ -39,7 +39,7 @@ class BooleanFilterInternal extends React.Component<IBooleanFilterInternal, any>
                 <FormControl component="fieldset">
                     <FormLabel>{ label }</FormLabel>
                     <RadioGroup
-                        value={ this.state.value }
+                        value={ `${this.state.value}` }
                         onChange={ this.handleChange }
                     >
                         <FormControlLabel value="true" control={ <Radio/> } label="Yes" />
diff --git a/src/ui/pages/dataset/dataset-stepper/steps/creators/DatasetCreatorForm.tsx b/src/ui/pages/dataset/dataset-stepper/steps/creators/DatasetCreatorForm.tsx
index 83d0f0f..d2b2ef9 100644
--- a/src/ui/pages/dataset/dataset-stepper/steps/creators/DatasetCreatorForm.tsx
+++ b/src/ui/pages/dataset/dataset-stepper/steps/creators/DatasetCreatorForm.tsx
@@ -32,10 +32,17 @@ interface IDatasetCreatorFormProps extends React.ClassAttributes<any> {
 }
 
 const styles = (theme) => ({
-  // none
+    /* tslint:disable */
+    RadioGrid: {
+        flexDirection: 'row' as 'row',
+        justifyContent: 'space-evenly' as 'space-evenly',
+        '& > label': {
+            flexBasis: '45%',
+        },
+    }
 });
-
-const renderRadioGroup = translate()(({input, meta, t}) => {
+/* tslint:enable */
+const renderRadioGroup = translate()(({input, meta, t, classes}) => {
   const onInputChange = (event, value) => input.onChange(value);
 
   return (
@@ -45,14 +52,11 @@ const renderRadioGroup = translate()(({input, meta, t}) => {
             { ...input }
             value={ input.value }
             onChange={ onInputChange }
+            className={ classes.RadioGrid }
         >
-          <Grid container>
             { Object.keys(CreatorRole).map((role) => (
-              <Grid item key={ role } xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
                 <FormControlLabel value={ role } label={ t(`dataset.creator.role.${role}`) } control={ <Radio/> } />
-              </Grid>
             )) }
-          </Grid>
         </RadioGroup>
     </FormControl>
   );
@@ -69,7 +73,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
         this.props.deleteCreatorRequest(this.props.dataset.uuid, fields.get(index));
     }
 
-    public renderCreators = ({ fields, meta: { touched, error, submitFailed } }) => {
+    public renderCreators = ({ classes, fields, meta: { touched, error, submitFailed } }) => {
 
         return(
             <div>
@@ -88,6 +92,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
                                validate={ [ Validators.required ] }
                         />
                         <Field required name={ `${creator}.role` }
+                               classes={ classes }
                                 component={ renderRadioGroup }
                         />
                         <Field name={ `${creator}.institutionalAffiliation` }
@@ -133,7 +138,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
         return (
             <Grid spacing={ 0 } container>
                 <form className="full-width">
-                    <FieldArray name="creators" component={ this.renderCreators } />
+                    <FieldArray name="creators" classes={ this.props.classes } component={ this.renderCreators } />
                 </form>
                 <Grid item xs={ 12 } className="back-white">
                     <Button variant="raised" type="button" onClick={ this.createCreator } style={ { margin: '20px' } }>
diff --git a/src/ui/pages/descriptor/c/DescriptorForm.tsx b/src/ui/pages/descriptor/c/DescriptorForm.tsx
index af994de..4d36c94 100644
--- a/src/ui/pages/descriptor/c/DescriptorForm.tsx
+++ b/src/ui/pages/descriptor/c/DescriptorForm.tsx
@@ -28,9 +28,22 @@ import Grid from '@material-ui/core/Grid';
 import { setPageTitle } from 'actions/pageTitle';
 import { bindActionCreators } from 'redux';
 import CropSelector from 'ui/catalog/crop/CropSelector';
+import withStyles from '@material-ui/core/styles/withStyles';
 
+/* tslint:disable */
+const styles = (theme) => ({
+  RadioGrid: {
+      flexDirection: 'row' as 'row',
+      justifyContent: 'space-evenly' as 'space-evenly',
+      '& > label': {
+          flexBasis: '45%',
+      },
+  }
+});
+
+/* tslint:enable */
 // FIXME Use Descriptor.DATATYPES
-const renderDataTypeRadioGroup = ({input, meta, ...rest}) => (
+const renderDataTypeRadioGroup = ({input, meta, classes, ...rest}) => (
     <FormControl required fullWidth>
       <FormLabel>Data type</FormLabel>
       <RadioGroup
@@ -40,28 +53,15 @@ const renderDataTypeRadioGroup = ({input, meta, ...rest}) => (
           onChange={
               (event, value) => input.onChange(value) // tslint:disable-line
           }
+            className={ classes.RadioGrid }
       >
-        <Grid container>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="TEXT" label="Free text" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
+            <FormControlLabel  value="TEXT" label="Free text" control={ <Radio/> }/>
             <FormControlLabel value="BOOLEAN" label="Yes/No" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
             <FormControlLabel value="DATE" label="Date" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
             <FormControlLabel value="CODED" label="Coded" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
             <FormControlLabel value="NUMERIC" label="Numeric" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
             <FormControlLabel value="SCALE" label="Scale" control={ <Radio/> }/>
-          </Grid>
-        </Grid>
-      </RadioGroup>
+        </RadioGroup>
     </FormControl>
 );
 
@@ -74,44 +74,27 @@ const TermEditor = (member, index, fields) => (
 );
 
 // FIXME Use Descriptor.CATEGORIES
-const renderCategoryRadioGroup = ({input, meta, ...rest}) => (
+const renderCategoryRadioGroup = ({input, meta, classes, ...rest}) => (
     <FormControl required fullWidth>
       <FormLabel>Descriptor category</FormLabel>
-      <RadioGroup
-          { ...input }
-          { ...rest }
-          value={ input.value }
-          onChange={
-              (event, value) => input.onChange(value) // tslint:disable-line
-          }
-      >
-        <Grid container>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="PASSPORT" label="Passport" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="MANAGEMENT" label="Management" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="ENVIRONMENT" label="Environment and Site" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="CHARACTERIZATION" label="Characterization" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="EVALUATION" label="Evaluation" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="ABIOTICSTRESS" label="Abiotic stress" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="BIOTICSTRESS" label="Biotic stress" control={ <Radio/> }/>
-          </Grid>
-          <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
-            <FormControlLabel value="MOLECULAR" label="Molecular marker" control={ <Radio/> }/>
-          </Grid>
-        </Grid>
-      </RadioGroup>
+        <RadioGroup
+            { ...input }
+            { ...rest }
+            value={ input.value }
+            onChange={
+                (event, value) => input.onChange(value) // tslint:disable-line
+            }
+            className={ classes.RadioGrid }
+        >
+            <FormControlLabel value="PASSPORT" label="Passport descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="MANAGEMENT" label="Management descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="ENVIRONMENT" label="Environment and Site descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="CHARACTERIZATION" label="Characterization descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="EVALUATION" label="Evaluation descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="ABIOTICSTRESS" label="Abiotic stress descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="BIOTICSTRESS" label="Biotic stress descriptor" control={ <Radio/> }/>
+            <FormControlLabel value="MOLECULAR" label="Molecular marker descriptor" control={ <Radio/> }/>
+        </RadioGroup>
     </FormControl>
 );
 
@@ -149,7 +132,7 @@ class DescriptorForm extends React.Component<any, any> {
     }
 
     public render() {
-        const {error, handleSubmit, initialValues, pageTitle, onPublish, invalid, submitting, anyTouched, currentOwner, currentVocabulary} = this.props;
+        const {error, handleSubmit, initialValues, pageTitle, onPublish, invalid, submitting, anyTouched, currentOwner, currentVocabulary, classes} = this.props;
 
         if (! initialValues) {
           return null;
@@ -204,6 +187,7 @@ class DescriptorForm extends React.Component<any, any> {
                         component={ Toggle }
                     />
                     <Field required name="category"
+                        classes={ classes }
                         component={ renderCategoryRadioGroup }
                         validate={ [ Validators.required ] }
                     />
@@ -222,6 +206,7 @@ class DescriptorForm extends React.Component<any, any> {
                         multiline
                     />
                     <Field required name="dataType"
+                        classes={ classes }
                         component={ renderDataTypeRadioGroup }
                         validate={ [ Validators.required ] }
                     />
@@ -272,14 +257,23 @@ class DescriptorForm extends React.Component<any, any> {
 
 const selector = formValueSelector(DESCRIPTOR_FORM);
 
-export default connect((state) => ({
-  dataType: selector(state, 'dataType'),
-  currentTerms: selector(state, 'terms'),
-  currentOwner: selector(state, 'owner'),
-  currentVocabulary: selector(state, 'vocabulary'),
-}), (dispatch) => bindActionCreators({
+const mapStateToProps = (state, ownProps) => ({
+    dataType: selector(state, 'dataType'),
+    currentTerms: selector(state, 'terms'),
+    currentOwner: selector(state, 'owner'),
+    currentVocabulary: selector(state, 'vocabulary'),
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
     setPageTitle,
-}, dispatch))(reduxForm({
-  form: DESCRIPTOR_FORM,
-  enableReinitialize: true,
-})(DescriptorForm));
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+    withStyles(styles)(
+        reduxForm({
+            form: DESCRIPTOR_FORM,
+            enableReinitialize: true,
+        })
+        (DescriptorForm),
+    ),
+);
-- 
GitLab