@gisce/react-ooui 1.2.0-rc.8 → 1.2.0-rc.82

package/src/views/actionViews/GraphActionView.tsx

@@ -113,6 +113,7 @@ export const GraphActionView = (props: GraphActionViewProps) => {
           formView.search_fields,
           treeView.search_fields,
         ])}
+        formXml={formView.arch}
         limit={limit!}
         onClear={clear}
         offset={offset}

package/src/views/actionViews/TreeActionView.tsx

@@ -2,7 +2,11 @@ import TreeActionBar from "@/actionbar/TreeActionBar";
 import { FormView, TreeView, View } from "@/types";
 import TitleHeader from "@/ui/TitleHeader";
 import SearchTree from "@/widgets/views/SearchTree";
-import React from "react";
+import React, { useContext } from "react";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
 
 export type TreeActionViewProps = {
   formView?: FormView;
@@ -38,6 +42,10 @@ export const TreeActionView = (props: TreeActionViewProps) => {
     searchTreeNameSearch,
   } = props;
 
+  const { currentView, setPreviousView } = useContext(
+    ActionViewContext
+  ) as ActionViewContextType;
+
   if (!visible) {
     return null;
   }
@@ -66,6 +74,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
           const itemIndex = results.findIndex((item: any) => {
             return item.id === id;
           });
+          setPreviousView?.(currentView);
           setCurrentItemIndex(itemIndex);
           const formView = availableViews.find(
             (v) => v.type === "form"

package/src/views/tabs/Tab.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { CloseOutlined } from "@ant-design/icons";
+import { theme } from "antd";
+const { useToken } = theme;
 
 type TabProps = {
   tabKey: string;
@@ -11,8 +13,8 @@ type TabProps = {
 
 function Tab(props: TabProps) {
   const { label, onClose, tabKey, isActive, onSelected } = props;
-
-  const bgColor = isActive ? "#ffffff" : "#F1F5F9";
+  const { token } = useToken();
+  const bgColor = isActive ? token.colorBgContainer : token.colorPrimaryBg;
 
   return (
     <div
@@ -32,14 +34,14 @@ function Tab(props: TabProps) {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        borderTopLeftRadius: 8,
-        borderTopRightRadius: 8,
+        borderTopLeftRadius: token.borderRadius,
+        borderTopRightRadius: token.borderRadius,
         marginLeft: 2,
       }}
     >
       <div
         style={{
-          color: isActive ? "#001529" : "#ADB0B3",
+          color: isActive ? token.colorPrimaryActive : token.colorPrimaryBorder,
           userSelect: "none",
           height: 40,
           display: "flex",
@@ -63,7 +65,11 @@ function Tab(props: TabProps) {
         }}
       >
         <CloseOutlined
-          style={{ color: isActive ? "#001529" : "#ADB0B3" }}
+          style={{
+            color: isActive
+              ? token.colorPrimaryActive
+              : token.colorPrimaryBorder,
+          }}
           onClick={(e) => {
             e.stopPropagation();
             onClose(tabKey);

package/src/widgets/WidgetFactory.tsx

@@ -26,9 +26,11 @@ import {
   FloatTime,
   ProgressBar,
   MultiCheckbox,
+  Markdown,
   Radio,
   Switch,
   Steps,
+  Tag,
   CodeEditor,
 } from "@/index";
 import { Image } from "./base/Image";
@@ -99,8 +101,12 @@ const getWidgetType = (type: string) => {
       return Indicator;
     case "tags":
       return Tags;
+    case "tag":
+      return Tag;
     case "multicheckbox":
       return MultiCheckbox;
+    case "markdown":
+      return Markdown;
     case "radio":
       return Radio;
     case "switch":

package/src/widgets/base/Binary.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useContext } from "react";
-import { Row, Col, Button, Input, Space } from "antd";
+import { Row, Col, Button, Input, Space, theme } from "antd";
 import Field from "@/common/Field";
 import { Binary as BinaryOoui } from "@gisce/ooui";
-import Config from "@/Config";
+const { useToken } = theme;
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import {
   FolderOpenOutlined,
@@ -44,8 +44,11 @@ interface BinaryInputProps {
 export const BinaryInput = (props: BinaryInputProps) => {
   const { ooui, value, onChange } = props;
   const { readOnly, required, filenameField } = ooui as BinaryOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const inputFile = useRef(null);
   const { setFieldValue, getFieldValue } =
     (useContext(FormContext) as FormContextType) || {};
@@ -104,7 +107,7 @@ export const BinaryInput = (props: BinaryInputProps) => {
         <Input
           type="text"
           disabled={true}
-          className={requiredClass}
+          style={requiredStyle}
           value={filesize}
         />
       </Col>

package/src/widgets/base/Boolean.tsx

@@ -4,17 +4,18 @@ import styled from "styled-components";
 
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 export const Boolean = (props: WidgetProps) => {
   const { ooui } = props;
   const { id, readOnly, required } = ooui;
 
   return (
-    <Field
-      {...props}
-      valuePropName="checked"
-    >
+    <Field {...props} valuePropName="checked">
       <BooleanInput id={id} readOnly={readOnly} required={required} />
     </Field>
   );
@@ -35,10 +36,10 @@ const BooleanInput = (props: any) => {
 
 const RequiredCheckbox = styled(AntCheckbox)`
   .ant-checkbox-inner {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 
   .ant-checkbox-checked .ant-checkbox-inner {
-    background-color: #089cff;
+    background-color: ${mapToken.colorPrimary};
   }
 `;

package/src/widgets/base/Char.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useState } from "react";
-import { Col, Input, Row } from "antd";
+import React, { CSSProperties, useContext, useState } from "react";
+import { Col, Input, Row, theme } from "antd";
 import Field from "@/common/Field";
 import { Char as CharOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { TranslationModal } from "../modals/TranslationModal";
 import { FormContext, FormContextType } from "@/context/FormContext";
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import { TranslationOutlined } from "@ant-design/icons";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import showInfo from "@/ui/InfoDialog";
+const { useToken } = theme;
 
 type CharProps = WidgetProps & {
   isSearchField?: boolean;
@@ -18,8 +18,11 @@ type CharProps = WidgetProps & {
 export const Char = (props: CharProps) => {
   const { ooui, isSearchField = false } = props;
   const { id, readOnly, isPassword, required, translatable } = ooui as CharOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -27,7 +30,7 @@ export const Char = (props: CharProps) => {
     <Input
       disabled={readOnly || (translatable && !isSearchField)}
       id={id}
-      className={requiredClass}
+      style={requiredStyle}
       maxLength={(ooui as CharOoui).size}
       onBlur={elementHasLostFocus}
     />
@@ -44,7 +47,7 @@ export const Char = (props: CharProps) => {
   }
 
   if (translatable && !readOnly && !isSearchField) {
-    input = <TranslatableChar field={id} requiredClass={requiredClass} />;
+    input = <TranslatableChar field={id} requiredStyle={requiredStyle} />;
   }
 
   return (
@@ -57,12 +60,12 @@ export const Char = (props: CharProps) => {
 const TranslatableChar = ({
   value,
   field,
-  requiredClass,
+  requiredStyle,
   onChange,
 }: {
   value?: string;
   field: string;
-  requiredClass: string | undefined;
+  requiredStyle: CSSProperties | undefined;
   onChange?: (value: string) => void;
 }) => {
   const formContext = useContext(FormContext) as FormContextType;
@@ -84,7 +87,7 @@ const TranslatableChar = ({
             <Input
               value={value}
               id={field}
-              className={requiredClass}
+              style={requiredStyle}
               onChange={(event: any) => {
                 onChange?.(event.target.value);
               }}
@@ -129,12 +132,11 @@ const TranslatableChar = ({
           value={value}
           disabled={true}
           id={field}
-          className={requiredClass}
           onChange={(event: any) => {
             onChange?.(event.target.value);
           }}
           onBlur={elementHasLostFocus}
-          style={{ cursor: "pointer" }}
+          style={{ cursor: "pointer", ...requiredStyle }}
         />
       </div>
       <TranslationModal

package/src/widgets/base/Float.tsx

@@ -1,16 +1,21 @@
 import React, { useContext } from "react";
-import { InputNumber } from "antd";
+import { InputNumber, theme } from "antd";
 import Field from "@/common/Field";
 import { Float as FloatOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+const { useToken } = theme;
+
 import { FormContext, FormContextType } from "@/context/FormContext";
 
 export const Float = (props: WidgetProps) => {
   const { ooui } = props;
   const { id, decimalDigits, readOnly, required } = ooui as FloatOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -18,7 +23,8 @@ export const Float = (props: WidgetProps) => {
     <Field required={required} type={"number"} {...props}>
       <InputNumber
         disabled={readOnly}
-        className={"w-full " + requiredClass}
+        className={"w-full"}
+        style={requiredStyle}
         id={id}
         precision={decimalDigits}
         formatter={(value) => {

package/src/widgets/base/FloatTime.tsx

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Input } from "antd";
+import { Input, theme } from "antd";
 import Field from "@/common/Field";
 import { Float as FloatOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { parseFloatToString, parseStringToFloat } from "@/helpers/timeHelper";
 import { FormContext, FormContextType } from "@/context/FormContext";
+const { useToken } = theme;
 
 export const FloatTime = (props: WidgetProps) => {
   const { ooui } = props;
@@ -29,8 +29,11 @@ export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
 ) => {
   const { ooui, value, onChange } = props;
   const { id, readOnly, required } = ooui as FloatOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const inputTextRef = useRef<string>();
   const [inputText, setInputText] = useState<string>();
   const formContext = useContext(FormContext) as FormContextType;
@@ -59,7 +62,8 @@ export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
     <Input
       value={inputText}
       disabled={readOnly}
-      className={"w-full " + requiredClass}
+      className={"w-full"}
+      style={requiredStyle}
       id={id}
       placeholder={"00:00"}
       onChange={onValueStringChange}

package/src/widgets/base/Integer.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import { InputNumber } from "antd";
+import { InputNumber, theme } from "antd";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { FormContext, FormContextType } from "@/context/FormContext";
+const { useToken } = theme;
 
 type IntegerProps = WidgetProps & {
   onChange?: (newValue: number) => void;
@@ -12,8 +12,11 @@ type IntegerProps = WidgetProps & {
 export const Integer = (props: IntegerProps) => {
   const { ooui, onChange } = props;
   const { id, readOnly, required } = ooui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -21,7 +24,7 @@ export const Integer = (props: IntegerProps) => {
     <Field required={required} type={"number"} {...props}>
       <InputNumber
         id={id}
-        className={"w-full " + requiredClass}
+        className={"w-full "}
         disabled={readOnly}
         formatter={(value) => {
           return `${value}`.replace(/[^0-9\-]+/g, "");
@@ -32,6 +35,8 @@ export const Integer = (props: IntegerProps) => {
         }}
         defaultValue={0}
         onBlur={elementHasLostFocus}
+        precision={0}
+        style={requiredStyle}
       />
     </Field>
   );

package/src/widgets/base/Label.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import { Tooltip, Typography } from "antd";
+import { Tooltip, Typography, theme } from "antd";
 import { WidgetProps } from "@/types";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { Label as LabelOoui } from "@gisce/ooui";
+import { Interweave } from "interweave";
 const { Text, Title } = Typography;
+const { useToken } = theme;
 
 type Props = WidgetProps & {
   align?: "left" | "center" | "right";
@@ -18,19 +20,15 @@ const alignClass = {
 
 const Label = (props: Props) => {
   const { ooui, align, responsiveBehaviour } = props;
-  const {
-    label,
-    tooltip,
-    fieldForLabel,
-    labelSize,
-    labelType,
-  } = ooui as LabelOoui;
+  const { label, tooltip, fieldForLabel, labelSize, labelType } =
+    ooui as LabelOoui;
   const addColon = fieldForLabel !== null ? true : false;
   const labelText = addColon && label.length > 1 ? label + " :" : label;
   const responsiveAlign = responsiveBehaviour ? "left" : "right";
   const labelAlgin = align ? align : fieldForLabel ? responsiveAlign : "left";
+  const { token } = useToken();
 
-  const TextType = labelSize === "text" ? Text : Title;
+  const TextType = labelSize === undefined ? Text : Title;
 
   return (
     <div
@@ -38,15 +36,17 @@ const Label = (props: Props) => {
     >
       {tooltip && (
         <Tooltip title={tooltip}>
-          <QuestionCircleOutlined className="pr-1 text-xs text-blue-400" />
+          <QuestionCircleOutlined className="pr-1 text-xs" style={{
+            color: token.colorPrimary
+          }} />
         </Tooltip>
       )}
       <span className="pr-2">
         <TextType
-          level={labelSize !== "text" ? ((labelSize as string) as any) : null}
+          level={labelSize}
           type={labelType as any}
         >
-          {labelText}
+          <Interweave content={labelText} />
         </TextType>
       </span>
     </div>

package/src/widgets/base/LinkInput.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Input, Button, Row, Col } from "antd";
+import { Input, Button, Row, Col, theme } from "antd";
 import { Char as CharOoui } from "@gisce/ooui";
-import Config from "@/Config";
 import { EditOutlined, CheckOutlined } from "@ant-design/icons";
 import { FormContext, FormContextType } from "@/context/FormContext";
+const { useToken } = theme;
 
 interface LinkInputProps {
   ooui: CharOoui;
@@ -16,8 +16,11 @@ interface LinkInputProps {
 export const LinkInput = (props: LinkInputProps) => {
   const { ooui, value, onChange, valueValidator, linkPrefix = "" } = props;
   const { id, readOnly, required } = ooui as CharOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -52,6 +55,7 @@ export const LinkInput = (props: LinkInputProps) => {
                   setShowInput(false);
                 }
               }}
+              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
               tabIndex={-1}
             />
           ) : (
@@ -61,6 +65,7 @@ export const LinkInput = (props: LinkInputProps) => {
                 setEditMode(true);
                 setShowInput(true);
               }}
+              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
               tabIndex={-1}
             />
           )}
@@ -69,9 +74,9 @@ export const LinkInput = (props: LinkInputProps) => {
       <Col flex="auto">
         {showInput ? (
           <Input
+            style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, ...requiredStyle }}
             id={id}
             onChange={onValueStringChange}
-            className={requiredClass}
             value={value}
             onBlur={() => {
               if (valueValidator(value)) {
@@ -84,7 +89,7 @@ export const LinkInput = (props: LinkInputProps) => {
         ) : (
           <a
             href={`${linkPrefix}${value}`}
-            style={{ color: "#1890ff", paddingRight: 15 }}
+            style={{ color: token.colorPrimary, paddingRight: 15 }}
             target="_blank"
           >
             {value}

package/src/widgets/base/MultiSelection.tsx

@@ -5,7 +5,11 @@ import styled from "styled-components";
 import Field from "@/common/Field";
 import { Selection as SelectionOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 const { Option } = Select;
 
@@ -82,6 +86,6 @@ export const MultiSelectionInput = (props: SelectionInputProps) => {
 
 const RequiredSelect = styled(Select)`
   &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;

package/src/widgets/base/Reference.tsx

@@ -49,6 +49,8 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
 
   useEffect(() => {
     if (!value) {
+      setSelectionValue(undefined);
+      setMany2oneValue([]);
       return;
     }
 
@@ -73,8 +75,16 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
           }
           onChange={(changedValue: string) => {
             setSelectionValue(changedValue);
-            setMany2oneValue([]);
-            onChange?.(undefined);
+            let m2oValue = many2oneValue[0] || 0;
+            if (changedValue !== selectionValue) {
+              setMany2oneValue([]);
+              m2oValue = 0;
+            }
+            const referenceValue = `${changedValue},${m2oValue}`;
+            if (referenceValue === value) {
+              return;
+            }
+            onChange?.(referenceValue);
           }}
           value={selectionValue}
         />
@@ -92,7 +102,7 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = (
           value={many2oneValue}
           onChange={(changedValue: any[]) => {
             setMany2oneValue(changedValue);
-            const referenceValue = `${selectionValue},${changedValue[0]}`;
+            const referenceValue = `${selectionValue},${changedValue[0] || 0}`;
             if (referenceValue === value) {
               return;
             }

package/src/widgets/base/ReferenceTree.tsx

@@ -0,0 +1,62 @@
+import ConnectionProvider from "@/ConnectionProvider";
+import { Space } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { Many2oneSuffix } from "./many2one/Many2oneSuffix";
+import { LoadingOutlined } from "@ant-design/icons";
+
+export type ReferenceTreeProps = {
+  value: string;
+  context?: any;
+  selectionValues?: any;
+};
+
+export const ReferenceTree = (
+  props: ReferenceTreeProps
+): React.ReactElement => {
+  const { value, context, selectionValues } = props;
+  const [name, setName] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const [model, id] = value ? value.split(",") : [];
+  const intId = parseInt(id);
+
+  const fetchName = useCallback(async () => {
+    if (!value) {
+      return;
+    }
+    if (value && name) {
+      return;
+    }
+    setLoading(true);
+    const nameResponse = await ConnectionProvider.getHandler().execute({
+      action: "name_get",
+      payload: [intId],
+      model,
+      context,
+    });
+    setName(nameResponse[0][1]);
+    setLoading(false);
+  }, [value, name]);
+
+  useEffect(() => {
+    fetchName();
+  }, [value]);
+
+  if (!value && !loading) {
+    return <></>;
+  }
+
+  if (loading) {
+    return <LoadingOutlined />;
+  }
+
+  const selectionDescription = selectionValues.get(model);
+
+  return (
+    <Space>
+      <>{`${selectionDescription}:`}</>
+      <>{name}</>
+      <Many2oneSuffix id={intId} model={model} />
+    </Space>
+  );
+};

package/src/widgets/base/Selection.tsx

@@ -5,7 +5,11 @@ import styled from "styled-components";
 import Field from "@/common/Field";
 import { Selection as SelectionOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 const { Option } = Select;
 
@@ -56,6 +60,6 @@ export const SelectionInput = (props: SelectionInputProps) => {
 
 const RequiredSelect = styled(Select)`
   &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;