feat: replace material ui formGroup and formLabel and formControl

dhis2 · Jul 11, 2024 · b19d899 · b19d899
1 parent f01fc36
commit b19d899
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 37 deletions.
diff --git a/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js b/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js
@@ -1,8 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { Checkbox, Switch, spacersNum } from '@dhis2/ui';
-import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
+import { Checkbox, Switch, spacersNum, FieldSet, Label } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
@@ -65,32 +63,28 @@ class D2TrueOnlyPlain extends Component<Props> {
                 ref={(containerInstance) => { this.materialUIContainerInstance = containerInstance; }}
                 style={style}
             >
-                <FormControl
-                    component="fieldset"
-                >
+                <FieldSet>
                     {
                         (() => {
                             if (!label || useValueLabel) {
                                 return null;
                             }
 
                             return (
-                                <FormLabel
-                                    component="label"
+                                <Label
                                     required={!!required}
                                     classes={this.labelClasses}
-                                    focused={false}
                                 >
                                     {label}
-                                </FormLabel>
+                                </Label>
                             );
                         })()
                     }
                     {useSwitch ?
                         <Switch checked={!!value} label={useValueLabel ? label : ''} onChange={this.handleChange} value={value} dense className={classes.checkbox} /> :
                         <Checkbox checked={!!value} label={useValueLabel ? label : ''} onChange={this.handleChange} value={value} dense className={classes.checkbox} />
                     }
-                </FormControl>
+                </FieldSet>
             </div>
         );
     }

diff --git a/src/core_modules/capture-core/components/FormFields/Options/FormGroup.component.js b/src/core_modules/capture-core/components/FormFields/Options/FormGroup.component.js
@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { withStyles } from '@material-ui/core';
+
+const styles = {
+    formGroup: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    formGroupRow: {
+        display: 'flex',
+        flexDirection: 'row',
+    },
+};
+
+type Props = {
+    row?: boolean;
+    classes: Object;
+    children: any;
+}
+
+const FormGroupPlain = ({ children, classes, row = false, ...props }: Props) => (
+    <div {...props} className={row ? classes.formGroupRow : classes.formGroup} >
+        {children}
+    </div>
+)
+;
+
+export const FormGroup = withStyles(styles)(FormGroupPlain);
diff --git a/...capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js b/...capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js
@@ -1,12 +1,10 @@
 // @flow
 /* eslint-disable react/no-array-index-key */
 import React, { Component, type ComponentType } from 'react';
-import { Checkbox, spacersNum } from '@dhis2/ui';
-import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import { Checkbox, spacersNum, FieldSet, Label } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import { multiOrientations } from './multiSelectBoxes.const';
+import { FormGroup } from '../FormGroup.component';
 
 const styles = theme => ({
     label: theme.typography.formFieldTitle,
@@ -137,27 +135,25 @@ class MultiSelectBoxesPlain extends Component<Props> {
 
         return (
             <div ref={(containerInstance) => { this.materialUIContainerInstance = containerInstance; }}>
-                <FormControl component="fieldset">
+                <FieldSet>
                     {
                         (() => {
                             if (!label) {
                                 return null;
                             }
 
                             return (
-                                <FormLabel
-                                    component="label"
+                                <Label
                                     required={!!required}
-                                    classes={this.labelClasses}
-                                    focused={false}
+                                    className={this.labelClasses}
                                 >
                                     {label}
-                                </FormLabel>
+                                </Label>
                             );
                         })()
                     }
                     {this.renderCheckboxes()}
-                </FormControl>
+                </FieldSet>
             </div>
         );
     }

diff --git a/...pture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.js b/...pture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.js
@@ -1,13 +1,12 @@
 // @flow
 /* eslint-disable react/no-array-index-key */
 import React, { Component, type ComponentType } from 'react';
-import FormControl from '@material-ui/core/FormControl';
-import { Radio, colors, spacersNum } from '@dhis2/ui';
-import FormLabel from '@material-ui/core/FormLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import { Radio, colors, spacersNum, FieldSet, Label } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import { singleOrientations } from './singleSelectBoxes.const';
 import type { Props } from './singleSelectBoxes.types';
+import { FormGroup } from '../FormGroup.component';
+
 
 const styles = ({ typography, palette }) => ({
     label: typography.formFieldTitle,
@@ -17,7 +16,7 @@ const styles = ({ typography, palette }) => ({
     iconDeselected: {
         fill: colors.grey700,
     },
-    checkbox: {
+    radio: {
         marginTop: spacersNum.dp8,
         marginBottom: spacersNum.dp16,
     },
@@ -52,7 +51,7 @@ class SingleSelectBoxesPlain extends Component<Props> {
                 name={`singleSelectBoxes-${index}`}
                 onChange={(e: Object) => { this.handleOptionChange(e, value); }}
                 value={value}
-                className={classes.checkbox}
+                className={classes.radio}
                 dense
             />
         ));
@@ -112,27 +111,25 @@ class SingleSelectBoxesPlain extends Component<Props> {
 
         return (
             <div ref={(containerInstance) => { this.materialUIContainerInstance = containerInstance; }}>
-                <FormControl component="fieldset">
+                <FieldSet>
                     {
                         (() => {
                             if (!label) {
                                 return null;
                             }
 
                             return (
-                                <FormLabel
-                                    component="label"
+                                <Label
                                     required={!!required}
-                                    classes={this.labelClasses}
-                                    focused={false}
+                                    className={this.labelClasses}
                                 >
                                     {label}
-                                </FormLabel>
+                                </Label>
                             );
                         })()
                     }
-                    {this.renderBoxes()}
-                </FormControl>
+                    { this.renderBoxes() }
+                </FieldSet>
             </div>
         );
     }

diff --git a/...s/capture-core/components/FormFields/Options/SingleSelectBoxes/singleSelectBoxes.types.js b/...s/capture-core/components/FormFields/Options/SingleSelectBoxes/singleSelectBoxes.types.js
@@ -13,7 +13,7 @@ export type Props = {
         label: string,
         iconSelected: string,
         iconDeselected: string,
-        checkbox: string,
+        radio: string,
     },
     style?: ?Object,
 };