@onewelcome/react-lib-components 8.2.0 → 8.4.0

package/src/hooks/useUploadFile.tsx

@@ -16,22 +16,27 @@
 
 import { FileType } from "../components/Form/FileUpload/FileUpload";
 import { useEffect, useState } from "react";
-import { getValueByPath, isJsonString } from "../util/helper";
+import { isJsonString } from "../util/helper";
 
+export type UploadResponseStatus = XMLHttpRequest["status"];
+export type UploadResponseJson = Record<string, unknown>;
 export interface UploadResponseType {
   fileList: FileType[];
-  status: XMLHttpRequest["status"];
+  status: UploadResponseStatus;
+  responseJson: UploadResponseJson;
+}
+export interface OnErrorMessageMapperType {
+  responseStatus: UploadResponseStatus;
+  responseJson: UploadResponseJson;
 }
 export interface UseUploadFileCallback {
   onComplete?: (response: UploadResponseType) => void;
-  onProgress?: Function;
+  onProgress?: (fileName: string, progress: number) => void;
+  onErrorMessageMapper?: (args: OnErrorMessageMapperType) => string | undefined;
 }
-
 export interface UploadFileRequestParams {
   url: string;
   headers?: Headers;
-  responseErrorPath?: string;
-  networkErrorText?: string;
   withCredentials?: boolean;
 }
 
@@ -40,9 +45,9 @@ export const useUploadFile = (
   request: UploadFileRequestParams,
   callbacks?: UseUploadFileCallback
 ) => {
-  const { url, headers, withCredentials, networkErrorText, responseErrorPath } = request;
+  const { url, headers, withCredentials } = request;
 
-  const { onComplete, onProgress } = callbacks ?? {};
+  const { onComplete, onProgress, onErrorMessageMapper } = callbacks ?? {};
 
   const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);
   const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);
@@ -71,28 +76,24 @@ export const useUploadFile = (
   };
 
   const getFileStatus = (
-    requestStatus: XMLHttpRequest["status"],
-    responseText: XMLHttpRequest["responseText"]
+    responseStatus: UploadResponseStatus,
+    responseJson: UploadResponseJson
   ) => {
     let fileStatus: FileType["status"] = undefined;
     let error = "";
-    const response = responseText && isJsonString(responseText) && JSON.parse(responseText);
-    if (requestStatus >= 200 && requestStatus < 400) {
+    if (responseStatus >= 200 && responseStatus < 400) {
       fileStatus = "completed";
-    } else if (requestStatus === 0) {
+    } else if (responseStatus === 0) {
       fileStatus = "retry";
       error =
-        networkErrorText ?? "Network error. Check internet connection and retry uploading the file";
-    } else if (requestStatus >= 400 && requestStatus < 500) {
+        onErrorMessageMapper?.({ responseStatus, responseJson }) ??
+        "Network error. Check internet connection and retry uploading the file";
+    } else if (responseStatus >= 400 && responseStatus < 500) {
       fileStatus = "error";
-      error =
-        responseErrorPath && response ? getValueByPath(response, responseErrorPath) : "Bad request";
-    } else if (requestStatus >= 500) {
+      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? "Bad request";
+    } else if (responseStatus >= 500) {
       fileStatus = "error";
-      error =
-        responseErrorPath && response
-          ? getValueByPath(response, responseErrorPath)
-          : "Server Error";
+      error = onErrorMessageMapper?.({ responseStatus, responseJson }) ?? "Server Error";
     }
     return { fileStatus, error };
   };
@@ -100,10 +101,11 @@ export const useUploadFile = (
   const handleOnComplete = (xhr: XMLHttpRequest, fileName: string) => {
     const { status, readyState, responseText } = xhr;
     if (readyState === xhr.DONE) {
-      const { fileStatus, error } = getFileStatus(status, responseText);
+      const responseJson = responseText && isJsonString(responseText) && JSON.parse(responseText);
+      const { fileStatus, error } = getFileStatus(status, responseJson);
       const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);
       setUpdatedFiles(updatedList);
-      const response = { fileList: updatedList, status };
+      const response = { fileList: updatedList, status, responseJson };
       setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));
       onComplete?.(response);
     }
@@ -113,9 +115,9 @@ export const useUploadFile = (
     const xhr = new XMLHttpRequest();
     xhr.upload.addEventListener("progress", e => recordProgress(e, file.name));
     xhr.addEventListener("readystatechange", () => handleOnComplete(xhr, file.name));
-    headers?.forEach((value, key) => xhr.setRequestHeader(key, value));
     withCredentials && (xhr.withCredentials = true);
     xhr.open("POST", url, true);
+    headers?.forEach((value, key) => xhr.setRequestHeader(key, value));
     const formData = new FormData();
     formData.append("file", file.data as File);
     formData.append("name", file.name);

package/src/index.ts

@@ -65,8 +65,17 @@ export type {
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
 export { useFullHeightCollapse } from "./hooks/useFullHeightCollapse";
-export { usePosition, Placement } from "./hooks/usePosition";
+export { usePosition } from "./hooks/usePosition";
+export type { Placement } from "./hooks/usePosition";
 export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
+export { useUploadFile } from "./hooks/useUploadFile";
+export type {
+  UploadResponseStatus,
+  UploadResponseJson,
+  UploadResponseType,
+  UseUploadFileCallback,
+  UploadFileRequestParams
+} from "./hooks/useUploadFile";
 export { generateID, debounce, throttle } from "./util/helper";
 
 /* Notifications */
@@ -105,6 +114,16 @@ export type {
 export { SlideInModal } from "./components/Notifications/SlideInModal/SlideInModal";
 export type { Props as SlideInModalProps } from "./components/Notifications/SlideInModal/SlideInModal";
 
+/** SideSheet */
+export { SideSheet } from "./components/Notifications/SideSheet/SideSheet";
+export type { Props as SideSheetProps } from "./components/Notifications/SideSheet/SideSheet";
+export { SideSheetActions } from "./components/Notifications/SideSheet/SideSheetActions/SideSheetActions";
+export type { Props as SideSheetActionsProps } from "./components/Notifications/SideSheet/SideSheetActions/SideSheetActions";
+export { SideSheetContent } from "./components/Notifications/SideSheet/SideSheetContent/SideSheetContent";
+export type { Props as SideSheetContentProps } from "./components/Notifications/SideSheet/SideSheetContent/SideSheetContent";
+export { SideSheetHeader } from "./components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader";
+export type { Props as SideSheetHeaderProps } from "./components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader";
+
 /** Form components */
 export { Checkbox } from "./components/Form/Checkbox/Checkbox";
 export type { Props as CheckboxProps } from "./components/Form/Checkbox/Checkbox";
@@ -149,8 +168,12 @@ export { TextareaWrapper } from "./components/Form/Wrapper/TextareaWrapper/Texta
 export type { Props as TextareaWrapperProps } from "./components/Form/Wrapper/TextareaWrapper/TextareaWrapper";
 export { SelectWrapper } from "./components/Form/Wrapper/SelectWrapper/SelectWrapper";
 export type { Props as SelectWrapperProps } from "./components/Form/Wrapper/SelectWrapper/SelectWrapper";
+
+/* FileUpload */
 export { FileUpload } from "./components/Form/FileUpload/FileUpload";
-export type { Props as FileUploadProps } from "./components/Form/FileUpload/FileUpload";
+export type { Props as FileUploadProps, FileType } from "./components/Form/FileUpload/FileUpload";
+export { FILE_ACTION, ACTION_STATUS } from "./components/Form/FileUpload/FileItem/FileItem";
+
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
@@ -175,10 +198,18 @@ export { DataGridDrawerItem } from "./components/DataGrid/DataGridBody/DataGridD
 export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem";
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
+export { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
+export { FilterKeyMapper } from "./components/DataGrid/DataGridFilters/FilterKeyMapper";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
+
+/** Banner */
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
 
+/** DatePicker */
+export { DatePicker } from "./components/DatePicker/DatePicker";
+export type { Props as DatePickerProps } from "./components/DatePicker/DatePicker";
+
 /** Admin */
 export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";

package/src/mixins.module.scss

@@ -176,10 +176,10 @@
   min-height: 2.5rem;
   cursor: pointer;
 
-  @include transition($transition-property, 0.2s, ease-in-out);
-
   font-family: var(--font-family);
 
+  @include transition($transition-property, 0.2s, ease-in-out);
+
   &#{$disabledSelector} {
     color: var(--greyed-out);
     cursor: not-allowed;
@@ -324,3 +324,16 @@
     }
   }
 }
+
+@mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
+  font-family: $fontFamily;
+  font-size: $fontSize;
+  font-style: normal;
+  font-variant: normal;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--default);
+  margin: 0 0 1rem 0;
+}

package/src/util/helper.tsx

@@ -173,12 +173,6 @@ export const areArraysDifferent = (
   }
 };
 
-export const getValueByPath = (obj: { [key: string]: any }, path: string): any => {
-  return path.split(".").reduce((res, prop) => {
-    return res[prop];
-  }, obj);
-};
-
 /** Source: https://stackoverflow.com/a/42769683/5084110 */
 export const remToPx = (rem: number): number => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);