Add nested xml

components/Inputs/Inputs.tsx

@@ -1,7 +1,15 @@
-import { DatePicker, DatePickerView, InputItem, List, Text, TextareaItem, View } from "@ant-design/react-native";
-import { V1AnswerSettings, AnswerTypes } from "@formstr/sdk/dist/interfaces";
-import { useState } from "react";
-import RNPickerSelect from "react-native-picker-select"
+import {
+  DatePicker,
+  DatePickerView,
+  InputItem,
+  List,
+  Text,
+  TextareaItem,
+  View,
+} from '@ant-design/react-native';
+import {V1AnswerSettings, AnswerTypes} from '@formstr/sdk/dist/interfaces';
+import {useState} from 'react';
+import RNPickerSelect from 'react-native-picker-select';
 
 interface InputFillerProps {
   answerType: AnswerTypes;
@@ -16,39 +24,38 @@ export const InputFiller: React.FC<InputFillerProps> = ({
   onChange,
   defaultValue,
 }) => {
-
-  const [inputValue, setInputValue] = useState("");
-  const handleInputChange = (
-    e: any
-  ) => {
-    console.log("E is", e)
+  const [inputValue, setInputValue] = useState('');
+  const handleInputChange = (e: any) => {
+    console.log('E is', e);
     setInputValue(e);
-    onChange(e)
+    onChange(e);
   };
 
   const handleValueChange = (value: string) => {
     if (!value) return;
-    setInputValue(value)
+    setInputValue(value);
     onChange(value);
   };
 
   const getInput = (
     answerType: AnswerTypes,
-    answerSettings: V1AnswerSettings
+    answerSettings: V1AnswerSettings,
   ) => {
-    const dropdownItems = (answerSettings.choices || []).map((choice) => {
+    const dropdownItems = (answerSettings.choices || []).map(choice => {
       return {
-          label: choice.label, value: choice.choiceId, key: choice.choiceId
-  }})
-    const INPUT_TYPE_COMPONENT_MAP: { [key in AnswerTypes]?: JSX.Element } = {
+        label: choice.label,
+        value: choice.choiceId,
+        key: choice.choiceId,
+      };
+    });
+    const INPUT_TYPE_COMPONENT_MAP: {[key in AnswerTypes]?: JSX.Element} = {
       [AnswerTypes.label]: <></>,
       [AnswerTypes.shortText]: (
         <InputItem
           onChange={handleValueChange}
           defaultValue={defaultValue as string}
           placeholder="enter a value..."
-          placeholderTextColor="#aaaaaa">
-        </InputItem>
+          placeholderTextColor="#aaaaaa"></InputItem>
       ),
       [AnswerTypes.paragraph]: (
         <TextareaItem
@@ -57,53 +64,36 @@ export const InputFiller: React.FC<InputFillerProps> = ({
           placeholderTextColor="#aaaaaa"
           onChange={handleInputChange}
           autoHeight
-          style={{ paddingVertical: 5 }}
+          style={{paddingVertical: 5}}
         />
       ),
-      [AnswerTypes.number]: (
-        // <InputNumber
-        //   defaultValue={defaultValue as string}
-        //   onChange={handleValueChange}
-        //   style={{ width: "100%" }}
-        //   placeholder="Please enter your response"
-        // />
-        <View></View>
-      ),
-      [AnswerTypes.radioButton]: (
-        // <ChoiceFiller
-        //   answerType={answerType as AnswerTypes.radioButton}
-        //   answerSettings={answerSettings}
-        //   defaultValue={defaultValue as string}
-        //   onChange={handleValueChange}
-        // />
-        <View></View>
-      ),
-      [AnswerTypes.checkboxes]: (
-        // <ChoiceFiller
-        //   defaultValue={defaultValue as string}
-        //   answerType={answerType as AnswerTypes.checkboxes}
-        //   answerSettings={answerSettings}
-        //   onChange={handleValueChange}
-        // />
-        <View></View>
-      ),
+      [AnswerTypes.number]: <View></View>,
+      [AnswerTypes.radioButton]: <View></View>,
+      [AnswerTypes.checkboxes]: <View></View>,
       [AnswerTypes.dropdown]: (
-            <RNPickerSelect 
-                onValueChange={handleValueChange} 
-                items={dropdownItems}
-                placeholder={{}}
-                key="picker" 
-                value={inputValue}
-            ><Text>{inputValue ? answerSettings.choices?.filter((choice) => { return choice.choiceId === inputValue})[0].label : "Select an option"}</Text></RNPickerSelect>
+        <RNPickerSelect
+          onValueChange={handleValueChange}
+          items={dropdownItems}
+          placeholder={{}}
+          key="picker"
+          value={inputValue}>
+          <Text>
+            {inputValue
+              ? answerSettings.choices?.filter(choice => {
+                  return choice.choiceId === inputValue;
+                })[0].label
+              : 'Select an option'}
+          </Text>
+        </RNPickerSelect>
       ),
       [AnswerTypes.date]: (
         <List>
-            <DatePicker key="Datepicker" />
+          <DatePicker key="Datepicker" />
         </List>
       ),
       [AnswerTypes.time]: (
         <List>
-            <DatePicker key="time" />
+          <DatePicker key="time" />
         </List>
       ),
     };