pixel-react 1.5.4 → 1.5.6

package/src/components/FileDropzone/FileDropzone.tsx

@@ -1,98 +1,106 @@
-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,
-}) => {
-  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.
-  });
-
-  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">
-      <Dropzone
-        icon={icon}
-        primaryLabel={primaryLabel}
-        secondaryLabel={secondaryLabel}
-        buttonLabel={buttonLabel}
-        getRootProps={getRootProps}
-        getInputProps={getInputProps}
-        isDragActive={isDragActive}
-      />
-
-      <div className={'ff-file-details-wrapper'}>
-        {!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 { 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,
+}) => {
+  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.
+  });
+
+  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;

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

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

package/src/components/FileDropzone/types.ts

@@ -1,113 +1,118 @@
-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;
-}
-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;
-}
-
-export interface FilePreviewProps {
-  file: File;
-  error?: string;
-  onRemoveClick: (file: File) => void;
-  onReplaceClick: (file: File) => void;
-}
+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;
+}
+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;
+}

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';
 }