@gisce/react-ooui 0.19.0 → 0.21.0

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 = [].concat.apply([], ooui.container.rows);
-    return (react_1.default.createElement(antd_1.Tabs, { defaultActiveKey: "1" }, tabs
+    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,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,IAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACvD,OAAO,CACL,8BAAC,WAAI,IAAC,gBAAgB,EAAC,GAAG,IACvB,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.19.0",
+  "version": "0.21.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -24,9 +24,10 @@
   },
   "dependencies": {
     "@ant-design/charts": "^1.3.6",
-    "@gisce/ooui": "^0.14.0",
+    "@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",

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

@@ -88,3 +88,82 @@ export const Test = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+export const BottomPosition = (): React.ReactElement => {
+
+  const arch = `<form>
+    <notebook name="notebook" tabpos="bottom">
+      <page string="General">
+        <field name="name" />
+      </page>
+      <page string="Secondary">
+        <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>
+  );
+};
+
+
+export const LeftPosition = (): React.ReactElement => {
+
+  const arch = `<form>
+    <notebook name="notebook" tabpos="left">
+      <page string="General">
+        <field name="name" />
+      </page>
+      <page string="Secondary">
+        <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>
+  );
+};
+
+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";
@@ -12,14 +13,23 @@ type Props = {
 
 function Notebook(props: Props): React.ReactElement {
   const { ooui, responsiveBehaviour } = props;
-  const tabs = [].concat.apply([], ooui!.container.rows);
+  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">
+    <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}