pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/FileDropzone/Dropzone.tsx

@@ -4,6 +4,8 @@ import './FileDropzone.scss';
 import { DroppableProps } from './types';
 import Button from '../Button';
 import Typography from '../Typography';
+import RadioGroup from '../RadioGroup';
+import RadioFilePreview from './RadioFilePreview';
 
 const Dropzone: FC<DroppableProps> = ({
   icon,
@@ -14,42 +16,88 @@ const Dropzone: FC<DroppableProps> = ({
   getInputProps,
   isDragActive = false,
   height = 188,
+  isWebServiceFileDropZone = false,
+  selectedRadioOption,
+  radioOptions,
+  handleOptionChange,
+  selectedFile,
+  setSelectedFile,
+  handleRemoveFile,
+  isDisable,
 }) => {
+  const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return (
     <div
       {...getRootProps()}
       className={classNames('ff-file-dropzone', {
         'ff-file-dropzone--active': isDragActive,
+        'ff-file-dropzone--webservice-file': isWebServiceFile,
+        'ff-file-dropzone--webservice-container': isWebServiceFileDropZone,
       })}
-      style={{height: height}}
+      style={{ height: height }}
     >
-      <div className="ff-file-dropzone-content__icon">{icon}</div>
-      <div className="ff-file-dropzone-content__labels">
-        <Typography
-          as="p"
-          fontWeight="semi-bold"
-          lineHeight="18px"
-          textAlign="center"
-          color={'var(--text-color)'}
-        >
-          {primaryLabel}
-        </Typography>
-        <Typography
-          as="p"
-          lineHeight="18px"
-          textAlign="center"
-          color={'var(--text-color)'}
-        >
-          {secondaryLabel}
-        </Typography>
-        <Button
-          variant="primary"
-          label={buttonLabel}
-          className="choose-file-btn"
-        >
-          <input {...getInputProps()} />
-        </Button>
-      </div>
+      {isWebServiceFile ? (
+        <RadioFilePreview
+          selectedFile={selectedFile.name}
+          onFileRemoveClick={handleRemoveFile}
+          onFileReplaceClick={setSelectedFile}
+          setSelectedFile={setSelectedFile}
+        />
+      ) : (
+        <>
+          <div className="ff-file-dropzone-content__icon">{icon}</div>
+          <div className="ff-file-dropzone-content__labels">
+            <Typography
+              as="p"
+              fontWeight="semi-bold"
+              lineHeight="18px"
+              textAlign="center"
+              color={'var(--text-color)'}
+            >
+              {primaryLabel}
+            </Typography>
+            <Typography
+              as="p"
+              lineHeight="18px"
+              textAlign="center"
+              color={'var(--text-color)'}
+            >
+              {secondaryLabel}
+            </Typography>
+            {isWebServiceFileDropZone ? (
+              <div className="ff-radio-group-wrapper">
+                <Typography fontWeight="semi-bold">
+                  {' '}
+                  Choose file from{' '}
+                </Typography>
+                <RadioGroup
+                  name="radio_btn_file_dropzone"
+                  options={
+                    radioOptions ?? [
+                      { label: 'Default Label', value: 'default_value' },
+                    ]
+                  }
+                  selectedValue={selectedRadioOption?.value}
+                  onChange={handleOptionChange}
+                />
+              </div>
+            ) : (
+              <Button
+                variant="primary"
+                label={buttonLabel}
+                className='choose-file-btn'
+                disabled={isDisable}
+              >
+                <input
+                  {...(isDisable
+                    ? { style: { cursor: 'not-allowed' }, disabled: true }
+                    : getInputProps())}
+                />
+              </Button>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };

package/src/components/FileDropzone/FileDropzone.scss

@@ -30,11 +30,22 @@
     gap: 8px;
     transition: background-color 0.2s ease;
 
+    .ff-radio-group-wrapper {
+      position: relative;
+      bottom: 8px;
+    }
+
     &:hover,
     &--active {
       background-color: var(--file-dropzone-selected-color);
     }
-
+    &--webservice-file {
+      @include center;
+    }
+    &--webservice-container {
+      @include center;
+      padding: 16px 0 40px 0;
+    }
     &-content {
       &__icon {
         height: 80px;
@@ -60,17 +71,18 @@
           }
         }
       }
+      &__webservice-file {
+        padding: 4px;
+      }
     }
   }
 
   .ff-file-details-wrapper {
     @include column-flex-gap(10px);
-    width: 640px;
     max-height: 300px;
     overflow-y: auto;
     scroll-behavior: smooth;
     padding: 2px;
-
     ::-webkit-scrollbar {
       width: 2px;
     }
@@ -134,3 +146,18 @@
     }
   }
 }
+.ff-webservice-file-wrapper {
+  display: flex;
+  gap: 8px;
+  .ff-webservice-file-name {
+    position: relative;
+    bottom: 2px;
+  }
+}
+.ff-input-ref {
+  display: none;
+}
+.ff-disable-file-dropzone-wrapper {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
 import { useState } from 'react';
+import { RadioOption } from './types';
+import Drawer from '../Drawer/Drawer';
+import Typography from '../Typography';
+import './FileDropzone.scss';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -59,13 +63,13 @@ export const Controlled: Story = {
       }, 2000);
     };
 
-    const getAcceptedFiles = (files) => { 
+    const getAcceptedFiles = (files) => {
       setAcceptedFiles(files);
-    }
+    };
 
     const getRejectedFiles = (files) => {
       setRejectedFiles(files);
-    }
+    };
 
     return (
       <>
@@ -81,6 +85,103 @@ export const Controlled: Story = {
           onMaxFilesError={showMaxFilesError}
           getAcceptedFiles={getAcceptedFiles}
           getRejectedFiles={getRejectedFiles}
+          isApiResponseError
+        />
+        {showToaster && (
+          <Toaster
+            isOpen={showToaster}
+            variant="danger"
+            toastTitle="Error"
+            toastMessage={'Max 5 files can be uploaded'}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export const WithRadioButton: Story = {
+  render: () => {
+    const [showToaster, setShowToaster] = useState<boolean>(false);
+    const [showModal, setShowModal] = useState(false);
+
+    const [selectedRadioOption, setSelectedRadioOption] =
+      useState<RadioOption>();
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+    const drawerArgs = {
+      primaryButtonProps: {
+        label: 'Create',
+        variant: 'primary',
+        disabled: false,
+        onClick: () => {},
+      },
+      secondaryButtonProps: {
+        label: 'Cancel',
+        variant: 'secondary',
+        disabled: false,
+        onClick: () => {},
+      },
+    };
+
+    useEffect(() => {
+      if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    }, [selectedRadioOption]);
+
+    const radioOptions: RadioOption[] = [
+      { value: 'Test Data', label: 'Test Data' },
+      { value: 'Local File', label: 'Local File' },
+    ];
+    const handleOptionChange = (option: RadioOption) => {
+      setSelectedRadioOption(option);
+      if (option.value === 'Test Data') {
+        setShowModal(true);
+      } else {
+        setShowModal(false);
+      }
+    };
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        setSelectedFile(file);
+      }
+    };
+
+    const handleRemoveFile = () => {
+      setSelectedFile(null);
+    };
+
+    const showMaxFilesError = () => {
+      setShowToaster(true);
+      setTimeout(() => {
+        setShowToaster(false);
+      }, 2000);
+    };
+
+    return (
+      <>
+        <FileDropzone
+          {...defaultArgs}
+          accept={[
+            'image/png',
+            'image/jpeg',
+            'application/x-zip-compressed',
+            'application/zip',
+          ]}
+          validateMIMEType={true}
+          onMaxFilesError={showMaxFilesError}
+          isWebServiceFileDropZone
+          selectedRadioOption={selectedRadioOption}
+          radioOptions={radioOptions}
+          handleOptionChange={handleOptionChange}
+          setSelectedFile={setSelectedFile}
+          selectedFile={selectedFile}
+          handleFileChange={handleFileChange}
+          handleRemoveFile={handleRemoveFile}
         />
         {showToaster && (
           <Toaster
@@ -90,6 +191,26 @@ export const Controlled: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
+        {selectedRadioOption?.value === 'Local File' ? (
+          <input
+            ref={fileInputRef}
+            type="file"
+            className='ff-input-ref'
+            onChange={handleFileChange}
+            accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
+          />
+        ) : (
+          <Drawer
+            {...drawerArgs}
+            isOpen={showModal}
+            onClose={() => setShowModal(false)}
+            isFooterRequired={true}
+            _isExpanded={false}
+            size="small"
+          >
+            <Typography>Upload TestData Files Here</Typography>
+          </Drawer>
+        )}
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -3,9 +3,10 @@ import { FileDropzoneProps } from './types';
 import './FileDropzone.scss';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
+import classNames from 'classnames';
 
 const FileDropzone: React.FC<FileDropzoneProps> = ({
   icon = (
@@ -27,6 +28,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   height = 188,
   getAcceptedFiles = () => {},
   getRejectedFiles = () => {},
+  isWebServiceFileDropZone = false,
+  selectedRadioOption,
+  radioOptions,
+  handleOptionChange,
+  selectedFile,
+  setSelectedFile,
+  handleFileChange,
+  handleRemoveFile,
+  isApiResponseError = false,
+  isDisable = false,
 }) => {
   const {
     getRootProps,
@@ -46,6 +57,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     invalidFileMessage,
     fileExistMessage,
     validateMIMEType,
+    isApiResponseError,
     // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
   });
 
@@ -65,6 +77,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     [acceptedFiles, handleRemoveClick, handleReplaceClick]
   );
 
+  useEffect(() => {
+    if (!checkEmpty(acceptedFiles) && setSelectedFile) {
+      setSelectedFile(acceptedFiles[0] || null);
+    }    
+  }, [acceptedFiles, setSelectedFile]);  
+
   const rejectedFilesList = useMemo(
     () =>
       rejectedFiles.map((rejectedFile) => (
@@ -80,7 +98,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   );
 
   return (
-    <div className="ff-file-dropzone-wrapper" style={{ width: `${width}px` }}>
+    <div className={classNames('ff-file-dropzone-wrapper',
+      {'ff-disable-file-dropzone-wrapper': isDisable,}
+    )} style={{ width: `${width}px` }}>
       <Dropzone
         icon={icon}
         primaryLabel={primaryLabel}
@@ -90,20 +110,33 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         getInputProps={getInputProps}
         isDragActive={isDragActive}
         height={`${height}px`}
+        isWebServiceFileDropZone={isWebServiceFileDropZone}
+        selectedRadioOption={selectedRadioOption}
+        radioOptions={
+          radioOptions ?? [{ label: 'Default Label', value: 'default_value' }]
+        }
+        handleOptionChange={handleOptionChange}
+        selectedFile={selectedFile}
+        handleFileChange={handleFileChange}
+        handleRemoveFile={handleRemoveFile}
+        setSelectedFile={setSelectedFile}
+        isDisable={isDisable}
       />
 
-      <div
-        className={'ff-file-details-wrapper'}
-        style={{ width: `${width}px` }}
-      >
-        {!checkEmpty(acceptedFiles) && (
-          <div className="ff-file-details">{acceptedFilesList}</div>
-        )}
+      {isWebServiceFileDropZone ? null : (
+        <div
+          className={'ff-file-details-wrapper'}
+          style={{ width: `${width}px` }}
+        >
+          {!checkEmpty(acceptedFiles) && (
+            <div className="ff-file-details">{acceptedFilesList}</div>
+          )}
 
-        {!checkEmpty(rejectedFiles) && (
-          <div className="ff-file-details">{rejectedFilesList}</div>
-        )}
-      </div>
+          {!checkEmpty(rejectedFiles) && (
+            <div className="ff-file-details">{rejectedFilesList}</div>
+          )}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -0,0 +1,76 @@
+import './FileDropzone.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { RadioFilePreviewProps } from './types';
+import Typography from '../Typography';
+import { useRef } from 'react';
+
+const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
+  selectedFile,
+  onFileRemoveClick,
+  onFileReplaceClick
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleReplaceClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileReplaceClick?.(file);
+    }
+  };
+  return (
+    <div className="ff-webservice-file-wrapper">
+      <div className="ff-file-info">
+        <>
+          <Tooltip title={selectedFile}>
+            <Typography
+              lineHeight="18px"
+              fontWeight="semi-bold"
+              color={'var(--text-color)'}
+              className="ff-webservice-file-name"
+            >
+              {selectedFile}
+            </Typography>
+          </Tooltip>
+        </>
+      </div>
+      <>
+        <Tooltip title="Remove">
+          <Icon
+            name="close"
+            height={12}
+            width={12}
+            hoverEffect
+            onClick={onFileRemoveClick}
+          />
+        </Tooltip>
+      </>
+      <>
+        <Tooltip title="Replace">
+          <Icon
+            name="replace_file"
+            color={'var(--icons-default-color)'}
+            height={16}
+            width={16}
+            hoverEffect
+            onClick={handleReplaceClick}
+          />
+        </Tooltip>
+        <input
+        type="file"
+        ref={fileInputRef}
+        className='ff-input-ref'
+        onChange={handleFileChange}
+      />
+      </>
+    </div>
+  );
+};
+
+export default RadioFilePreview;

package/src/components/FileDropzone/types.ts

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react';
+export interface RadioOption {
+  label: string;
+  value: string;
+}
 
 export interface FileDropzoneProps {
   /**
@@ -65,6 +69,57 @@ export interface FileDropzoneProps {
    *  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[];
@@ -95,6 +150,7 @@ export interface DropzoneOptions {
   invalidFileMessage?: string;
   fileExistMessage?: string;
   validateMIMEType?: boolean;
+  isApiResponseError?:boolean;
 }
 
 export interface DropzoneState {
@@ -116,6 +172,15 @@ export interface DroppableProps {
   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 {
@@ -124,3 +189,11 @@ export interface FilePreviewProps {
   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;
+}