@gisce/react-ooui 0.15.1 → 0.17.1

package/src/stories/custom/Steps.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { Steps, StepsInput } from "../../widgets/custom/Steps";
+import { Steps as StepsOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Custom/Steps",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new StepsOoui({
+    name: "enabled",
+    string: "Lorem ipsum",
+    selection: [['init', 'Start'], ['second', 'Second'], ['third', 'Third'], ['end', 'End']]
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <StepsInput ooui={ooui} value="third" />
+    </LocaleProvider>
+  );
+};
+
+export const Many2One = (): React.ReactElement => {
+  const ooui = new StepsOoui({
+    name: "enabled",
+    string: "Lorem ipsum",
+    relation: "crm.case.stage",
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <StepsInput ooui={ooui} value="third" />
+    </LocaleProvider>
+  );
+};

package/src/stories/custom/Tags.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { TagsInput } from "../../widgets/custom/Tags";
+import { TagsInput, Tags } from "../../widgets/custom/Tags";
 import { Tags as TagsOoui } from "@gisce/ooui";
 import "antd/dist/antd.css";
 import LocaleProvider from "../../context/LocaleContext";
@@ -48,4 +48,20 @@ export const Readonly = (): React.ReactElement => {
       />
     </LocaleProvider>
   );
-};
+};
+
+
+export const TagsLabel = (): React.ReactElement => {
+  const ooui = new TagsOoui({
+    name: "button_field",
+    string: "Lorem ipsum",
+    field: "name",
+    relation: "res.partner.category",
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Tags ooui={ooui} showLabel/>
+    </LocaleProvider>
+  );
+};

package/src/widgets/WidgetFactory.tsx

@@ -27,6 +27,8 @@ import {
   MultiCheckbox,
   Radio,
   Switch,
+  Steps,
+  CodeEditor,
 } from "@/index";
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
@@ -100,6 +102,10 @@ const getWidgetType = (type: string) => {
       return Radio;
     case "switch":
       return Switch;
+    case "steps":
+      return Steps;
+    case "codeeditor":
+      return CodeEditor;
     default:
       return undefined;
   }

package/src/widgets/custom/CodeEditor.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import Editor from "@monaco-editor/react";
+import { FormContext, FormContextType } from "@/context/FormContext";
+import { CodeEditor as CodeEditorOoui } from "@gisce/ooui";
+
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+
+type CodeEditorProps = WidgetProps & {
+  ooui: CodeEditorOoui;
+};
+
+export const CodeEditor = (props: CodeEditorProps) => {
+  const { ooui } = props;
+  const { lang, height } = ooui;
+  const formContext = useContext(FormContext) as FormContextType;
+  const { elementHasLostFocus } = formContext || {};
+
+  const onMount = (editor: any) => {
+    editor.onDidBlurEditorWidget(elementHasLostFocus)
+  }
+
+  return (
+    <Field {...props}>
+      <Editor defaultLanguage={lang ? lang : ''} height={height ? height : 300} onMount={onMount}/>
+    </Field>
+  );
+};

package/src/widgets/custom/MultiCheckbox.tsx

@@ -130,7 +130,7 @@ export const MultiCheckboxInput = (props: MultiCheckboxInputProps) => {
   
   return (
     <>
-      <div style={{ padding: "1rem" }}>
+      <div className="flex flex-row">
         <Checkbox.Group value={options.length ? itemsToShow : []} disabled={readOnly} onChange={onChangeSelected} style={{width: '100%'}}>
           <Row>
           {options.map((option) => (

package/src/widgets/custom/Steps.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import { Steps as AntdSteps } from "antd";
+import { FormContext, FormContextType } from "@/context/FormContext";
+import Field from "@/common/Field";
+import { Steps as StepsOoui } from "@gisce/ooui";
+
+type StepsProps = {
+  ooui: StepsOoui;
+  value: any,
+}
+
+type StatusType = 'wait' | 'process' | 'finish' | 'error';
+
+
+export const Steps = (props: StepsProps) => {
+  const { ooui } = props;
+  const { required } = ooui;
+
+  return (
+    <Field required={required} type={"any"} {...props}>
+      <StepsInput {...props} />
+    </Field>
+  );
+};
+
+type StepsInputProps = StepsProps & {
+  value?: any;
+};
+
+export const StepsInput = (props: StepsInputProps) => {
+  const { ooui, value } = props;
+  const { selectionValues, errorField } = ooui as StepsOoui;
+  const formContext = useContext(FormContext) as FormContextType;
+
+  const values = Array.from(selectionValues.entries());
+  const current = values.map(val => val[0]).indexOf(value);
+  let status: StatusType = "process";
+  let error = "";
+  
+  if (errorField) {
+    error = formContext.getFieldValue(errorField);
+    if (error) {
+      status = "error";
+    }
+  }
+
+
+  return (
+    <AntdSteps current={current} status={status}>
+      {values.map((val, idx) => (
+        <AntdSteps.Step title={val[1]} description={idx === current && status === "error" ? error : null}/>
+      ))}
+    </AntdSteps>
+  );
+};

package/src/widgets/custom/Tags.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useState } from "react";
 import { Tags as TagsOoui } from "@gisce/ooui";
 import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
 import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { FormContext, FormContextType } from "@/context/FormContext";
@@ -8,7 +9,7 @@ import { Alert, Tag as AntTag, Select } from "antd";
 import { colorFromString } from "@/helpers/formHelper";
 import ConnectionProvider from "@/ConnectionProvider";
 
-type TagsProps = {
+type TagsProps = WidgetProps & {
   ooui: TagsOoui;
 };
 
@@ -140,7 +141,7 @@ export const TagsInput = (props: TagsInputProps) => {
 
   return (
     <>
-      <div style={{ padding: "1rem" }}>
+      <div className="flex flex-row">
         <Select
           mode="multiple"
           value={options.length ? itemsToShow : []}

package/src/widgets/views/Form.tsx

@@ -698,6 +698,7 @@ function Form(props: FormProps, ref: any) {
           fields,
           types: [
             "text",
+            "codeeditor",
             "email",
             "url",
             "char",

package/src/widgets/views/SearchTree.tsx

@@ -18,7 +18,12 @@ import {
   ActionViewContext,
   ActionViewContextType,
 } from "@/context/ActionViewContext";
-import { getColorMap, getTree, sortResults } from "@/helpers/treeHelper";
+import {
+  getColorMap,
+  getTableItems,
+  getTree,
+  sortResults,
+} from "@/helpers/treeHelper";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import Measure from "react-measure";
 import { mergeSearchFields } from "@/helpers/formHelper";
@@ -337,7 +342,7 @@ function SearchTree(props: Props, ref: any) {
 
     setResults([...getResults(), ...children]);
 
-    return children;
+    return getTableItems(getTree(treeView!), children);
   }
 
   useEffect(() => {