@gisce/react-ooui 1.2.0-rc.35 → 1.2.0-rc.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.2.0-rc.35",
+  "version": "1.2.0-rc.37",
   "files": [
     "dist",
     "src",

package/src/__tests__/iconMapper.test.ts

@@ -2,14 +2,29 @@ import iconMapper from "../helpers/iconMapper";
 import * as Icons from "@ant-design/icons";
 
 describe("A IconMapper instance", () => {
-  test("should return the default icon when key not found", () => {
-    const defaultIcon = Icons.RightOutlined;
-    const icon = iconMapper("RANDOM_KEY");
-    expect(icon).toBe(defaultIcon);
+  test("should return undefined when key not found", () => {
+    const icon = iconMapper("foo-bar");
+    expect(icon).toBe(undefined);
   });
   test("should return proper help icon when requested", () => {
     const helpIcon = Icons.QuestionOutlined;
-    const icon = iconMapper("STOCK_HELP");
+    const icon = iconMapper("gtk-help");
     expect(icon).toBe(helpIcon);
   });
+  test("should replace all - for _", () => {
+    const findAndReplaceIcon = Icons.FileSearchOutlined;
+    const icon = iconMapper("gtk-find-and-replace");
+    expect(icon).toBe(findAndReplaceIcon);
+  })
+  test("should return gtk-go", () => {
+    const findAndReplaceIcon = Icons.FileSearchOutlined;
+    const icon = iconMapper("gtk-find-and-replace");
+    expect(icon).toBe(findAndReplaceIcon);
+  })
+  describe("If key doesn't exist in iconMapper", () => {
+    test("should return undefined", () => {
+      const icon = iconMapper("gtk-foo-bar");
+      expect(icon).toBe(undefined);
+    })
+  })
 });

package/src/actionbar/TreeActionBar.tsx

@@ -163,9 +163,24 @@ function TreeActionBar(props: Props) {
               }
             }}
           />
+          {!treeExpandable && (
+            <ButtonWithBadge
+              icon={
+                <FilterOutlined
+                  style={{ color: searchVisible ? "white" : undefined }}
+                />
+              }
+              tooltip={t("advanced_search")}
+              type={searchVisible ? "primary" : "default"}
+              onClick={() => {
+                setSearchVisible?.(!searchVisible);
+              }}
+              disabled={duplicatingItem || removingItem || treeIsLoading}
+              badgeNumber={searchParams?.length}
+            />
+          )}
           {separator()}
           <NewButton disabled={treeIsLoading} />
-          {separator()}
           <ActionButton
             icon={<CopyOutlined />}
             tooltip={t("duplicate")}
@@ -191,22 +206,6 @@ function TreeActionBar(props: Props) {
           {separator()}
         </>
       )}
-      {!treeExpandable && (
-        <ButtonWithBadge
-          icon={
-            <FilterOutlined
-              style={{ color: searchVisible ? "white" : undefined }}
-            />
-          }
-          tooltip={t("advanced_search")}
-          type={searchVisible ? "primary" : "default"}
-          onClick={() => {
-            setSearchVisible?.(!searchVisible);
-          }}
-          disabled={duplicatingItem || removingItem || treeIsLoading}
-          badgeNumber={searchParams?.length}
-        />
-      )}
       <ActionButton
         icon={<InfoCircleOutlined />}
         tooltip={t("showLogs")}

package/src/helpers/iconMapper.ts

@@ -100,22 +100,21 @@ const iconMapping: { [key: string]: string } = {
   STOCK_PREFERENCES: "Setting",
 };
 
-export default (key: string) => {
+export default (key: string, className?: any) => {
   if (key.indexOf("gtk-") !== -1) {
-    const rootIcon = key.replace("gtk-", "").replace("-", "_");
-    const newKey = `STOCK_${rootIcon.toUpperCase()}`;
-    return getIconForKey(iconMapping[newKey]);
+    const rootIcon = key.replace("gtk-", "").replace(/\-/g, "_");
+    key = `STOCK_${rootIcon.toUpperCase()}`;
   }
 
   if (iconMapping.hasOwnProperty(key)) {
-    return getIconForKey(iconMapping[key]);
+    return getIconForKey(iconMapping[key], className);
   }
 
-  return getIconForKey(key);
+  return getIconForKey(key, className);
 };
 
-function getIconForKey(key: string) {
-  const IconCamelCase = `${key
+function toCamelCase(key: string): string {
+  return `${key
     .split("-")
     .map((word) =>
       word.replace(
@@ -124,10 +123,20 @@ function getIconForKey(key: string) {
       )
     )
     .join("")}`;
+}
+
+function getIconForKey(key: string, className?: any) {
+  let IconCamelCase = key.charAt(0).toUpperCase() + key.slice(1); // Capitalize first letter
+  if (IconCamelCase.indexOf("-") !== -1) {
+    IconCamelCase = toCamelCase(IconCamelCase);
+  }
 
   const antKey: AntKey = `${IconCamelCase}Outlined` as any;
   if (AntIcons[antKey]) {
-    return AntIcons[antKey];
+    return () =>
+      React.createElement(AntIcons[antKey] as any, {
+        className,
+      });
   }
 
   const tablerKey: TablerKey = `Icon${IconCamelCase}` as any;
@@ -141,6 +150,7 @@ function getIconForKey(key: string) {
     const CustomIcon = () =>
       React.createElement(Icon, {
         component: TablerIcon,
+        className,
       });
     return CustomIcon;
   }