@gisce/react-ooui 0.20.0 → 0.20.1

package/dist/widgets/containers/Notebook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notebook.d.ts","sourceRoot":"","sources":["../../../src/widgets/containers/Notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAsB,MAAM,aAAa,CAAC;AAG3E,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,iBAAS,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAoBlD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Notebook.d.ts","sourceRoot":"","sources":["../../../src/widgets/containers/Notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAsB,MAAM,aAAa,CAAC;AAG3E,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,iBAAS,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CA6BlD;AAED,eAAe,QAAQ,CAAC"}

package/dist/widgets/containers/Notebook.js

@@ -5,15 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var antd_1 = require("antd");
+var iconMapper_1 = __importDefault(require("@/helpers/iconMapper"));
 var TabPane = antd_1.Tabs.TabPane;
 var index_1 = require("@/index");
 function Notebook(props) {
     var ooui = props.ooui, responsiveBehaviour = props.responsiveBehaviour;
     var tabs = ooui.pages;
+    function getPageIcon(icon) {
+        if (icon) {
+            var Icon = iconMapper_1.default(icon);
+            return Icon && react_1.default.createElement(Icon, null);
+        }
+        return undefined;
+    }
     return (react_1.default.createElement(antd_1.Tabs, { defaultActiveKey: "1", tabPosition: ooui.tabPosition }, tabs
         .filter(function (page) { return !page.invisible; })
         .map(function (page) {
-        return (react_1.default.createElement(TabPane, { tab: page.label, key: page.label },
+        return (react_1.default.createElement(TabPane, { tab: react_1.default.createElement(react_1.default.Fragment, null,
+                getPageIcon(page.icon),
+                "  ",
+                page.label), key: page.label },
             react_1.default.createElement(index_1.Group, { ooui: page, showLabel: false, responsiveBehaviour: responsiveBehaviour })));
     })));
 }

package/dist/widgets/containers/Notebook.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notebook.js","sourceRoot":"","sources":["../../../src/widgets/containers/Notebook.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,6BAA4B;AACpB,IAAA,OAAO,GAAK,WAAI,QAAT,CAAU;AAGzB,iCAAgC;AAOhC,SAAS,QAAQ,CAAC,KAAY;IACpB,IAAA,IAAI,GAA0B,KAAK,KAA/B,EAAE,mBAAmB,GAAK,KAAK,oBAAV,CAAW;IAC5C,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,OAAO,CACL,8BAAC,WAAI,IAAC,gBAAgB,EAAC,GAAG,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IACrD,IAAI;SACF,MAAM,CAAC,UAAC,IAAS,IAAK,OAAA,CAAC,IAAI,CAAC,SAAS,EAAf,CAAe,CAAC;SACtC,GAAG,CAAC,UAAC,IAAS;QACb,OAAO,CACL,8BAAC,OAAO,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK;YACvC,8BAAC,aAAK,IACJ,IAAI,EAAE,IAAiB,EACvB,SAAS,EAAE,KAAK,EAChB,mBAAmB,EAAE,mBAAmB,GACxC,CACM,CACX,CAAC;IACJ,CAAC,CAAC,CACC,CACR,CAAC;AACJ,CAAC;AAED,kBAAe,QAAQ,CAAC"}
+{"version":3,"file":"Notebook.js","sourceRoot":"","sources":["../../../src/widgets/containers/Notebook.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,6BAA4B;AAC5B,oEAA8C;AACtC,IAAA,OAAO,GAAK,WAAI,QAAT,CAAU;AAGzB,iCAAgC;AAOhC,SAAS,QAAQ,CAAC,KAAY;IACpB,IAAA,IAAI,GAA0B,KAAK,KAA/B,EAAE,mBAAmB,GAAK,KAAK,oBAAV,CAAW;IAC5C,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IAExB,SAAS,WAAW,CAAC,IAAY;QAC/B,IAAI,IAAI,EAAE;YACR,IAAM,IAAI,GAAsB,oBAAU,CAAC,IAAI,CAAC,CAAC;YACjD,OAAO,IAAI,IAAI,8BAAC,IAAI,OAAG,CAAC;SACzB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,CACL,8BAAC,WAAI,IAAC,gBAAgB,EAAC,GAAG,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IACrD,IAAI;SACF,MAAM,CAAC,UAAC,IAAS,IAAK,OAAA,CAAC,IAAI,CAAC,SAAS,EAAf,CAAe,CAAC;SACtC,GAAG,CAAC,UAAC,IAAS;QACb,OAAO,CACL,8BAAC,OAAO,IAAC,GAAG,EAAE;gBAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;gBAAI,IAAI,CAAC,KAAK,CAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK;YACxE,8BAAC,aAAK,IACJ,IAAI,EAAE,IAAiB,EACvB,SAAS,EAAE,KAAK,EAChB,mBAAmB,EAAE,mBAAmB,GACxC,CACM,CACX,CAAC;IACJ,CAAC,CAAC,CACC,CACR,CAAC;AACJ,CAAC;AAED,kBAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "main": "dist/index.js",
   "files": [
     "dist",

package/src/stories/containers/Notebook.stories.tsx

@@ -141,3 +141,29 @@ export const LeftPosition = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+export const IconTabs = (): React.ReactElement => {
+
+  const arch = `<form>
+    <notebook name="notebook">
+      <page string="Home" icon="home">
+        <field name="name" />
+      </page>
+      <page string="Attributes" icon="project">
+        <field name="surname" />
+      </page>
+    </notebook>
+  </form>`;
+
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(arch);
+  const notebookOoui = formOoui.findById("notebook") as NotebookOoui;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Notebook ooui={notebookOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};

package/src/widgets/containers/Notebook.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Tabs } from "antd";
+import iconMapper from "@/helpers/iconMapper";
 const { TabPane } = Tabs;
 
 import { Notebook as NotebookOoui, Group as GroupOoui } from "@gisce/ooui";
@@ -13,13 +14,22 @@ type Props = {
 function Notebook(props: Props): React.ReactElement {
   const { ooui, responsiveBehaviour } = props;
   const tabs = ooui.pages;
+
+  function getPageIcon(icon: string) {
+    if (icon) {
+      const Icon: React.ElementType = iconMapper(icon);
+      return Icon && <Icon />;
+    }
+    return undefined;
+  }
+
   return (
     <Tabs defaultActiveKey="1" tabPosition={ooui.tabPosition}>
       {tabs
         .filter((page: any) => !page.invisible)
         .map((page: any) => {
           return (
-            <TabPane tab={page.label} key={page.label}>
+            <TabPane tab={<>{getPageIcon(page.icon)}  {page.label}</>} key={page.label}>
               <Group
                 ooui={page as GroupOoui}
                 showLabel={false}