Merge pull request #56 from iib0011/refactor-file-input

refactor: file inputs

Author: iib0011

.idea/workspace.xml

@@ -0,0 +1,147 @@
+import React, { ReactNode, useContext, useEffect } from 'react';
+import { Box, useTheme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import InputHeader from '../InputHeader';
+import InputFooter from './InputFooter';
+import {
+  BaseFileInputProps,
+  createObjectURL,
+  revokeObjectURL
+} from './file-input-utils';
+import { globalInputHeight } from '../../config/uiConfig';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import greyPattern from '@assets/grey-pattern.png';
+
+interface BaseFileInputComponentProps extends BaseFileInputProps {
+  children: (props: { preview: string | undefined }) => ReactNode;
+  type: 'image' | 'video' | 'audio';
+}
+
+export default function BaseFileInput({
+  value,
+  onChange,
+  accept,
+  title,
+  children,
+  type
+}: BaseFileInputComponentProps) {
+  const [preview, setPreview] = React.useState<string | null>(null);
+  const theme = useTheme();
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  useEffect(() => {
+    if (value) {
+      const objectUrl = createObjectURL(value);
+      setPreview(objectUrl);
+
+      return () => revokeObjectURL(objectUrl);
+    } else {
+      setPreview(null);
+    }
+  }, [value]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) onChange(file);
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleCopy = () => {
+    if (value) {
+      const blob = new Blob([value], { type: value.type });
+      const clipboardItem = new ClipboardItem({ [value.type]: blob });
+
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => showSnackBar('File copied', 'success'))
+        .catch((err) => {
+          showSnackBar('Failed to copy: ' + err, 'error');
+        });
+    }
+  };
+
+  useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      const clipboardItems = event.clipboardData?.items ?? [];
+      const item = clipboardItems[0];
+      if (
+        item &&
+        (item.type.includes('image') || item.type.includes('video'))
+      ) {
+        const file = item.getAsFile();
+        if (file) onChange(file);
+      }
+    };
+    window.addEventListener('paste', handlePaste);
+
+    return () => {
+      window.removeEventListener('paste', handlePaste);
+    };
+  }, [onChange]);
+
+  return (
+    <Box>
+      <InputHeader
+        title={title || 'Input ' + type.charAt(0).toUpperCase() + type.slice(1)}
+      />
+      <Box
+        sx={{
+          width: '100%',
+          height: globalInputHeight,
+          border: preview ? 0 : 1,
+          borderRadius: 2,
+          boxShadow: '5',
+          bgcolor: 'white',
+          position: 'relative'
+        }}
+      >
+        {preview ? (
+          <Box
+            width="100%"
+            height="100%"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundImage: `url(${greyPattern})`,
+              position: 'relative',
+              overflow: 'hidden'
+            }}
+          >
+            {children({ preview })}
+          </Box>
+        ) : (
+          <Box
+            onClick={handleImportClick}
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 5,
+              height: '100%',
+              cursor: 'pointer'
+            }}
+          >
+            <Typography color={theme.palette.grey['600']}>
+              Click here to select a {type} from your device, press Ctrl+V to
+              use a {type} from your clipboard, drag and drop a file from
+              desktop
+            </Typography>
+          </Box>
+        )}
+      </Box>
+      <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type="file"
+        accept={accept.join(',')}
+        onChange={handleFileChange}
+      />
+    </Box>
+  );
+}

src/components/input/BaseFileInput.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import ReactCrop, { Crop, PixelCrop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+import BaseFileInput from './BaseFileInput';
+import { BaseFileInputProps } from './file-input-utils';
+import { globalInputHeight } from '../../config/uiConfig';
+
+interface ImageFileInputProps extends BaseFileInputProps {
+  showCropOverlay?: boolean;
+  cropShape?: 'rectangular' | 'circular';
+  cropPosition?: { x: number; y: number };
+  cropSize?: { width: number; height: number };
+  onCropChange?: (
+    position: { x: number; y: number },
+    size: { width: number; height: number }
+  ) => void;
+}
+
+export default function ToolImageInput({
+  showCropOverlay = false,
+  cropShape = 'rectangular',
+  cropPosition = { x: 0, y: 0 },
+  cropSize = { width: 100, height: 100 },
+  onCropChange,
+  ...props
+}: ImageFileInputProps) {
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [imgWidth, setImgWidth] = useState(0);
+  const [imgHeight, setImgHeight] = useState(0);
+
+  const [crop, setCrop] = useState<Crop>({
+    unit: 'px',
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+
+  const RATIO = imageRef.current ? imgWidth / imageRef.current.width : 1;
+
+  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth: width, naturalHeight: height } = e.currentTarget;
+    setImgWidth(width);
+    setImgHeight(height);
+
+    if (!crop.width && !crop.height && onCropChange) {
+      const initialCrop: Crop = {
+        unit: 'px',
+        x: Math.floor(width / 4),
+        y: Math.floor(height / 4),
+        width: Math.floor(width / 2),
+        height: Math.floor(height / 2)
+      };
+
+      setCrop(initialCrop);
+
+      onCropChange(
+        { x: initialCrop.x, y: initialCrop.y },
+        { width: initialCrop.width, height: initialCrop.height }
+      );
+    }
+  };
+  useEffect(() => {
+    if (
+      imgWidth &&
+      imgHeight &&
+      (cropPosition.x !== 0 ||
+        cropPosition.y !== 0 ||
+        cropSize.width !== 100 ||
+        cropSize.height !== 100)
+    ) {
+      setCrop({
+        unit: 'px',
+        x: cropPosition.x / RATIO,
+        y: cropPosition.y / RATIO,
+        width: cropSize.width / RATIO,
+        height: cropSize.height / RATIO
+      });
+    }
+  }, [cropPosition, cropSize, imgWidth, imgHeight, RATIO]);
+
+  const handleCropChange = (newCrop: Crop) => {
+    setCrop(newCrop);
+  };
+
+  const handleCropComplete = (crop: PixelCrop) => {
+    if (onCropChange) {
+      onCropChange(
+        { x: Math.round(crop.x * RATIO), y: Math.round(crop.y * RATIO) },
+        {
+          width: Math.round(crop.width * RATIO),
+          height: Math.round(crop.height * RATIO)
+        }
+      );
+    }
+  };
+
+  return (
+    <BaseFileInput {...props} type={'image'}>
+      {({ preview }) => (
+        <Box
+          width="100%"
+          height="100%"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+            overflow: 'hidden'
+          }}
+        >
+          {showCropOverlay ? (
+            <ReactCrop
+              crop={crop}
+              onChange={handleCropChange}
+              onComplete={handleCropComplete}
+              circularCrop={cropShape === 'circular'}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
+            >
+              <img
+                ref={imageRef}
+                src={preview}
+                alt="Preview"
+                style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
+                onLoad={onImageLoad}
+              />
+            </ReactCrop>
+          ) : (
+            <img
+              ref={imageRef}
+              src={preview}
+              alt="Preview"
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
+              onLoad={onImageLoad}
+            />
+          )}
+        </Box>
+      )}
+    </BaseFileInput>
+  );
+}