@gisce/react-ooui 1.2.0-rc.8 → 1.2.0-rc.82

package/src/context/ContentRootContext.tsx

@@ -1,4 +1,4 @@
-import { FormView, GenerateReportOptions } from "@/types";
+import { FormView, GenerateReportOptions, ViewType } from "@/types";
 import React, {
   useContext,
   useRef,
@@ -43,15 +43,20 @@ type ActionModalOpts = {
   actionData?: any;
 };
 
-export const ContentRootContext = React.createContext<ContentRootContextType | null>(
-  null
-);
+export const ContentRootContext =
+  React.createContext<ContentRootContextType | null>(null);
 
 type ContentRootProviderProps = {
   children: React.ReactNode;
   globalValues?: any;
 };
 
+const callRefreshValues = async (fns: any[]) => {
+  for (let i = 0; i < fns.length; i++) {
+    await fns?.[i]?.();
+  }
+};
+
 const ContentRootProvider = (
   props: ContentRootProviderProps,
   ref: any
@@ -64,7 +69,7 @@ const ContentRootProvider = (
     TabManagerContext
   ) as TabManagerContextType;
   const { openAction } = tabManagerContext || {};
-  const onRefreshParentValues = useRef<any>();
+  const onRefreshParentValues = useRef<any>([]);
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   useImperativeHandle(ref, () => ({
@@ -167,7 +172,7 @@ const ContentRootProvider = (
     onRefreshParentValues?: any;
   }) {
     const { type } = actionData;
-    onRefreshParentValues.current = onRefreshParentValuesFn;
+    onRefreshParentValues.current.push(onRefreshParentValuesFn);
 
     if (type === "ir.actions.report.xml") {
       return await generateReport({
@@ -230,6 +235,7 @@ const ContentRootProvider = (
           fields,
           values: { ...values, ...globalValues },
         }),
+        fields,
         context: mergedContext,
       });
     }
@@ -255,33 +261,12 @@ const ContentRootProvider = (
 
       return {};
     } else {
-      let initialView;
-      const viewTypes = actionData.view_mode.split(",");
-      const views = [];
-
-      for (const viewType of viewTypes) {
-        const viewData = await ConnectionProvider.getHandler().getView({
-          model: actionData.res_model,
-          type: viewType,
-          context: mergedContext,
-        });
-        views.push([viewData.view_id, viewType]);
-      }
-
-      if (!actionData.view_id) {
-        const type = actionData.view_mode.split(",")[0];
-
-        const [retrievedViewId] = views.find(
-          ([_, viewType]) => viewType === type
-        )!;
-
-        initialView = { id: retrievedViewId, type };
-      } else {
-        initialView = {
-          id: actionData.view_id,
-          type: actionData.view_mode.split(",")[0],
-        };
-      }
+      const { initialView, views } = await getViewsAndInitialView({
+        model: actionData.res_model,
+        context: mergedContext,
+        view_mode: actionData.view_mode,
+        views: actionData.views,
+      });
 
       openAction?.({
         target: "current",
@@ -347,7 +332,8 @@ const ContentRootProvider = (
   }
 
   async function onFormModalSucceed() {
-    onRefreshParentValues.current?.();
+    callRefreshValues(onRefreshParentValues.current);
+    onRefreshParentValues.current = [];
     setActionModalVisible(false);
     setActionModalOptions({
       domain: undefined,
@@ -358,53 +344,109 @@ const ContentRootProvider = (
     });
   }
 
-  return (
-    <>
-      <ContentRootContext.Provider
-        value={{
-          processAction,
-          globalValues,
-        }}
-      >
-        <>
-          {children}
-          <Modal
-            title={t("generatingReport")}
-            visible={reportGenerating}
-            footer={null}
-            closable={false}
-            centered
-            maskClosable={false}
-          >
-            <Spin />
-          </Modal>
-          <FormModal
-            buttonModal
-            parentContext={actionModalOptions.context}
-            model={actionModalOptions.model!}
-            formView={actionModalOptions.formView}
-            visible={actionModalVisible}
-            onSubmitSucceed={onFormModalSucceed}
-            onCancel={() => {
-              onRefreshParentValues.current?.();
-              setActionModalVisible(false);
-              setActionModalOptions({
-                domain: undefined,
-                model: undefined,
-                context: {},
-                formView: undefined,
-                actionData: undefined,
-              });
-            }}
-            showFooter={false}
-            actionDomain={actionModalOptions.domain}
-            isMenuAction={actionModalOptions?.actionData !== undefined}
-            actionData={actionModalOptions?.actionData}
-          />
-        </>
-      </ContentRootContext.Provider>
-    </>
-  );
+  return (<>
+    <ContentRootContext.Provider
+      value={{
+        processAction,
+        globalValues,
+      }}
+    >
+      <>
+        {children}
+        <Modal
+          title={t("generatingReport")}
+          open={reportGenerating}
+          footer={null}
+          closable={false}
+          centered
+          maskClosable={false}
+        >
+          <Spin />
+        </Modal>
+        <FormModal
+          buttonModal
+          parentContext={actionModalOptions.context}
+          model={actionModalOptions.model!}
+          formView={actionModalOptions.formView}
+          visible={actionModalVisible}
+          onSubmitSucceed={onFormModalSucceed}
+          onCancel={() => {
+            callRefreshValues(onRefreshParentValues.current);
+            onRefreshParentValues.current = [];
+            setActionModalVisible(false);
+            setActionModalOptions({
+              domain: undefined,
+              model: undefined,
+              context: {},
+              formView: undefined,
+              actionData: undefined,
+            });
+          }}
+          showFooter={false}
+          actionDomain={actionModalOptions.domain}
+          isMenuAction={actionModalOptions?.actionData !== undefined}
+          actionData={actionModalOptions?.actionData}
+        />
+      </>
+    </ContentRootContext.Provider>
+  </>);
 };
 
+async function getViewsAndInitialView({
+  views,
+  view_mode,
+  model,
+  context,
+  view_id,
+}: {
+  views: any[];
+  view_mode: string;
+  model: string;
+  context: any;
+  view_id?: number;
+}) {
+  const retriedViewData = [];
+  let initialView;
+
+  if (views) {
+    for (const view of views) {
+      const viewData = await ConnectionProvider.getHandler().getView({
+        model,
+        type: view[1],
+        id: view[0],
+        context,
+      });
+      retriedViewData.push([viewData.view_id, view[1]]);
+    }
+  } else {
+    const viewTypes = view_mode.split(",");
+    for (const viewType of viewTypes) {
+      const viewData = await ConnectionProvider.getHandler().getView({
+        model,
+        type: viewType as ViewType,
+        context,
+      });
+      retriedViewData.push([viewData.view_id, viewType]);
+    }
+  }
+  if (views && views.length > 0) {
+    const [id, type] = views[0];
+    initialView = {
+      id,
+      type,
+    };
+  } else if (!view_id) {
+    const type = view_mode.split(",")[0];
+    const [retrievedViewId] = retriedViewData.find(([_, viewType]) => viewType === type)!;
+    initialView = { id: retrievedViewId, type };
+  } else {
+    initialView = {
+      id: view_id,
+      type: view_mode.split(",")[0],
+    };
+  }
+
+  return { views: retriedViewData, initialView };
+}
+
 export default forwardRef(ContentRootProvider);

package/src/context/FormContext.tsx

@@ -18,11 +18,10 @@ export type FormContextType = {
   getValues: () => Promise<any>;
   getPlainValues: () => { [key: string]: any };
   getFields: () => Promise<any>;
-  setOriginalValue: (field: string, value: any) => void;
   domain: any[];
   submitForm?: (options?: {
     callOnSubmitSucceed?: boolean;
-  }) => Promise<boolean>;
+  }) => Promise<{ succeed: boolean; id: number }>;
   fetchValues?: () => void;
   formHasChanges?: () => boolean;
   elementHasLostFocus?: () => void;
@@ -45,7 +44,6 @@ const FormProvider = (props: FormProviderProps): any => {
     getContext,
     getValues,
     getPlainValues,
-    setOriginalValue,
     domain,
     submitForm,
     fetchValues,
@@ -67,7 +65,6 @@ const FormProvider = (props: FormProviderProps): any => {
         getFieldValue,
         executeButtonAction,
         getContext,
-        setOriginalValue,
         submitForm,
         fetchValues,
         formHasChanges,

package/src/helpers/errorHelper.ts

@@ -0,0 +1,27 @@
+export const parseError = (errorResponse: string) => {
+  let message;
+  let type;
+  let title;
+
+  if (
+    typeof errorResponse === "string" &&
+    errorResponse.indexOf(" -- ") !== -1 &&
+    errorResponse.indexOf("\n\n") !== -1
+  ) {
+    const splitted = errorResponse.split("\n\n");
+    message = splitted[1].replace(/\n/g, "<br />");
+    const args = splitted[0].split(" -- ");
+    type = args[0];
+    title = args[1];
+  } else {
+    message = errorResponse;
+    type = "error";
+    title = "Error";
+  }
+
+  return {
+    type,
+    message,
+    title,
+  };
+};

package/src/helpers/formHelper.ts

@@ -1,4 +1,5 @@
 import { One2manyItem } from "@/widgets/base/one2many/One2manyInput";
+import { Form as FormOoui } from "@gisce/ooui";
 
 const filteredValues = (values: any, fields: any) => {
   if (!fields) {
@@ -100,15 +101,16 @@ export const getTouchedValues = ({
 
 export const checkFieldsType = ({
   changedFields,
-  fields,
+  formOoui,
   types,
 }: {
   changedFields: string[];
-  fields: any;
+  formOoui: FormOoui;
   types: string[];
 }) => {
   const valuesChecked = changedFields.map((key) => {
-    return types.includes(fields[key]?.type);
+    const fieldType = formOoui?.findById(key)?.type!;
+    return types.includes(fieldType);
   });
   return valuesChecked.some((i) => i === true);
 };
@@ -152,16 +154,35 @@ export const getValuesForDomain = (domain: any[]) => {
 export const getOnChangePayload = ({
   onChangeFieldActionArgs,
   values,
+  parentValues = {},
 }: {
   onChangeFieldActionArgs: any[];
   values: any;
+  parentValues?: any;
 }) => {
   const payload: any = {};
   onChangeFieldActionArgs.forEach((arg: string) => {
-    if (values[arg]) {
+    const splittedArg = arg.split("");
+
+    if (arg === "True") {
+      payload[arg] = true;
+    } else if (arg === "False") {
+      payload[arg] = false;
+    } else if (values[arg]) {
       payload[arg] = values[arg];
-    } else if (arg[0] === "'") {
+    } else if (
+      splittedArg[0] === "'" &&
+      splittedArg[splittedArg.length - 1] === "'" &&
+      splittedArg.filter((i: string) => i === "'").length === 2
+    ) {
       payload[arg] = arg.replace(/'/g, "");
+    } else if (splittedArg.includes("'")) {
+      // This is a string with a variable in it.
+      // TODO: pending implement.
+      payload[arg] = arg;
+    } else if (arg.indexOf("parent.") !== -1) {
+      const parentKey = arg.replace("parent.", "");
+      payload[arg] = parentValues[parentKey] || false;
     } else {
       payload[arg] = false;
     }

package/src/helpers/iconMapper.ts

@@ -1,112 +1,123 @@
-import React from "react";
+import React, { CSSProperties } from "react";
+import * as AntIcons from "@ant-design/icons";
+import * as TablerIcons from "@tabler/icons-react";
 import Icon from "@ant-design/icons";
-import { AntIcons as Icons } from "./icons/antd_icons";
-import { TablerIcons } from "./icons/tabler_icons";
 
-const iconMapping: { [key: string]: React.ElementType } = {
-  "terp-purchase": Icons.ShoppingCartOutlined,
-  "terp-graph": Icons.PieChartOutlined,
-  "terp-crm": Icons.ContactsOutlined,
-  "terp-hr": TablerIcons.IconFriends,
-  "terp-account": TablerIcons.IconBuildingBank,
-  "terp-project": TablerIcons.IconChecklist,
-  "terp-administration": TablerIcons.IconAdjustments,
-  "terp-partner": Icons.TeamOutlined,
-  "terp-mrp": Icons.BuildOutlined,
-  "terp-product": Icons.ShoppingOutlined,
-  STOCK_JUSTIFY_FILL: Icons.UnorderedListOutlined,
-  STOCK_INDENT: TablerIcons.IconIndentIncrease,
-  STOCK_HELP: Icons.QuestionOutlined,
-  STOCK_GO_UP: Icons.ArrowUpOutlined,
-  STOCK_SORT_DESCENDING: Icons.SortDescendingOutlined,
-  STOCK_ADD: Icons.PlusOutlined,
-  STOCK_GOTO_LAST: Icons.FastForwardOutlined,
-  STOCK_FIND: Icons.SearchOutlined,
-  STOCK_PROPERTIES: Icons.ControlOutlined,
-  STOCK_DIALOG_INFO: Icons.InfoOutlined,
-  STOCK_FLOPPY: Icons.UsbOutlined,
-  STOCK_JUSTIFY_CENTER: Icons.AlignCenterOutlined,
-  STOCK_GO_BACK: Icons.ArrowLeftOutlined,
-  STOCK_UNDERLINE: Icons.UnderlineOutlined,
-  STOCK_BOLD: Icons.BoldOutlined,
-  STOCK_APPLY: Icons.CheckOutlined,
-  STOCK_ZOOM_OUT: Icons.ZoomOutOutlined,
-  STOCK_STRIKETHROUGH: Icons.StrikethroughOutlined,
-  STOCK_MEDIA_REWIND: Icons.BackwardOutlined,
-  STOCK_PRINT: Icons.PrinterOutlined,
-  STOCK_NO: Icons.CloseOutlined,
-  STOCK_GOTO_FIRST: Icons.FastBackwardOutlined,
-  STOCK_CLOSE: Icons.CloseOutlined,
-  STOCK_REMOVE: Icons.MinusOutlined,
-  STOCK_CUT: Icons.ScissorOutlined,
-  STOCK_DIALOG_AUTHENTICATION: Icons.SafetyOutlined,
-  STOCK_ZOOM_FIT: Icons.ExpandOutlined,
-  STOCK_JUMP_TO: Icons.SelectOutlined,
-  STOCK_HARDDISK: Icons.HddOutlined,
-  STOCK_SAVE_AS: Icons.SaveOutlined,
-  STOCK_UNDO: Icons.UndoOutlined,
-  STOCK_JUSTIFY_RIGHT: Icons.AlignRightOutlined,
-  STOCK_DIALOG_ERROR: Icons.CloseCircleOutlined,
-  STOCK_INDEX: Icons.ProfileOutlined,
-  STOCK_GOTO_BOTTOM: Icons.VerticalAlignBottomOutlined,
-  STOCK_MEDIA_NEXT: Icons.StepForwardOutlined,
-  STOCK_REDO: Icons.RedoOutlined,
-  STOCK_COPY: Icons.CopyOutlined,
-  STOCK_MEDIA_PAUSE: Icons.PauseOutlined,
-  STOCK_GO_FORWARD: Icons.ArrowRightOutlined,
-  STOCK_UNDELETE: Icons.UndoOutlined,
-  STOCK_EXECUTE: Icons.SettingOutlined,
-  STOCK_SAVE: Icons.SaveOutlined,
-  STOCK_DIALOG_QUESTION: Icons.QuestionCircleOutlined,
-  STOCK_SORT_ASCENDING: Icons.SortAscendingOutlined,
-  STOCK_REFRESH: Icons.ReloadOutlined,
-  STOCK_MEDIA_FORWARD: Icons.ForwardOutlined,
-  STOCK_STOP: Icons.BorderOutlined,
-  STOCK_PRINT_PREVIEW: Icons.PrinterOutlined,
-  STOCK_HOME: Icons.HomeOutlined,
-  STOCK_PASTE: Icons.CarryOutOutlined,
-  STOCK_ZOOM_100: Icons.ZoomInOutlined,
-  STOCK_FIND_AND_REPLACE: Icons.FileSearchOutlined,
-  STOCK_DIALOG_WARNING: Icons.WarningOutlined,
-  STOCK_ZOOM_IN: Icons.ZoomInOutlined,
-  STOCK_CONVERT: Icons.ExportOutlined,
-  STOCK_ITALIC: Icons.ItalicOutlined,
-  STOCK_YES: Icons.CheckOutlined,
-  STOCK_MEDIA_PLAY: Icons.PlayCircleOutlined,
-  STOCK_MEDIA_RECORD: Icons.VideoCameraOutlined,
-  STOCK_MEDIA_PREVIOUS: Icons.StepBackwardOutlined,
-  STOCK_NEW: Icons.FileAddOutlined,
-  STOCK_CANCEL: Icons.CloseOutlined,
-  STOCK_DISCONNECT: Icons.ApiOutlined,
-  STOCK_JUSTIFY_LEFT: Icons.AlignLeftOutlined,
-  STOCK_FILE: Icons.FileOutlined,
-  STOCK_QUIT: Icons.LogoutOutlined,
-  STOCK_EDIT: Icons.EditOutlined,
-  STOCK_CONNECT: Icons.ApiOutlined,
-  STOCK_GO_DOWN: Icons.CaretDownOutlined,
-  STOCK_NETWORK: Icons.ApartmentOutlined,
-  STOCK_OK: Icons.CheckOutlined,
-  STOCK_GOTO_TOP: Icons.VerticalAlignTopOutlined,
-  STOCK_ABOUT: Icons.StarOutlined,
-  STOCK_COLOR_PICKER: Icons.AimOutlined,
-  STOCK_SELECT_FONT: Icons.FontSizeOutlined,
-  STOCK_DELETE: Icons.DeleteOutlined,
-  STOCK_DND: Icons.FileTextOutlined,
-  STOCK_CLEAR: Icons.CloseSquareOutlined,
-  STOCK_UNINDENT: Icons.AlignLeftOutlined,
-  STOCK_PREFERENCES: Icons.SettingOutlined,
+type TablerKey = keyof typeof TablerIcons;
+type AntKey = keyof typeof AntIcons;
+
+const iconMapping: { [key: string]: string } = {
+  "terp-purchase": "ShoppingCart",
+  "terp-graph": "PieChart",
+  "terp-crm": "Contacts",
+  "terp-hr": "Friends",
+  "terp-account": "BuildingBank",
+  "terp-project": "Checklist",
+  "terp-administration": "Adjustments",
+  "terp-partner": "Team",
+  "terp-mrp": "Build",
+  "terp-product": "Shopping",
+  STOCK_JUSTIFY_FILL: "UnorderedList",
+  STOCK_INDENT: "IndentIncrease",
+  STOCK_HELP: "Question",
+  STOCK_GO_UP: "ArrowUp",
+  STOCK_SORT_DESCENDING: "SortDescending",
+  STOCK_ADD: "Plus",
+  STOCK_GOTO_LAST: "FastForward",
+  STOCK_FIND: "Search",
+  STOCK_PROPERTIES: "Control",
+  STOCK_DIALOG_INFO: "Info",
+  STOCK_FLOPPY: "Usb",
+  STOCK_JUSTIFY_CENTER: "AlignCenter",
+  STOCK_GO_BACK: "ArrowLeft",
+  STOCK_UNDERLINE: "Underline",
+  STOCK_BOLD: "Bold",
+  STOCK_APPLY: "Check",
+  STOCK_ZOOM_OUT: "ZoomOut",
+  STOCK_STRIKETHROUGH: "Strikethrough",
+  STOCK_MEDIA_REWIND: "Backward",
+  STOCK_PRINT: "Printer",
+  STOCK_NO: "Close",
+  STOCK_GOTO_FIRST: "FastBackward",
+  STOCK_CLOSE: "Close",
+  STOCK_REMOVE: "Minus",
+  STOCK_CUT: "Scissor",
+  STOCK_DIALOG_AUTHENTICATION: "Safety",
+  STOCK_ZOOM_FIT: "Expand",
+  STOCK_JUMP_TO: "Select",
+  STOCK_HARDDISK: "Hdd",
+  STOCK_SAVE_AS: "Save",
+  STOCK_UNDO: "Undo",
+  STOCK_JUSTIFY_RIGHT: "AlignRight",
+  STOCK_DIALOG_ERROR: "CloseCircle",
+  STOCK_INDEX: "Profile",
+  STOCK_GOTO_BOTTOM: "VerticalAlignBottom",
+  STOCK_MEDIA_NEXT: "StepForward",
+  STOCK_REDO: "Redo",
+  STOCK_COPY: "Copy",
+  STOCK_MEDIA_PAUSE: "Pause",
+  STOCK_GO_FORWARD: "ArrowRight",
+  STOCK_UNDELETE: "Undo",
+  STOCK_EXECUTE: "Setting",
+  STOCK_SAVE: "Save",
+  STOCK_DIALOG_QUESTION: "QuestionCircle",
+  STOCK_SORT_ASCENDING: "SortAscending",
+  STOCK_REFRESH: "Reload",
+  STOCK_MEDIA_FORWARD: "Forward",
+  STOCK_STOP: "Border",
+  STOCK_PRINT_PREVIEW: "Printer",
+  STOCK_HOME: "Home",
+  STOCK_PASTE: "CarryOut",
+  STOCK_ZOOM_100: "ZoomIn",
+  STOCK_FIND_AND_REPLACE: "FileSearch",
+  STOCK_DIALOG_WARNING: "Warning",
+  STOCK_ZOOM_IN: "ZoomIn",
+  STOCK_CONVERT: "Export",
+  STOCK_ITALIC: "Italic",
+  STOCK_YES: "Check",
+  STOCK_MEDIA_PLAY: "PlayCircle",
+  STOCK_MEDIA_RECORD: "VideoCamera",
+  STOCK_MEDIA_PREVIOUS: "StepBackward",
+  STOCK_NEW: "FileAdd",
+  STOCK_CANCEL: "Close",
+  STOCK_DISCONNECT: "Api",
+  STOCK_JUSTIFY_LEFT: "AlignLeft",
+  STOCK_FILE: "File",
+  STOCK_QUIT: "Logout",
+  STOCK_EDIT: "Edit",
+  STOCK_CONNECT: "Api",
+  STOCK_GO_DOWN: "CaretDown",
+  STOCK_NETWORK: "Apartment",
+  STOCK_OK: "Check",
+  STOCK_GOTO_TOP: "VerticalAlignTop",
+  STOCK_ABOUT: "Star",
+  STOCK_COLOR_PICKER: "Aim",
+  STOCK_SELECT_FONT: "FontSize",
+  STOCK_DELETE: "Delete",
+  STOCK_DND: "FileText",
+  STOCK_CLEAR: "CloseSquare",
+  STOCK_UNINDENT: "AlignLeft",
+  STOCK_PREFERENCES: "Setting",
 };
 
-export default (key: string): React.ElementType | undefined => {
+export default (
+  key: string,
+  props?: { className?: any; style: CSSProperties }
+) => {
   if (key.indexOf("gtk-") !== -1) {
-    const rootIcon = key.replace("gtk-", "").replace("-", "_");
-    const newKey = `STOCK_${rootIcon.toUpperCase()}`;
-    return iconMapping[newKey];
+    const rootIcon = key.replace("gtk-", "").replace(/\-/g, "_");
+    key = `STOCK_${rootIcon.toUpperCase()}`;
   }
+
   if (iconMapping.hasOwnProperty(key)) {
-    return iconMapping[key];
+    return getIconForKey(iconMapping[key], props);
   }
-  const IconCamelCase = `${key
+
+  return getIconForKey(key, props);
+};
+
+function toCamelCase(key: string): string {
+  return `${key
     .split("-")
     .map((word) =>
       word.replace(
@@ -115,18 +126,40 @@ export default (key: string): React.ElementType | undefined => {
       )
     )
     .join("")}`;
+}
+
+function getIconForKey(
+  key: string,
+  props?: { className?: any; style: CSSProperties }
+) {
+  let IconCamelCase = key.charAt(0).toUpperCase() + key.slice(1); // Capitalize first letter
+  if (IconCamelCase.indexOf("-") !== -1) {
+    IconCamelCase = toCamelCase(IconCamelCase);
+  }
 
-  const antKey = `${IconCamelCase}Outlined`;
-  if (Icons.hasOwnProperty(antKey)) {
-    return Icons[antKey];
+  const antKey: AntKey = `${IconCamelCase}Outlined` as any;
+  if (AntIcons[antKey]) {
+    return () =>
+      React.createElement(AntIcons[antKey] as any, {
+        ...props,
+      });
   }
 
-  const tablerKey = `Icon${IconCamelCase}`;
-  if (TablerIcons.hasOwnProperty(tablerKey)) {
+  const tablerKey: TablerKey = `Icon${IconCamelCase}` as any;
+  if (TablerIcons[tablerKey]) {
+    const TablerIcon = () =>
+      React.createElement(TablerIcons[tablerKey] as any, {
+        fill: "transparent",
+        height: 17,
+        width: 17,
+      });
     const CustomIcon = () =>
-      React.createElement(Icon, { component: TablerIcons[tablerKey] });
+      React.createElement(Icon, {
+        component: TablerIcon,
+        ...props,
+      });
     return CustomIcon;
   }
 
   return undefined;
-};
+}