@gisce/react-ooui 1.2.0-rc.9 → 1.2.0-rc.91

package/src/ui/TitleHeader.tsx

@@ -1,10 +1,13 @@
 import React, { useContext } from "react";
-import { Row, Col, Typography } from "antd";
+import { Row, Col, Typography, theme } from "antd";
 import {
   ActionViewContext,
   ActionViewContextType,
 } from "@/context/ActionViewContext";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { CopyOutlined } from "@ant-design/icons";
+
+const { useToken } = theme;
 
 const { Title, Text } = Typography;
 
@@ -25,6 +28,7 @@ function TitleHeader(props: Props) {
     selectedRowItems,
   } = useContext(ActionViewContext) as ActionViewContextType;
   const { t } = useContext(LocaleContext) as LocaleContextType;
+  const { token } = useToken();
 
   function getSummary() {
     if (currentView?.type === "form") {
@@ -35,7 +39,13 @@ function TitleHeader(props: Props) {
       if (totalItems === 0) {
         return (
           <>
-            {t("editingDocument")} (id: <Text copyable>{currentId}</Text>)
+            {t("editingDocument")} (id:{" "}
+            <Text
+              copyable={{ icon: <CopyOutlined style={{ color: "red" }} /> }}
+            >
+              {currentId}
+            </Text>
+            )
           </>
         );
       }
@@ -74,8 +84,12 @@ function TitleHeader(props: Props) {
   return (
     <div style={{ position: "sticky", top: 80, zIndex: 3 }}>
       <Row
-        className="rounded shadow-md bg-blueGray-100"
-        style={{ padding: "1em" }}
+        className="shadow-md"
+        style={{
+          padding: "1em",
+          borderRadius: token.borderRadius,
+          backgroundColor: token.colorPrimaryBg,
+        }}
         align="middle"
       >
         <Col flex={2}>

package/src/views/ActionView.tsx

@@ -107,6 +107,7 @@ function ActionView(props: Props, ref: any) {
     tabs,
     activeKey,
     openAction,
+    onRemoveTab,
   } = tabManagerContext || {};
 
   useHotkeys(
@@ -240,8 +241,9 @@ function ActionView(props: Props, ref: any) {
 
     if (!currentViewToAssign) {
       showErrorDialog(
-        "Error determining the first view to show.\nPlease, make sure the view ids on the fields_view_get responses are the same as the ones defined in the action"
+        `Error determining the first view to show for model ${model}.\nPlease, make sure the view ids on the fields_view_get responses are the same as the ones defined in the action`
       );
+      onRemoveTab?.(tabKey);
     }
 
     setCurrentView(currentViewToAssign);
@@ -279,7 +281,9 @@ function ActionView(props: Props, ref: any) {
   }, [tabs, activeKey]);
 
   async function canWeClose() {
-    if (currentView!.type === "form") {
+    if (!currentView) {
+      return true;
+    } else if (currentView!.type === "form") {
       return await (formRef.current as any).cancelUnsavedChanges();
     } else {
       return true;

package/src/views/RootView.tsx

@@ -250,6 +250,7 @@ function RootView(props: RootViewProps, ref: any) {
             fields,
             values: { ...values, ...globalValues },
           }),
+          fields,
           context: { ...rootContext, ...parsedContext },
         })
       : [];
@@ -437,6 +438,11 @@ function RootView(props: RootViewProps, ref: any) {
         },
       });
     } else {
+      const formattedInitialView =
+        initialView && Array.isArray(initialView.id)
+          ? { ...initialView, id: initialView.id[0] }
+          : initialView;
+
       addNewTab({
         title,
         action: {
@@ -454,7 +460,7 @@ function RootView(props: RootViewProps, ref: any) {
             context={{ ...rootContext, ...context }}
             domain={domain}
             setCanWeClose={registerViewCloseFn}
-            initialView={initialView}
+            initialView={formattedInitialView}
             res_id={res_id}
             formDefaultValues={values}
             formForcedValues={forced_values}

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};
   }
 `;