@gisce/react-ooui 0.1.0 → 0.3.1

package/src/widgets/containers/Container.tsx

@@ -42,41 +42,44 @@ const Container = (props: Props): React.ReactElement => {
       numberOfColumns: columns,
     });
 
-    const rowWithEmptiesToFit = fillRowWithEmptiesToFit({
-      row: rowWithExpandedItems,
-      numberOfColumns: columns,
-      mustFillWithEmpties: responsiveBehaviour,
-    });
-
+    let rowWithEmptiesToFit;
     if (i === 0) {
+      rowWithEmptiesToFit = fillRowWithEmptiesToFit({
+        row: rowWithExpandedItems,
+        numberOfColumns: columns,
+        mustFillWithEmpties: responsiveBehaviour,
+      });
+
       firstRow = firstRow.concat(rowWithEmptiesToFit);
     }
 
-    return rowWithEmptiesToFit.map((item: Widget, j: number) => {
-      // We check if we have any label+field inside the container.
-      // In this scenario, we must format the grid accordingly
-      // Otherwise, the grid will divide uniformly
-      if (item instanceof Label && (item as Label).fieldForLabel) {
-        fieldInRows = true;
-      }
+    return (i === 0 ? rowWithEmptiesToFit : rowWithExpandedItems).map(
+      (item: Widget, j: number) => {
+        // We check if we have any label+field inside the container.
+        // In this scenario, we must format the grid accordingly
+        // Otherwise, the grid will divide uniformly
+        if (item instanceof Label && (item as Label).fieldForLabel) {
+          fieldInRows = true;
+        }
 
-      const itemRowIndex = row.indexOf(item);
+        const itemRowIndex = row.indexOf(item);
 
-      return (
-        <div
-          key={`${i.toString()}-${itemRowIndex.toString()}`}
-          style={{
-            ...getSpanStyleForItem({ item, responsiveBehaviour }),
-            minWidth: 0,
-          }}
-        >
-          {createReactWidget({
-            ooui: item,
-            responsiveBehaviour,
-          })}
-        </div>
-      );
-    });
+        return (
+          <div
+            key={`${i.toString()}-${itemRowIndex.toString()}`}
+            style={{
+              ...getSpanStyleForItem({ item, responsiveBehaviour }),
+              minWidth: 0,
+            }}
+          >
+            {createReactWidget({
+              ooui: item,
+              responsiveBehaviour,
+            })}
+          </div>
+        );
+      }
+    );
   });
 
   const templateColumns =

package/src/widgets/views/Tree.tsx

@@ -70,6 +70,15 @@ const floatTimeComponent = (value: number): React.ReactElement => {
   return <>{parseFloatToString(value)}</>;
 };
 
+const imageComponent = (value: string): React.ReactElement => {
+  return (
+    <img
+      src={`data:image/*;base64,${value}`}
+      style={{ maxWidth: "50px", padding: "5px" }}
+    />
+  );
+};
+
 function Tree(props: Props): React.ReactElement {
   const {
     page = 1,
@@ -108,6 +117,7 @@ function Tree(props: Props): React.ReactElement {
       many2many: one2ManyComponentFn,
       progressbar: progressBarComponentFn,
       float_time: floatTimeComponent,
+      image: imageComponent,
     });
     setColumns(columns);
   }, [treeView]);