@bbki.ng/components 1.5.2 → 1.5.3

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { EventHandler, ReactElement, CSSProperties } from 'react';
+import React, { EventHandler, ReactElement, CSSProperties, FunctionComponent } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -123,4 +123,16 @@ declare type SkeletonProps = {
 };
 declare const Skeleton: (props: SkeletonProps) => JSX.Element;
 
-export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags };
+interface ImageDropProps<T> {
+    uploader: (file: File, img: HTMLImageElement) => Promise<T>;
+    onDrop?: (events: Event, file: File) => void;
+    onUploadFinish?: (result: T) => void;
+    waitTimeAfterFinish?: number;
+    defaultBgColor?: string;
+    dragOverBgColor?: string;
+    dropAreaStyle?: CSSStyleDeclaration;
+    placeholder?: any;
+}
+declare const DropImage: FunctionComponent<ImageDropProps<any>>;
+
+export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags };

package/dist/index.js

@@ -62,6 +62,7 @@ __export(src_exports, {
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   ButtonType: () => ButtonType,
+  DropImage: () => DropImage,
   Link: () => Link,
   LinkColor: () => LinkColor,
   Logo: () => Logo,
@@ -348,6 +349,170 @@ var Skeleton = (props) => {
     style: { width, height }
   });
 };
+
+// src/drop-image/DropImage.tsx
+var import_classnames6 = __toESM(require("classnames"));
+var import_react13 = __toESM(require("react"));
+var import_react14 = require("react");
+
+// src/drop-image/utils.ts
+var wait = (d) => new Promise((r) => setTimeout(r, d));
+var noop = () => {
+};
+
+// src/drop-image/useDropImage.ts
+var import_react12 = require("react");
+var useDropImage = (params) => {
+  const [isDragOver, setIsDragOver] = (0, import_react12.useState)(false);
+  const [imageSrc, setImageSrc] = (0, import_react12.useState)("");
+  const [imageSize, setImageSize] = (0, import_react12.useState)({ width: 0, height: 0 });
+  const imageFile = (0, import_react12.useRef)(null);
+  const {
+    portraitImageWidth = 384,
+    landscapeImageWidth = 500,
+    onDrop = () => {
+    },
+    onImageLoad = () => {
+    }
+  } = params || {};
+  const reset = () => {
+    setImageSrc("");
+    setImageSize({ width: 0, height: 0 });
+    setIsDragOver(false);
+    imageFile.current = null;
+  };
+  const calcDefaultImgSize = (img, defaultWidth) => {
+    const { width, height } = img;
+    const whRatio = width / height;
+    const isHorizontal = width > height;
+    const finalWidth = defaultWidth || (isHorizontal ? landscapeImageWidth : portraitImageWidth);
+    return {
+      width: finalWidth,
+      height: finalWidth / whRatio
+    };
+  };
+  const setPreviewImageSrcByFile = (file) => {
+    setImageSrc(URL.createObjectURL(file));
+  };
+  const handleDragOver = (0, import_react12.useCallback)((ev) => {
+    ev.preventDefault();
+    setIsDragOver(true);
+    ev.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleDragLeave = (0, import_react12.useCallback)(() => {
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = (0, import_react12.useCallback)((ev) => {
+    ev.preventDefault();
+    setIsDragOver(false);
+    const file = ev.dataTransfer.files[0];
+    imageFile.current = file;
+    setPreviewImageSrcByFile(file);
+    onDrop(ev, file);
+  }, []);
+  const handleImgLoad = (img) => {
+    const updateFunc = async () => {
+      const p = "decode" in img ? img.decode : Promise.resolve;
+      try {
+        await p();
+      } catch (e) {
+      }
+      setImageSize(calcDefaultImgSize({
+        width: img.naturalWidth,
+        height: img.naturalHeight
+      }));
+      if (!imageFile.current) {
+        return;
+      }
+      onImageLoad(img, imageFile.current);
+    };
+    if (img.complete) {
+      updateFunc().then();
+      return;
+    }
+    img.onload = updateFunc;
+  };
+  const imageRef = (0, import_react12.useCallback)((input) => {
+    if (!input) {
+      return;
+    }
+    handleImgLoad(input);
+  }, []);
+  return {
+    isDragOver,
+    imageSrc,
+    imageRef,
+    imageSize,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    reset
+  };
+};
+
+// src/drop-image/DropImage.tsx
+var DropImage = (props) => {
+  const {
+    uploader,
+    defaultBgColor = "#F3F4F6",
+    onDrop,
+    dragOverBgColor = "#EFF6FF",
+    waitTimeAfterFinish = 2e3,
+    placeholder = "",
+    onUploadFinish = noop,
+    dropAreaStyle = {
+      width: 300,
+      height: 300
+    }
+  } = props;
+  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react14.useState)(false);
+  const {
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    imageRef,
+    imageSize,
+    imageSrc,
+    isDragOver,
+    reset
+  } = useDropImage({
+    onDrop,
+    onImageLoad: async (image, file) => {
+      await wait(500);
+      setShowImagePreviewer(true);
+      await onUploadFinish(await uploader(file, image));
+      await wait(waitTimeAfterFinish);
+      setShowImagePreviewer(false);
+      await wait(500);
+      reset();
+    }
+  });
+  const getDropAreaStyle = () => {
+    return Object.assign({}, dropAreaStyle, {
+      background: isDragOver ? dragOverBgColor : defaultBgColor,
+      width: imageSize.width || dropAreaStyle.width,
+      height: imageSize.height || dropAreaStyle.height
+    });
+  };
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: (0, import_classnames6.default)("transition-all items-center justify-center flex duration-200 ease-in-out", {
+      "shadow-input": !imageSrc,
+      "shadow-empty": imageSrc
+    }),
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    style: getDropAreaStyle()
+  }, /* @__PURE__ */ import_react13.default.createElement("img", {
+    className: (0, import_classnames6.default)("max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-0", {
+      "opacity-100": showImagePreviewer
+    }),
+    ref: imageRef,
+    src: imageSrc,
+    width: imageSize.width,
+    height: imageSize.height
+  }), !imageSrc && placeholder);
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -355,6 +520,7 @@ module.exports = __toCommonJS(src_exports);
   Breadcrumb,
   Button,
   ButtonType,
+  DropImage,
   Link,
   LinkColor,
   Logo,

package/dist/index.mjs

@@ -302,11 +302,176 @@ var Skeleton = (props) => {
     style: { width, height }
   });
 };
+
+// src/drop-image/DropImage.tsx
+import cls from "classnames";
+import React13 from "react";
+import { useState as useState3 } from "react";
+
+// src/drop-image/utils.ts
+var wait = (d) => new Promise((r) => setTimeout(r, d));
+var noop = () => {
+};
+
+// src/drop-image/useDropImage.ts
+import { useState as useState2, useCallback, useRef } from "react";
+var useDropImage = (params) => {
+  const [isDragOver, setIsDragOver] = useState2(false);
+  const [imageSrc, setImageSrc] = useState2("");
+  const [imageSize, setImageSize] = useState2({ width: 0, height: 0 });
+  const imageFile = useRef(null);
+  const {
+    portraitImageWidth = 384,
+    landscapeImageWidth = 500,
+    onDrop = () => {
+    },
+    onImageLoad = () => {
+    }
+  } = params || {};
+  const reset = () => {
+    setImageSrc("");
+    setImageSize({ width: 0, height: 0 });
+    setIsDragOver(false);
+    imageFile.current = null;
+  };
+  const calcDefaultImgSize = (img, defaultWidth) => {
+    const { width, height } = img;
+    const whRatio = width / height;
+    const isHorizontal = width > height;
+    const finalWidth = defaultWidth || (isHorizontal ? landscapeImageWidth : portraitImageWidth);
+    return {
+      width: finalWidth,
+      height: finalWidth / whRatio
+    };
+  };
+  const setPreviewImageSrcByFile = (file) => {
+    setImageSrc(URL.createObjectURL(file));
+  };
+  const handleDragOver = useCallback((ev) => {
+    ev.preventDefault();
+    setIsDragOver(true);
+    ev.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = useCallback((ev) => {
+    ev.preventDefault();
+    setIsDragOver(false);
+    const file = ev.dataTransfer.files[0];
+    imageFile.current = file;
+    setPreviewImageSrcByFile(file);
+    onDrop(ev, file);
+  }, []);
+  const handleImgLoad = (img) => {
+    const updateFunc = async () => {
+      const p = "decode" in img ? img.decode : Promise.resolve;
+      try {
+        await p();
+      } catch (e) {
+      }
+      setImageSize(calcDefaultImgSize({
+        width: img.naturalWidth,
+        height: img.naturalHeight
+      }));
+      if (!imageFile.current) {
+        return;
+      }
+      onImageLoad(img, imageFile.current);
+    };
+    if (img.complete) {
+      updateFunc().then();
+      return;
+    }
+    img.onload = updateFunc;
+  };
+  const imageRef = useCallback((input) => {
+    if (!input) {
+      return;
+    }
+    handleImgLoad(input);
+  }, []);
+  return {
+    isDragOver,
+    imageSrc,
+    imageRef,
+    imageSize,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    reset
+  };
+};
+
+// src/drop-image/DropImage.tsx
+var DropImage = (props) => {
+  const {
+    uploader,
+    defaultBgColor = "#F3F4F6",
+    onDrop,
+    dragOverBgColor = "#EFF6FF",
+    waitTimeAfterFinish = 2e3,
+    placeholder = "",
+    onUploadFinish = noop,
+    dropAreaStyle = {
+      width: 300,
+      height: 300
+    }
+  } = props;
+  const [showImagePreviewer, setShowImagePreviewer] = useState3(false);
+  const {
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    imageRef,
+    imageSize,
+    imageSrc,
+    isDragOver,
+    reset
+  } = useDropImage({
+    onDrop,
+    onImageLoad: async (image, file) => {
+      await wait(500);
+      setShowImagePreviewer(true);
+      await onUploadFinish(await uploader(file, image));
+      await wait(waitTimeAfterFinish);
+      setShowImagePreviewer(false);
+      await wait(500);
+      reset();
+    }
+  });
+  const getDropAreaStyle = () => {
+    return Object.assign({}, dropAreaStyle, {
+      background: isDragOver ? dragOverBgColor : defaultBgColor,
+      width: imageSize.width || dropAreaStyle.width,
+      height: imageSize.height || dropAreaStyle.height
+    });
+  };
+  return /* @__PURE__ */ React13.createElement("div", {
+    className: cls("transition-all items-center justify-center flex duration-200 ease-in-out", {
+      "shadow-input": !imageSrc,
+      "shadow-empty": imageSrc
+    }),
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    style: getDropAreaStyle()
+  }, /* @__PURE__ */ React13.createElement("img", {
+    className: cls("max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-0", {
+      "opacity-100": showImagePreviewer
+    }),
+    ref: imageRef,
+    src: imageSrc,
+    width: imageSize.width,
+    height: imageSize.height
+  }), !imageSrc && placeholder);
+};
 export {
   Article,
   Breadcrumb,
   Button,
   ButtonType,
+  DropImage,
   Link,
   LinkColor,
   Logo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",