@teselagen/ui 0.5.23-beta.31 → 0.5.23-beta.33

package/src/DataTable/utils/index.js

@@ -24,7 +24,6 @@ import { handleCopyColumn } from "./handleCopyColumn";
 import { isBottomRightCornerOfRectangle } from "./isBottomRightCornerOfRectangle";
 import { handleCopyTable } from "./handleCopyTable";
 import { PRIMARY_SELECTED_VAL } from "./primarySelectedValue";
-import { useDeepEqualMemo } from "./useDeepEqualMemo";
 import { useTableEntities } from "./useTableEntities";
 
 export {
@@ -52,6 +51,5 @@ export {
   PRIMARY_SELECTED_VAL,
   removeCleanRows,
   stripNumberAtEnd,
-  useDeepEqualMemo,
   useTableEntities
 };

package/src/DataTable/utils/useTableParams.js

@@ -352,7 +352,6 @@ export default function useTableParams(
     reduxFormSearchInput,
     onlyShowRowsWErrors,
     reduxFormCellValidation,
-    reduxFormEntities,
     reduxFormSelectedCells,
     reduxFormSelectedEntityIdMap,
     reduxFormQueryParams,

package/src/DataTable/utils/withTableParams.js

@@ -11,7 +11,7 @@ import {
 } from "./queryParams";
 import { withRouter } from "react-router-dom";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
-import { useDeepEqualMemo } from "./useDeepEqualMemo";
+import { useDeepEqualMemo } from "../../utils/hooks/useDeepEqualMemo";
 import { branch, compose } from "recompose";
 
 /**

package/src/FormComponents/Uploader.js

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   Button,
   Callout,
@@ -42,6 +48,7 @@ import convertSchema from "../DataTable/utils/convertSchema";
 import { LoadingDots } from "./LoadingDots";
 import { useDispatch } from "react-redux";
 import { flushSync } from "react-dom";
+import { useStableReference } from "../utils/hooks/useStableReference";
 
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
@@ -208,6 +215,10 @@ const InnerDropZone = ({
   </section>
 );
 
+const onFileSuccessDefault = async () => {
+  return;
+};
+
 const Uploader = ({
   accept: __accept,
   action,
@@ -216,7 +227,7 @@ const Uploader = ({
   callout: _callout,
   className = "",
   contentOverride: maybeContentOverride,
-  disabled: _disabled,
+  disabled,
   dropzoneProps = {},
   fileLimit,
   fileList, //list of files with options: {name, loading, error, url, originalName, downloadName}
@@ -230,9 +241,7 @@ const Uploader = ({
   onChange: _onChange = noop, //this is almost always getting passed by redux-form, no need to pass this handler manually
   onFieldSubmit = noop, //called when all files have successfully uploaded
   onFileClick, // called when a file link in the filelist is clicked
-  onFileSuccess = async () => {
-    return;
-  }, //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
+  onFileSuccess = onFileSuccessDefault, //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
   onPreviewClick,
   onRemove = noop, //called when a file has been selected to be removed
   overflowList,
@@ -247,88 +256,95 @@ const Uploader = ({
   const [resolvedAccept, setResolvedAccept] = useState();
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
+
+  // We do this because we don't want functions influencing on the dependencies
+  const stableOnChange = useStableReference(_onChange);
+  const stableBeforeUpload = useStableReference(beforeUpload);
   // onChange received from redux-form is not working anymore,
   // so we need to overwrite it for redux to works.
-  const onChange = val => {
-    flushSync(() => {
-      if (noRedux) {
-        return _onChange(val);
-      }
-      dispatch(touch(formName, name));
-      dispatch(change(formName, name, val));
-    });
-  };
+  const onChange = useCallback(
+    val => {
+      flushSync(() => {
+        if (noRedux) {
+          return stableOnChange.current(val);
+        }
+        dispatch(touch(formName, name));
+        dispatch(change(formName, name, val));
+      });
+    },
+    [dispatch, formName, name, noRedux, stableOnChange]
+  );
 
-  const handleSecondHalfOfUpload = async ({
-    acceptedFiles,
-    cleanedFileList
-  }) => {
-    // This onChange is not changing things, we need to check whether the error is here or later
-    onChange(cleanedFileList); //tnw: this line is necessary, if you want to clear the file list in the beforeUpload, call onChange([])
-    // beforeUpload is called, otherwise beforeUpload will not be able to truly cancel the upload
-    const keepGoing = beforeUpload
-      ? await beforeUpload(cleanedFileList, onChange)
-      : true;
-    if (!keepGoing) return;
+  const handleSecondHalfOfUpload = useCallback(
+    async ({ acceptedFiles, cleanedFileList }) => {
+      // This onChange is not changing things, we need to check whether the error is here or later
+      onChange(cleanedFileList); //tnw: this line is necessary, if you want to clear the file list in the beforeUpload, call onChange([])
+      // beforeUpload is called, otherwise beforeUpload will not be able to truly cancel the upload
+      const keepGoing = stableBeforeUpload.current
+        ? await stableBeforeUpload.current(cleanedFileList, onChange)
+        : true;
+      if (!keepGoing) return;
 
-    if (action) {
-      const responses = [];
-      await Promise.all(
-        acceptedFiles.map(async fileToUpload => {
-          const data = new FormData();
-          data.append("file", fileToUpload);
-          try {
-            const res = await (window.serverApi
-              ? window.serverApi.post(action, data)
-              : fetch(action, {
-                  method: "POST",
-                  body: data
-                }));
-            responses.push(res.data && res.data[0]);
-            onFileSuccess(res.data[0]).then(() => {
+      if (action) {
+        const responses = [];
+        await Promise.all(
+          acceptedFiles.map(async fileToUpload => {
+            const data = new FormData();
+            data.append("file", fileToUpload);
+            try {
+              const res = await (window.serverApi
+                ? window.serverApi.post(action, data)
+                : fetch(action, {
+                    method: "POST",
+                    body: data
+                  }));
+              responses.push(res.data && res.data[0]);
+              onFileSuccess(res.data[0]).then(() => {
+                cleanedFileList = cleanedFileList.map(file => {
+                  const fileToReturn = {
+                    ...file,
+                    ...res.data[0]
+                  };
+                  if (fileToReturn.id === fileToUpload.id) {
+                    fileToReturn.loading = false;
+                  }
+                  return fileToReturn;
+                });
+                onChange(cleanedFileList);
+              });
+            } catch (err) {
+              console.error("Error uploading file:", err);
+              responses.push({
+                ...fileToUpload,
+                error: err && err.msg ? err.msg : err
+              });
               cleanedFileList = cleanedFileList.map(file => {
-                const fileToReturn = {
-                  ...file,
-                  ...res.data[0]
-                };
+                const fileToReturn = { ...file };
                 if (fileToReturn.id === fileToUpload.id) {
                   fileToReturn.loading = false;
+                  fileToReturn.error = true;
                 }
                 return fileToReturn;
               });
               onChange(cleanedFileList);
-            });
-          } catch (err) {
-            console.error("Error uploading file:", err);
-            responses.push({
-              ...fileToUpload,
-              error: err && err.msg ? err.msg : err
-            });
-            cleanedFileList = cleanedFileList.map(file => {
-              const fileToReturn = { ...file };
-              if (fileToReturn.id === fileToUpload.id) {
-                fileToReturn.loading = false;
-                fileToReturn.error = true;
-              }
-              return fileToReturn;
-            });
-            onChange(cleanedFileList);
-          }
-        })
-      );
-      onFieldSubmit(responses);
-    } else {
-      onChange(
-        cleanedFileList.map(function (file) {
-          return {
-            ...file,
-            loading: false
-          };
-        })
-      );
-    }
-    setLoading(false);
-  };
+            }
+          })
+        );
+        onFieldSubmit(responses);
+      } else {
+        onChange(
+          cleanedFileList.map(function (file) {
+            return {
+              ...file,
+              loading: false
+            };
+          })
+        );
+      }
+      setLoading(false);
+    },
+    [action, stableBeforeUpload, onChange, onFieldSubmit, onFileSuccess]
+  );
 
   const isAcceptPromise = useMemo(
     () =>
@@ -337,12 +353,15 @@ const Uploader = ({
     [__accept]
   );
 
-  let dropzoneDisabled = _disabled;
-  let _accept = __accept;
-
-  if (resolvedAccept) {
-    _accept = resolvedAccept;
-  }
+  const _accept = useMemo(() => {
+    if (resolvedAccept) {
+      return resolvedAccept;
+    }
+    if (isAcceptPromise && !resolvedAccept) {
+      return [];
+    }
+    return __accept;
+  }, [__accept, isAcceptPromise, resolvedAccept]);
 
   useEffect(() => {
     if (isAcceptPromise) {
@@ -357,11 +376,9 @@ const Uploader = ({
     }
   }, [__accept, isAcceptPromise]);
 
-  if (isAcceptPromise && !resolvedAccept) {
-    _accept = [];
-  }
-
+  let dropzoneDisabled = disabled;
   if (acceptLoading) dropzoneDisabled = true;
+
   const accept = useMemo(
     () =>
       !_accept

package/src/FormComponents/index.js

@@ -46,6 +46,7 @@ import Uploader from "./Uploader";
 import sortify from "./sortify";
 import { fieldRequired } from "./utils";
 import { useDispatch } from "react-redux";
+import { useStableReference } from "../utils/hooks/useStableReference";
 
 export { fieldRequired };
 
@@ -147,8 +148,8 @@ const AbstractInput = ({
   noFillField,
   noMarginBottom,
   noOuterLabel,
-  onDefaultValChanged,
-  onFieldSubmit,
+  onDefaultValChanged: _onDefaultValChanged,
+  onFieldSubmit: _onFieldSubmit,
   rightEl,
   secondaryLabel,
   setAssignDefaultsMode,
@@ -160,13 +161,16 @@ const AbstractInput = ({
   tooltipProps
 }) => {
   const dispatch = useDispatch();
+  const onDefaultValChanged = useStableReference(_onDefaultValChanged);
+  const onFieldSubmit = useStableReference(_onFieldSubmit);
 
   // This only takes care that the default Value is changed when it is changed in the parent component
   useEffect(() => {
     if (defaultValue !== undefined) {
       dispatch(change(form, name, defaultValue));
-      onDefaultValChanged && onDefaultValChanged(defaultValue, name, form);
-      onFieldSubmit && onFieldSubmit(defaultValue);
+      onDefaultValChanged.current &&
+        onDefaultValChanged.current(defaultValue, name, form);
+      onFieldSubmit.current && onFieldSubmit.current(defaultValue);
     }
   }, [defaultValue, dispatch, form, name, onDefaultValChanged, onFieldSubmit]);
 

package/src/TgSelect/index.js

@@ -126,7 +126,7 @@ class TgSelect extends React.Component {
     e.preventDefault();
     let newValue = null;
     if (multi) {
-      newValue = filter(value, obj => obj.disabled) || [];
+      newValue = filter(value, obj => obj?.disabled) || [];
     } else if (value && value.disabled) {
       newValue = value;
     }

package/src/UploadCsvWizard.js

@@ -11,7 +11,8 @@ import { some } from "lodash-es";
 import { times } from "lodash-es";
 import DialogFooter from "./DialogFooter";
 import DataTable from "./DataTable";
-import { removeCleanRows, useDeepEqualMemo } from "./DataTable/utils";
+import { useDeepEqualMemo } from "./utils/hooks";
+import { removeCleanRows } from "./DataTable/utils";
 import wrapDialog from "./wrapDialog";
 import { omit } from "lodash-es";
 import { useDispatch, useSelector } from "react-redux";

package/src/index.js

@@ -22,7 +22,8 @@ export {
 } from "./DataTable";
 export { removeCleanRows, useTableEntities } from "./DataTable/utils";
 
-export { getIdOrCodeOrIndex, useDeepEqualMemo } from "./DataTable/utils";
+export { useDeepEqualMemo } from "./utils/hooks";
+export { getIdOrCodeOrIndex } from "./DataTable/utils";
 export { default as convertSchema } from "./DataTable/utils/convertSchema";
 export { default as Loading } from "./Loading";
 export { throwFormError } from "./throwFormError";

package/src/utils/hooks/index.js

@@ -0,0 +1 @@
+export { useDeepEqualMemo } from "./useDeepEqualMemo";

package/src/utils/hooks/useDeepEqualMemo.js

@@ -0,0 +1,10 @@
+import { isEqual } from "lodash-es";
+import { useRef } from "react";
+
+export const useDeepEqualMemo = value => {
+  const ref = useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+};

package/src/utils/hooks/useStableReference.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export const useStableReference = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+};

package/utils/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useDeepEqualMemo } from './useDeepEqualMemo';

package/utils/hooks/useDeepEqualMemo.d.ts

@@ -0,0 +1 @@
+export function useDeepEqualMemo(value: any): undefined;

package/utils/hooks/useStableReference.d.ts

@@ -0,0 +1 @@
+export function useStableReference(value: any): import('../../../../../node_modules/react').MutableRefObject<undefined>;

package/FormComponents/AbstractField.d.ts

@@ -1 +0,0 @@
-export function withAbstractWrapper(ComponentToWrap: any, opts?: {}): (props: any) => import("react/jsx-runtime").JSX.Element;