extract style [skip ci]

Author: fourcels

docs/src/pages/index.tsx

@@ -6,6 +6,7 @@ import Heading from "@theme/Heading";
 
 import styles from "./index.module.css";
 import { ImageUpload } from "@fourcels/react-image-upload";
+import "@fourcels/react-image-upload/dist/index.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();

packages/react-image-upload/src/Dropzone.tsx

@@ -1,5 +1,7 @@
 import { DropzoneOptions, useDropzone } from "react-dropzone";
 import clsx from "clsx";
+import { forwardRef, useImperativeHandle } from "react";
+import { u } from "motion/react-client";
 
 const PlusIcon = () => (
   <svg
@@ -26,16 +28,19 @@ export type DropzoneProps = {
   children?: React.ReactNode;
 };
 
-export function Dropzone(props: DropzoneProps) {
+export const Dropzone = forwardRef<HTMLElement, DropzoneProps>((props, ref) => {
   const { className, options, children, width, height } = props;
   const {
+    rootRef,
     getRootProps,
     getInputProps,
     isDragActive,
     isDragAccept,
     isDragReject,
   } = useDropzone(options);
 
+  useImperativeHandle(ref, () => rootRef.current);
+
   return (
     <div
       {...getRootProps({
@@ -59,4 +64,6 @@ export function Dropzone(props: DropzoneProps) {
       )}
     </div>
   );
-}
+});
+
+Dropzone.displayName = "Dropzone";

packages/react-image-upload/src/ImageUpload.tsx

@@ -1,7 +1,9 @@
 import React, {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
+  useRef,
   useState,
 } from "react";
 import { DropzoneOptions } from "react-dropzone";
@@ -13,6 +15,7 @@ import "react-photo-view/dist/react-photo-view.css";
 import "./style.css";
 import { PhotoProviderProps } from "react-photo-view/dist/PhotoProvider";
 import { Dropzone } from "./Dropzone";
+import { use } from "motion/react-client";
 
 const RemoveIcon = () => (
   <svg
@@ -49,13 +52,8 @@ const PreviewIcon = () => (
   </svg>
 );
 
-type ValueItem = {
-  url: string;
-  name?: string;
-};
-
 type ImageItem = {
-  id: string;
+  id?: string;
   url?: string;
   name?: string;
   file?: File;
@@ -69,7 +67,7 @@ export type ImageUploadProps = {
   height?: number;
   dropzoneOptions?: DropzoneOptions;
   photoProviderProps?: Omit<PhotoProviderProps, "children">;
-  value?: string | ValueItem | (string | ValueItem)[];
+  value?: string | ImageItem | (string | ImageItem)[];
   onChange?: (value: ImageItem[]) => void;
   max?: number;
   onUpload?: (file: File) => string | Promise<string>;
@@ -80,12 +78,7 @@ export type ImageUploadProps = {
   children?: React.ReactNode;
 };
 
-export type ImageUploadRef = {
-  reset: (value?: string | ValueItem | (string | ValueItem)[]) => void;
-  value: ImageItem[];
-};
-
-export const ImageUpload = forwardRef<ImageUploadRef, ImageUploadProps>(
+export const ImageUpload = forwardRef<HTMLElement, ImageUploadProps>(
   (props, ref) => {
     const {
       width = 100,
@@ -103,76 +96,69 @@ export const ImageUpload = forwardRef<ImageUploadRef, ImageUploadProps>(
       children,
     } = props;
 
-    const getImages = useCallback(
-      (value: string | ValueItem | (string | ValueItem)[]) => {
-        if (!Array.isArray(value)) {
-          value = [value];
-        }
-
-        return value
-          .map<ImageItem>((item) => {
-            if (typeof item === "string") {
-              item = { url: item };
-            }
-            return {
-              id: uuidv7(),
-              ...item,
-            };
-          })
-          .slice(0, max);
-      },
-      [max]
-    );
+    const dropzoneRef = useRef<HTMLElement>(null);
 
-    const [images, setImages] = useState<ImageItem[]>(() => getImages(value));
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        reset: (val = value) => {
-          setImages(getImages(val));
-        },
-        get value() {
-          return images;
-        },
-      }),
-      [value, images]
-    );
+    useImperativeHandle(ref, () => dropzoneRef.current);
+
+    const getImages = useCallback(() => {
+      let innerValue = value;
+      if (!Array.isArray(innerValue)) {
+        innerValue = [innerValue];
+      }
+
+      return innerValue
+        .map<ImageItem>((item) => {
+          if (typeof item === "string") {
+            item = { url: item };
+          }
+
+          return {
+            id: uuidv7(),
+            ...item,
+          };
+        })
+        .slice(0, max);
+    }, [value, max]);
+
+    const [images, setImages] = useState<ImageItem[]>(() => getImages());
+
+    useEffect(() => {
+      setImages(getImages());
+    }, [getImages]);
 
     const onDropAccepted = useCallback(
       async (acceptedFiles: File[]) => {
-        const newImages = acceptedFiles
+        const addImages = acceptedFiles
           .slice(0, max - images.length)
           .map<ImageItem>((file) => ({
             id: uuidv7(),
             name: file.name,
             loading: true,
             file,
           }));
-        setImages((images) => {
-          images = images.concat(newImages);
-          Promise.all(
-            newImages.map(async (item) => {
-              item.url = await onUpload?.(item.file);
-              item.loading = false;
-              setImages((images) => {
-                return [...images];
-              });
-            })
-          ).then(() => onChange?.(images));
-          return images;
-        });
+        const newImages = images.concat(addImages);
+        setImages(newImages);
+        Promise.all(
+          newImages.map(async (item) => {
+            item.url = await onUpload?.(item.file);
+            item.loading = false;
+            setImages((images) => {
+              return [...images];
+            });
+          })
+        ).then(() => onChange?.(newImages));
       },
-      [images.length, max]
+      [images, max, onChange]
     );
 
-    const onRemoveImage = useCallback((idx: number) => {
-      setImages((images) => {
-        images = images.filter((_, index) => index != idx);
-        onChange?.(images);
-        return images;
-      });
-    }, []);
+    const onRemoveImage = useCallback(
+      (idx: number) => {
+        const newImages = images.filter((_, index) => index != idx);
+        onChange?.(newImages);
+        setImages(newImages);
+      },
+      [images, onChange]
+    );
 
     return (
       <PhotoProvider {...photoProviderProps}>
@@ -232,6 +218,7 @@ export const ImageUpload = forwardRef<ImageUploadRef, ImageUploadProps>(
                   className={dropzoneClassName}
                   width={width}
                   height={height}
+                  ref={dropzoneRef}
                 >
                   {children}
                 </Dropzone>

packages/react-image-upload/src/style.css

@@ -88,7 +88,8 @@
     cursor: pointer;
     user-select: none;
 
-    &:hover {
+    &:hover,
+    &:focus {
       border-color: #2196f3;
     }
 

packages/react-image-upload/tsup.config.ts

@@ -7,5 +7,4 @@ export default defineConfig({
   splitting: false,
   sourcemap: true,
   clean: true,
-  injectStyle: true,
 });