inrupt-archived · james-martin-jd · Jan 16, 2020 · Jan 11, 2020 · Jan 13, 2020 · Jan 16, 2020
diff --git a/src/demo/App.js b/src/demo/App.js
@@ -9,7 +9,7 @@ import {
   ProfileUploader,
   useNotification,
   FormModel,
-  AutoSaveDefaultSpinner,
+  Spinner,
   ProfileViewer
 } from '@lib';
 import { AccessControlList } from '@classes';
@@ -167,15 +167,18 @@ const App = () => {
       <ProviderLogin callbackUri={`${window.location.origin}/`} />
       <FormModel
         {...{
-          modelPath: 'https://jmartin.inrupt.net/public/formmodel/multiple.ttl#formRoot',
-          podPath: 'https://jmartin.inrupt.net/profile/card#me',
-          settings: {
+          modelSource:
+            'https://solidsdk.inrupt.net/public/FormLanguage/examples/FormModel/Classifier-subtypes.ttl#formRoot',
+          dataSource: 'https://jmartin.inrupt.net/profile/card#id1561921875000',
+          options: {
             theme: {
               inputText: 'sdk-input',
               inputCheckbox: 'sdk-checkbox checkbox',
-              inputTextArea: 'sdk-textarea'
+              inputTextArea: 'sdk-textarea',
+              multiple: 'sdk-multiple-button'
             },
-            savingComponent: AutoSaveDefaultSpinner
+            autosaveIndicator: Spinner,
+            autosave: true
           },
           viewer: false,
           onError: error => {
@@ -199,7 +202,6 @@ const App = () => {
             console.log(response);
           }
         }}
-        autoSave
         liveUpdate
       />
       <Uploader

diff --git a/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js b/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js
@@ -30,7 +30,8 @@ export const CheckBox = (props: Props) => {
   const { [UI.LABEL]: label } = data;
 
   const onChange = event => {
-    updateData(id, String(event.target.checked));
+    const updatedPart = { ...data, value: String(event.target.checked) };
+    updateData(id, updatedPart);
   };
 
   return (
@@ -39,6 +40,7 @@ export const CheckBox = (props: Props) => {
         {label}
       </label>
       <input
+        className={theme && theme.inputCheckbox}
         {...{
           type: 'checkbox',
           id,

diff --git a/src/lib/components/FormModel/children/Form/UI/Classifier/classifier.component.js b/src/lib/components/FormModel/children/Form/UI/Classifier/classifier.component.js
@@ -1,79 +1,92 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useContext } from 'react';
 import { n3Helper } from '@inrupt/solid-sdk-forms';
 import unique from 'unique';
 import { SelectWrapper } from './classifier.style';
-import { FormModelConfig } from '@context';
+import { ThemeContext } from '@context';
+import { UI } from '@constants';
 
-type Props = {
-  id: string,
-  value: string,
-  retrieveNewFormObject: Function,
-  modifyFormObject: Function,
-  onSave: Function,
-  onBlur: Function,
-  autoSave: boolean,
-  formObject: object
-};
+export const Classifier = props => {
+  const { id, data, updateData } = props;
+  const { theme } = useContext(ThemeContext);
+
+  const {
+    [UI.LABEL]: label,
+    [UI.VALUE]: initialValue,
+    [UI.CATEGORY]: category,
+    [UI.VALUES]: values
+  } = data;
 
-const Classifier = ({
-  value,
-  id,
-  modifyFormObject,
-  formObject,
-  onSave,
-  autoSave,
-  onBlur,
-  ...rest
-}: Props) => {
   const [options, setOptions] = useState([]);
-  const from = rest['ui:category'] || null;
-  const label = rest['ui:label'] || '';
+  const [value, setValue] = useState(initialValue);
 
+  /**
+   * Init function to make use of async
+   * This function fetches the classifier option list from a helper, or returns the list of hardcoded values
+   * if such a list exists as a prop
+   * @returns {Promise<void>}
+   */
   const init = async () => {
-    const values = rest['ui:values'];
-    let docOptions = [];
-    if (from) {
-      docOptions = await n3Helper.getClassifierOptions(from);
+    let optionsList = [];
+    if (category) {
+      optionsList = await n3Helper.getClassifierOptions(category);
     } else {
-      docOptions = values ? [...values] : [];
+      optionsList = values ? [...values] : [];
     }
-    setOptions(docOptions);
+    setOptions(optionsList);
   };
 
-  const getValueFromObject = useCallback(value => {
-    return typeof value === 'object' ? value.value : value;
-  });
+  /**
+   * Initialize data for the dropdown
+   */
+  useEffect(() => {
+    init();
+  }, []);
 
+  /**
+   * Fetch a user-friendly label for the option. If the option is a link, this returns the predicate name
+   * @type {function(string): string}
+   */
   const getDropDownLabel = useCallback((value: string) => {
     return value && value.includes('#') ? value.split('#')[1] : value;
   });
 
+  const onChange = async event => {
+    await setValue(event.target.value);
+  };
+
+  useEffect(() => {
+    if (value !== initialValue) {
+      const updatedPart = { ...data, value };
+      updateData(id, updatedPart);
+    }
+  }, [value]);
+
+  /*
+  const getValueFromObject = useCallback(value => {
+    return typeof value === 'object' ? value.value : value;
+  });
+
   const onChange = ({ target }) => {
     const obj = { value: target.value, ...rest };
     modifyFormObject(id, obj);
   };
+  console.log(formObject);
   const actualValue =
     formObject[id] || formObject[id] === '' ? getValueFromObject(formObject[id].value) : value;
 
-  useEffect(() => {
-    init();
-  }, []);
+*/
 
   return (
-    <FormModelConfig.Consumer>
-      {({ theme }) => (
-        <SelectWrapper className={theme && theme.inputText}>
-          <label htmlFor={id}>{label}</label>
-          <select name={id} onBlur={onBlur} onChange={onChange} value={actualValue}>
-            {options.map(option => (
-              <option key={unique()} value={option}>
-                {getDropDownLabel(option)}
-              </option>
-            ))}
-          </select>
-        </SelectWrapper>
-      )}
-    </FormModelConfig.Consumer>
+    <SelectWrapper className={theme && theme.inputText}>
+      <label htmlFor={id}>{label}</label>
+      <select name={id} onChange={onChange} value={value}>
+        {options.map(option => (
+          <option key={unique()} value={option}>
+            {getDropDownLabel(option)}
+          </option>
+        ))}
+      </select>
+    </SelectWrapper>
   );
 };
 

diff --git a/src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.component.js b/src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.component.js
@@ -25,7 +25,8 @@ const ColorPicker = (props: Props) => {
 
   const handleChangeComplete = color => {
     setColor(color.hex);
-    updateData(id, color.hex);
+    const updatedPart = { ...data, value: color.hex };
+    updateData(id, updatedPart);
   };
 
   const handleClick = () => {

diff --git a/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js b/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js
@@ -34,7 +34,8 @@ export const DateTimePicker = props => {
   const onChange = date => {
     /* User wants to remove the date */
     if (!date) {
-      updateData(id, '');
+      const updatedPart = { ...data, value: '' };
+      updateData(id, updatedPart);
       setDate(null);
       return;
     }
@@ -45,7 +46,8 @@ export const DateTimePicker = props => {
     if (type === UITypes.DateField) value = format(date, DATE_FORMAT.DATE);
     if (type === UITypes.DateTimeField) value = date.toISOString();
 
-    updateData(id, value);
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
     setDate(date);
   };
 

diff --git a/src/lib/components/FormModel/children/Form/UI/Decimal/decimal.component.js b/src/lib/components/FormModel/children/Form/UI/Decimal/decimal.component.js
@@ -21,7 +21,10 @@ export const Decimal = props => {
     setValue(event.target.value);
   };
 
-  const onBlur = () => updateData(id, value);
+  const onBlur = () => {
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
+  };
 
   return (
     <div className={theme.decimalInput}>

diff --git a/src/lib/components/FormModel/children/Form/UI/Email/email.component.js b/src/lib/components/FormModel/children/Form/UI/Email/email.component.js
@@ -1,6 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { InputTextTypes, UI, RDF } from '@constants';
 import { ThemeContext } from '@context';
+import { InputGroup } from '../Input/input.styles';
 
 type Props = {
   id: string,
@@ -25,10 +26,13 @@ export const Email = (props: Props) => {
 
   const onChange = event => setValue(event.target.value);
 
-  const onBlur = () => updateData(id, value);
+  const onBlur = () => {
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
+  };
 
   return (
-    <div className={theme.emailField}>
+    <InputGroup className={theme && theme.inputText}>
       <label htmlFor={id}>{label}</label>
       <input
         {...{
@@ -42,6 +46,6 @@ export const Email = (props: Props) => {
           onBlur
         }}
       />
-    </div>
+    </InputGroup>
   );
 };
diff --git a/src/lib/components/FormModel/children/Form/UI/Float/float.component.js b/src/lib/components/FormModel/children/Form/UI/Float/float.component.js
@@ -25,7 +25,10 @@ export const Float = (props: Props) => {
 
   const onChange = event => setValue(event.target.value);
 
-  const onBlur = () => updateData(id, value);
+  const onBlur = () => {
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
+  };
 
   return (
     <div className={theme.floatField}>

diff --git a/src/lib/components/FormModel/children/Form/UI/Input/input.component.js b/src/lib/components/FormModel/children/Form/UI/Input/input.component.js
@@ -1,7 +1,6 @@
 import React, { useContext, useState } from 'react';
-
+import { InputGroup } from './input.styles';
 import { ThemeContext } from '@context';
-
 import { UI, RDF, InputTextTypes } from '@constants';
 
 export const Input = props => {
@@ -22,11 +21,12 @@ export const Input = props => {
   };
 
   const onBlur = () => {
-    updateData(id, value);
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
   };
 
   return (
-    <div className={theme && theme.inputText}>
+    <InputGroup className={theme && theme.inputText}>
       <label htmlFor={id}>{label}</label>
       <input
         {...{
@@ -38,6 +38,6 @@ export const Input = props => {
           onBlur
         }}
       />
-    </div>
+    </InputGroup>
   );
 };
diff --git a/src/lib/components/FormModel/children/Form/UI/Integer/integer.component.js b/src/lib/components/FormModel/children/Form/UI/Integer/integer.component.js
@@ -26,7 +26,10 @@ export const Integer = (props: Props) => {
     if (event.target.value === '' || re.test(event.target.value)) setValue(event.target.value);
   };
 
-  const onBlur = () => updateData(id, value);
+  const onBlur = () => {
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
+  };
 
   return (
     <div className={theme && theme.integerField}>

diff --git a/src/lib/components/FormModel/children/Form/UI/Multiple/index.js b/src/lib/components/FormModel/children/Form/UI/Multiple/index.js
diff --git a/src/lib/components/FormModel/children/Form/UI/Multiple/multiple.component.js b/src/lib/components/FormModel/children/Form/UI/Multiple/multiple.component.js
diff --git a/src/lib/components/FormModel/children/Form/UI/Multiple/multiple.styles.js b/src/lib/components/FormModel/children/Form/UI/Multiple/multiple.styles.js
diff --git a/src/lib/components/FormModel/children/Form/UI/Phone/phone.component.js b/src/lib/components/FormModel/children/Form/UI/Phone/phone.component.js
@@ -1,6 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { InputTextTypes, UI, RDF } from '@constants';
 import { ThemeContext } from '@context';
+import { InputGroup } from '../Input/input.styles';
 
 type Props = {
   id: string,
@@ -25,10 +26,13 @@ export const Phone = (props: Props) => {
 
   const onChange = event => setValue(event.target.value);
 
-  const onBlur = () => updateData(id, value);
+  const onBlur = () => {
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
+  };
 
   return (
-    <div className={theme.phoneField}>
+    <InputGroup className={theme && theme.inputText}>
       <label htmlFor={id}>{label}</label>
       <input
         {...{
@@ -42,6 +46,6 @@ export const Phone = (props: Props) => {
           onBlur
         }}
       />
-    </div>
+    </InputGroup>
   );
 };
diff --git a/src/lib/components/FormModel/children/Form/UI/RadioButton/radio-button.component.js b/src/lib/components/FormModel/children/Form/UI/RadioButton/radio-button.component.js
@@ -18,7 +18,10 @@ export const RadioButton = (props: Props) => {
 
   const onChange = event => setValue(event.target.value);
 
-  const onBlur = () => updateData(id, value);
+  const onBlur = () => {
+    const updatedPart = { ...data, value };
+    updateData(id, updatedPart);
+  };
 
   return (
     <div className={theme.triStateField}>