@gisce/react-ooui 1.1.22-rc.0 → 1.1.22-rc.2

package/dist/widgets/base/ReferenceTree.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare type ReferenceTreeProps = {
+    value: string;
+    context?: any;
+    selectionValues?: any;
+};
+export declare const ReferenceTree: (props: ReferenceTreeProps) => React.ReactElement;
+//# sourceMappingURL=ReferenceTree.d.ts.map

package/dist/widgets/base/ReferenceTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceTree.d.ts","sourceRoot":"","sources":["ReferenceTree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,eAAe,CAAC,EAAE,GAAG,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,kBAAkB,KACxB,MAAM,YA+CR,CAAC"}

package/dist/widgets/base/many2one/Many2oneTree.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare type Many2oneTreeProps = {
+    m2oField: any;
+};
+export declare const Many2oneTree: (props: Many2oneTreeProps) => React.ReactElement;
+//# sourceMappingURL=Many2oneTree.d.ts.map

package/dist/widgets/base/many2one/Many2oneTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Many2oneTree.d.ts","sourceRoot":"","sources":["Many2oneTree.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,oBAAY,iBAAiB,GAAG;IAAE,QAAQ,EAAE,GAAG,CAAA;CAAE,CAAC;AAElD,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,MAAM,YAW7D,CAAC"}

package/dist/widgets/base/one2many/One2manyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"One2manyInput.d.ts","sourceRoot":"","sources":["One2manyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAkB1C,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC5B,CAAC;AAQF,aAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EACN,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,aAAa,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAWD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6kB/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"One2manyInput.d.ts","sourceRoot":"","sources":["One2manyInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAY,MAAM,SAAS,CAAC;AAkB1C,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC5B,CAAC;AAQF,aAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EACN,UAAU,GACV,eAAe,GACf,eAAe,GACf,eAAe,GACf,aAAa,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAWD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8kB/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/widgets/views/Dashboard/DashboardTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardTree.d.ts","sourceRoot":"","sources":["DashboardTree.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQnD,aAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,KAAK,sBA6MlC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DashboardTree.d.ts","sourceRoot":"","sources":["DashboardTree.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQnD,aAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,KAAK,sBA8MlC;AAED,eAAe,aAAa,CAAC"}

package/dist/widgets/views/SearchTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTree.d.ts","sourceRoot":"","sources":["SearchTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAgBnD,aAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,uBAAuB,CAAC,EAAE,CAAC,eAAe,EAAE,GAAG,KAAK,IAAI,CAAC;CAC1D,CAAC;;AA0SF,wBAAsC"}
+{"version":3,"file":"SearchTree.d.ts","sourceRoot":"","sources":["SearchTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAgBnD,aAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,uBAAuB,CAAC,EAAE,CAAC,eAAe,EAAE,GAAG,KAAK,IAAI,CAAC;CAC1D,CAAC;;AA2SF,wBAAsC"}

package/dist/widgets/views/Tree.d.ts

@@ -19,6 +19,7 @@ declare type Props = {
     sorter?: any;
     onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
     childField?: string;
+    context?: any;
 };
 declare function Tree(props: Props): React.ReactElement;
 export default Tree;

package/dist/widgets/views/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAe3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAyDF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAsL9C;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAiB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAmEF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA4L9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.1.22-rc.0",
+  "version": "1.1.22-rc.2",
   "files": [
     "dist",
     "src",

package/src/helpers/treeHelper.ts

@@ -1,4 +1,10 @@
-import { Tree as TreeOoui, Selection, Many2one, Boolean } from "@gisce/ooui";
+import {
+  Tree as TreeOoui,
+  Selection,
+  Many2one,
+  Boolean,
+  Reference,
+} from "@gisce/ooui";
 import { TreeView, Column } from "@/types";
 
 const getTree = (treeView: TreeView): TreeOoui => {
@@ -9,7 +15,11 @@ const getTree = (treeView: TreeView): TreeOoui => {
   return tree;
 };
 
-const getTableColumns = (tree: TreeOoui, components: any): Array<Column> => {
+const getTableColumns = (
+  tree: TreeOoui,
+  components: any,
+  context: any
+): Array<Column> => {
   const tableColumns = tree.columns.map((column) => {
     const type = column.type;
     const key = column.id;
@@ -18,7 +28,7 @@ const getTableColumns = (tree: TreeOoui, components: any): Array<Column> => {
 
     if (component) {
       render = (item: any) => {
-        return component(item);
+        return component(item, key, tree.fields[key], context);
       };
     }
 
@@ -54,7 +64,9 @@ const getTableItems = (treeOoui: TreeOoui, results: Array<any>): Array<any> => {
       } else {
         const widget = treeOoui.findById(key);
 
-        if (widget instanceof Selection) {
+        if (widget instanceof Reference) {
+          parsedItem[key] = item[key];
+        } else if (widget instanceof Selection) {
           const selection = widget;
           parsedItem[key] = selection.selectionValues.get(item[key]);
         } else if (widget instanceof Many2one) {

package/src/widgets/base/ReferenceTree.tsx

@@ -0,0 +1,62 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import { Space } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { Many2oneSuffix } from "./many2one/Many2oneSuffix";
+import { LoadingOutlined } from "@ant-design/icons";
+
+export type ReferenceTreeProps = {
+  value: string;
+  context?: any;
+  selectionValues?: any;
+};
+
+export const ReferenceTree = (
+  props: ReferenceTreeProps
+): React.ReactElement => {
+  const { value, context, selectionValues } = props;
+  const [name, setName] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const [model, id] = value ? value.split(",") : [];
+  const intId = parseInt(id);
+
+  const fetchName = useCallback(async () => {
+    if (!value) {
+      return;
+    }
+    if (value && name) {
+      return;
+    }
+    setLoading(true);
+    const nameResponse = await ConnectionProvider.getHandler().execute({
+      action: "name_get",
+      payload: [intId],
+      model,
+      context,
+    });
+    setName(nameResponse[0][1]);
+    setLoading(false);
+  }, [value, name]);
+
+  useEffect(() => {
+    fetchName();
+  }, [value]);
+
+  if (!value && !loading) {
+    return <></>;
+  }
+
+  if (loading) {
+    return <LoadingOutlined />;
+  }
+
+  const selectionDescription = selectionValues.get(model);
+
+  return (
+    <Space>
+      <>{`${selectionDescription}:`}</>
+      <>{name}</>
+      <Many2oneSuffix id={intId} model={model} />
+    </Space>
+  );
+};

package/src/widgets/base/many2one/Many2oneTree.tsx

@@ -0,0 +1,18 @@
+import { Space } from "antd";
+import React from "react";
+import { Many2oneSuffix } from "./Many2oneSuffix";
+
+export type Many2oneTreeProps = { m2oField: any };
+
+export const Many2oneTree = (props: Many2oneTreeProps): React.ReactElement => {
+  const { m2oField } = props;
+  if (!m2oField) {
+    return <></>;
+  }
+  return (
+    <Space>
+      <>{m2oField.value}</>
+      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
+    </Space>
+  );
+};

package/src/widgets/base/one2many/One2manyInput.tsx

@@ -574,6 +574,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
           }}
           sorter={sorter}
           onChangeSort={setSorter}
+          context={{ ...getContext?.(), ...context }}
         />
       );
     }

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -219,6 +219,7 @@ function DashboardTree(props: Props) {
             });
             setResults(sortedResults);
           }}
+          context={parentContext}
         />
       </div>
     );

package/src/widgets/views/SearchTree.tsx

@@ -305,6 +305,7 @@ function SearchTree(props: Props, ref: any) {
           searchValues={searchValues}
         />
         <Tree
+          context={parentContext}
           total={totalItems}
           limit={limit}
           page={page}

package/src/widgets/views/Tree.tsx

@@ -17,6 +17,8 @@ import {
 } from "@ant-design/icons";
 import { One2manyValue } from "../base/one2many/One2manyInput";
 import { Interweave } from "interweave";
+import { Many2oneTree } from "../base/many2one/Many2oneTree";
+import { ReferenceTree } from "../base/ReferenceTree";
 
 type Props = {
   total?: number;
@@ -35,6 +37,7 @@ type Props = {
   sorter?: any;
   onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
   childField?: string;
+  context?: any;
 };
 
 const booleanComponentFn = (value: boolean): React.ReactElement => {
@@ -52,16 +55,9 @@ const booleanComponentFn = (value: boolean): React.ReactElement => {
 };
 
 const many2OneComponentFn = (m2oField: any): React.ReactElement => {
-  if (!m2oField) {
-    return <></>;
-  }
-  return (
-    <Space>
-      <>{m2oField.value}</>
-      <Many2oneSuffix id={m2oField.id} model={m2oField.model} />
-    </Space>
-  );
+  return <Many2oneTree m2oField={m2oField} />;
 };
+
 const textComponentFn = (value: any): React.ReactElement => {
   return <Interweave content={value?.replace(/(?:\r\n|\r|\n)/g, "<br>")} />;
 };
@@ -92,6 +88,23 @@ const imageComponent = (value: string): React.ReactElement => {
   );
 };
 
+const referenceComponent = (
+  value: any,
+  key: string,
+  fieldDefinitions: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>
+      <ReferenceTree
+        value={value}
+        selectionValues={new Map(fieldDefinitions?.selection)}
+        context={context}
+      />
+    </>
+  );
+};
+
 function Tree(props: Props): React.ReactElement {
   const {
     page = 1,
@@ -110,6 +123,7 @@ function Tree(props: Props): React.ReactElement {
     sorter,
     onFetchChildrenForRecord,
     childField,
+    context,
   } = props;
 
   const [items, setItems] = useState<Array<any>>([]);
@@ -125,18 +139,23 @@ function Tree(props: Props): React.ReactElement {
   useEffect(() => {
     treeOoui.current = getTree(treeView);
 
-    const columns = getTableColumns(treeOoui.current, {
-      boolean: booleanComponentFn,
-      many2one: many2OneComponentFn,
-      text: textComponentFn,
-      one2many: one2ManyComponentFn,
-      many2many: one2ManyComponentFn,
-      progressbar: progressBarComponentFn,
-      float_time: floatTimeComponent,
-      image: imageComponent,
-      integer: numberComponent,
-      float: numberComponent,
-    });
+    const columns = getTableColumns(
+      treeOoui.current,
+      {
+        boolean: booleanComponentFn,
+        many2one: many2OneComponentFn,
+        text: textComponentFn,
+        one2many: one2ManyComponentFn,
+        many2many: one2ManyComponentFn,
+        progressbar: progressBarComponentFn,
+        float_time: floatTimeComponent,
+        image: imageComponent,
+        integer: numberComponent,
+        float: numberComponent,
+        reference: referenceComponent,
+      },
+      context
+    );
 
     setColumns(columns);
   }, [treeView]);