Add ObjectTable component to display "object" attributes
authorFrank Bessou <frank.bessou@logilab.fr>
Mon, 15 May 2017 15:08:37 +0200
changeset 205 9edd745e2e16
parent 204 6de8ff025817
child 206 2cf5245ab86d
Add ObjectTable component to display "object" attributes
src/components/Attribute.js
--- a/src/components/Attribute.js	Mon May 15 13:22:01 2017 +0200
+++ b/src/components/Attribute.js	Mon May 15 15:08:37 2017 +0200
@@ -23,6 +23,10 @@
 AttributeValue.propTypes = ATTRIBUTE_VALUE_PROPTYPES;
 
 function ArrayValue({attribute}) {
+    const itemsType = attribute.item(0).basicType();
+    if (itemsType === "object") {
+        return <ObjectTable objectArray={attribute} />;
+    }
     let attributeValue = attribute.mapItems( (item) => {
         return (<ArrayItemValue attribute={item} key={item.uniqueId} />);
     });
@@ -39,3 +43,63 @@
     }
 }
 ArrayItemValue.propTypes = ATTRIBUTE_VALUE_PROPTYPES;
+
+function ObjectTable({objectArray}) {
+    return (
+        <table className="table table-bordered">
+            <tbody>
+                <ObjectTableHeader objectArray={objectArray} />
+                {
+                    objectArray.mapItems((object, i) =>
+                        <ObjectTableRow key={i} object={object} />
+                    )
+                }
+            </tbody>
+        </table>
+    );
+}
+ObjectTable.propTypes = {
+    objectArray: PropTypeJsonaryWrapper.isRequired,
+};
+
+function ObjectTableHeader({objectArray}) {
+    const itemSchemas = objectArray.schemas().indexSchemas(0);
+    return (
+        <tr>
+            {
+                itemSchemas.definedProperties().map((key) => {
+                    const propertySchemas = itemSchemas.propertySchemas(key);
+                    const title = objectPropertyTitle(propertySchemas);
+                    return <th key={key}>{title}</th>;
+                })
+            }
+        </tr>
+    );
+}
+ObjectTableHeader.propTypes = {
+    objectArray: PropTypeJsonaryWrapper.isRequired,
+};
+
+function ObjectTableRow({object}) {
+    const schemas = object.schemas();
+    return (
+        <tr>
+            {
+                schemas.definedProperties().map((key) => {
+                    return (
+                        <td key={key}>
+                            <AttributeValue attribute={object.property(key)}/>
+                        </td>
+                    );
+                })
+            }
+        </tr>
+    );
+}
+ObjectTableRow.propTypes = {
+    object: PropTypeJsonaryWrapper.isRequired,
+};
+
+function objectPropertyTitle(propertySchema) {
+    return propertySchema.title() || propertySchema.parentKey;
+}