@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/upload-new.tsx

@@ -0,0 +1,301 @@
+import {
+  IconCheck,
+  IconFile,
+  IconFileSpreadsheet,
+  IconFileText,
+  IconFileZip,
+  IconHeadphones,
+  IconPhoto,
+  IconUpload,
+  IconVideo,
+  IconX,
+} from '@tabler/icons-react';
+import { UseErxesUploadReturn } from 'erxes-ui/hooks/use-upload-new';
+import { cn } from 'erxes-ui/lib';
+import { createContext, useCallback, useContext } from 'react';
+import { Spinner } from './spinner';
+import { Button } from './button';
+
+export const getFileIcon = (fileType: string, fileName: string) => {
+  if (
+    fileType.includes('pdf') ||
+    fileName.endsWith('.pdf') ||
+    fileType.includes('word') ||
+    fileName.endsWith('.doc') ||
+    fileName.endsWith('.docx')
+  ) {
+    return <IconFileText className="size-4 opacity-60" />;
+  } else if (
+    fileType.includes('zip') ||
+    fileType.includes('archive') ||
+    fileName.endsWith('.zip') ||
+    fileName.endsWith('.rar')
+  ) {
+    return <IconFileZip className="size-4 opacity-60" />;
+  } else if (
+    fileType.includes('excel') ||
+    fileName.endsWith('.xls') ||
+    fileName.endsWith('.xlsx')
+  ) {
+    return <IconFileSpreadsheet className="size-4 opacity-60" />;
+  } else if (fileType.includes('video/')) {
+    return <IconVideo className="size-4 opacity-60" />;
+  } else if (fileType.includes('audio/')) {
+    return <IconHeadphones className="size-4 opacity-60" />;
+  } else if (fileType.startsWith('image/')) {
+    return <IconPhoto className="size-4 opacity-60" />;
+  }
+  return <IconFile className="size-4 opacity-60" />;
+};
+
+export const formatBytes = (
+  bytes: number,
+  decimals = 2,
+  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB',
+) => {
+  const k = 1000;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  if (bytes === 0 || bytes === undefined)
+    return size !== undefined ? `0 ${size}` : '0 bytes';
+  const i =
+    size !== undefined
+      ? sizes.indexOf(size)
+      : Math.floor(Math.log(bytes) / Math.log(k));
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+type DropzoneContextType = Omit<
+  UseErxesUploadReturn,
+  'getRootProps' | 'getInputProps'
+>;
+
+const DropzoneContext = createContext<DropzoneContextType | undefined>(
+  undefined,
+);
+
+type DropzoneProps = UseErxesUploadReturn & {
+  className?: string;
+};
+
+const Dropzone = ({
+  className,
+  children,
+  getRootProps,
+  getInputProps,
+  ...restProps
+}: React.PropsWithChildren<DropzoneProps>) => {
+  const isSuccess = restProps.isSuccess;
+  const isActive = restProps.isDragActive;
+  const isInvalid =
+    (restProps.isDragActive && restProps.isDragReject) ||
+    (restProps.errors.length > 0 && !restProps.isSuccess) ||
+    restProps.files.some((file) => file.errors.length !== 0);
+
+  return (
+    <DropzoneContext.Provider value={{ ...restProps }}>
+      <div
+        {...getRootProps({
+          className: cn(
+            'shadow-xs rounded-lg p-6 text-center bg-sidebar transition-colors duration-300 text-foreground',
+            className,
+            isSuccess && 'shadow-focus',
+            isActive && 'shadow-focus bg-muted',
+            isInvalid && 'bg-destructive/10',
+          ),
+        })}
+      >
+        <input {...getInputProps()} />
+        {children}
+      </div>
+    </DropzoneContext.Provider>
+  );
+};
+const DropzoneContent = ({ className }: { className?: string }) => {
+  const {
+    files,
+    setFiles,
+    onUpload,
+    loading,
+    successes,
+    errors,
+    maxFileSize,
+    maxFiles,
+    isSuccess,
+  } = useDropzoneContext();
+
+  const exceedMaxFiles = files.length > maxFiles;
+
+  const handleRemoveFile = useCallback(
+    (fileName: string) => {
+      setFiles(files.filter((file) => file.name !== fileName));
+    },
+    [files, setFiles],
+  );
+
+  if (isSuccess) {
+    return (
+      <div
+        className={cn(
+          'flex flex-row items-center gap-x-2 justify-center',
+          className,
+        )}
+      >
+        <IconCheck size={16} className="text-primary" />
+        <p className="text-primary text-sm">
+          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      {files.map((file, idx) => {
+        const fileError = errors.find((e) => e.name === file.name);
+        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name);
+
+        return (
+          <div
+            key={`${file.name}-${idx}`}
+            className="flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 "
+          >
+            {file.type.startsWith('image/') ? (
+              <div className="h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center">
+                <img
+                  src={file.preview}
+                  alt={file.name}
+                  className="object-cover"
+                />
+              </div>
+            ) : (
+              <div className="h-10 w-10 rounded border bg-muted flex items-center justify-center">
+                {getFileIcon(file.type, file.name)}
+              </div>
+            )}
+
+            <div className="shrink grow flex flex-col items-start truncate">
+              <p title={file.name} className="text-sm truncate max-w-full">
+                {file.name}
+              </p>
+              {file.errors.length > 0 ? (
+                <p className="text-xs text-destructive">
+                  {file.errors
+                    .map((e) =>
+                      e.message.startsWith('File is larger than')
+                        ? `File is larger than ${formatBytes(
+                            maxFileSize,
+                            2,
+                          )} (Size: ${formatBytes(file.size, 2)})`
+                        : e.message,
+                    )
+                    .join(', ')}
+                </p>
+              ) : loading && !isSuccessfullyUploaded ? (
+                <p className="text-xs text-muted-foreground">
+                  Uploading file...
+                </p>
+              ) : fileError ? (
+                <p className="text-xs text-destructive">
+                  Failed to upload: {fileError.message}
+                </p>
+              ) : isSuccessfullyUploaded ? (
+                <p className="text-xs text-primary">
+                  Successfully uploaded file
+                </p>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  {formatBytes(file.size, 2)}
+                </p>
+              )}
+            </div>
+
+            {!loading && !isSuccessfullyUploaded && (
+              <Button
+                size="icon"
+                variant="link"
+                className="shrink-0 justify-self-end text-muted-foreground hover:text-foreground"
+                onClick={() => handleRemoveFile(file.name)}
+              >
+                <IconX />
+              </Button>
+            )}
+          </div>
+        );
+      })}
+      {exceedMaxFiles && (
+        <p className="text-sm text-left mt-2 text-destructive">
+          You may upload only up to {maxFiles} files, please remove{' '}
+          {files.length - maxFiles} file
+          {files.length - maxFiles > 1 ? 's' : ''}.
+        </p>
+      )}
+      {files.length > 0 && !exceedMaxFiles && (
+        <div className="mt-2">
+          <Button
+            variant="outline"
+            onClick={onUpload}
+            disabled={files.some((file) => file.errors.length !== 0) || loading}
+          >
+            {loading ? (
+              <>
+                <Spinner className="mr-2 h-4 w-4 animate-spin" />
+                Uploading...
+              </>
+            ) : (
+              <>Upload files</>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DropzoneEmptyState = ({ className }: { className?: string }) => {
+  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext();
+
+  if (isSuccess) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex flex-col items-center gap-y-2', className)}>
+      <IconUpload size={20} className="text-muted-foreground" />
+      <p className="text-sm">
+        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file
+        {!maxFiles || maxFiles > 1 ? 's' : ''}
+      </p>
+      <div className="flex flex-col items-center gap-y-1">
+        <p className="text-xs text-muted-foreground">
+          Drag and drop or{' '}
+          <span
+            onClick={() => inputRef.current?.click()}
+            className="underline cursor-pointer transition hover:text-foreground"
+          >
+            select {maxFiles === 1 ? `file` : 'files'}
+          </span>{' '}
+          to upload
+        </p>
+        {maxFileSize !== Number.POSITIVE_INFINITY && (
+          <p className="text-xs text-muted-foreground">
+            Maximum file size: {formatBytes(maxFileSize, 2)}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const useDropzoneContext = () => {
+  const context = useContext(DropzoneContext);
+
+  if (!context) {
+    throw new Error('useDropzoneContext must be used within a Dropzone');
+  }
+
+  return context;
+};
+
+export { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext };

package/src/components/upload.tsx

@@ -0,0 +1,335 @@
+import { Button, Dialog, Spinner } from 'erxes-ui/components';
+import { IconTrash, IconUpload, IconUserCircle } from '@tabler/icons-react';
+import React, {
+  MutableRefObject,
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from 'react';
+
+import { ButtonProps } from './button';
+import { cn } from '../lib/utils';
+import { readImage } from 'erxes-ui/utils/core';
+import { useToast, useUpload } from 'erxes-ui/hooks';
+import { useTranslation } from 'react-i18next';
+
+type IUploadContext = {
+  url: string | undefined;
+  multiple?: boolean;
+  onChange: (value: any) => void;
+  setPreviewUrl: (previewUrl: string | undefined) => void;
+  previewRef: MutableRefObject<string | null>;
+  fileInputRef: MutableRefObject<HTMLInputElement | null>;
+  handleThumbnailClick: () => void;
+  ImageFocus: () => void;
+  isImageFocused: boolean;
+  setIsImageFocused: (isImageFocused: boolean) => void;
+};
+
+const UploadContext = createContext<IUploadContext | null>(null);
+
+type UploadPreviewProps = {
+  value: string;
+  onChange: (value: { url: string; fileInfo: any }) => void;
+  multiple?: boolean;
+} & React.ComponentPropsWithoutRef<'div'>;
+
+const UploadRoot = React.forwardRef<HTMLDivElement, UploadPreviewProps>(
+  ({ className, value, onChange, multiple, ...rest }, ref) => {
+    const previewRef = useRef<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const [previewUrl, setPreviewUrl] = useState<string | undefined>();
+
+    const url = previewUrl || value;
+
+    const [isImageFocused, setIsImageFocused] = useState(false);
+
+    const handleThumbnailClick = useCallback(() => {
+      fileInputRef.current?.click();
+    }, []);
+
+    const ImageFocus = useCallback(() => {
+      setIsImageFocused(true);
+    }, []);
+
+    return (
+      <UploadContext.Provider
+        value={{
+          url,
+          multiple,
+          onChange,
+          fileInputRef,
+          previewRef,
+          setPreviewUrl,
+          handleThumbnailClick,
+          ImageFocus,
+          isImageFocused,
+          setIsImageFocused,
+        }}
+      >
+        <Dialog open={isImageFocused} onOpenChange={setIsImageFocused}>
+          <Dialog.Portal>
+            <Dialog.Overlay className="fixed inset-0 bg-accent" />
+            <Dialog.Content className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] max-w-none w-auto bg-transparent border-0 p-0">
+              <img
+                src={readImage(url)}
+                alt="Focused view"
+                className="max-h-[90vh] max-w-[90vw] object-contain"
+              />
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog>
+        <div ref={ref} className={cn('flex gap-4', className)} {...rest} />
+      </UploadContext.Provider>
+    );
+  },
+);
+
+UploadRoot.displayName = 'UploadRoot';
+
+type UploadPreviewPropsExtended = React.ComponentPropsWithoutRef<'div'> & {
+  onUploadStart?: (fileCount?: number) => void;
+  onUploadProgress?: () => void;
+  onAllUploadsComplete?: () => void;
+};
+const UploadPreview = React.forwardRef<
+  HTMLDivElement,
+  UploadPreviewPropsExtended
+>(
+  (
+    {
+      className,
+      onUploadStart,
+      onUploadProgress,
+      onAllUploadsComplete,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isLoading, upload } = useUpload();
+
+    const uploadContext = useContext(UploadContext);
+
+    if (!uploadContext) {
+      throw new Error('UploadContext must be used within an UploadRoot');
+    }
+
+    const {
+      url,
+      multiple,
+      onChange,
+      setPreviewUrl,
+      fileInputRef,
+      previewRef,
+      handleThumbnailClick,
+      ImageFocus,
+    } = uploadContext;
+
+    const totalFilesCountRef = useRef(0);
+    const finishedFilesCountRef = useRef(0);
+
+    const handleFileChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { files } = event.target;
+
+        if (!files || files.length === 0) return;
+
+        if (previewRef.current) {
+          URL.revokeObjectURL(previewRef.current);
+        }
+
+        totalFilesCountRef.current = files.length;
+        finishedFilesCountRef.current = 0;
+
+        onUploadStart?.(files.length || 0);
+
+        upload({
+          files,
+
+          afterUpload: ({ response, fileInfo }) => {
+            onChange?.({ url: response, ...fileInfo });
+
+            finishedFilesCountRef.current += 1;
+            onUploadProgress?.();
+
+            if (finishedFilesCountRef.current === totalFilesCountRef.current) {
+              // All files uploaded, fire batch upload end (once)
+              onAllUploadsComplete?.();
+            }
+          },
+
+          afterRead: ({ result }) => {
+            setPreviewUrl(result);
+          },
+        });
+      },
+      [
+        previewRef,
+        upload,
+        onChange,
+        setPreviewUrl,
+        onUploadStart,
+        onUploadProgress,
+        onAllUploadsComplete,
+      ],
+    );
+
+    return (
+      <>
+        <div className={cn('relative inline-flex', className)}>
+          <Button
+            type="button"
+            variant="outline"
+            className="relative size-16 overflow-hidden"
+            onClick={!url ? handleThumbnailClick : ImageFocus}
+            aria-label={url ? 'Change image' : 'Upload image'}
+          >
+            {isLoading ? (
+              <Spinner />
+            ) : url ? (
+              <img
+                className="h-full w-full object-cover absolute"
+                src={readImage(url)}
+                alt="Preview of uploaded"
+              />
+            ) : (
+              <div aria-hidden="true">
+                <IconUserCircle className="opacity-60" size={16} />
+              </div>
+            )}
+          </Button>
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            className="hidden"
+            // accept="image/*"
+            // aria-label="Upload image file"
+            multiple={multiple}
+          />
+        </div>
+        <div className="sr-only" aria-live="polite" role="status">
+          {url ? 'Image uploaded and preview available' : 'No image uploaded'}
+        </div>
+      </>
+    );
+  },
+);
+
+UploadPreview.displayName = 'UploadPreview';
+
+const UploadButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { children?: React.ReactNode }
+>(({ children, className, ...props }, ref) => {
+  const uploadContext = useContext(UploadContext);
+
+  if (!uploadContext) {
+    throw new Error('UploadContext must be used within an UploadRoot');
+  }
+
+  const { handleThumbnailClick } = uploadContext;
+
+  const { t } = useTranslation('settings', {
+    keyPrefix: 'profile',
+  });
+
+  return (
+    <Button
+      ref={ref}
+      className={cn('flex', className)}
+      {...props}
+      onClick={handleThumbnailClick}
+    >
+      {children || (
+        <>
+          <IconUpload /> {t('upload')}
+        </>
+      )}
+    </Button>
+  );
+});
+
+UploadButton.displayName = 'UploadButton';
+
+const RemoveButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { children?: React.ReactNode }
+>(({ children, className, ...props }, ref) => {
+  const { remove } = useUpload();
+
+  const uploadContext = useContext(UploadContext);
+
+  if (!uploadContext) {
+    throw new Error('UploadContext must be used within an UploadRoot');
+  }
+
+  const { url, previewRef, onChange, setPreviewUrl } = uploadContext;
+  const { toast } = useToast();
+
+  if (!url) {
+    return <div />;
+  }
+
+  const handleRemove = () => {
+    const isStoredFile = !url.startsWith('data:') && !url.startsWith('blob:');
+
+    const urlArray = url.split('/');
+
+    const fileName =
+      urlArray.length === 1 ? url : urlArray[urlArray.length - 1];
+
+    if (previewRef.current) {
+      URL.revokeObjectURL(previewRef.current);
+      previewRef.current = null;
+    }
+
+    setPreviewUrl(undefined);
+    onChange({ url: '', fileInfo: null });
+
+    if (!isStoredFile) {
+      return;
+    }
+
+    remove({
+      fileName,
+      afterRemove: ({ status }) => {
+        if (status !== 'ok') {
+          toast({
+            title: 'Could not delete the stored file',
+            description:
+              'It has been removed here, but the server still holds a copy.',
+            variant: 'destructive',
+          });
+        }
+      },
+    });
+  };
+
+  return (
+    <Button
+      ref={ref}
+      className={cn('flex', className)}
+      {...props}
+      onClick={handleRemove}
+    >
+      {children || (
+        <>
+          <IconTrash /> Remove
+        </>
+      )}
+    </Button>
+  );
+});
+
+RemoveButton.displayName = 'RemoveButton';
+
+export const Upload = {
+  Root: UploadRoot,
+  Preview: UploadPreview,
+  Button: UploadButton,
+  RemoveButton: RemoveButton,
+};

package/src/constants/AttachmentGql.ts

@@ -0,0 +1,9 @@
+export const ATTACHMENT_GQL = `
+  attachments {
+    url
+    name
+    type
+    size
+    duration
+  }
+`;