refactor(togglefield): remove component in favor of explicity

dhis2 · Mar 9, 2020 · 7793fe6 · 7793fe6
1 parent 2baa52a
commit 7793fe6
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 189 deletions.
diff --git a/packages/core/src/Label/Label.js b/packages/core/src/Label/Label.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import cx from 'classnames'
 import css from 'styled-jsx/css'
+
 import propTypes from '@dhis2/prop-types'
-import { Required } from './Required.js'
+
+import { Required } from '../Required/Required.js'
 
 const styles = css`
     label {

diff --git a/packages/core/src/Label/Required.js → packages/core/src/Required/Required.js b/packages/core/src/Label/Required.js → packages/core/src/Required/Required.js
diff --git a/packages/core/src/ToggleField/AddRequired.js b/packages/core/src/ToggleField/AddRequired.js
diff --git a/packages/core/src/ToggleField/ToggleField.js b/packages/core/src/ToggleField/ToggleField.js
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
@@ -50,6 +50,7 @@ export { Node } from './Node/Node.js'
 export { Popover } from './Popover/Popover.js'
 export { Popper } from './Popper/Popper.js'
 export { Radio } from './Radio/Radio.js'
+export { Required } from './Required/Required.js'
 export { ScreenCover } from './ScreenCover/ScreenCover.js'
 export { SingleSelect } from './SingleSelect/SingleSelect.js'
 export { SingleSelectOption } from './SingleSelectOption/SingleSelectOption.js'

diff --git a/packages/widgets/src/CheckboxField/CheckboxField.js b/packages/widgets/src/CheckboxField/CheckboxField.js
@@ -1,13 +1,25 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
-import { ToggleField, Checkbox } from '@dhis2/ui-core'
+import { Field, Help, Checkbox, Required } from '@dhis2/ui-core'
 
-export const statusPropType = propTypes.mutuallyExclusive(
+const statusPropType = propTypes.mutuallyExclusive(
     ['valid', 'warning', 'error'],
     propTypes.bool
 )
 
+const AddRequired = ({ label, required, dataTest }) => (
+    <React.Fragment>
+        {label}
+        {required && <Required dataTest={`${dataTest}-required`} />}
+    </React.Fragment>
+)
+AddRequired.propTypes = {
+    dataTest: propTypes.string,
+    label: propTypes.node,
+    required: propTypes.bool,
+}
+
 /**
  * @module
  * @param {CheckboxField.PropTypes} props
@@ -40,28 +52,43 @@ const CheckboxField = ({
     validationText,
     dataTest,
 }) => (
-    <ToggleField
-        value={value}
-        label={label}
-        name={name}
-        className={className}
-        toggleComponent={Checkbox}
-        tabIndex={tabIndex}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        checked={checked}
-        disabled={disabled}
-        valid={valid}
-        warning={warning}
-        error={error}
-        dense={dense}
-        initialFocus={initialFocus}
-        required={required}
-        helpText={helpText}
-        validationText={validationText}
-        dataTest={dataTest}
-    />
+    <Field className={className} dataTest={dataTest}>
+        <Checkbox
+            value={value}
+            label={
+                <AddRequired
+                    label={label}
+                    required={required}
+                    dataTest={dataTest}
+                />
+            }
+            name={name}
+            tabIndex={tabIndex}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            checked={checked}
+            disabled={disabled}
+            valid={valid}
+            warning={warning}
+            error={error}
+            dense={dense}
+            initialFocus={initialFocus}
+        />
+
+        {helpText && <Help dataTest={`${dataTest}-help`}>{helpText}</Help>}
+
+        {validationText && (
+            <Help
+                error={error}
+                warning={warning}
+                valid={valid}
+                dataTest={`${dataTest}-validation`}
+            >
+                {validationText}
+            </Help>
+        )}
+    </Field>
 )
 
 CheckboxField.defaultProps = {

diff --git a/packages/widgets/src/SwitchField/SwitchField.js b/packages/widgets/src/SwitchField/SwitchField.js
@@ -1,15 +1,25 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
-import { Switch } from '@dhis2/ui-core'
-
-import { ToggleField } from '../ToggleField/ToggleField.js'
+import { Field, Switch, Help, Required } from '@dhis2/ui-core'
 
 const statusPropType = propTypes.mutuallyExclusive(
     ['valid', 'warning', 'error'],
     propTypes.bool
 )
 
+const AddRequired = ({ label, required, dataTest }) => (
+    <React.Fragment>
+        {label}
+        {required && <Required dataTest={`${dataTest}-required`} />}
+    </React.Fragment>
+)
+AddRequired.propTypes = {
+    dataTest: propTypes.string,
+    label: propTypes.node,
+    required: propTypes.bool,
+}
+
 /**
  * @module
  * @param {SwitchField.PropTypes} props
@@ -42,28 +52,43 @@ const SwitchField = ({
     validationText,
     dataTest,
 }) => (
-    <ToggleField
-        toggleComponent={Switch}
-        value={value}
-        label={label}
-        name={name}
-        className={className}
-        tabIndex={tabIndex}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        checked={checked}
-        disabled={disabled}
-        valid={valid}
-        warning={warning}
-        error={error}
-        dense={dense}
-        initialFocus={initialFocus}
-        required={required}
-        helpText={helpText}
-        validationText={validationText}
-        dataTest={dataTest}
-    />
+    <Field className={className} dataTest={dataTest}>
+        <Switch
+            value={value}
+            label={
+                <AddRequired
+                    label={label}
+                    required={required}
+                    dataTest={dataTest}
+                />
+            }
+            name={name}
+            tabIndex={tabIndex}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            checked={checked}
+            disabled={disabled}
+            valid={valid}
+            warning={warning}
+            error={error}
+            dense={dense}
+            initialFocus={initialFocus}
+        />
+
+        {helpText && <Help dataTest={`${dataTest}-help`}>{helpText}</Help>}
+
+        {validationText && (
+            <Help
+                error={error}
+                warning={warning}
+                valid={valid}
+                dataTest={`${dataTest}-validation`}
+            >
+                {validationText}
+            </Help>
+        )}
+    </Field>
 )
 
 SwitchField.defaultProps = {