Squashed commits

Author: duvld

jsapp/js/components/processing/analysis/responseForms/selectOneResponseForm.component.tsx

@@ -1,5 +1,5 @@
+import { Radio, Stack } from '@mantine/core'
 import React, { useContext, useState } from 'react'
-import Radio from '#/components/common/radio'
 import type { RadioOption } from '#/components/common/radio'
 import AnalysisQuestionsContext from '#/components/processing/analysis/analysisQuestions.context'
 import {
@@ -71,15 +71,19 @@ export default function SelectOneResponseForm(props: SelectOneResponseFormProps)
   }
 
   return (
-    <ResponseWrapper uuid={props.uuid} onClear={() => onRadioChange('')}>
-      <Radio
-        options={getOptions()}
-        name={question.labels._default}
-        onChange={onRadioChange}
-        selected={response}
-        isClearable
-        isDisabled={!props.canEdit}
-      />
+    <ResponseWrapper uuid={props.uuid} onClear={() => setResponse('')}>
+      <Radio.Group>
+        <Stack gap={'xs'}>
+          {getOptions().map((option) => (
+            <Radio
+              value={option.value}
+              label={option.label}
+              onChange={(newResponse) => onRadioChange(newResponse.currentTarget.value)}
+              checked={response === option.value}
+            />
+          ))}
+        </Stack>
+      </Radio.Group>
     </ResponseWrapper>
   )
 }

jsapp/js/theme/kobo/Radio.module.css

@@ -0,0 +1,6 @@
+.label {
+  background-color: red;
+}
+.radio {
+  cursor: pointer;
+}

jsapp/js/theme/kobo/Radio.ts

@@ -0,0 +1,6 @@
+import { Radio } from '@mantine/core'
+import classes from './Radio.module.css'
+
+export const RadioThemeKobo = Radio.extend({
+  classNames: classes,
+})

jsapp/js/theme/kobo/index.ts

@@ -13,6 +13,7 @@ import { TableThemeKobo } from './Table'
 import { TagsInputThemeKobo } from './TagsInput'
 import { ThemeIconThemeKobo } from './ThemeIcon'
 import { TooltipThemeKobo } from './Tooltip'
+import {RadioThemeKobo} from './Radio'
 
 export const themeKobo = createTheme({
   primaryColor: 'blue',
@@ -123,5 +124,6 @@ export const themeKobo = createTheme({
     TagsInput: TagsInputThemeKobo,
     ThemeIcon: ThemeIconThemeKobo,
     NumberInput: NumberInputThemeKobo,
+    Radio: RadioThemeKobo,
   },
 })