#865 | Completely Remove RadioGroup and PresetOptionItem, replace its usages with SelectableItemGroup

sachsk · sachsk · commit 0ab3ea150e2b · 2023-02-28T16:23:40.000+05:30
diff --git a/packages/openchs-android/src/Playground.js b/packages/openchs-android/src/Playground.js
@@ -3,7 +3,7 @@ import {Text, View, TextInput, Button} from "react-native";
 import RealmFactory from "./framework/db/RealmFactory";
 import _ from 'lodash';
 import SelectableItemGroup from "./views/primitives/SelectableItemGroup";
-import {RadioLabelValue} from "./views/primitives/RadioGroup";
+import RadioLabelValue from "./views/primitives/RadioLabelValue";
 import CHSContainer from "./views/common/CHSContainer";
 
 const db = RealmFactory.createRealm();
diff --git a/packages/openchs-android/src/views/common/AddressLevel.js b/packages/openchs-android/src/views/common/AddressLevel.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from "react";
 import AbstractComponent from "../../framework/view/AbstractComponent";
-import RadioGroup, {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 import General from "../../utility/General";
 import Styles from "../primitives/Styles";
 import SelectableItemGroup from "../primitives/SelectableItemGroup";
diff --git a/packages/openchs-android/src/views/common/ProgramFilter.js b/packages/openchs-android/src/views/common/ProgramFilter.js
@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import AbstractComponent from "../../framework/view/AbstractComponent";
 import React from "react";
 import General from "../../utility/General";
-import {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 
 import Styles from "../primitives/Styles";
-import RadioGroup from "../primitives/RadioGroup";
 import FormMappingService from "../../service/FormMappingService";
 import SelectableItemGroup from "../primitives/SelectableItemGroup";
 import UserInfoService from "../../service/UserInfoService";
diff --git a/packages/openchs-android/src/views/filter/CustomFilters.js b/packages/openchs-android/src/views/filter/CustomFilters.js
@@ -18,7 +18,7 @@ import TimePicker from "../primitives/TimePicker";
 import moment from "moment";
 import ValidationErrorMessage from "../form/ValidationErrorMessage";
 import IndividualService from "../../service/IndividualService";
-import {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 import AddressLevelsState from "../../action/common/AddressLevelsState";
 import MultiSelectFilterModel from "../../model/MultiSelectFilterModel";
 import UserInfoService from "../../service/UserInfoService";
diff --git a/packages/openchs-android/src/views/filter/MultiSelectFilter.js b/packages/openchs-android/src/views/filter/MultiSelectFilter.js
@@ -1,7 +1,7 @@
 import React from "react";
 import {View} from 'react-native';
 import BaseFilter from "./BaseFilter";
-import {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 import SelectableItemGroup from "../primitives/SelectableItemGroup";
 import PropTypes from "prop-types";
 
diff --git a/packages/openchs-android/src/views/filter/SingleSelectFilter.js b/packages/openchs-android/src/views/filter/SingleSelectFilter.js
@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
 import React from "react";
-import {View, Text} from 'react-native';
 import BaseFilter from "./BaseFilter";
-import RadioGroup, {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 import SelectableItemGroup from "../primitives/SelectableItemGroup";
-import UserInfoService from "../../service/UserInfoService";
 
 export default class SingleSelectFilter extends BaseFilter {
     constructor(props, context) {
diff --git a/packages/openchs-android/src/views/form/formElement/EncounterSelectFormElement.js b/packages/openchs-android/src/views/form/formElement/EncounterSelectFormElement.js
@@ -2,7 +2,7 @@ import React from 'react';
 import AbstractFormElement from "./AbstractFormElement";
 import EncounterService from "../../../service/EncounterService";
 import {Concept} from "openchs-models";
-import {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import ConceptService from "../../../service/ConceptService";
 import IndividualService from "../../../service/IndividualService";
 import AddressLevelService from "../../../service/AddressLevelService";
diff --git a/packages/openchs-android/src/views/form/formElement/GenderFormElement.js b/packages/openchs-android/src/views/form/formElement/GenderFormElement.js
@@ -4,9 +4,10 @@ import AbstractComponent from "../../../framework/view/AbstractComponent";
 import AbstractDataEntryState from "../../../state/AbstractDataEntryState";
 import Distances from "../../primitives/Distances";
 import {Individual} from 'avni-models';
-import RadioGroup, {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import {Actions} from "../../../action/individual/PersonRegisterActions";
-import {View} from "react-native";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
+import UserInfoService from "../../../service/UserInfoService";
 
 class GenderFormElement extends AbstractComponent {
     static propTypes = {
@@ -18,11 +19,15 @@ class GenderFormElement extends AbstractComponent {
     }
 
     render() {
-        return <RadioGroup
-            onPress={({value}) => this.dispatchAction(Actions.REGISTRATION_ENTER_GENDER, {value: value})}
-            labelValuePairs={this.props.state.genders.map((gender) => new RadioLabelValue(gender.name, gender))}
-            labelKey="gender"
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
+
+        return <SelectableItemGroup
+            locale={currentLocale}
+            I18n={this.I18n}
+            onPress={(value) => this.dispatchAction(Actions.REGISTRATION_ENTER_GENDER, {value: value})}
             selectionFn={(gender) => gender.equals(this.props.state.individual.gender)}
+            labelKey="gender"
+            labelValuePairs={this.props.state.genders.map((gender) => new RadioLabelValue(gender.name, gender))}
             validationError={AbstractDataEntryState.getValidationError(this.props.state, Individual.validationKeys.GENDER)}
             style={{marginTop: Distances.VerticalSpacingBetweenFormElements}}
             mandatory={true}
diff --git a/packages/openchs-android/src/views/form/formElement/GroupAffiliationFormElement.js b/packages/openchs-android/src/views/form/formElement/GroupAffiliationFormElement.js
@@ -2,11 +2,13 @@ import AbstractFormElement from "./AbstractFormElement";
 import React from "react";
 import PropTypes from "prop-types";
 import {View} from "react-native";
-import RadioGroup, {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import Distances from "../../primitives/Distances";
 import _ from "lodash";
 import IndividualService from "../../../service/IndividualService";
 import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import UserInfoService from "../../../service/UserInfoService";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
 
 class GroupAffiliationFormElement extends AbstractFormElement {
 
@@ -43,22 +45,28 @@ class GroupAffiliationFormElement extends AbstractFormElement {
     render() {
         const groupSubjectObservation = this.props.groupSubjectObservation;
         const valueLabelPairs = this.groupsToShow().map((subject) => new RadioLabelValue(subject.nameString, subject.uuid));
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
+
         return (
             <View style={{flexDirection: 'column', paddingBottom: Distances.ScaledVerticalSpacingBetweenOptionItems}}>
                 <FormElementLabelWithDocumentation element={this.props.element}/>
                 {!_.isEmpty(this.props.actionName) &&
-                <RadioGroup
-                    allowRadioUnselect={true}
-                    multiSelect={false}
-                    inPairs={true}
-                    onPress={({label, value}) => this.onPress(value)}
-                    selectionFn={(groupSubjectUUID) => _.isNil(_.get(groupSubjectObservation, "groupSubject.groupSubject.uuid")) ? false : groupSubjectObservation.groupSubject.groupSubject.uuid === groupSubjectUUID}
-                    labelKey={this.props.element.name}
-                    mandatory={this.props.element.mandatory}
-                    validationError={this.props.validationResult}
-                    labelValuePairs={valueLabelPairs}
-                    skipLabel={true}
-                />}
+                    <SelectableItemGroup
+                        allowRadioUnselect={true}
+                        multiSelect={false}
+                        inPairs={true}
+                        locale={currentLocale}
+                        I18n={this.I18n}
+                        onPress={(value) => this.onPress(value)}
+                        selectionFn={(groupSubjectUUID) => _.isNil(_.get(groupSubjectObservation, "groupSubject.groupSubject.uuid")) ? false : groupSubjectObservation.groupSubject.groupSubject.uuid === groupSubjectUUID}
+                        labelKey={this.props.element.name}
+                        mandatory={this.props.element.mandatory}
+                        validationError={this.props.validationResult}
+                        labelValuePairs={valueLabelPairs}
+                        skipLabel={true}
+                    />
+
+                }
             </View>);
     }
 
diff --git a/packages/openchs-android/src/views/form/formElement/MultiSelectEncounterFormElement.js b/packages/openchs-android/src/views/form/formElement/MultiSelectEncounterFormElement.js
@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from "prop-types";
 import _ from "lodash";
 import Distances from "../../primitives/Distances";
-import RadioGroup from "../../primitives/RadioGroup";
 import {View} from "react-native";
 import EncounterSelectFormElement from "./EncounterSelectFormElement";
 import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
+import UserInfoService from "../../../service/UserInfoService";
 
 class MultiSelectEncounterFormElement extends EncounterSelectFormElement {
 
@@ -28,13 +29,16 @@ class MultiSelectEncounterFormElement extends EncounterSelectFormElement {
     render() {
         const encounterUUIDs = _.get(this.props.value, 'answer');
         const valueLabelPairs = this.getValueLabelPairs();
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
         return (
             <View style={{flexDirection: 'column', paddingBottom: Distances.ScaledVerticalSpacingBetweenOptionItems}}>
                 <FormElementLabelWithDocumentation element={this.props.element}/>
-                <RadioGroup
+                <SelectableItemGroup
                     multiSelect={true}
                     inPairs={true}
-                    onPress={({label, value}) => this.toggleFormElementAnswerSelection(value)}
+                    locale={currentLocale}
+                    I18n={this.I18n}
+                    onPress={(value) => this.toggleFormElementAnswerSelection(value)}
                     selectionFn={(encounterUUID) => _.isEmpty(encounterUUIDs) ? false : _.includes(encounterUUIDs, encounterUUID)}
                     labelKey={this.props.element.name}
                     mandatory={this.props.element.mandatory}
diff --git a/packages/openchs-android/src/views/form/formElement/MultiSelectSubjectFormElement.js b/packages/openchs-android/src/views/form/formElement/MultiSelectSubjectFormElement.js
@@ -4,8 +4,10 @@ import _ from "lodash";
 import SubjectFormElement from "./SubjectFormElement";
 import ValidationErrorMessage from "../../form/ValidationErrorMessage";
 import Distances from "../../primitives/Distances";
-import RadioGroup, {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
+import UserInfoService from "../../../service/UserInfoService";
 
 class MultiSelectSubjectFormElement extends SubjectFormElement {
     constructor(props, context) {
@@ -38,19 +40,23 @@ class MultiSelectSubjectFormElement extends SubjectFormElement {
     }
 
     renderSelectUI(subjectUUIDs, subjectOptions) {
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
         const valueLabelPairs = subjectOptions
             .map((subject) => new RadioLabelValue(subject.nameStringWithUniqueAttribute, subject.uuid, false));
         return (
             <View style={{flexDirection: 'column', paddingBottom: Distances.ScaledVerticalSpacingBetweenOptionItems}}>
-                <RadioGroup
+                <SelectableItemGroup
                     multiSelect={true}
                     inPairs={true}
-                    onPress={({label, value}) => this.toggleFormElementAnswerSelection(value)}
+                    locale={currentLocale}
+                    I18n={this.I18n}
+                    onPress={(value) => this.toggleFormElementAnswerSelection(value)}
                     selectionFn={(subjectUUID) => subjectUUIDs.indexOf(subjectUUID) !== -1}
                     labelKey={this.props.element.name}
                     mandatory={this.props.element.mandatory}
                     validationError={this.props.validationResult}
-                    labelValuePairs={valueLabelPairs}/>
+                    labelValuePairs={valueLabelPairs}
+                />
             </View>);
     }
 }
diff --git a/packages/openchs-android/src/views/form/formElement/SelectFormElement.js b/packages/openchs-android/src/views/form/formElement/SelectFormElement.js
@@ -4,7 +4,7 @@ import React from "react";
 import _ from "lodash";
 import AbstractFormElement from "./AbstractFormElement";
 import Distances from "../../primitives/Distances";
-import RadioGroup, {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
 import SelectableItemGroup from "../../primitives/SelectableItemGroup";
 import UserInfoService from "../../../service/UserInfoService";
diff --git a/packages/openchs-android/src/views/form/formElement/SingleSelectEncounterFormElement.js b/packages/openchs-android/src/views/form/formElement/SingleSelectEncounterFormElement.js
@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from "prop-types";
 import _ from "lodash";
 import Distances from "../../primitives/Distances";
-import RadioGroup from "../../primitives/RadioGroup";
 import {View} from "react-native";
 import EncounterSelectFormElement from "./EncounterSelectFormElement";
 import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
+import UserInfoService from "../../../service/UserInfoService";
 
 class SingleSelectEncounterFormElement extends EncounterSelectFormElement {
 
@@ -28,23 +29,26 @@ class SingleSelectEncounterFormElement extends EncounterSelectFormElement {
     render() {
         const selectedEncounterUUID = _.get(this.props.value, 'answer');
         const valueLabelPairs = this.getValueLabelPairs();
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
+
         return (
             <View style={{flexDirection: 'column', paddingBottom: Distances.ScaledVerticalSpacingBetweenOptionItems}}>
                 <FormElementLabelWithDocumentation element={this.props.element}/>
-                <RadioGroup
+                <SelectableItemGroup
                     allowRadioUnselect={true}
                     multiSelect={false}
                     inPairs={true}
-                    onPress={({label, value}) => this.toggleFormElementAnswerSelection(value)}
+                    locale={currentLocale}
+                    I18n={this.I18n}
+                    onPress={(value) => this.toggleFormElementAnswerSelection(value)}
                     selectionFn={(encounterUUID) => _.isEmpty(selectedEncounterUUID) ? false : selectedEncounterUUID === encounterUUID}
                     labelKey={this.props.element.name}
                     mandatory={this.props.element.mandatory}
                     validationError={this.props.validationResult}
                     labelValuePairs={valueLabelPairs}
                     skipLabel={true}
                 />
-            </View>
-        )
+            </View>)
     }
 
 
diff --git a/packages/openchs-android/src/views/form/formElement/SingleSelectSubjectFormElement.js b/packages/openchs-android/src/views/form/formElement/SingleSelectSubjectFormElement.js
@@ -3,9 +3,11 @@ import React from "react";
 import _ from "lodash";
 import ValidationErrorMessage from "../../form/ValidationErrorMessage";
 import Distances from "../../primitives/Distances";
-import RadioGroup, {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import SubjectFormElement from "./SubjectFormElement";
 import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import UserInfoService from "../../../service/UserInfoService";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
 
 class SingleSelectSubjectFormElement extends SubjectFormElement {
 
@@ -41,18 +43,23 @@ class SingleSelectSubjectFormElement extends SubjectFormElement {
     renderSelectUI(subject, subjectOptions) {
         const valueLabelPairs = subjectOptions
             .map((subject) => new RadioLabelValue(subject.nameStringWithUniqueAttribute, subject.uuid, false));
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
+
         return (
             <View style={{flexDirection: 'column', paddingBottom: Distances.ScaledVerticalSpacingBetweenOptionItems}}>
-                <RadioGroup
-                    allowRadioUnselect={true}
+                <SelectableItemGroup
                     multiSelect={false}
+                    allowRadioUnselect={true}
                     inPairs={true}
-                    onPress={({label, value}) => this.toggleFormElementAnswerSelection(value)}
+                    locale={currentLocale}
+                    I18n={this.I18n}
+                    onPress={(value) => this.toggleFormElementAnswerSelection(value)}
                     selectionFn={(subjectUUID) => _.isEmpty(subject) ? false : subject.uuid === subjectUUID}
                     labelKey={this.props.element.name}
                     mandatory={this.props.element.mandatory}
                     validationError={this.props.validationResult}
-                    labelValuePairs={valueLabelPairs}/>
+                    labelValuePairs={valueLabelPairs}
+                />
             </View>);
     }
 }
diff --git a/packages/openchs-android/src/views/form/formElement/ValueSelectFormElement.js b/packages/openchs-android/src/views/form/formElement/ValueSelectFormElement.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import AbstractFormElement from "./AbstractFormElement";
 import PropTypes from "prop-types";
-import RadioGroup, {RadioLabelValue} from "../../primitives/RadioGroup";
+import RadioLabelValue from "../../primitives/RadioLabelValue";
 import {View} from "react-native";
 import Distances from "../../primitives/Distances";
 import _ from "lodash";
+import UserInfoService from "../../../service/UserInfoService";
+import SelectableItemGroup from "../../primitives/SelectableItemGroup";
 
 class ValueSelectFormElement extends AbstractFormElement {
     static propTypes = {
@@ -17,18 +19,22 @@ class ValueSelectFormElement extends AbstractFormElement {
 
     render() {
         const valueLabelPairs = this.props.values.map((value) => new RadioLabelValue(value, value));
+        const currentLocale = this.getService(UserInfoService).getUserSettings().locale;
         return (
             <View style={{flexDirection: 'column', paddingBottom: Distances.ScaledVerticalSpacingBetweenOptionItems}}>
-                <RadioGroup
+                <SelectableItemGroup
                     allowRadioUnselect={true}
                     multiSelect={false}
                     inPairs={true}
-                    onPress={({label, value}) => this.props.onPress(value)}
+                    locale={currentLocale}
+                    I18n={this.I18n}
+                    onPress={(value) => this.props.onPress(value)}
                     selectionFn={(value) => _.toString(this.props.value.getValue()) === value}
                     labelKey={this.props.element.name}
                     mandatory={this.props.element.mandatory}
                     validationError={this.props.validationResult}
                     labelValuePairs={valueLabelPairs}
+                    style={{marginTop: Distances.VerticalSpacingBetweenFormElements}}
                 />
             </View>);
     }
diff --git a/packages/openchs-android/src/views/groupSubject/AddMemberDetails.js b/packages/openchs-android/src/views/groupSubject/AddMemberDetails.js
@@ -1,7 +1,7 @@
 import AbstractComponent from "../../framework/view/AbstractComponent";
 import React from 'react';
 import {Text, View} from "react-native";
-import RadioGroup, {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 import AbstractDataEntryState from "../../state/AbstractDataEntryState";
 import Styles from "../primitives/Styles";
 import Colors from "../primitives/Colors";
diff --git a/packages/openchs-android/src/views/individual/IndividualAddRelativeView.js b/packages/openchs-android/src/views/individual/IndividualAddRelativeView.js
@@ -12,11 +12,10 @@ import IndividualFormElement from "../form/formElement/IndividualFormElement";
 import StaticFormElement from "../viewmodel/StaticFormElement";
 import {IndividualRelative} from 'avni-models';
 import _ from "lodash";
-import RadioGroup, {RadioLabelValue} from "../primitives/RadioGroup";
+import RadioLabelValue from "../primitives/RadioLabelValue";
 import AppHeader from "../common/AppHeader";
 import WizardButtons from "../common/WizardButtons";
 import CHSContainer from "../common/CHSContainer";
-import themes from "../primitives/themes";
 import CHSNavigator from "../../utility/CHSNavigator";
 import AbstractDataEntryState from "../../state/AbstractDataEntryState";
 import SelectableItemGroup from "../primitives/SelectableItemGroup";
diff --git a/packages/openchs-android/src/views/individual/IndividualEncounterView.js b/packages/openchs-android/src/views/individual/IndividualEncounterView.js
diff --git a/packages/openchs-android/src/views/primitives/PresetOptionItem.js b/packages/openchs-android/src/views/primitives/PresetOptionItem.js
diff --git a/packages/openchs-android/src/views/primitives/RadioGroup.js b/packages/openchs-android/src/views/primitives/RadioGroup.js
diff --git a/packages/openchs-android/src/views/primitives/RadioLabelValue.js b/packages/openchs-android/src/views/primitives/RadioLabelValue.js
diff --git a/packages/openchs-android/src/views/settings/DevSettingsView.js b/packages/openchs-android/src/views/settings/DevSettingsView.js
diff --git a/packages/openchs-android/src/views/settings/SettingsView.js b/packages/openchs-android/src/views/settings/SettingsView.js
diff --git a/packages/openchs-android/src/views/task/TaskFilterView.js b/packages/openchs-android/src/views/task/TaskFilterView.js
