@gisce/react-ooui 1.2.0-rc.36 → 1.2.0-rc.38

package/dist/widgets/WidgetFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoH1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuH1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/widgets/custom/Tag.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WidgetProps } from '../../types';
+export declare const Tag: (props: WidgetProps) => JSX.Element;
+export declare const TagInput: (props: any) => JSX.Element | null;
+//# sourceMappingURL=Tag.d.ts.map

package/dist/widgets/custom/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["Tag.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKtC,eAAO,MAAM,GAAG,UAAW,WAAW,gBAMrC,CAAC;AAEF,eAAO,MAAM,QAAQ,oCASpB,CAAA"}

package/dist/widgets/views/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAoB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAmEF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAuM9C;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,QAAQ,EAAU,MAAM,SAAS,CAAC;AAoB3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AA2FF,iBAAS,IAAI,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAyM9C;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.2.0-rc.36",
+  "version": "1.2.0-rc.38",
   "files": [
     "dist",
     "src",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
-    "@gisce/ooui": "^0.17.13-rc.0",
+    "@gisce/ooui": "^0.17.14-rc.0",
     "@gisce/react-formiga-components": "^1.0.9-rc.14",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",

package/src/helpers/iconMapper.ts

@@ -100,17 +100,17 @@ 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(/\-/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 toCamelCase(key: string): string {
@@ -125,7 +125,7 @@ function toCamelCase(key: string): string {
     .join("")}`;
 }
 
-function getIconForKey(key: string) {
+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);
@@ -133,7 +133,10 @@ function getIconForKey(key: string) {
 
   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;
@@ -147,6 +150,7 @@ function getIconForKey(key: string) {
     const CustomIcon = () =>
       React.createElement(Icon, {
         component: TablerIcon,
+        className,
       });
     return CustomIcon;
   }

package/src/helpers/treeHelper.ts

@@ -28,7 +28,7 @@ const getTableColumns = (
 
     if (component) {
       render = (item: any) => {
-        return component(item, key, tree.fields[key], context);
+        return component(item, key, column, context);
       };
     }
 
@@ -68,7 +68,7 @@ const getTableItems = (treeOoui: TreeOoui, results: Array<any>): Array<any> => {
           parsedItem[key] = item[key];
         } else if (widget instanceof Selection) {
           const selection = widget;
-          parsedItem[key] = selection.selectionValues.get(item[key]);
+          parsedItem[key] = item[key];
         } else if (widget instanceof Many2one) {
           parsedItem[key] = item[key] &&
             Array.isArray(item[key]) &&

package/src/index.ts

@@ -37,6 +37,7 @@ import { Image } from "@/widgets/base/Image";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import Dashboard from "@/widgets/views/Dashboard/Dashboard";
 import { Tags } from "@/widgets/custom/Tags";
+import { Tag } from "@/widgets/custom/Tag";
 import { MultiCheckbox } from "./widgets/custom/MultiCheckbox";
 import { Radio } from "@/widgets/custom/Radio";
 import { Switch } from "@/widgets/custom/Switch";
@@ -145,6 +146,7 @@ export {
   DashboardGridItem,
   DashboardGrid,
   Tags,
+  Tag,
   MultiCheckbox,
   Radio,
   Switch,

package/src/stories/custom/Tag.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { Tag as TagOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+import { TagInput } from "../../widgets/custom/Tag";
+
+export default {
+  title: "Components/Widgets/Custom/Tag",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": {"draft": "blue", "open": "green"}}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithoutColor = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithColorAuto = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": "auto"}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};

package/src/stories/views/Tree.stories.jsx

@@ -30,7 +30,7 @@ Default.args = {
       lang: false,
       name: "AGRI ENERGIA ELECTRICA, S.A.",
       ref: "0112",
-      title: false,
+      title: "corp",
       numeric: 30.1,
       progressbar: 100,
     },
@@ -41,7 +41,7 @@ Default.args = {
       lang: false,
       name: "Agrolait",
       ref: false,
-      title: false,
+      title: "ltd",
       numeric: 30.1,
       progressbar: 70.434331,
     },
@@ -85,14 +85,14 @@ Default.args = {
       lang: false,
       name: "Aragón",
       ref: "02",
-      title: false,
+      title: "corp",
       numeric: 30.1,
       progressbar: 20.01,
     },
   ],
   treeView: {
     arch:
-      '<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>',
+      `<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title" widget="tag" widget_props="{'colors': {'corp': 'red', 'ltd': 'green'}}"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>`,
     fields: {
       progressbar: {
         string: "Progress bar",
@@ -149,7 +149,7 @@ Default.args = {
       },
       title: {
         selection: [
-          ["Corp.", "Corp."],
+          ["corp", "Corp."],
           ["ltd", "Ltd"],
           ["", ""],
         ],

package/src/widgets/WidgetFactory.tsx

@@ -29,6 +29,7 @@ import {
   Radio,
   Switch,
   Steps,
+  Tag,
   CodeEditor,
 } from "@/index";
 import { Image } from "./base/Image";
@@ -99,6 +100,8 @@ const getWidgetType = (type: string) => {
       return Indicator;
     case "tags":
       return Tags;
+    case "tag":
+      return Tag;
     case "multicheckbox":
       return MultiCheckbox;
     case "radio":

package/src/widgets/custom/Tag.tsx

@@ -0,0 +1,24 @@
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import { Tag as AntdTag } from 'antd';
+import { colorFromString } from "@/helpers/formHelper";
+
+
+export const Tag = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <TagInput {...props}/>
+    </Field>
+  );
+};
+
+export const TagInput = (props) => {
+  const {ooui, value} = props;
+  if (!value) {
+    return null
+  }
+  const color = ooui.colors === "auto" ? colorFromString(value) : ooui.colors[value]
+  return (
+    <AntdTag color={color}>{ooui.selectionValues.get(value)}</AntdTag>
+  );
+}

package/src/widgets/views/Tree.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Pagination, Checkbox, Space, Row, Col, Spin } from "antd";
+import { Pagination, Checkbox, Space, Row, Col, Spin, Tag } from "antd";
 import { getTree, getTableColumns, getTableItems } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
 
@@ -92,17 +92,41 @@ const imageComponent = (value: string): React.ReactElement => {
   );
 };
 
+const TagComponent = (
+value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>
+      {value ? <Tag color={ooui.colors[value]}>{ooui.selectionValues.get(value)}</Tag> : null}
+    </>
+  );
+};
+
+const SelectionComponent = (
+value: any,
+  key: string,
+  ooui: any,
+  context: any
+): React.ReactElement => {
+  return (
+    <>{ooui.selectionValues.get(value)}</>
+  );
+};
+
 const referenceComponent = (
   value: any,
   key: string,
-  fieldDefinitions: any,
+  ooui: any,
   context: any
 ): React.ReactElement => {
   return (
     <>
       <ReferenceTree
         value={value}
-        selectionValues={new Map(fieldDefinitions?.selection)}
+        selectionValues={ooui.selectionValues}
         context={context}
       />
     </>
@@ -164,6 +188,8 @@ function Tree(props: Props): React.ReactElement {
         integer: numberComponent,
         float: numberComponent,
         reference: referenceComponent,
+        tag: TagComponent,
+        selection: SelectionComponent,
       },
       context
     );