Add Inputs

components/Inputs/Inputs.tsx

@@ -0,0 +1,110 @@
+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;
+  answerSettings: V1AnswerSettings;
+  onChange: (answer: string, message?: string) => void;
+  defaultValue?: string | number | boolean;
+}
+
+export const InputFiller: React.FC<InputFillerProps> = ({
+  answerType,
+  answerSettings,
+  onChange,
+  defaultValue,
+}) => {
+
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (
+    e: any
+  ) => {
+    setInputValue(e.target.value)
+  };
+
+  const handleValueChange = (value: string | null) => {
+    if (!value) return;
+    onChange(value);
+  };
+
+  const getInput = (
+    answerType: AnswerTypes,
+    answerSettings: V1AnswerSettings
+  ) => {
+    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 } = {
+      [AnswerTypes.label]: <></>,
+      [AnswerTypes.shortText]: (
+        <InputItem
+        onChange={handleInputChange}
+        defaultValue={defaultValue as string}
+        placeholder="enter a value...">
+      </InputItem>
+      ),
+      [AnswerTypes.paragraph]: (
+        <TextareaItem
+        rows={10}
+        placeholder="enter a value.."
+        onChange={handleInputChange}
+        autoHeight
+        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.dropdown]: (
+            <RNPickerSelect 
+                onValueChange={(value) => { setInputValue(value), console.log("selected value is: ", value)}} 
+                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" />
+        </List>
+      ),
+      [AnswerTypes.time]: (
+        <List>
+            <DatePicker key="time" />
+        </List>
+      ),
+    };
+
+    return INPUT_TYPE_COMPONENT_MAP[answerType];
+  };
+
+  return <>{getInput(answerType, answerSettings)}</>;
+};

components/PrescriptionCreator/index.tsx

@@ -1,8 +1,9 @@
 import {Dimensions, Image, StyleSheet, Text, View} from 'react-native';
-import SampleJSON from '../../formstr/sample.json';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {PropsWithChildren} from 'react';
-import {Card} from '@ant-design/react-native';
+import {Button, Card} from '@ant-design/react-native';
+import { V1Field } from '@formstr/sdk/dist/interfaces';
+import { InputFiller } from '../Inputs/Inputs';
 
 type SectionProps = PropsWithChildren<{
   title: string;
@@ -57,7 +58,9 @@ function Section({children, title}: SectionProps): React.JSX.Element {
   );
 }
 
-export const PrescriptionCreator = () => {
+export const PrescriptionCreator = ({form} : {form: any}) => {
+  if(form === null) return <View><Text>Loading...</Text></View>
+
   return (
     <View
       style={{
@@ -69,16 +72,16 @@ export const PrescriptionCreator = () => {
           width: Dimensions.get('window').width,
         }}
         source={{
-          uri: SampleJSON.settings.titleImageUrl,
+          uri: form.settings.titleImageUrl,
         }}
       />
       <Section title="PeerScribe">
-        From the practice of {SampleJSON.name}
+        From the practice of {form.name}
       </Section>
 
       <Section title="Prescription">
-        <View style={{display: 'flex', flexDirection: 'column'}}>
-          {SampleJSON.fields.map(field => {
+        <View style={{display: 'flex', flexDirection: 'column', width: "100%"}}>
+          {form.fields.map((field: V1Field) => {
             return (
               <Card
                 key={field.questionId}
@@ -88,7 +91,7 @@ export const PrescriptionCreator = () => {
                   padding: 10,
                   backgroundColor: Colors.white,
                   margin: 10,
-                  width: 500,
+                  width: 350,
                   height: 'auto',
                 }}>
                 <Text
@@ -97,15 +100,17 @@ export const PrescriptionCreator = () => {
                   }}>
                   {field.question}
                 </Text>
-                <Text
+                {/* <Text
                   style={{
                     color: Colors.light,
                   }}>
                   {field.answerType}
-                </Text>
+                </Text> */}
+                <InputFiller answerSettings={field.answerSettings} answerType={field.answerType} onChange={() => {}} />
               </Card>
             );
           })}
+          <Button type='primary'> Create RX </Button>
         </View>
       </Section>
     </View>