pixel-react 1.6.6 → 1.6.8

package/src/components/FileDropzone/types.ts

@@ -1,126 +1,199 @@
-import { ReactNode } from 'react';
-
-export interface FileDropzoneProps {
-  /**
-   *  Icon to be displayed in the dropzone.
-   **/
-  icon?: ReactNode;
-  /**
-   *  Primary label to be shown in dropzone area
-   **/
-  primaryLabel?: string;
-  /**
-   *  Secondary label to be shown
-   **/
-  secondaryLabel?: string;
-  /**
-   *  Label to be shown in choose file/input button.
-   **/
-  buttonLabel?: string;
-  /**
-   *  . extension needs to be passed to allow the type of file to add or MIME type to be validate MIME type
-   **/
-  accept: string[];
-  /**
-   *  To allow multiple selection or drop of files.
-   **/
-  multiple?: boolean;
-  /**
-   *  Maximum files to be dropped or selected at once.
-   **/
-  maxFiles?: number;
-  /**
-   *  Maximum size of the file in numbers.
-   **/
-  maxSize?: number;
-  /**
-   *  Function with state to get the boolean value when the maxFiles is less than dropped files.
-   **/
-  onMaxFilesError?: () => void;
-  /**
-   *  To show error message if file size exceeds the max size
-   **/
-  maxSizeErrorMessage?: string;
-  /**
-   *  To show error message if file is not of accepted file type
-   **/
-  invalidFileMessage?: string;
-  /**
-   *  To show error message if file already exist with same name and type
-   **/
-  fileExistMessage?: string;
-  /**
-   *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
-   **/
-  validateMIMEType?: boolean;
-
-  width?: number | string;
-
-  height?: number | string;
-  /**
-   *  Returns the accepted files in the state
-   **/
-  getAcceptedFiles?: (files: File[]) => void;
-  /**
-   *  Returns the rejected files in the state
-   **/
-  getRejectedFiles?: (files: FileRejection[]) => void;
-}
-export interface FileState {
-  accepted: File[];
-  rejected: FileRejection[];
-}
-export interface FileError {
-  message: string;
-  code: string;
-}
-
-export interface FileRejection {
-  file: File;
-  errors: FileError[];
-}
-
-export interface DropzoneOptions {
-  accept: string[];
-  multiple?: boolean;
-  maxSize?: number;
-  maxFiles?: number | undefined;
-  onDrop?: (
-    acceptedFiles: File[],
-    rejectedFiles: FileRejection[],
-    event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>
-  ) => void;
-  onMaxFilesError?: () => void;
-  maxSizeErrorMessage?: string;
-  invalidFileMessage?: string;
-  fileExistMessage?: string;
-  validateMIMEType?: boolean;
-}
-
-export interface DropzoneState {
-  getRootProps: () => React.HTMLAttributes<HTMLElement>;
-  getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
-  acceptedFiles: File[];
-  rejectedFiles: FileRejection[];
-  isDragActive: boolean;
-  handleRemoveClick: (file: File) => void;
-  handleReplaceClick: (file: File) => void;
-}
-
-export interface DroppableProps {
-  icon: React.ReactNode;
-  primaryLabel: string;
-  secondaryLabel: string;
-  buttonLabel: string;
-  getRootProps: () => any;
-  getInputProps: () => any;
-  isDragActive: boolean;
-  height: number | string;
-}
-
-export interface FilePreviewProps {
-  file: File;
-  error?: string;
-  onRemoveClick: (file: File) => void;
-  onReplaceClick: (file: File) => void;
-}
+import { ReactNode } from 'react';
+export interface RadioOption {
+  label: string;
+  value: string;
+}
+
+export interface FileDropzoneProps {
+  /**
+   *  Icon to be displayed in the dropzone.
+   **/
+  icon?: ReactNode;
+  /**
+   *  Primary label to be shown in dropzone area
+   **/
+  primaryLabel?: string;
+  /**
+   *  Secondary label to be shown
+   **/
+  secondaryLabel?: string;
+  /**
+   *  Label to be shown in choose file/input button.
+   **/
+  buttonLabel?: string;
+  /**
+   *  . extension needs to be passed to allow the type of file to add or MIME type to be validate MIME type
+   **/
+  accept: string[];
+  /**
+   *  To allow multiple selection or drop of files.
+   **/
+  multiple?: boolean;
+  /**
+   *  Maximum files to be dropped or selected at once.
+   **/
+  maxFiles?: number;
+  /**
+   *  Maximum size of the file in numbers.
+   **/
+  maxSize?: number;
+  /**
+   *  Function with state to get the boolean value when the maxFiles is less than dropped files.
+   **/
+  onMaxFilesError?: () => void;
+  /**
+   *  To show error message if file size exceeds the max size
+   **/
+  maxSizeErrorMessage?: string;
+  /**
+   *  To show error message if file is not of accepted file type
+   **/
+  invalidFileMessage?: string;
+  /**
+   *  To show error message if file already exist with same name and type
+   **/
+  fileExistMessage?: string;
+  /**
+   *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
+   **/
+  validateMIMEType?: boolean;
+
+  width?: number | string;
+
+  height?: number | string;
+  /**
+   *  Returns the accepted files in the state
+   **/
+  getAcceptedFiles?: (files: File[]) => void;
+  /**
+   *  Returns the rejected files in the state
+   **/
+  getRejectedFiles?: (files: FileRejection[]) => void;
+
+  /**
+   *  If its used in WebService has some other functionality so need to pass boolean value.
+   **/
+  isWebServiceFileDropZone?: boolean;
+
+  /**
+   *  Its the selected radio option as a string.
+   **/
+  selectedRadioOption?: RadioOption; 
+
+  /**
+   *  Its the array of radio options in pattern of : {  label: string; value: string; }.
+   **/
+  radioOptions?: RadioOption[];
+
+  /**
+   *  Its the function which updates the selected radio option.
+   **/
+  handleOptionChange?: (option: RadioOption)=> void;
+
+  /**
+   *  Its the File Name of File Selected from Local File.
+   **/
+  setSelectedFile?: (file: File | null) => void;
+
+  /**
+   *  Its the File Name of File Selected from Local File.
+   **/
+  selectedFile?: File | null;
+
+  /**
+   *  Its the function which updates the Selected file from Local Directory.
+   **/
+  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   *  Its the function which makes the selected File empty state.
+   **/
+  handleRemoveFile?: () => void;
+
+   /**
+   *  When The Api for the response fails need to show error message.
+   **/
+  isApiResponseError?: boolean;
+
+  /**
+   *  If isDisable is true not able to access the FileDropzone
+   **/
+  isDisable?: boolean;
+
+}
+export interface FileState {
+  accepted: File[];
+  rejected: FileRejection[];
+}
+export interface FileError {
+  message: string;
+  code: string;
+}
+
+export interface FileRejection {
+  file: File;
+  errors: FileError[];
+}
+
+export interface DropzoneOptions {
+  accept: string[];
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number | undefined;
+  onDrop?: (
+    acceptedFiles: File[],
+    rejectedFiles: FileRejection[],
+    event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  onMaxFilesError?: () => void;
+  maxSizeErrorMessage?: string;
+  invalidFileMessage?: string;
+  fileExistMessage?: string;
+  validateMIMEType?: boolean;
+  isApiResponseError?:boolean;
+}
+
+export interface DropzoneState {
+  getRootProps: () => React.HTMLAttributes<HTMLElement>;
+  getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+  acceptedFiles: File[];
+  rejectedFiles: FileRejection[];
+  isDragActive: boolean;
+  handleRemoveClick: (file: File) => void;
+  handleReplaceClick: (file: File) => void;
+}
+
+export interface DroppableProps {
+  icon: React.ReactNode;
+  primaryLabel: string;
+  secondaryLabel: string;
+  buttonLabel: string;
+  getRootProps: () => any;
+  getInputProps: () => any;
+  isDragActive: boolean;
+  height: number | string;
+  isWebServiceFileDropZone?: boolean;
+  selectedRadioOption?: Option, 
+  radioOptions?: RadioOption[],
+  handleOptionChange?: (option: RadioOption)=> void,
+  selectedFile?: File | null,
+  setSelectedFile?: (file: File | null) => void;
+  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleRemoveFile?: () => void;
+  isDisable?: boolean;
+}
+
+export interface FilePreviewProps {
+  file: File;
+  error?: string;
+  onRemoveClick: (file: File) => void;
+  onReplaceClick: (file: File) => void;
+}
+
+export interface RadioFilePreviewProps {
+  selectedFile: string;
+  error?: string;
+  onFileRemoveClick?: () => void;
+  onFileReplaceClick?: (file: File | null) => void;
+  setSelectedFile?: (file: File | null) => void;
+}

package/src/components/Form/Form.d.ts

@@ -1,3 +1,3 @@
-declare module 'Form' {
-    export * from 'react-hook-form';
+declare module 'Form' {
+    export * from 'react-hook-form';
 }

package/src/components/Form/Form.scss

@@ -1,159 +1,159 @@
-@use '../../assets/styles/fonts';
-
-.ff-form-container {
-  @extend .fontSm;
-  background-color: var(--hover-color);
-  border: 1px solid var(--arrows-button-border-color);
-  border-radius: 8px;
-  padding: 20px;
-  width: 400px;
-  margin: 0 auto;
-  display: grid;
-  gap: 8px;
-
-  .ff-form-group {
-    margin-bottom: 16px;
-
-    .ff-label {
-      display: block;
-      margin-bottom: 4px;
-      font-weight: bold;
-    }
-
-    input {
-      width: 94%;
-      padding: 10px;
-      border: 1px solid var(--arrows-button-border-color);
-      border-radius: 8px;
-
-      &:focus {
-        border-color: var(--brand-color);
-      }
-
-      &.ff-error {
-        border-color: var(--ff-error-light);
-      }
-    }
-
-    .ff-error {
-      color: var(--error-light);
-      margin-top: 4px;
-    }
-  }
-
-  .ff-form-group {
-    margin-bottom: 16px;
-
-    .ff-label {
-      display: block;
-      margin-bottom: 4px;
-      font-weight: bold;
-    }
-
-    input,
-    select {
-      width: 94%;
-      padding: 10px;
-      border: 1px solid var(--arrows-button-border-color);
-      border-radius: 8px;
-
-      &:focus {
-        border-color: var(--brand-color);
-      }
-
-      &.ff-error {
-        border-color: var(--ff-error-light); // Ensure red border color
-      }
-    }
-  }
-
-  .ff-form-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 16px;
-
-    .ff-radio-group-wrapper {
-      display: flex;
-    }
-
-    .ff-radio-gender {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      input[type="radio"] {
-        margin-right: 0.5rem;
-      }
-    }
-
-    .ff-error {
-      padding-left: 12px;
-      color: var(--error-light);
-      margin-top: 4px;
-    }
-  }
-
-  .ff-button-layout {
-    width: 99%;
-    display: flex;
-    gap: 12px;
-    margin-top: 24px;
-
-    button {
-      width: 50%;
-      background-color: var(--brand-color);
-      color: var(--primary-button-text-color);
-      border: none;
-      border-radius: 8px;
-      padding: 10px;
-      cursor: pointer;
-    }
-  }
-}
-
-.ff-forms-container {
-  height: 450px;
-  overflow-y: scroll;
-
-  .ff-main {
-    padding: 40px;
-    border-radius: 10px;
-    background-color: var(--tree-connecting-lines-color);
-
-    .ff-error {
-      padding-left: 12px;
-      color: var(--error-light);
-      margin-top: 4px;
-    }
-
-    .ff-radio {
-      margin-top: 8px;
-    }
-
-    .ff-check {
-      display: flex;
-    }
-
-    .ff-textarea {
-      margin-top: 8px;
-    }
-
-    .ff-button-layout {
-      width: 99%;
-      display: flex;
-      gap: 12px;
-      margin-top: 24px;
-
-      button {
-        // width: 50%;
-        background-color: var(--brand-color);
-        color: var(--primary-button-text-color);
-        border: none;
-        border-radius: 8px;
-        padding: 10px;
-        cursor: pointer;
-      }
-    }
-  }
+@use '../../assets/styles/fonts';
+
+.ff-form-container {
+  @extend .fontSm;
+  background-color: var(--hover-color);
+  border: 1px solid var(--arrows-button-border-color);
+  border-radius: 8px;
+  padding: 20px;
+  width: 400px;
+  margin: 0 auto;
+  display: grid;
+  gap: 8px;
+
+  .ff-form-group {
+    margin-bottom: 16px;
+
+    .ff-label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+
+    input {
+      width: 94%;
+      padding: 10px;
+      border: 1px solid var(--arrows-button-border-color);
+      border-radius: 8px;
+
+      &:focus {
+        border-color: var(--brand-color);
+      }
+
+      &.ff-error {
+        border-color: var(--ff-error-light);
+      }
+    }
+
+    .ff-error {
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+  }
+
+  .ff-form-group {
+    margin-bottom: 16px;
+
+    .ff-label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+
+    input,
+    select {
+      width: 94%;
+      padding: 10px;
+      border: 1px solid var(--arrows-button-border-color);
+      border-radius: 8px;
+
+      &:focus {
+        border-color: var(--brand-color);
+      }
+
+      &.ff-error {
+        border-color: var(--ff-error-light); // Ensure red border color
+      }
+    }
+  }
+
+  .ff-form-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 16px;
+
+    .ff-radio-group-wrapper {
+      display: flex;
+    }
+
+    .ff-radio-gender {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      input[type="radio"] {
+        margin-right: 0.5rem;
+      }
+    }
+
+    .ff-error {
+      padding-left: 12px;
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+  }
+
+  .ff-button-layout {
+    width: 99%;
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+
+    button {
+      width: 50%;
+      background-color: var(--brand-color);
+      color: var(--primary-button-text-color);
+      border: none;
+      border-radius: 8px;
+      padding: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.ff-forms-container {
+  height: 450px;
+  overflow-y: scroll;
+
+  .ff-main {
+    padding: 40px;
+    border-radius: 10px;
+    background-color: var(--tree-connecting-lines-color);
+
+    .ff-error {
+      padding-left: 12px;
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+
+    .ff-radio {
+      margin-top: 8px;
+    }
+
+    .ff-check {
+      display: flex;
+    }
+
+    .ff-textarea {
+      margin-top: 8px;
+    }
+
+    .ff-button-layout {
+      width: 99%;
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+
+      button {
+        // width: 50%;
+        background-color: var(--brand-color);
+        color: var(--primary-button-text-color);
+        border: none;
+        border-radius: 8px;
+        padding: 10px;
+        cursor: pointer;
+      }
+    }
+  }
 }