@bbki.ng/components 1.5.4 → 1.5.7

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { EventHandler, ReactElement, CSSProperties, FunctionComponent } from 'react';
+import React, { EventHandler, ReactElement, CSSProperties, Ref, ReactNode, FunctionComponent } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -123,8 +123,18 @@ declare type SkeletonProps = {
 };
 declare const Skeleton: (props: SkeletonProps) => JSX.Element;
 
+interface ImagePreviewerProps {
+    className?: string;
+    visible: boolean;
+    imageRef: Ref<HTMLImageElement>;
+    imageSrc: string;
+    imageSize: {
+        width: number;
+        height: number;
+    };
+}
 interface ImageDropProps<T> {
-    uploader: (file: File, img: HTMLImageElement) => Promise<T>;
+    uploader: (file: File, img?: HTMLImageElement) => Promise<T>;
     onDrop?: (events: Event, file: File) => void;
     onUploadFinish?: (result: T) => void;
     waitTimeAfterFinish?: number;
@@ -132,7 +142,15 @@ interface ImageDropProps<T> {
     dragOverBgColor?: string;
     dropAreaStyle?: CSSStyleDeclaration;
     placeholder?: any;
+    className?: string;
+    ghost?: boolean;
+    children?: (props: ImagePreviewerProps) => ReactNode;
 }
 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 };
+declare type BLinkDotProps = {
+    className?: string;
+};
+declare const BlinkDot: (props: BLinkDotProps) => JSX.Element;
+
+export { Article, ArticleProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, 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

@@ -59,6 +59,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var src_exports = {};
 __export(src_exports, {
   Article: () => Article,
+  BlinkDot: () => BlinkDot,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   ButtonType: () => ButtonType,
@@ -392,7 +393,11 @@ var useDropImage = (params) => {
     };
   };
   const setPreviewImageSrcByFile = (file) => {
-    setImageSrc(URL.createObjectURL(file));
+    try {
+      setImageSrc(URL.createObjectURL(file));
+    } catch (e) {
+      setImageSrc("");
+    }
   };
   const handleDragOver = (0, import_react12.useCallback)((ev) => {
     ev.preventDefault();
@@ -451,6 +456,96 @@ var useDropImage = (params) => {
 };
 
 // src/drop-image/DropImage.tsx
+var ImagePreviewer = (props) => {
+  const {
+    visible: showImagePreviewer,
+    imageRef,
+    imageSize,
+    imageSrc,
+    className
+  } = props;
+  return /* @__PURE__ */ import_react13.default.createElement("img", {
+    className: (0, import_classnames6.default)(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
+      "opacity-0": !showImagePreviewer,
+      "!m-0": !showImagePreviewer,
+      "!p-0": !showImagePreviewer
+    }),
+    ref: imageRef,
+    src: imageSrc,
+    width: imageSize.width,
+    height: imageSize.height
+  });
+};
+var GhostDropImage = (props) => {
+  const {
+    onDrop = noop,
+    onUploadFinish = noop,
+    uploader,
+    waitTimeAfterFinish = 2e3,
+    className = "",
+    children,
+    placeholder
+  } = props;
+  const [coverVisible, setCoverVisible] = (0, import_react14.useState)(false);
+  const [imageVisible, setImageVisible] = (0, import_react14.useState)(false);
+  const handleDocDragEnter = (0, import_react13.useCallback)(() => {
+    setCoverVisible(true);
+  }, []);
+  const {
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    imageRef,
+    imageSize,
+    imageSrc,
+    reset
+  } = useDropImage({
+    onImageLoad: () => {
+      setImageVisible(true);
+    },
+    onDrop: async (e, file) => {
+      onDrop(e, file);
+      setCoverVisible(false);
+      const result = await uploader(file);
+      await wait(waitTimeAfterFinish);
+      onUploadFinish(result);
+      setImageVisible(false);
+      reset();
+    }
+  });
+  (0, import_react13.useEffect)(() => {
+    document.addEventListener("dragenter", handleDocDragEnter);
+    return () => {
+      document.removeEventListener("dragenter", handleDocDragEnter);
+    };
+  }, []);
+  const coverCls = (0, import_classnames6.default)("fixed", "top-0", "left-0", "h-full", "w-full", {
+    "lqip-blur": coverVisible,
+    "z-[999]": coverVisible,
+    block: coverVisible,
+    hidden: !coverVisible
+  });
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: coverCls,
+    onDragLeave: () => {
+      handleDragLeave();
+      setCoverVisible(false);
+    },
+    onDragOver: handleDragOver,
+    onDrop: handleDrop
+  }), !imageVisible && placeholder, children ? children({
+    visible: imageVisible,
+    imageRef,
+    imageSize,
+    imageSrc
+  }) : /* @__PURE__ */ import_react13.default.createElement(ImagePreviewer, {
+    className,
+    visible: imageVisible,
+    imageRef,
+    imageSrc,
+    imageSize
+  }));
+};
 var DropImage = (props) => {
   const {
     uploader,
@@ -459,12 +554,18 @@ var DropImage = (props) => {
     dragOverBgColor = "#EFF6FF",
     waitTimeAfterFinish = 2e3,
     placeholder = "",
+    className = "",
     onUploadFinish = noop,
+    ghost,
+    children,
     dropAreaStyle = {
       width: 300,
       height: 300
     }
   } = props;
+  if (ghost) {
+    return /* @__PURE__ */ import_react13.default.createElement(GhostDropImage, __spreadValues({}, props));
+  }
   const [showImagePreviewer, setShowImagePreviewer] = (0, import_react14.useState)(false);
   const {
     handleDragLeave,
@@ -495,7 +596,7 @@ var DropImage = (props) => {
     });
   };
   return /* @__PURE__ */ import_react13.default.createElement("div", {
-    className: (0, import_classnames6.default)("transition-all items-center justify-center flex duration-200 ease-in-out", {
+    className: (0, import_classnames6.default)(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
       "shadow-input": !imageSrc,
       "shadow-empty": imageSrc
     }),
@@ -503,20 +604,35 @@ var DropImage = (props) => {
     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-100", {
-      "opacity-0": !showImagePreviewer
-    }),
-    ref: imageRef,
-    src: imageSrc,
-    width: imageSize.width,
-    height: imageSize.height
+  }, children ? children({
+    visible: showImagePreviewer,
+    imageRef,
+    imageSize,
+    imageSrc
+  }) : /* @__PURE__ */ import_react13.default.createElement(ImagePreviewer, {
+    visible: showImagePreviewer,
+    imageRef,
+    imageSrc,
+    imageSize
   }), !imageSrc && placeholder);
 };
+
+// src/blink-dot/BlinkDot.tsx
+var import_classnames7 = __toESM(require("classnames"));
+var import_react15 = __toESM(require("react"));
+var BlinkDot = (props) => {
+  const { className } = props;
+  return /* @__PURE__ */ import_react15.default.createElement("span", {
+    className: (0, import_classnames7.default)("inline-flex h-1 w-1 justify-center items-center relative", className)
+  }, /* @__PURE__ */ import_react15.default.createElement("span", {
+    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
+  }));
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Article,
+  BlinkDot,
   Breadcrumb,
   Button,
   ButtonType,

package/dist/index.mjs

@@ -305,7 +305,10 @@ var Skeleton = (props) => {
 
 // src/drop-image/DropImage.tsx
 import cls from "classnames";
-import React13 from "react";
+import React13, {
+  useEffect as useEffect2,
+  useCallback as useCallback2
+} from "react";
 import { useState as useState3 } from "react";
 
 // src/drop-image/utils.ts
@@ -345,7 +348,11 @@ var useDropImage = (params) => {
     };
   };
   const setPreviewImageSrcByFile = (file) => {
-    setImageSrc(URL.createObjectURL(file));
+    try {
+      setImageSrc(URL.createObjectURL(file));
+    } catch (e) {
+      setImageSrc("");
+    }
   };
   const handleDragOver = useCallback((ev) => {
     ev.preventDefault();
@@ -404,6 +411,96 @@ var useDropImage = (params) => {
 };
 
 // src/drop-image/DropImage.tsx
+var ImagePreviewer = (props) => {
+  const {
+    visible: showImagePreviewer,
+    imageRef,
+    imageSize,
+    imageSrc,
+    className
+  } = props;
+  return /* @__PURE__ */ React13.createElement("img", {
+    className: cls(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
+      "opacity-0": !showImagePreviewer,
+      "!m-0": !showImagePreviewer,
+      "!p-0": !showImagePreviewer
+    }),
+    ref: imageRef,
+    src: imageSrc,
+    width: imageSize.width,
+    height: imageSize.height
+  });
+};
+var GhostDropImage = (props) => {
+  const {
+    onDrop = noop,
+    onUploadFinish = noop,
+    uploader,
+    waitTimeAfterFinish = 2e3,
+    className = "",
+    children,
+    placeholder
+  } = props;
+  const [coverVisible, setCoverVisible] = useState3(false);
+  const [imageVisible, setImageVisible] = useState3(false);
+  const handleDocDragEnter = useCallback2(() => {
+    setCoverVisible(true);
+  }, []);
+  const {
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    imageRef,
+    imageSize,
+    imageSrc,
+    reset
+  } = useDropImage({
+    onImageLoad: () => {
+      setImageVisible(true);
+    },
+    onDrop: async (e, file) => {
+      onDrop(e, file);
+      setCoverVisible(false);
+      const result = await uploader(file);
+      await wait(waitTimeAfterFinish);
+      onUploadFinish(result);
+      setImageVisible(false);
+      reset();
+    }
+  });
+  useEffect2(() => {
+    document.addEventListener("dragenter", handleDocDragEnter);
+    return () => {
+      document.removeEventListener("dragenter", handleDocDragEnter);
+    };
+  }, []);
+  const coverCls = cls("fixed", "top-0", "left-0", "h-full", "w-full", {
+    "lqip-blur": coverVisible,
+    "z-[999]": coverVisible,
+    block: coverVisible,
+    hidden: !coverVisible
+  });
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", {
+    className: coverCls,
+    onDragLeave: () => {
+      handleDragLeave();
+      setCoverVisible(false);
+    },
+    onDragOver: handleDragOver,
+    onDrop: handleDrop
+  }), !imageVisible && placeholder, children ? children({
+    visible: imageVisible,
+    imageRef,
+    imageSize,
+    imageSrc
+  }) : /* @__PURE__ */ React13.createElement(ImagePreviewer, {
+    className,
+    visible: imageVisible,
+    imageRef,
+    imageSrc,
+    imageSize
+  }));
+};
 var DropImage = (props) => {
   const {
     uploader,
@@ -412,12 +509,18 @@ var DropImage = (props) => {
     dragOverBgColor = "#EFF6FF",
     waitTimeAfterFinish = 2e3,
     placeholder = "",
+    className = "",
     onUploadFinish = noop,
+    ghost,
+    children,
     dropAreaStyle = {
       width: 300,
       height: 300
     }
   } = props;
+  if (ghost) {
+    return /* @__PURE__ */ React13.createElement(GhostDropImage, __spreadValues({}, props));
+  }
   const [showImagePreviewer, setShowImagePreviewer] = useState3(false);
   const {
     handleDragLeave,
@@ -448,7 +551,7 @@ var DropImage = (props) => {
     });
   };
   return /* @__PURE__ */ React13.createElement("div", {
-    className: cls("transition-all items-center justify-center flex duration-200 ease-in-out", {
+    className: cls(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
       "shadow-input": !imageSrc,
       "shadow-empty": imageSrc
     }),
@@ -456,18 +559,33 @@ var DropImage = (props) => {
     onDragOver: handleDragOver,
     onDrop: handleDrop,
     style: getDropAreaStyle()
-  }, /* @__PURE__ */ React13.createElement("img", {
-    className: cls("max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
-      "opacity-0": !showImagePreviewer
-    }),
-    ref: imageRef,
-    src: imageSrc,
-    width: imageSize.width,
-    height: imageSize.height
+  }, children ? children({
+    visible: showImagePreviewer,
+    imageRef,
+    imageSize,
+    imageSrc
+  }) : /* @__PURE__ */ React13.createElement(ImagePreviewer, {
+    visible: showImagePreviewer,
+    imageRef,
+    imageSrc,
+    imageSize
   }), !imageSrc && placeholder);
 };
+
+// src/blink-dot/BlinkDot.tsx
+import classNames6 from "classnames";
+import React14 from "react";
+var BlinkDot = (props) => {
+  const { className } = props;
+  return /* @__PURE__ */ React14.createElement("span", {
+    className: classNames6("inline-flex h-1 w-1 justify-center items-center relative", className)
+  }, /* @__PURE__ */ React14.createElement("span", {
+    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
+  }));
+};
 export {
   Article,
+  BlinkDot,
   Breadcrumb,
   Button,
   ButtonType,

package/package.json

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