inrupt-archived · james-martin-jd · Dec 16, 2019 · Dec 13, 2019
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
@@ -0,0 +1,39 @@
+import React from 'react';
+import { InputTextTypes } from '@constants';
+import { FormModelConfig } from '@context';
+
+import { InputGroup } from '../Input/input.styles';
+
+const Email = ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBlur, ...rest }) => {
+  const type = rest['rdf:type'];
+  const label = rest['ui:label'] || '';
+  const maxLength = rest['ui:maxLength'] || 256;
+  const size = rest['ui:size'] || 40;
+  const pattern = rest['ui:pattern'] || '';
+  const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : value;
+  const onChange = ({ target }) => {
+    const obj = { value: target.value, ...rest };
+    modifyFormObject(id, obj);
+  };
+
+  return (
+    <FormModelConfig.Consumer>
+      {({ theme }) => (
+        <InputGroup className={theme && theme.inputText}>
+          <label htmlFor={id} id={id}>
+            {label}
+          </label>
+          <input
+            id={id}
+            name={id}
+            type={InputTextTypes[type]}
+            pattern={pattern}
+            {...{ maxLength, size, value: actualValue || '', onChange, onBlur }}
+          />
+        </InputGroup>
+      )}
+    </FormModelConfig.Consumer>
+  );
+};
+
+export default Email;
diff --git a/src/lib/components/FormModel/children/Form/UI/Email/email.test.js b/src/lib/components/FormModel/children/Form/UI/Email/email.test.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+import 'jest-dom/extend-expect';
+
+afterAll(cleanup);
+
+describe('Provider Login Container', () => {
+  const { container } = render(<div />);
+
+  it('shoud renders without crashing', () => {
+    expect(container).toBeTruthy();
+  });
+});
diff --git a/src/lib/components/FormModel/children/Form/UI/Email/index.js b/src/lib/components/FormModel/children/Form/UI/Email/index.js
@@ -0,0 +1,3 @@
+import Email from './email.component';
+
+export default Email;
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
@@ -9,7 +9,6 @@ const Input = ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBl
   const label = rest['ui:label'] || '';
   const maxLength = rest['ui:maxLength'] || 256;
   const size = rest['ui:size'] || 40;
-  const pattern = rest['ui:pattern'] || '';
   const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : value;
   const onChange = ({ target }) => {
     const obj = { value: target.value, ...rest };
@@ -27,7 +26,6 @@ const Input = ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBl
             id={id}
             name={id}
             type={InputTextTypes[type]}
-            pattern={pattern}
             {...{ maxLength, size, value: actualValue || '', onChange, onBlur }}
           />
         </InputGroup>

diff --git a/src/lib/components/FormModel/children/Form/UI/Phone/index.js b/src/lib/components/FormModel/children/Form/UI/Phone/index.js
@@ -0,0 +1,3 @@
+import Phone from './phone.component';
+
+export default Phone;
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
@@ -0,0 +1,39 @@
+import React from 'react';
+import { InputTextTypes } from '@constants';
+import { FormModelConfig } from '@context';
+
+import { InputGroup } from '../Input/input.styles';
+
+const Phone = ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBlur, ...rest }) => {
+  const type = rest['rdf:type'];
+  const label = rest['ui:label'] || '';
+  const maxLength = rest['ui:maxLength'] || 256;
+  const size = rest['ui:size'] || 40;
+  const pattern = rest['ui:pattern'] || '';
+  const actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : value;
+  const onChange = ({ target }) => {
+    const obj = { value: target.value, ...rest };
+    modifyFormObject(id, obj);
+  };
+
+  return (
+    <FormModelConfig.Consumer>
+      {({ theme }) => (
+        <InputGroup className={theme && theme.inputText}>
+          <label htmlFor={id} id={id}>
+            {label}
+          </label>
+          <input
+            id={id}
+            name={id}
+            type={InputTextTypes[type]}
+            pattern={pattern}
+            {...{ maxLength, size, value: actualValue || '', onChange, onBlur }}
+          />
+        </InputGroup>
+      )}
+    </FormModelConfig.Consumer>
+  );
+};
+
+export default Phone;
diff --git a/src/lib/components/FormModel/children/Form/UI/Phone/phone.test.js b/src/lib/components/FormModel/children/Form/UI/Phone/phone.test.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+import 'jest-dom/extend-expect';
+
+afterAll(cleanup);
+
+describe('Provider Login Container', () => {
+  const { container } = render(<div />);
+
+  it('shoud renders without crashing', () => {
+    expect(container).toBeTruthy();
+  });
+});
diff --git a/src/lib/components/FormModel/children/Form/UI/index.js b/src/lib/components/FormModel/children/Form/UI/index.js
@@ -7,6 +7,8 @@ import TextArea from './TextArea';
 import CheckBoxList from './CheckBoxList';
 import RadioButtonList from './RadioButtonList';
 import ColorPicker from './ColorPicker';
+import Email from './Email';
+import Phone from './Phone';
 
 export {
   CheckBox,
@@ -17,5 +19,7 @@ export {
   RadioButtonList,
   Select,
   TextArea,
-  ColorPicker
+  ColorPicker,
+  Email,
+  Phone
 };
diff --git a/src/lib/components/FormModel/children/Form/UI/ui-mapping.js b/src/lib/components/FormModel/children/Form/UI/ui-mapping.js
@@ -10,6 +10,8 @@ import Decimal from './Decimal';
 import Integer from './Integer';
 import Float from './Float';
 import ColorPicker from './ColorPicker';
+import Email from './Email';
+import Phone from './Phone';
 
 import { UITypes } from '@constants';
 
@@ -52,10 +54,10 @@ const UIMapping = type => {
       component = ColorPicker;
       break;
     case UITypes.EmailField:
-      component = Input;
+      component = Email;
       break;
     case UITypes.PhoneField:
-      component = Input;
+      component = Phone;
       break;
     default:
       component = Input;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Email from './email.component';

		export default Email;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Phone from './phone.component';

		export default Phone;