Add unit select to QuestionQuantity widget

Refs: #323
beda-software · Nov 5, 2024 · 23b63a7 · 23b63a7
1 parent f17e0c3
commit 23b63a7
Showing 1 changed file with 22 additions and 2 deletions.
diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/number.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/number.tsx
@@ -1,5 +1,6 @@
-import { Form, InputNumber } from 'antd';
+import { Form, InputNumber, Select } from 'antd';
 import { Coding } from 'fhir/r4b';
+import { useState } from 'react';
 import { QuestionItemProps } from 'sdc-qrf';
 
 import { useFieldController } from '../hooks';
@@ -59,10 +60,29 @@ export function QuestionQuantity(props: QuestionItemProps) {
     const fieldName = [...parentPath, linkId, 0, 'value', 'decimal'];
     const { value, onChange, disabled, formItem, placeholder } = useFieldController(fieldName, questionItem);
 
+    const [selectedUnit, setSelectedUnit] = useState(unitOption?.[0]?.display);
+
     return (
         <Form.Item {...formItem}>
             <InputNumber
-                addonAfter={unitOption?.display}
+                addonAfter={
+                    unitOption && unitOption.length > 1 ? (
+                        <Select
+                            value={selectedUnit}
+                            onChange={setSelectedUnit}
+                            style={{ minWidth: 70 }}
+                            disabled={disabled}
+                        >
+                            {unitOption.map((option, index) => (
+                                <Select.Option key={index} value={option.display}>
+                                    {option.display}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    ) : (
+                        unitOption?.[0]?.display
+                    )
+                }
                 style={inputStyle}
                 disabled={disabled}
                 onChange={onChange}