From 7793fe6442b714f7bae2600758e302c178b3dc15 Mon Sep 17 00:00:00 2001 From: Viktor Varland Date: Mon, 9 Mar 2020 17:10:52 +0100 Subject: [PATCH] refactor(togglefield): remove component in favor of explicity --- packages/core/src/Label/Label.js | 4 +- .../core/src/{Label => Required}/Required.js | 0 packages/core/src/ToggleField/AddRequired.js | 16 --- packages/core/src/ToggleField/ToggleField.js | 123 ------------------ packages/core/src/index.js | 1 + .../src/CheckboxField/CheckboxField.js | 75 +++++++---- .../widgets/src/SwitchField/SwitchField.js | 75 +++++++---- 7 files changed, 105 insertions(+), 189 deletions(-) rename packages/core/src/{Label => Required}/Required.js (100%) delete mode 100644 packages/core/src/ToggleField/AddRequired.js delete mode 100644 packages/core/src/ToggleField/ToggleField.js diff --git a/packages/core/src/Label/Label.js b/packages/core/src/Label/Label.js index 5008c21a0c..b2a4cda342 100644 --- 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 b/packages/core/src/Required/Required.js similarity index 100% rename from packages/core/src/Label/Required.js rename to packages/core/src/Required/Required.js diff --git a/packages/core/src/ToggleField/AddRequired.js b/packages/core/src/ToggleField/AddRequired.js deleted file mode 100644 index e6ca50bce3..0000000000 --- a/packages/core/src/ToggleField/AddRequired.js +++ /dev/null @@ -1,16 +0,0 @@ -import propTypes from '@dhis2/prop-types' -import React from 'react' -import { Required } from '../Label/Required.js' - -export const AddRequired = ({ label, required, dataTest }) => ( - - {label} - {required && } - -) - -AddRequired.propTypes = { - dataTest: propTypes.string, - label: propTypes.node, - required: propTypes.bool, -} diff --git a/packages/core/src/ToggleField/ToggleField.js b/packages/core/src/ToggleField/ToggleField.js deleted file mode 100644 index 8178f56e6a..0000000000 --- a/packages/core/src/ToggleField/ToggleField.js +++ /dev/null @@ -1,123 +0,0 @@ -import propTypes from '@dhis2/prop-types' -import React from 'react' - -import { statusPropType } from '../common-prop-types.js' -import { Field } from '../Field/Field.js' -import { Help } from '../Help/Help.js' -import { AddRequired } from './AddRequired.js' - -const ToggleField = ({ - value, - label, - name, - className, - tabIndex, - onChange, - onFocus, - onBlur, - checked, - disabled, - valid, - warning, - error, - dense, - initialFocus, - required, - helpText, - validationText, - dataTest, - toggleComponent: ToggleComponent, -}) => ( - - - } - 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 && {helpText}} - - {validationText && ( - - {validationText} - - )} - -) - -ToggleField.defaultProps = { - dataTest: 'dhis2-uicore-togglefield', -} - -/** - * @typedef {Object} PropTypes - * @static - * @private - * - * @prop {string} [value] - * @prop {Node} [label] - * @prop {string} [name] - * @prop {string} [className] - * @prop {string} [tabIndex] - * @prop {function} [onChange] - * @prop {function} [onFocus] - * @prop {function} [onBlur] - * @prop {boolean} [checked] - * @prop {boolean} [disabled] - * @prop {boolean} [valid] - `valid`, `warning`, `error`, `loading`, are mutually exclusive - * @prop {boolean} [warning] - * @prop {boolean} [error] - * @prop {boolean} [dense] - * @prop {boolean} [initialFocus] - * @prop {boolean} [required] - * @prop {string} [helpText] - * @prop {string} [validationText] - * @prop {function} toggleComponent - * @prop {string} [dataTest] - */ -ToggleField.propTypes = { - toggleComponent: propTypes.func.isRequired, - checked: propTypes.bool, - className: propTypes.string, - dataTest: propTypes.string, - dense: propTypes.bool, - disabled: propTypes.bool, - error: statusPropType, - helpText: propTypes.string, - initialFocus: propTypes.bool, - label: propTypes.node, - name: propTypes.string, - required: propTypes.bool, - tabIndex: propTypes.string, - valid: statusPropType, - validationText: propTypes.string, - value: propTypes.string, - warning: statusPropType, - onBlur: propTypes.func, - onChange: propTypes.func, - onFocus: propTypes.func, -} - -export { ToggleField } diff --git a/packages/core/src/index.js b/packages/core/src/index.js index d018f986b6..5ccee68dd9 100644 --- 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 index 974744ddcf..215090d4e2 100644 --- 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 }) => ( + + {label} + {required && } + +) +AddRequired.propTypes = { + dataTest: propTypes.string, + label: propTypes.node, + required: propTypes.bool, +} + /** * @module * @param {CheckboxField.PropTypes} props @@ -40,28 +52,43 @@ const CheckboxField = ({ validationText, 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 && {helpText}} + + {validationText && ( + + {validationText} + + )} + ) CheckboxField.defaultProps = { diff --git a/packages/widgets/src/SwitchField/SwitchField.js b/packages/widgets/src/SwitchField/SwitchField.js index de34ed99c4..b2afc46895 100644 --- 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 }) => ( + + {label} + {required && } + +) +AddRequired.propTypes = { + dataTest: propTypes.string, + label: propTypes.node, + required: propTypes.bool, +} + /** * @module * @param {SwitchField.PropTypes} props @@ -42,28 +52,43 @@ const SwitchField = ({ validationText, 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 && {helpText}} + + {validationText && ( + + {validationText} + + )} + ) SwitchField.defaultProps = {