@gisce/react-ooui 1.5.2-alpha.1 → 1.5.2-rc.0

package/src/widgets/views/Form.tsx

@@ -72,7 +72,7 @@ export type FormProps = {
     id?: number,
     values?: any,
     formValues?: any,
-    x2manyPendingLink?: boolean,
+    x2manyPendingLink?: boolean
   ) => void;
   onSubmitError?: (error: any) => void;
   onCancel?: () => void;
@@ -143,7 +143,7 @@ function Form(props: FormProps, ref: any) {
     formContext || {};
 
   const actionViewContext = useContext(
-    ActionViewContext,
+    ActionViewContext
   ) as ActionViewContextType;
   const {
     setFormIsSaving = undefined,
@@ -156,7 +156,7 @@ function Form(props: FormProps, ref: any) {
   } = (rootForm ? actionViewContext : {}) || {};
 
   const contentRootContext = useContext(
-    ContentRootContext,
+    ContentRootContext
   ) as ContentRootContextType;
   const { processAction, globalValues } = contentRootContext || {};
 
@@ -213,7 +213,7 @@ function Form(props: FormProps, ref: any) {
     id?: number,
     values?: any,
     formValues?: any,
-    x2manyPendingLink?: boolean,
+    x2manyPendingLink?: boolean
   ) => {
     setFormHasChanges?.(false);
     setFormIsSaving?.(false);
@@ -257,7 +257,7 @@ function Form(props: FormProps, ref: any) {
   function getPlainValues() {
     const values: any = getValues();
     const fields: any = getFields();
-    const reformattedValues: { [key: string]: any } = {};
+    let reformattedValues: { [key: string]: any } = {};
 
     Object.keys(values).forEach((key) => {
       const value = values[key];
@@ -341,7 +341,7 @@ function Form(props: FormProps, ref: any) {
           source: originalFormValues.current,
           target: getCurrentValues(fields),
           fields,
-        }),
+        })
       ).length !== 0
     );
   };
@@ -641,7 +641,7 @@ function Form(props: FormProps, ref: any) {
         getCurrentId(),
         getValues(),
         getFormValues(),
-        x2manyPendingLink.current,
+        x2manyPendingLink.current
       );
       x2manyPendingLink.current = false;
       const currentId = getCurrentId()!;
@@ -721,7 +721,7 @@ function Form(props: FormProps, ref: any) {
           ...values,
           ...getAdditionalValues(),
         },
-        fields,
+        fields
       ),
     });
     setFormOoui(ooui);
@@ -770,6 +770,7 @@ function Form(props: FormProps, ref: any) {
         }) &&
         elementHasLostFocus !== true
       ) {
+        return;
       } else {
         const values = processValues(antForm.getFieldsValue(true), fields);
         lastAssignedValues.current = values;
@@ -835,7 +836,7 @@ function Form(props: FormProps, ref: any) {
       parseForm({ fields, arch: arch!, values: processedValues });
       assignNewValuesToForm({
         values: processedValues,
-        fields,
+        fields: fields,
         reset: false,
       });
     }
@@ -1014,7 +1015,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/GraphIndicator.tsx

@@ -5,8 +5,9 @@ import Title from "antd/lib/typography/Title";
 import Measure from "react-measure";
 import iconMapper from "@/helpers/iconMapper";
 import { Alert, Col, Row } from "antd";
-import { Operator, graphProcessor } from "@gisce/ooui";
+import { Operator } from "@gisce/ooui";
 
+import { graphProcessor } from "@gisce/ooui";
 const { getValueForOperator } = graphProcessor;
 
 const fontGrowFactor = 0.7;
@@ -172,7 +173,7 @@ export const GraphIndicator = (props: GraphInidicatorProps) => {
               condition: iconProps,
               values: { value: retrievedValue, percent },
               context,
-            },
+            }
           );
           setIcon(iconEval);
         } else {
@@ -284,7 +285,7 @@ function CommonIndicator({
 
   let tw = getTextWidth(
     finalValue,
-    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`,
+    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`
   );
 
   if (icon) {
@@ -296,8 +297,7 @@ function CommonIndicator({
     fontSize = maxFontSize;
   }
 
-  const IconElement: any =
-    icon && iconMapper(icon, { style: { fontSize: fontSize * 0.7 } });
+  const IconElement: any = icon && iconMapper(icon, {style: {fontSize: fontSize * 0.7}});
 
   return (
     <div
@@ -366,7 +366,7 @@ function PercentageIndicator({
 
   let tw = getTextWidth(
     percentValue,
-    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`,
+    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`
   );
 
   if (icon) {
@@ -378,7 +378,7 @@ function PercentageIndicator({
     fontSize = maxFontSize;
   }
 
-  const IconElement: any = icon && iconMapper(icon, { style: { fontSize } });
+  const IconElement: any = icon && iconMapper(icon, {style: {fontSize}});
 
   return (
     <div

package/src/widgets/views/SearchTree.tsx

@@ -166,11 +166,11 @@ function SearchTree(props: Props, ref: any) {
       return;
     }
 
-    if (visible && treeView) {
+    if (visible) {
       searchNameGetDoneRef.current = false;
       fetchResults();
     }
-  }, [page, offset, initialFetchDone, visible, nameSearch, treeView]);
+  }, [page, offset, initialFetchDone, visible, nameSearch]);
 
   const fetchData = async () => {
     setInitialFetchDone(false);

package/src/widgets/views/Tree.tsx

@@ -39,7 +39,7 @@ type Props = {
   page?: number;
   loading: boolean;
   treeView: TreeView;
-  results: any[];
+  results: Array<any>;
   showPagination?: boolean;
   onRequestPageChange?: (page: number, pageSize?: number) => void;
   onRowClicked?: (record: any) => void;
@@ -88,7 +88,7 @@ const dateComponentFn = (value: any): React.ReactElement => {
 
   const formattedValue = dayjs(
     value,
-    DatePickerConfig.date.dateInternalFormat,
+    DatePickerConfig.date.dateInternalFormat
   ).format(DatePickerConfig.date.dateDisplayFormat);
   return <>{formattedValue}</>;
 };
@@ -97,7 +97,7 @@ const dateTimeComponentFn = (value: any): React.ReactElement => {
   if (!value || (value && value.length === 0)) return <></>;
   const formattedValue = dayjs(
     value,
-    DatePickerConfig.time.dateInternalFormat,
+    DatePickerConfig.time.dateInternalFormat
   ).format(DatePickerConfig.time.dateDisplayFormat);
   return <>{formattedValue}</>;
 };
@@ -132,7 +132,7 @@ const TagComponent = (
   value: any,
   key: string,
   ooui: any,
-  context: any,
+  context: any
 ): React.ReactElement => {
   return <TagInput ooui={ooui} value={value} />;
 };
@@ -141,7 +141,7 @@ const SelectionComponent = (
   value: any,
   key: string,
   ooui: any,
-  context: any,
+  context: any
 ): React.ReactElement => {
   return <>{ooui.selectionValues.get(value)}</>;
 };
@@ -150,7 +150,7 @@ const referenceComponent = (
   value: any,
   key: string,
   ooui: any,
-  context: any,
+  context: any
 ): React.ReactElement => {
   return (
     <>
@@ -167,7 +167,7 @@ const AvatarFn = (
   value: any,
   key: string,
   ooui: any,
-  context: any,
+  context: any
 ): React.ReactElement => <Avatar ooui={ooui} value={value} />;
 
 function Tree(props: Props): React.ReactElement {
@@ -195,8 +195,8 @@ function Tree(props: Props): React.ReactElement {
     onSelectAllRecords,
   } = props;
 
-  const [items, setItems] = useState<any[]>([]);
-  const [columns, setColumns] = useState<Column[]>([]);
+  const [items, setItems] = useState<Array<any>>([]);
+  const [columns, setColumns] = useState<Array<Column>>([]);
 
   const errorInParseColors = useRef<boolean>(false);
 
@@ -206,7 +206,7 @@ function Tree(props: Props): React.ReactElement {
   const internalLimit = useRef(limit);
 
   const actionViewContext = useContext(
-    ActionViewContext,
+    ActionViewContext
   ) as ActionViewContextType;
   const { title = undefined, setTitle = undefined } =
     (rootTree ? actionViewContext : {}) || {};
@@ -234,7 +234,7 @@ function Tree(props: Props): React.ReactElement {
         datetime: dateTimeComponentFn,
         avatar: AvatarFn,
       },
-      context,
+      context
     );
 
     setColumns(columns);
@@ -271,7 +271,7 @@ function Tree(props: Props): React.ReactElement {
     const numberOfVisibleSelectedRows = items?.filter(
       (entry) =>
         rowSelection?.selectedRowKeys &&
-        rowSelection?.selectedRowKeys.includes(entry.id),
+        rowSelection?.selectedRowKeys.includes(entry.id)
     ).length;
 
     return loading ? null : total === undefined ? (
@@ -322,8 +322,8 @@ function Tree(props: Props): React.ReactElement {
       return null;
     }
 
-    const summary: string[] = [];
-    const sumItems =
+    let summary: string[] = [];
+    let sumItems =
       rowSelection?.selectedRowKeys?.length > 0
         ? items.filter((result: any) => {
             return rowSelection?.selectedRowKeys.includes(result.id);
@@ -364,11 +364,12 @@ function Tree(props: Props): React.ReactElement {
   ) : (
     <div>
       {pagination()}
+      {loading && <Spin className="pb-4" />}
       <GisceTable
         height={adjustedHeight!}
         columns={dataTable.columns}
         dataSource={items}
-        loading={loading}
+        loading={false}
         loadingComponent={<Spin />}
         onRowStyle={(record: any) => {
           if (colorsForResults![record.id]) {

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

@@ -1,4 +1,4 @@
-import { DatePicker, TimePicker, Row, Col } from "antd";
+import { DatePicker, TimePicker } from "antd";
 
 import React from "react";
 import Field from "@/common/Field";
@@ -6,6 +6,8 @@ import { Field as FieldOoui, Label as LabelOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Label from "@/widgets/base/Label";
 
+import { Row, Col } from "antd";
+
 export const DateTimeRangePicker = (props: WidgetProps) => {
   const { ooui, showLabel = false } = props;
   const { label, id } = ooui;