@gisce/react-ooui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/views/CurrentTabContent.tsx

@@ -8,7 +8,7 @@ import TabContent from "./TabContent";
 
 function CurrentTabContent() {
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { tabs } = tabManagerContext || {};
 

package/src/views/TabContent.tsx

@@ -13,7 +13,7 @@ function TabContent(props: Props) {
   const { tab } = props;
 
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { activeKey } = tabManagerContext || {};
 

package/src/views/TabSelector.tsx

@@ -8,7 +8,7 @@ import Tab from "./tabs/Tab";
 
 function TabSelector() {
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { activeKey, tabs, onRemoveTab, onChangeTab } = tabManagerContext || {};
 

package/src/views/actionViews/DashboardActionView.tsx

@@ -17,7 +17,7 @@ export const DashboardActionView = (props: DashboardActionViewProps) => {
   const { dashboardData } = props;
   const dashboardRef = useRef();
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { openShortcut } = tabManagerContext || {};
 

package/src/views/actionViews/GraphActionView.tsx

@@ -29,7 +29,7 @@ export const GraphActionView = (props: GraphActionViewProps) => {
   const graphRef = useRef();
 
   const actionViewContext = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const {
     setResults: setResultsActionView = undefined,

package/src/views/actionViews/TreeActionView.tsx

@@ -43,7 +43,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
   } = props;
 
   const { currentView, setPreviousView } = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
 
   if (!visible) {
@@ -77,7 +77,7 @@ export const TreeActionView = (props: TreeActionViewProps) => {
           setPreviousView?.(currentView);
           setCurrentItemIndex(itemIndex);
           const formView = availableViews.find(
-            (v) => v.type === "form"
+            (v) => v.type === "form",
           ) as FormView;
           setCurrentView(formView);
         }}

package/src/widgets/WidgetFactory.tsx

@@ -38,7 +38,7 @@ import {
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
 import { Timeline } from "./custom/Timeline";
-import { Indicator} from "./custom/Indicator";
+import { Indicator } from "./custom/Indicator";
 import { Tags } from "./custom/Tags";
 
 const getWidgetType = (type: string) => {

package/src/widgets/base/Float.tsx

@@ -30,7 +30,6 @@ export const Float = (props: WidgetProps) => {
         formatter={(value) => {
           return `${value}`.replace(/[^0-9\.\-]+/g, "");
         }}
-        defaultValue={0}
         decimalSeparator={"."}
         onBlur={elementHasLostFocus}
       />

package/src/widgets/base/FloatTime.tsx

@@ -25,7 +25,7 @@ interface FloatTimeInputProps {
 }
 
 export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
-  props: FloatTimeInputProps
+  props: FloatTimeInputProps,
 ) => {
   const { ooui, value, onChange } = props;
   const { id, readOnly, required } = ooui as FloatOoui;

package/src/widgets/base/Integer.tsx

@@ -46,7 +46,6 @@ export const Integer = (props: IntegerProps) => {
           const newNumber = newValue as number;
           onChange?.(newNumber);
         }}
-        defaultValue={0}
         onBlur={elementHasLostFocus}
         precision={0}
         style={requiredStyle}

package/src/widgets/base/Reference.tsx

@@ -37,7 +37,7 @@ interface ReferenceInputProps {
 }
 
 export const ReferenceInput: React.FC<ReferenceInputProps> = (
-  props: ReferenceInputProps
+  props: ReferenceInputProps,
 ) => {
   const { value, onChange, ooui } = props;
   const { required, selectionValues, readOnly } = ooui;

package/src/widgets/base/ReferenceTree.tsx

@@ -11,7 +11,7 @@ export type ReferenceTreeProps = {
 };
 
 export const ReferenceTree = (
-  props: ReferenceTreeProps
+  props: ReferenceTreeProps,
 ): React.ReactElement => {
   const { value, context, selectionValues } = props;
   const [name, setName] = useState();

package/src/widgets/base/Separator.tsx

@@ -10,17 +10,16 @@ type Props = {
 export const Separator = (props: Props) => {
   const { ooui } = props;
   const { label, icon } = ooui;
-  const Icon : React.ElementType | undefined = iconMapper(icon || "");
-
+  const Icon: React.ElementType | undefined = iconMapper(icon || "");
 
   return (
     <Divider orientation="left" className="text-sm">
-      { (Icon || label) &&
+      {(Icon || label) && (
         <Space>
           {Icon ? <Icon /> : null}
           {label}
         </Space>
-      }
+      )}
     </Divider>
   );
 };

package/src/widgets/base/many2one/Many2oneSuffixModal.tsx

@@ -14,7 +14,7 @@ export const Many2oneSuffixModal = (props: Props) => {
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   return (
-    (<Modal
+    <Modal
       title={t("selectAction")}
       centered
       open={visible}
@@ -37,6 +37,6 @@ export const Many2oneSuffixModal = (props: Props) => {
           );
         })}
       </Space>
-    </Modal>)
+    </Modal>
   );
 };

package/src/widgets/base/one2many/One2many.tsx

@@ -47,9 +47,9 @@ export const One2many = (props: Props) => {
       if (mode && mode.length > 0) {
         for (const m of mode as ViewType[]) {
           const v = await getViewData(m);
-          views.set(m, v)
+          views.set(m, v);
         }
-        setViews(views)
+        setViews(views);
       } else {
         const formView = await getViewData("form");
         const treeView = await getViewData("tree");

package/src/widgets/base/one2many/One2manyInput.tsx

@@ -670,7 +670,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
       <One2manyTopBar
         mode={currentView}
         title={getTitle()}
-        readOnly={readOnly}
+        readOnly={readOnly || false}
         isMany2Many={isMany2many}
         formHasChanges={formHasChanges}
         totalItems={itemsToShow.length}

package/src/widgets/custom/Avatar.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import {WidgetProps} from "@/types";
+import { WidgetProps } from "@/types";
 import { Avatar as AntdAvatar, Tooltip } from "antd";
-import { Avatar as AvatarOoui} from "@gisce/ooui";
+import { Avatar as AvatarOoui } from "@gisce/ooui";
 import { colorFromString } from "@/helpers/formHelper";
 
 type AvatarProps = WidgetProps & {
-  ooui: AvatarOoui
+  ooui: AvatarOoui;
   value?: any;
 };
 
 const Avatar = (props: AvatarProps): React.ReactElement | null => {
-  const {ooui, value} = props;
+  const { ooui, value } = props;
   if (!value) {
     return null;
   }
@@ -20,13 +20,21 @@ const Avatar = (props: AvatarProps): React.ReactElement | null => {
   } else if (Array.isArray(value)) {
     formattedValue = value[1];
   }
-  const text = formattedValue.toString().split(" ").filter((word:string) => word.length > 1).slice(0, 3).map((word:string) => word[0].toUpperCase()).join("");
+  const text = formattedValue
+    .toString()
+    .split(" ")
+    .filter((word: string) => word.length > 1)
+    .slice(0, 3)
+    .map((word: string) => word[0].toUpperCase())
+    .join("");
   const backgroundColor = colorFromString(formattedValue);
   return (
     <Tooltip title={formattedValue}>
-      <AntdAvatar alt={formattedValue} style={{backgroundColor}}>{text}</AntdAvatar>
+      <AntdAvatar alt={formattedValue} style={{ backgroundColor }}>
+        {text}
+      </AntdAvatar>
     </Tooltip>
   );
-}
+};
 
 export default Avatar;

package/src/widgets/custom/Markdown.tsx

@@ -1,9 +1,9 @@
 import Field from "@/common/Field";
 import ReactMarkdown from "react-markdown";
 import React from "react";
-import {WidgetProps} from "@/types";
+import { WidgetProps } from "@/types";
 
-export  const Markdown = (props: WidgetProps) => {
+export const Markdown = (props: WidgetProps) => {
   return (
     <Field {...props}>
       <MarkdownInput {...props} />
@@ -12,11 +12,15 @@ export  const Markdown = (props: WidgetProps) => {
 };
 
 export const MarkdownInput = (props: any) => {
-  const {value, ooui} = props;
+  const { value, ooui } = props;
   return (
-    <div style={{height: ooui.height ? ooui.height + 'px' : '100%', overflow: 'auto'}}>
-      <ReactMarkdown children={value} className="ant-typography"/>
+    <div
+      style={{
+        height: ooui.height ? ooui.height + "px" : "100%",
+        overflow: "auto",
+      }}
+    >
+      <ReactMarkdown children={value} className="ant-typography" />
     </div>
-
-  )
-}
+  );
+};

package/src/widgets/custom/Radio.tsx

@@ -41,9 +41,7 @@ export const SelectionInput = (props: RadioInputProps) => {
 
   return (
     <RadioAnt.Group disabled={readOnly} onChange={onChange} value={value}>
-      <Space direction={direction}>
-        {options}
-      </Space>
+      <Space direction={direction}>{options}</Space>
     </RadioAnt.Group>
   );
-};
+};

package/src/widgets/custom/Steps.tsx

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

package/src/widgets/custom/Switch.tsx

@@ -9,10 +9,7 @@ export const Switch = (props: WidgetProps) => {
   const { id, readOnly, required } = ooui;
 
   return (
-    <Field
-      {...props}
-      valuePropName="checked"
-    >
+    <Field {...props} valuePropName="checked">
       <SwitchInput id={id} readOnly={readOnly} required={required} />
     </Field>
   );
@@ -21,7 +18,6 @@ export const Switch = (props: WidgetProps) => {
 const SwitchInput = (props: any) => {
   const { required, readOnly, ...restProps } = props;
 
-
   return (
     <div className="flex flex-row">
       <AntdSwitch disabled={readOnly} {...restProps} />

package/src/widgets/modals/SearchModal.tsx

@@ -98,33 +98,35 @@ export const SearchModal = (props: SearchSelectionProps) => {
     );
   };
 
-  return (<>
-    <Modal
-      title={t("search")}
-      centered
-      width={modalWidth}
-      open={visible && !showCreateModal}
-      closable={true}
-      onCancel={onCloseModal}
-      footer={null}
-      destroyOnClose
-      maskClosable={false}
-    >
-      {content()}
-    </Modal>
-    <FormModal
-      model={model}
-      visible={showCreateModal}
-      parentContext={context}
-      onSubmitSucceed={(id?: number) => {
-        setShowCreateModal(false);
-        onCloseModal();
-        onSelectValues([id!]);
-      }}
-      onCancel={() => {
-        setShowCreateModal(false);
-        onCloseModal();
-      }}
-    />
-  </>);
+  return (
+    <>
+      <Modal
+        title={t("search")}
+        centered
+        width={modalWidth}
+        open={visible && !showCreateModal}
+        closable={true}
+        onCancel={onCloseModal}
+        footer={null}
+        destroyOnClose
+        maskClosable={false}
+      >
+        {content()}
+      </Modal>
+      <FormModal
+        model={model}
+        visible={showCreateModal}
+        parentContext={context}
+        onSubmitSucceed={(id?: number) => {
+          setShowCreateModal(false);
+          onCloseModal();
+          onSelectValues([id!]);
+        }}
+        onCancel={() => {
+          setShowCreateModal(false);
+          onCloseModal();
+        }}
+      />
+    </>
+  );
 };

package/src/widgets/modals/TranslationModal.tsx

@@ -185,7 +185,7 @@ export const TranslationModal = (props: TranslationModalProps) => {
   }
 
   return (
-    (<Modal
+    <Modal
       title={t("translate")}
       centered
       width={modalWidth}
@@ -197,6 +197,6 @@ export const TranslationModal = (props: TranslationModalProps) => {
       maskClosable={false}
     >
       {content()}
-    </Modal>)
+    </Modal>
   );
 };

package/src/widgets/views/Dashboard/Dashboard.tsx

@@ -156,7 +156,7 @@ function Dashboard(props: DashboardProps, ref: any) {
 
     const differences = itemPositions.filter((itemPosition) => {
       const dashboardItem = dashboardItems.find(
-        (dashboardItem) => dashboardItem.id === itemPosition.id
+        (dashboardItem) => dashboardItem.id === itemPosition.id,
       );
       if (!dashboardItem) {
         return false;
@@ -265,7 +265,7 @@ function Dashboard(props: DashboardProps, ref: any) {
             <Graph
               view_id={
                 views.filter(
-                  (view: [number, string]) => view[1] === "graph"
+                  (view: [number, string]) => view[1] === "graph",
                 )[0][0]
               }
               model={model}
@@ -283,7 +283,7 @@ function Dashboard(props: DashboardProps, ref: any) {
               domain={domain}
               view_id={
                 views.filter(
-                  (view: [number, string]) => view[1] === "tree"
+                  (view: [number, string]) => view[1] === "tree",
                 )[0][0]
               }
               onRowClicked={(record) => {

package/src/widgets/views/DashboardGrid/DashboardGrid.tsx

@@ -16,7 +16,7 @@ export const DashboardGrid = (props: DashboardGridProps) => {
         | boolean
         | React.ReactChild
         | React.ReactFragment
-        | React.ReactPortal
+        | React.ReactPortal,
     ) => {
       const { parms, id } = (child as any).props;
       return (
@@ -24,7 +24,7 @@ export const DashboardGrid = (props: DashboardGridProps) => {
           {child}
         </div>
       );
-    }
+    },
   );
 
   return (
@@ -43,7 +43,7 @@ export const DashboardGrid = (props: DashboardGridProps) => {
               w: item.w,
               h: item.h,
             };
-          })
+          }),
         );
       }}
     >

package/src/widgets/views/Form.tsx

@@ -1014,7 +1014,7 @@ function Form(props: FormProps, ref: any) {
     let mustBlockButtons = false;
 
     try {
-      if (formHasChanges() || getCurrentId() === undefined) {
+      if (!readOnly && (formHasChanges() || getCurrentId() === undefined)) {
         mustBlockButtons = true;
         updateOperationInProgress(true);
         if (submitMode === "2many") {

package/src/widgets/views/Graph/Graph.tsx

@@ -36,7 +36,7 @@ const GraphComp = (props: GraphProps, ref: any) => {
   const [graphOoui, setGraphOoui] = useState<GraphOoui>();
   const [graphXml, setGraphXml] = useState<string>();
   const actionViewContext = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const { setGraphIsLoading = undefined } = actionViewContext || {};
 

package/src/widgets/views/Graph/GraphChart.tsx

@@ -61,7 +61,7 @@ export const GraphChart = (props: GraphChartProps) => {
           "es-ES",
           {
             useGrouping: true,
-          }
+          },
         )}`}
       </p>
       <Chart

package/src/widgets/views/Graph/GraphDefaults.ts

@@ -25,7 +25,7 @@ const axisFormatter = (value: any) => {
       return value;
     }
     return dayjs(value, (dateFormats.input as any)[dateType]).format(
-      (dateFormats.output as any)[dateType]
+      (dateFormats.output as any)[dateType],
     );
   } else {
     return value;
@@ -157,7 +157,7 @@ function getDateType(dateString: string): string | null {
     const isValidFormat = dayjs(
       dateString,
       (dateFormats.input as any)[format],
-      true
+      true,
     ).isValid();
     if (isValidFormat) {
       return format;

package/src/widgets/views/SearchTree.tsx

@@ -80,12 +80,12 @@ function SearchTree(props: Props, ref: any) {
   const { height } = useWindowDimensions();
 
   const contentRootContext = useContext(
-    ContentRootContext
+    ContentRootContext,
   ) as ContentRootContextType;
   const { processAction } = contentRootContext || {};
 
   const actionViewContext = useContext(
-    ActionViewContext
+    ActionViewContext,
   ) as ActionViewContextType;
   const {
     setResults: setResultsActionView = undefined,

package/src/widgets/views/searchFilter/SearchBottomBar.tsx

@@ -18,12 +18,8 @@ type Props = {
 };
 
 export function SearchBottomBar(props: Props): React.ReactElement {
-  const {
-    onAdvancedFilterToggle,
-    advancedFilter,
-    onClear,
-    isSearching,
-  } = props;
+  const { onAdvancedFilterToggle, advancedFilter, onClear, isSearching } =
+    props;
 
   const { t } = useContext(LocaleContext) as LocaleContextType;
 

package/src/widgets/views/searchFilter/SearchField.tsx

@@ -8,7 +8,11 @@ import { PairFields } from "./PairFields";
 
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
-import { Field, SearchFieldTypes, Selection as SelectionOoui } from "@gisce/ooui";
+import {
+  Field,
+  SearchFieldTypes,
+  Selection as SelectionOoui,
+} from "@gisce/ooui";
 import { MultiSelection } from "@/widgets/base/MultiSelection";
 
 type Props = {

package/src/widgets/views/searchFilter/SearchFilter.tsx

@@ -101,7 +101,7 @@ function SearchFilter(props: Props) {
     delete values.limit;
     const newParams = getParamsForFields(
       values,
-      sfo.current?._advancedSearchContainer
+      sfo.current?._advancedSearchContainer,
     );
 
     onSubmit({ params: newParams, offset, limit, searchValues: values });

package/src/widgets/views/searchFilter/SearchParams.tsx

@@ -8,7 +8,7 @@ import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 
 type SearchParamsProps = {
   onLimitChange?: (limit: number) => void;
-}
+};
 
 export function SearchParams(props: SearchParamsProps): React.ReactElement {
   const { onLimitChange } = props;
@@ -21,9 +21,12 @@ export function SearchParams(props: SearchParamsProps): React.ReactElement {
       <Row key={"count_params"}>{t("parameters")}</Row>
       <Space align="center">
         {t("limit") + " :"}
-        <Integer ooui={limitOoui} onChange={(newValue: number) => {
-          onLimitChange?.(newValue);
-        }}/>
+        <Integer
+          ooui={limitOoui}
+          onChange={(newValue: number) => {
+            onLimitChange?.(newValue);
+          }}
+        />
         {t("first") + " :"}
         <Integer ooui={offsetOoui} />
       </Space>