Add ArrayValue component to display an array entity attribute
authorFrank Bessou <frank.bessou@logilab.fr>
Fri, 21 Apr 2017 17:30:59 +0200
changeset 134 7c7bbeecbff4
parent 133 72e439b9b15f
child 135 3f7a3d0d3730
Add ArrayValue component to display an array entity attribute
package.json
src/components/Attribute.js
--- a/package.json	Fri Apr 21 17:16:28 2017 +0200
+++ b/package.json	Fri Apr 21 17:30:59 2017 +0200
@@ -30,6 +30,7 @@
     "eslint-plugin-react": "^6.7.1",
     "html-webpack-plugin": "^2.28.0",
     "http-link-header": "^0.8.0",
+    "intersperse": "^1.0.0",
     "json-loader": "^0.5.4",
     "jsonary": "0.0.16",
     "karma": "^1.5.0",
--- a/src/components/Attribute.js	Fri Apr 21 17:16:28 2017 +0200
+++ b/src/components/Attribute.js	Fri Apr 21 17:30:59 2017 +0200
@@ -1,5 +1,6 @@
 import React from 'react';
 import {PropTypeJsonaryWrapper} from '../jsonaryutils'
+import intersperse from 'intersperse';
 
 const ATTRIBUTE_VALUE_PROPTYPES = {
     attribute: PropTypeJsonaryWrapper.isRequired,
@@ -10,7 +11,7 @@
     let attrView;
     if (attribute.defined()) {
         if (attribute.basicType() === 'array') {
-            attrView = value.join(', ');
+            attrView = (<ArrayValue attribute={attribute} />);
         } else {
             attrView = value;
         }
@@ -20,3 +21,12 @@
     return (<span>{attrView}</span>)
 }
 AttributeValue.propTypes = ATTRIBUTE_VALUE_PROPTYPES;
+
+function ArrayValue({attribute}) {
+    let attributeValue =  attribute.mapItems( (item) => {
+        return (<AttributeValue attribute={item} key={item.uniqueId} />);
+    });
+    attributeValue = intersperse(attributeValue, ', ')
+    return <span>{attributeValue}</span>
+}
+ArrayValue.propTypes = ATTRIBUTE_VALUE_PROPTYPES;