dn-react-router-toolkit 0.2.7 → 0.3.1

package/dist/file/client/drop_file_input.d.mts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { FileUploaderOptions } from './file_uploader.mjs';
-
-type FileInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "defaultValue" | "onChange"> & {
-    container?: string;
-    accept?: string;
-    multiple?: boolean;
-    name?: string;
-    hideMessage?: boolean;
-    draggingClassName?: (value: boolean) => string;
-};
-type FileItem<T> = {
-    key: string;
-    width?: number;
-    height?: number;
-    item?: T;
-};
-type Props<TFile> = {
-    defaultValue?: TFile | TFile[];
-    options?: FileUploaderOptions;
-    onFileInput?: (files: File[]) => void;
-    onFileUploaded?: (file: TFile) => Promise<void>;
-    onChange?: (files: TFile[]) => void;
-    limit?: number;
-};
-declare function createUseDropFileInput<TFile>({ uploadFile, }: {
-    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<TFile>;
-}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<TFile>) => {
-    fileIds: string[];
-    files: FileItem<TFile>[];
-    setFiles: React.Dispatch<React.SetStateAction<FileItem<TFile>[]>>;
-    Component: ({ className, container, draggingClassName, name, hideMessage, children, ...props }: FileInputProps) => React.JSX.Element;
-};
-declare function DropFileMessageBox(): React.JSX.Element;
-
-export { DropFileMessageBox, type FileInputProps, type FileItem, createUseDropFileInput as default };

package/dist/file/client/drop_file_input.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { FileUploaderOptions } from './file_uploader.js';
-
-type FileInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "defaultValue" | "onChange"> & {
-    container?: string;
-    accept?: string;
-    multiple?: boolean;
-    name?: string;
-    hideMessage?: boolean;
-    draggingClassName?: (value: boolean) => string;
-};
-type FileItem<T> = {
-    key: string;
-    width?: number;
-    height?: number;
-    item?: T;
-};
-type Props<TFile> = {
-    defaultValue?: TFile | TFile[];
-    options?: FileUploaderOptions;
-    onFileInput?: (files: File[]) => void;
-    onFileUploaded?: (file: TFile) => Promise<void>;
-    onChange?: (files: TFile[]) => void;
-    limit?: number;
-};
-declare function createUseDropFileInput<TFile>({ uploadFile, }: {
-    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<TFile>;
-}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<TFile>) => {
-    fileIds: string[];
-    files: FileItem<TFile>[];
-    setFiles: React.Dispatch<React.SetStateAction<FileItem<TFile>[]>>;
-    Component: ({ className, container, draggingClassName, name, hideMessage, children, ...props }: FileInputProps) => React.JSX.Element;
-};
-declare function DropFileMessageBox(): React.JSX.Element;
-
-export { DropFileMessageBox, type FileInputProps, type FileItem, createUseDropFileInput as default };

package/dist/file/client/drop_file_input.js

@@ -1,323 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/file/client/drop_file_input.tsx
-var drop_file_input_exports = {};
-__export(drop_file_input_exports, {
-  DropFileMessageBox: () => DropFileMessageBox,
-  default: () => createUseDropFileInput
-});
-module.exports = __toCommonJS(drop_file_input_exports);
-var import_react = __toESM(require("react"));
-var import_uuid = require("uuid");
-
-// src/cn.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ").trim();
-}
-
-// src/file/client/metadata.ts
-function generateMetadata(blob, {
-  uploadBlob
-} = {}) {
-  return new Promise((resolve) => {
-    if (blob.type.startsWith("image/")) {
-      const img = new Image();
-      img.src = URL.createObjectURL(blob);
-      img.onload = () => {
-        resolve({
-          width: img.width,
-          height: img.height
-        });
-      };
-      img.onerror = () => resolve({});
-      return;
-    }
-    if (blob.type.startsWith("video/")) {
-      const video = document.createElement("video");
-      video.onloadeddata = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const context = canvas.getContext("2d");
-        if (!context || !uploadBlob) {
-          return resolve({
-            width: video.videoWidth,
-            height: video.videoHeight
-          });
-        }
-        video.addEventListener("seeked", () => {
-          context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-          canvas.toBlob((blob2) => {
-            if (!blob2) {
-              return resolve({
-                width: video.videoWidth,
-                height: video.videoHeight
-              });
-            }
-            uploadBlob(blob2, "poster").then(({ url }) => {
-              resolve({
-                width: video.videoWidth,
-                height: video.videoHeight,
-                poster: url
-              });
-            });
-          }, "image/jpeg");
-        });
-        video.currentTime = 0;
-      };
-      video.onerror = () => resolve({});
-      video.src = URL.createObjectURL(blob);
-      return;
-    }
-    resolve({});
-  });
-}
-
-// src/file/client/drop_file_input.tsx
-function createUseDropFileInput({
-  uploadFile
-}) {
-  return function useDropFileInput({
-    defaultValue,
-    options,
-    onChange,
-    onFileInput,
-    onFileUploaded,
-    limit
-  } = {}) {
-    const [files, setFiles] = (0, import_react.useState)(
-      defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
-        return {
-          key: (0, import_uuid.v4)(),
-          item: v
-        };
-      }).slice(0, limit ? limit : Infinity) : []
-    );
-    const fileRef = (0, import_react.useRef)([]);
-    (0, import_react.useEffect)(() => {
-      fileRef.current = files;
-      onChange?.(files.map((f) => f.item).filter(Boolean));
-    }, [files]);
-    const Component = (0, import_react.useCallback)(
-      function Component2({
-        className,
-        container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
-        draggingClassName,
-        name,
-        hideMessage = false,
-        children,
-        ...props
-      }) {
-        const [isDragging, setIsDragging] = (0, import_react.useState)(false);
-        const handleDragEnter = (0, import_react.useCallback)((e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragging(true);
-        }, []);
-        const handleDragLeave = (0, import_react.useCallback)((e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragging(false);
-        }, []);
-        const handleDragOver = (0, import_react.useCallback)((e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }, []);
-        const handleFiles = (0, import_react.useCallback)(
-          async (files2) => {
-            if (limit && fileRef.current.length >= limit) {
-              alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-              return;
-            }
-            const filteredFiles = files2.filter((file) => {
-              if (!props.accept) {
-                return true;
-              }
-              const accepts = props.accept.split(",");
-              for (const accept of accepts) {
-                const trimmedAccept = accept.trim();
-                if (file.type === trimmedAccept || file.type.endsWith(trimmedAccept) || file.name.endsWith(trimmedAccept)) {
-                  return true;
-                }
-                if (trimmedAccept.endsWith("/*")) {
-                  const baseType = trimmedAccept.replace("/*", "");
-                  if (file.type.startsWith(baseType + "/")) {
-                    return true;
-                  }
-                }
-              }
-              return false;
-            });
-            if (files2.length !== filteredFiles.length) {
-              alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-            }
-            const limitedFiles = filteredFiles.slice(
-              0,
-              limit ? limit - fileRef.current.length : Infinity
-            );
-            if (limitedFiles.length === 0) {
-              return;
-            }
-            if (onFileInput) {
-              onFileInput(limitedFiles);
-            }
-            for (const file of limitedFiles) {
-              const { width, height } = await generateMetadata(file);
-              const fileItem = {
-                key: (0, import_uuid.v4)(),
-                width: Number(width) || void 0,
-                height: Number(height) || void 0
-              };
-              setFiles((prevFiles) => [...prevFiles, fileItem]);
-              uploadFile?.(file, options).then(async (item) => {
-                await onFileUploaded?.(item);
-                setFiles(
-                  (prevFiles) => prevFiles.map((f) => {
-                    if (f.key === fileItem.key) {
-                      return {
-                        ...f,
-                        item
-                      };
-                    }
-                    return f;
-                  })
-                );
-              });
-            }
-          },
-          [props.accept]
-        );
-        const handleDrop = (0, import_react.useCallback)(
-          (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIsDragging(false);
-            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-              handleFiles(Array.from(e.dataTransfer.files));
-              e.dataTransfer.clearData();
-            }
-          },
-          [handleFiles]
-        );
-        const inputRef = (0, import_react.useRef)(null);
-        const handleClick = (0, import_react.useCallback)(() => {
-          inputRef.current?.click();
-        }, []);
-        const handleKeyDown = (0, import_react.useCallback)(
-          (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              handleClick();
-            }
-          },
-          [handleClick]
-        );
-        const handleChange = (0, import_react.useCallback)(
-          (e) => {
-            if (e.target.files && e.target.files.length > 0) {
-              handleFiles(Array.from(e.target.files));
-              e.target.value = "";
-            }
-          },
-          [handleFiles]
-        );
-        return /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: cn(
-              className,
-              container,
-              draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
-              "transition-colors cursor-pointer"
-            ),
-            onDragEnter: handleDragEnter,
-            onDragLeave: handleDragLeave,
-            onDragOver: handleDragOver,
-            onDrop: handleDrop,
-            onClick: handleClick,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            tabIndex: 0,
-            role: "button"
-          },
-          /* @__PURE__ */ import_react.default.createElement(
-            "input",
-            {
-              ...props,
-              defaultValue: "",
-              type: "file",
-              hidden: true,
-              ref: inputRef
-            }
-          ),
-          /* @__PURE__ */ import_react.default.createElement(
-            "input",
-            {
-              name,
-              hidden: true,
-              readOnly: true,
-              value: files.map((file) => {
-                if (file.item && typeof file.item === "object" && "id" in file.item) {
-                  return file.item.id;
-                }
-                return null;
-              }).filter(Boolean).join(",")
-            }
-          ),
-          children || !(hideMessage && !isDragging) && /* @__PURE__ */ import_react.default.createElement(DropFileMessageBox, null)
-        );
-      },
-      [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
-    );
-    const loadedFileIds = files.map((file) => {
-      if (file.item && typeof file.item === "object" && "id" in file.item) {
-        return file.item.id;
-      }
-      return null;
-    }).filter(Boolean);
-    const loadedFileIdsString = loadedFileIds.join(",");
-    const fileIds = (0, import_react.useMemo)(
-      () => loadedFileIdsString.split(",").filter(Boolean),
-      [loadedFileIdsString]
-    );
-    return {
-      fileIds,
-      files,
-      setFiles,
-      Component
-    };
-  };
-}
-function DropFileMessageBox() {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm pointer-events-none flex justify-center items-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ import_react.default.createElement("span", null, "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694")));
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DropFileMessageBox
-});

package/dist/file/client/drop_file_input.mjs

@@ -1,294 +0,0 @@
-// src/file/client/drop_file_input.tsx
-import React, {
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  useMemo
-} from "react";
-import { v4 } from "uuid";
-
-// src/cn.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ").trim();
-}
-
-// src/file/client/metadata.ts
-function generateMetadata(blob, {
-  uploadBlob
-} = {}) {
-  return new Promise((resolve) => {
-    if (blob.type.startsWith("image/")) {
-      const img = new Image();
-      img.src = URL.createObjectURL(blob);
-      img.onload = () => {
-        resolve({
-          width: img.width,
-          height: img.height
-        });
-      };
-      img.onerror = () => resolve({});
-      return;
-    }
-    if (blob.type.startsWith("video/")) {
-      const video = document.createElement("video");
-      video.onloadeddata = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const context = canvas.getContext("2d");
-        if (!context || !uploadBlob) {
-          return resolve({
-            width: video.videoWidth,
-            height: video.videoHeight
-          });
-        }
-        video.addEventListener("seeked", () => {
-          context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-          canvas.toBlob((blob2) => {
-            if (!blob2) {
-              return resolve({
-                width: video.videoWidth,
-                height: video.videoHeight
-              });
-            }
-            uploadBlob(blob2, "poster").then(({ url }) => {
-              resolve({
-                width: video.videoWidth,
-                height: video.videoHeight,
-                poster: url
-              });
-            });
-          }, "image/jpeg");
-        });
-        video.currentTime = 0;
-      };
-      video.onerror = () => resolve({});
-      video.src = URL.createObjectURL(blob);
-      return;
-    }
-    resolve({});
-  });
-}
-
-// src/file/client/drop_file_input.tsx
-function createUseDropFileInput({
-  uploadFile
-}) {
-  return function useDropFileInput({
-    defaultValue,
-    options,
-    onChange,
-    onFileInput,
-    onFileUploaded,
-    limit
-  } = {}) {
-    const [files, setFiles] = useState(
-      defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
-        return {
-          key: v4(),
-          item: v
-        };
-      }).slice(0, limit ? limit : Infinity) : []
-    );
-    const fileRef = useRef([]);
-    useEffect(() => {
-      fileRef.current = files;
-      onChange?.(files.map((f) => f.item).filter(Boolean));
-    }, [files]);
-    const Component = useCallback(
-      function Component2({
-        className,
-        container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
-        draggingClassName,
-        name,
-        hideMessage = false,
-        children,
-        ...props
-      }) {
-        const [isDragging, setIsDragging] = useState(false);
-        const handleDragEnter = useCallback((e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragging(true);
-        }, []);
-        const handleDragLeave = useCallback((e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragging(false);
-        }, []);
-        const handleDragOver = useCallback((e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }, []);
-        const handleFiles = useCallback(
-          async (files2) => {
-            if (limit && fileRef.current.length >= limit) {
-              alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-              return;
-            }
-            const filteredFiles = files2.filter((file) => {
-              if (!props.accept) {
-                return true;
-              }
-              const accepts = props.accept.split(",");
-              for (const accept of accepts) {
-                const trimmedAccept = accept.trim();
-                if (file.type === trimmedAccept || file.type.endsWith(trimmedAccept) || file.name.endsWith(trimmedAccept)) {
-                  return true;
-                }
-                if (trimmedAccept.endsWith("/*")) {
-                  const baseType = trimmedAccept.replace("/*", "");
-                  if (file.type.startsWith(baseType + "/")) {
-                    return true;
-                  }
-                }
-              }
-              return false;
-            });
-            if (files2.length !== filteredFiles.length) {
-              alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-            }
-            const limitedFiles = filteredFiles.slice(
-              0,
-              limit ? limit - fileRef.current.length : Infinity
-            );
-            if (limitedFiles.length === 0) {
-              return;
-            }
-            if (onFileInput) {
-              onFileInput(limitedFiles);
-            }
-            for (const file of limitedFiles) {
-              const { width, height } = await generateMetadata(file);
-              const fileItem = {
-                key: v4(),
-                width: Number(width) || void 0,
-                height: Number(height) || void 0
-              };
-              setFiles((prevFiles) => [...prevFiles, fileItem]);
-              uploadFile?.(file, options).then(async (item) => {
-                await onFileUploaded?.(item);
-                setFiles(
-                  (prevFiles) => prevFiles.map((f) => {
-                    if (f.key === fileItem.key) {
-                      return {
-                        ...f,
-                        item
-                      };
-                    }
-                    return f;
-                  })
-                );
-              });
-            }
-          },
-          [props.accept]
-        );
-        const handleDrop = useCallback(
-          (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIsDragging(false);
-            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-              handleFiles(Array.from(e.dataTransfer.files));
-              e.dataTransfer.clearData();
-            }
-          },
-          [handleFiles]
-        );
-        const inputRef = useRef(null);
-        const handleClick = useCallback(() => {
-          inputRef.current?.click();
-        }, []);
-        const handleKeyDown = useCallback(
-          (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              handleClick();
-            }
-          },
-          [handleClick]
-        );
-        const handleChange = useCallback(
-          (e) => {
-            if (e.target.files && e.target.files.length > 0) {
-              handleFiles(Array.from(e.target.files));
-              e.target.value = "";
-            }
-          },
-          [handleFiles]
-        );
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn(
-              className,
-              container,
-              draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
-              "transition-colors cursor-pointer"
-            ),
-            onDragEnter: handleDragEnter,
-            onDragLeave: handleDragLeave,
-            onDragOver: handleDragOver,
-            onDrop: handleDrop,
-            onClick: handleClick,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            tabIndex: 0,
-            role: "button"
-          },
-          /* @__PURE__ */ React.createElement(
-            "input",
-            {
-              ...props,
-              defaultValue: "",
-              type: "file",
-              hidden: true,
-              ref: inputRef
-            }
-          ),
-          /* @__PURE__ */ React.createElement(
-            "input",
-            {
-              name,
-              hidden: true,
-              readOnly: true,
-              value: files.map((file) => {
-                if (file.item && typeof file.item === "object" && "id" in file.item) {
-                  return file.item.id;
-                }
-                return null;
-              }).filter(Boolean).join(",")
-            }
-          ),
-          children || !(hideMessage && !isDragging) && /* @__PURE__ */ React.createElement(DropFileMessageBox, null)
-        );
-      },
-      [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
-    );
-    const loadedFileIds = files.map((file) => {
-      if (file.item && typeof file.item === "object" && "id" in file.item) {
-        return file.item.id;
-      }
-      return null;
-    }).filter(Boolean);
-    const loadedFileIdsString = loadedFileIds.join(",");
-    const fileIds = useMemo(
-      () => loadedFileIdsString.split(",").filter(Boolean),
-      [loadedFileIdsString]
-    );
-    return {
-      fileIds,
-      files,
-      setFiles,
-      Component
-    };
-  };
-}
-function DropFileMessageBox() {
-  return /* @__PURE__ */ React.createElement("div", { className: "text-sm pointer-events-none flex justify-center items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React.createElement("span", null, "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694")));
-}
-export {
-  DropFileMessageBox,
-  createUseDropFileInput as default
-};

package/dist/file/client/file_upload_button.d.mts

@@ -1,10 +0,0 @@
-import React from 'react';
-
-type Props<TFile> = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
-    onUpload?: (files: TFile[]) => Promise<void> | void;
-};
-declare function createFileUploadButton<TFile>({ uploadFile, }: {
-    uploadFile: (file: File) => Promise<TFile>;
-}): ({ onUpload, children, className, style, ...props }: Props<TFile>) => React.JSX.Element;
-
-export { createFileUploadButton as default };