pixel-react 1.6.7 → 1.6.9

package/src/components/FileDropzone/FileDropzone.tsx

@@ -1,111 +1,144 @@
-import useFileDropzone from '../../hooks/useFileDropzone';
-import { FileDropzoneProps } from './types';
-import './FileDropzone.scss';
-import Icon from '../Icon';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useMemo } from 'react';
-import Dropzone from './Dropzone';
-import FilePreview from './FilePreview';
-
-const FileDropzone: React.FC<FileDropzoneProps> = ({
-  icon = (
-    <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />
-  ),
-  primaryLabel = 'Drag & drop your file to upload',
-  secondaryLabel = 'Or',
-  buttonLabel = 'Choose File to upload',
-  accept = [],
-  multiple = false,
-  maxFiles,
-  maxSize,
-  onMaxFilesError,
-  maxSizeErrorMessage = '',
-  invalidFileMessage = '',
-  fileExistMessage = '',
-  validateMIMEType = false,
-  width = 640,
-  height = 188,
-  getAcceptedFiles = () => {},
-  getRejectedFiles = () => {},
-}) => {
-  const {
-    getRootProps,
-    getInputProps,
-    acceptedFiles,
-    rejectedFiles,
-    isDragActive,
-    handleRemoveClick,
-    handleReplaceClick,
-  } = useFileDropzone({
-    accept,
-    multiple,
-    maxFiles,
-    maxSize,
-    onMaxFilesError,
-    maxSizeErrorMessage,
-    invalidFileMessage,
-    fileExistMessage,
-    validateMIMEType,
-    // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
-  });
-
-  getAcceptedFiles(acceptedFiles);
-  getRejectedFiles(rejectedFiles);
-
-  const acceptedFilesList = useMemo(
-    () =>
-      acceptedFiles.map((file) => (
-        <FilePreview
-          key={file.name}
-          file={file}
-          onRemoveClick={handleRemoveClick}
-          onReplaceClick={handleReplaceClick}
-        />
-      )),
-    [acceptedFiles, handleRemoveClick, handleReplaceClick]
-  );
-
-  const rejectedFilesList = useMemo(
-    () =>
-      rejectedFiles.map((rejectedFile) => (
-        <FilePreview
-          key={rejectedFile.file.name}
-          file={rejectedFile.file}
-          error={rejectedFile.errors[0]?.message}
-          onRemoveClick={handleRemoveClick}
-          onReplaceClick={handleReplaceClick}
-        />
-      )),
-    [rejectedFiles, handleRemoveClick, handleReplaceClick]
-  );
-
-  return (
-    <div className="ff-file-dropzone-wrapper" style={{ width: `${width}px` }}>
-      <Dropzone
-        icon={icon}
-        primaryLabel={primaryLabel}
-        secondaryLabel={secondaryLabel}
-        buttonLabel={buttonLabel}
-        getRootProps={getRootProps}
-        getInputProps={getInputProps}
-        isDragActive={isDragActive}
-        height={`${height}px`}
-      />
-
-      <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>
-    </div>
-  );
-};
-
-export default FileDropzone;
+import useFileDropzone from '../../hooks/useFileDropzone';
+import { FileDropzoneProps } from './types';
+import './FileDropzone.scss';
+import Icon from '../Icon';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import { useEffect, useMemo } from 'react';
+import Dropzone from './Dropzone';
+import FilePreview from './FilePreview';
+import classNames from 'classnames';
+
+const FileDropzone: React.FC<FileDropzoneProps> = ({
+  icon = (
+    <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />
+  ),
+  primaryLabel = 'Drag & drop your file to upload',
+  secondaryLabel = 'Or',
+  buttonLabel = 'Choose File to upload',
+  accept = [],
+  multiple = false,
+  maxFiles,
+  maxSize,
+  onMaxFilesError,
+  maxSizeErrorMessage = '',
+  invalidFileMessage = '',
+  fileExistMessage = '',
+  validateMIMEType = false,
+  width = 640,
+  height = 188,
+  getAcceptedFiles = () => {},
+  getRejectedFiles = () => {},
+  isWebServiceFileDropZone = false,
+  selectedRadioOption,
+  radioOptions,
+  handleOptionChange,
+  selectedFile,
+  setSelectedFile,
+  handleFileChange,
+  handleRemoveFile,
+  isApiResponseError = false,
+  isDisable = false,
+}) => {
+  const {
+    getRootProps,
+    getInputProps,
+    acceptedFiles,
+    rejectedFiles,
+    isDragActive,
+    handleRemoveClick,
+    handleReplaceClick,
+  } = useFileDropzone({
+    accept,
+    multiple,
+    maxFiles,
+    maxSize,
+    onMaxFilesError,
+    maxSizeErrorMessage,
+    invalidFileMessage,
+    fileExistMessage,
+    validateMIMEType,
+    isApiResponseError,
+    // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
+  });
+
+  getAcceptedFiles(acceptedFiles);
+  getRejectedFiles(rejectedFiles);
+
+  const acceptedFilesList = useMemo(
+    () =>
+      acceptedFiles.map((file) => (
+        <FilePreview
+          key={file.name}
+          file={file}
+          onRemoveClick={handleRemoveClick}
+          onReplaceClick={handleReplaceClick}
+        />
+      )),
+    [acceptedFiles, handleRemoveClick, handleReplaceClick]
+  );
+
+  useEffect(() => {
+    if (!checkEmpty(acceptedFiles) && setSelectedFile) {
+      setSelectedFile(acceptedFiles[0] || null);
+    }    
+  }, [acceptedFiles, setSelectedFile]);  
+
+  const rejectedFilesList = useMemo(
+    () =>
+      rejectedFiles.map((rejectedFile) => (
+        <FilePreview
+          key={rejectedFile.file.name}
+          file={rejectedFile.file}
+          error={rejectedFile.errors[0]?.message}
+          onRemoveClick={handleRemoveClick}
+          onReplaceClick={handleReplaceClick}
+        />
+      )),
+    [rejectedFiles, handleRemoveClick, handleReplaceClick]
+  );
+
+  return (
+    <div className={classNames('ff-file-dropzone-wrapper',
+      {'ff-disable-file-dropzone-wrapper': isDisable,}
+    )} style={{ width: `${width}px` }}>
+      <Dropzone
+        icon={icon}
+        primaryLabel={primaryLabel}
+        secondaryLabel={secondaryLabel}
+        buttonLabel={buttonLabel}
+        getRootProps={getRootProps}
+        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}
+      />
+
+      {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>
+      )}
+    </div>
+  );
+};
+
+export default FileDropzone;

package/src/components/FileDropzone/FilePreview.tsx

@@ -1,77 +1,77 @@
-import './FileDropzone.scss';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import { FilePreviewProps } from './types';
-import Typography from '../Typography';
-
-const FilePreview: React.FC<FilePreviewProps> = ({
-  file,
-  error,
-  onRemoveClick,
-  onReplaceClick,
-}) => {
-  return (
-    <div key={file.name} className="ff-file-details__item">
-      <div className="ff-file-info">
-        <div className="ff-file-info__icon">
-          <Icon
-            name="file"
-            color={'var(--icons-default-color)'}
-            height={16}
-            width={16}
-          />
-        </div>
-        <div className="ff-file-info__name-wrapper">
-          <Tooltip title={file?.name}>
-            <Typography
-              lineHeight="18px"
-              fontWeight="semi-bold"
-              color={'var(--text-color)'}
-              className="ff-file-info__name-wrapper__name"
-            >
-              {file?.name}
-            </Typography>
-          </Tooltip>
-          {error && (
-            <Typography
-              fontSize={8}
-              color={'var(--error-light)'}
-              lineHeight="12px"
-              letterSpacing="0.5px"
-            >
-              {error}
-            </Typography>
-          )}
-        </div>
-      </div>
-      <div className="ff-file-actions">
-        <div className="ff-file-actions__icon-replace">
-          <Tooltip title="Replace">
-            <Icon
-              name="replace_file"
-              color={'var(--icons-default-color)'}
-              height={16}
-              width={16}
-              hoverEffect
-              onClick={() => onReplaceClick(file)}
-            />
-          </Tooltip>
-        </div>
-        <div className="ff-file-actions__icon-remove">
-          <Tooltip title="Remove">
-            <Icon
-              name="close"
-              height={16}
-              width={16}
-              hoverEffect
-              color={'var(--default-icon-color)'}
-              onClick={() => onRemoveClick(file)}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FilePreview;
+import './FileDropzone.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { FilePreviewProps } from './types';
+import Typography from '../Typography';
+
+const FilePreview: React.FC<FilePreviewProps> = ({
+  file,
+  error,
+  onRemoveClick,
+  onReplaceClick,
+}) => {
+  return (
+    <div key={file.name} className="ff-file-details__item">
+      <div className="ff-file-info">
+        <div className="ff-file-info__icon">
+          <Icon
+            name="file"
+            color={'var(--icons-default-color)'}
+            height={16}
+            width={16}
+          />
+        </div>
+        <div className="ff-file-info__name-wrapper">
+          <Tooltip title={file?.name}>
+            <Typography
+              lineHeight="18px"
+              fontWeight="semi-bold"
+              color={'var(--text-color)'}
+              className="ff-file-info__name-wrapper__name"
+            >
+              {file?.name}
+            </Typography>
+          </Tooltip>
+          {error && (
+            <Typography
+              fontSize={8}
+              color={'var(--error-light)'}
+              lineHeight="12px"
+              letterSpacing="0.5px"
+            >
+              {error}
+            </Typography>
+          )}
+        </div>
+      </div>
+      <div className="ff-file-actions">
+        <div className="ff-file-actions__icon-replace">
+          <Tooltip title="Replace">
+            <Icon
+              name="replace_file"
+              color={'var(--icons-default-color)'}
+              height={16}
+              width={16}
+              hoverEffect
+              onClick={() => onReplaceClick(file)}
+            />
+          </Tooltip>
+        </div>
+        <div className="ff-file-actions__icon-remove">
+          <Tooltip title="Remove">
+            <Icon
+              name="close"
+              height={16}
+              width={16}
+              hoverEffect
+              color={'var(--default-icon-color)'}
+              onClick={() => onRemoveClick(file)}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilePreview;

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/index.ts

@@ -1 +1 @@
-export { default } from './FileDropzone';
+export { default } from './FileDropzone';