Feature/form viewer

src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js

@@ -2,28 +2,30 @@ import React from 'react';
 import { FormModelConfig } from '@context';
 import { Label } from './bool-line.style';
 
+import { FormModelUI } from '@constants';
+
 type Props = {
   value: Object
 };
 
 const BoolLine = ({ value, ...rest }: Props) => {
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
-        <Label htmlFor={rest['ui:name']} className={theme && theme.boolLine}>
+        <Label htmlFor={rest[FormModelUI.UI_NAME]} className={theme && theme.boolLine}>
           <input
             type="checkbox"
-            name={rest['ui:name']}
+            name={rest[FormModelUI.UI_NAME]}
             defaultValue={value === 'true'}
             checked={value === 'true'}
             readOnly
             className="input-value"
           />
-          <span className="label-text">{rest['ui:label'] || 'Label'}</span>
+          <span className="label-text">{rest[FormModelUI.UI_LABEL] || 'Label'}</span>
         </Label>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default BoolLine;

src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.component.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Wrapper, Label, Value, ColorSwatch } from './color-line.style';
+
+import { FormModelConfig } from '@context';
+import { FormModelUI } from '@constants';
+
+const ColorLine = ({ value, ...rest }: { value: String }) => {
+  return (
+    <FormModelConfig.Consumer>
+      {({ theme }) => (
+        <Wrapper className={theme && theme.colorLine}>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">
+            {value}
+            <ColorSwatch color={value} />
+          </Value>
+        </Wrapper>
+      )}
+    </FormModelConfig.Consumer>
+  );
+};
+
+export default ColorLine;

src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.style.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  //display: flex;
+  padding: 8px 0;
+  flex-direction: column;
+`;
+
+export const Label = styled.span`
+  font-weight: bold;
+  font-size: 16px;
+  letter-spacing: 0.4px;
+`;
+
+export const Value = styled.span`
+  display: inline-flex;
+`;
+
+export const ColorSwatch = styled.div`
+  width: 36px;
+  height: 14px;
+  padding: 5px;
+  background: ${props => props.color};
+  border-radius: 1px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  cursor: pointer;
+`;

src/lib/components/FormModel/children/Viewer/UI/ColorLine/index.js

@@ -0,0 +1 @@
+export { default } from './color-line.component';

src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js

@@ -1,18 +1,35 @@
 import React from 'react';
+import { format } from 'date-fns';
+
 import { FormModelConfig } from '@context';
+import { UITypes, FormModelUI } from '@constants';
+
 import { Wrapper, Label, Value } from './date-line.style';
 
 const DateLine = ({ value, ...rest }: { value: String }) => {
-  return value ? (
+  const type = rest[FormModelUI.RDF_TYPE];
+
+  let renderValue;
+  if (value) {
+    if (type === UITypes.DateTimeField) {
+      renderValue = format(new Date(value), 'Pp');
+    } else {
+      renderValue = value;
+    }
+  } else {
+    renderValue = '';
+  }
+
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.dateLineViewerClass}>
-          <Label className="label">{rest['ui:label']}</Label>
-          <Value className="value">{new Date(value)}</Value>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">{renderValue}</Value>
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default DateLine;

src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.style.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  display: flex;
+  //display: flex;
   padding: 8px 0;
   flex-direction: column;
 `;

src/lib/components/FormModel/children/Viewer/UI/MultiLine/multi-line.component.js

@@ -1,18 +1,20 @@
 import React from 'react';
-import { FormModelConfig } from '@context';
 import { Wrapper, Label, Value } from './multi-line.style';
 
+import { FormModelConfig } from '@context';
+import { FormModelUI } from '@constants';
+
 const MultiLine = ({ value, ...rest }: { value: String }) => {
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.multiLineViewerClass}>
-          <Label className="label">{rest['ui:label']}</Label>
-          <Value className="value">{value}</Value>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">{value || ''}</Value>
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default MultiLine;

src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js

@@ -2,17 +2,19 @@ import React from 'react';
 import { FormModelConfig } from '@context';
 import { Wrapper, Label, Value } from './single-line.style';
 
+import { FormModelUI } from '@constants';
+
 const SingleLine = ({ value, ...rest }: { value: String }) => {
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.singleLineViewerClass}>
-          <Label className="label">{rest['ui:label']}</Label>
-          <Value className="value">{value}</Value>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">{value || ''}</Value>
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default SingleLine;

src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js

@@ -5,6 +5,7 @@ import SingleLine from './SingleLine';
 import MultiLine from './MultiLine';
 import DateLine from './DateLine';
 import BoolLine from './BoolLine';
+import ColorLine from './ColorLine';
 
 const UIMapping = type => {
   let component;
@@ -37,16 +38,16 @@ const UIMapping = type => {
       component = BoolLine;
       break;
     case UITypes.ColorField:
-      component = SingleLine;
+      component = ColorLine;
       break;
     case UITypes.DateField:
-      component = props => <DateLine format="Do MMM, YYYY" {...props} />;
+      component = props => <DateLine {...props} />;
       break;
     case UITypes.DateTimeField:
-      component = props => <DateLine format="HH:mm a - Do MMM, YYYY" {...props} />;
+      component = props => <DateLine {...props} />;
       break;
     case UITypes.TimeField:
-      component = props => <DateLine format="HH:mm a" {...props} />;
+      component = props => <DateLine {...props} />;
       break;
     case UITypes.Classifier:
       component = SingleLine;

src/lib/components/FormModel/children/Viewer/viewer.component.js

@@ -3,6 +3,8 @@ import ControlGroup from '../control-group.component';
 import UIMapping from './UI/ui-mapping';
 import { Group, Label } from './viewer.style';
 
+import { FormModelConfig } from '@context';
+
 const UI_PARTS = 'ui:parts';
 
 type Props = {
@@ -17,6 +19,7 @@ const ParentLabel = ({ formModel }: { formModel: Object }) =>
 
 const Viewer = ({ formModel, parent }: Props) => {
   const [formFields, setFormFields] = useState([]);
+
   const parts = formModel[UI_PARTS];
 
   const getArrayFields = () => {
@@ -30,41 +33,45 @@ const Viewer = ({ formModel, parent }: Props) => {
   }, [formModel]);
 
   return (
-    <Group parent={parent}>
-      {formModel['dc:title'] && <h2>{formModel['dc:title']}</h2>}
-      <ParentLabel formModel={formModel} />
-      {formFields.length > 0 &&
-        formFields.map(item => {
-          const field = parts[item];
-          const fieldParts = field && field[UI_PARTS];
-          const component = field && UIMapping(field['rdf:type']);
-          const id = (field && field['ui:name']) || item;
-          /**
-           * Return null when field doesn't exists
-           * this avoid to crash app using recursive component
-           */
-          if (!field) return null;
-          /* eslint no-useless-computed-key: "off" */
-          const { ['ui:parts']: deleted, ...updatedField } = field;
+    <FormModelConfig.Consumer>
+      {({ theme }) => (
+        <Group parent={parent}>
+          {formModel['dc:title'] && <h2>{formModel['dc:title']}</h2>}
+          <ParentLabel formModel={formModel} />
+          {formFields.length > 0 &&
+            formFields.map(item => {
+              const field = parts[item];
+              const fieldParts = field && field[UI_PARTS];
+              const component = field && UIMapping(field['rdf:type']);
+              const id = (field && field['ui:name']) || item;
+              /**
+               * Return null when field doesn't exists
+               * this avoid to crash app using recursive component
+               */
+              if (!field) return null;
+              /* eslint no-useless-computed-key: "off" */
+              const { ['ui:parts']: deleted, ...updatedField } = field;
 
-          return fieldParts ? (
-            <Viewer
-              {...{
-                key: item,
-                formModel: field,
-                parent: updatedField
-              }}
-            />
-          ) : (
-            <ControlGroup
-              key={item}
-              component={component}
-              value={field['ui:value']}
-              fieldData={{ id, ...field, parent }}
-            />
-          );
-        })}
-    </Group>
+              return fieldParts ? (
+                <Viewer
+                  {...{
+                    key: item,
+                    formModel: field,
+                    parent: updatedField
+                  }}
+                />
+              ) : (
+                <ControlGroup
+                  key={item}
+                  component={component}
+                  value={field['ui:value']}
+                  fieldData={{ id, ...field, parent }}
+                />
+              );
+            })}
+        </Group>
+      )}
+    </FormModelConfig.Consumer>
   );
 };
 

src/lib/components/FormModel/children/Viewer/viewer.style.js

@@ -6,9 +6,11 @@ export const Group = styled.div`
     !parent
       ? `
 
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
+  // display: grid;
+  // grid-template-columns: 1fr 1fr;
+  // grid-template-rows: auto;
+  display: flex;
+  flex-direction: column;
   `
       : `
   display: flex;