@gisce/react-ooui 0.20.1 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -27,6 +27,7 @@
     "@gisce/ooui": "^0.16.1",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",
+    "@tabler/icons": "^1.95.1",
     "fiber-diagram": "github:gisce/fiber-diagram",
     "file-type": "^16.5.0",
     "react-grid-layout": "^1.3.4",

package/src/helpers/iconMapper.ts

@@ -1,4 +1,6 @@
-import * as Icons from "@ant-design/icons";
+import Icon, * as Icons from "@ant-design/icons";
+import * as TablerIcons from "@tabler/icons";
+import React from "react";
 
 const iconMapping: { [key: string]: React.ElementType } = {
   STOCK_HELP: Icons.QuestionOutlined,
@@ -96,13 +98,17 @@ export default (key: string): React.ElementType => {
   }
   if (iconMapping.hasOwnProperty(key)) {
     return iconMapping[key];
-  } else {
-    const antKey = `${key.split("-").map((word) => (
-      word.replace(/\w\S*/g, (w) => (w.charAt(0).toUpperCase() + w.substr(1).toLowerCase())))
-    ).join("")}Outlined`
+  }
+  const IconCamelCase = `${key.split("-").map((word) => (
+    word.replace(/\w\S*/g, (w) => (w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())))
+  ).join("")}`;
+  const antKey = `${IconCamelCase}Outlined`
+  if (Icons.hasOwnProperty(antKey)) {
     // @ts-ignore
     return Icons[antKey];
   }
-
-
+  const tablerKey = `Icon${IconCamelCase}`;
+  // @ts-ignore
+  const CustomIcon = () => React.createElement(Icon, {component: TablerIcons[tablerKey]});
+  return CustomIcon
 };

package/src/stories/Button.stories.tsx

@@ -73,6 +73,19 @@ export const WithUnexistingdIcon = (): React.ReactElement => {
   );
 };
 
+export const WithTablerIcon = (): React.ReactElement => {
+  const ooui = new ButtonOoui({
+    name: "button_field",
+    string: "Lorem ipsum",
+    icon: "bulb-off"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Button ooui={ooui} />
+    </LocaleProvider>
+  );
+};
+
 export const PrimaryButton = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",