@onewelcome/react-lib-components 1.8.3 → 1.9.1

package/src/_BaseStyling_/BaseStyling.tsx

@@ -19,7 +19,7 @@
  * and make sure to add it to the shouldBeColorPicker array!
  */
 
-import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from "react";
+import React, { HTMLAttributes, ReactChild, useEffect, useRef, useState } from "react";
 
 interface CSSProperties {
   colorFocus?: string;
@@ -193,23 +193,31 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
   const [isLoading, setIsLoading] = useState(true);
+  const baseStylingWrapper = useRef(null);
 
   const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
     for (const [key, value] of Object.entries(CSSPropertiesObject)) {
       const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
-      document.documentElement.style.setProperty(`--${formattedPropertyName}`, value);
+      (baseStylingWrapper.current! as HTMLElement).style.setProperty(
+        `--${formattedPropertyName}`,
+        value
+      );
     }
   };
 
   useEffect(() => {
-    if (Object.keys(properties).length !== 0) {
+    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {
       const mergedState = { ...defaultProperties, ...properties };
       setCSSProperties(mergedState);
-    } else {
+    } else if (baseStylingWrapper.current) {
       setCSSProperties(defaultProperties);
     }
     setIsLoading(false);
-  }, [properties]);
+  }, [properties, baseStylingWrapper.current]);
 
-  return !isLoading ? <Fragment>{children}</Fragment> : null;
+  return (
+    <div className="basestyling-wrapper" ref={baseStylingWrapper}>
+      {!isLoading ? children : null}
+    </div>
+  );
 };

package/src/hooks/useGetDomRoot.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { useEffect, useState } from "react";
+
+export const useGetDomRoot = (
+  passedDomRoot: HTMLElement | undefined,
+  relativeElement: React.RefObject<HTMLDivElement> | null
+) => {
+  const [root, setRoot] = useState<HTMLElement>(document.body);
+
+  useEffect(() => {
+    if (relativeElement && relativeElement.current && !passedDomRoot) {
+      const closestBaseStylingWrapper = relativeElement.current.closest(".basestyling-wrapper");
+
+      if (closestBaseStylingWrapper) {
+        setRoot(closestBaseStylingWrapper as HTMLElement);
+        return;
+      }
+    } else if (passedDomRoot) {
+      setRoot(passedDomRoot);
+      return;
+    }
+  }, [relativeElement]);
+
+  return { root };
+};

package/src/hooks/usePosition.ts

@@ -330,7 +330,8 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
   };
 
   const calculatePosition = useDebouncedCallback(() => {
-    if (!configObject.relativeElement?.current) return;
+    if (!configObject.relativeElement?.current || !configObject.elementToBePositioned?.current)
+      return;
     const relativeElRect = (configObject.relativeElement!
       .current as HTMLElement)!.getBoundingClientRect();
     const elementToBePositionedDimensions: Dimensions = {

package/src/hooks/useUploadFile.test.ts

@@ -101,7 +101,7 @@ describe("it should perform upload", () => {
 
   it("should contain a file with status of error", async () => {
     const response = { code: 404, body: { message: "Error test" } };
-    const mock = setupXhrEnvironment([404, DONE, response]);
+    const mock = setupXhrEnvironment([404, DONE, JSON.stringify(response)]);
     const files3 = [
       {
         name: "test3.txt",
@@ -115,7 +115,7 @@ describe("it should perform upload", () => {
 
   it("should contain a file with status of server error", async () => {
     const response = { code: 500, body: { message: "Error test" } };
-    const mock = setupXhrEnvironment([500, DONE, response]);
+    const mock = setupXhrEnvironment([500, DONE, JSON.stringify(response)]);
     const files6 = [
       {
         name: "test6.txt",

package/src/hooks/useUploadFile.tsx

@@ -16,7 +16,7 @@
 
 import { FileType } from "../Form/FileUpload/FileUpload";
 import { useEffect, useState } from "react";
-import { getValueByPath } from "../util/helper";
+import { getValueByPath, isJsonString } from "../util/helper";
 
 export interface UploadResponseType {
   fileList: FileType[];
@@ -76,6 +76,7 @@ export const useUploadFile = (
   ) => {
     let fileStatus: FileType["status"] = undefined;
     let error = "";
+    const response = responseText && isJsonString(responseText) && JSON.parse(responseText);
     if (requestStatus >= 200 && requestStatus < 400) {
       fileStatus = "completed";
     } else if (requestStatus === 0) {
@@ -83,13 +84,15 @@ export const useUploadFile = (
       error =
         networkErrorText || "Network error. Check internet connection and retry uploading the file";
     } else if (requestStatus >= 400 && requestStatus < 500) {
-      const response = responseText && JSON.parse(JSON.stringify(responseText));
       fileStatus = "error";
-      error = responseErrorPath ? getValueByPath(response, responseErrorPath) : "Bad request";
+      error =
+        responseErrorPath && response ? getValueByPath(response, responseErrorPath) : "Bad request";
     } else if (requestStatus >= 500) {
-      const response = responseText && JSON.parse(JSON.stringify(responseText));
       fileStatus = "error";
-      error = responseErrorPath ? getValueByPath(response, responseErrorPath) : "Server Error";
+      error =
+        responseErrorPath && response
+          ? getValueByPath(response, responseErrorPath)
+          : "Server Error";
     }
     return { fileStatus, error };
   };

package/src/util/helper.test.tsx

@@ -24,7 +24,8 @@ import {
   throttle,
   areArraysDifferent,
   getValueByPath,
-  isEqual
+  isEqual,
+  isJsonString
 } from "./helper";
 import { render } from "@testing-library/react";
 
@@ -337,3 +338,17 @@ describe("pixel to rem function works", () => {
     expect(result).toBe(px);
   });
 });
+
+describe("isJsonString should work", () => {
+  it("should return true when parameter is a valid JSON string", () => {
+    const param = JSON.stringify({ test: 1 });
+
+    expect(isJsonString(param)).toEqual(true);
+  });
+
+  it("should return false when parameter is a valid JSON string", () => {
+    const param = { test: 2 };
+
+    expect(isJsonString(param)).toEqual(false);
+  });
+});

package/src/util/helper.tsx

@@ -181,3 +181,12 @@ export const getValueByPath = (obj: { [key: string]: any }, path: string): any =
 export const remToPx = (rem: number): number => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+
+export const isJsonString = (str: any) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};