@bbki.ng/components 1.5.5 → 1.5.6

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;
@@ -133,7 +143,14 @@ interface ImageDropProps<T> {
     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,
@@ -455,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,
@@ -465,11 +556,16 @@ var DropImage = (props) => {
     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,
@@ -508,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-2 w-2 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
@@ -408,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,
@@ -418,11 +511,16 @@ var DropImage = (props) => {
     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,
@@ -461,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-2 w-2 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.5",
+  "version": "1.5.6",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",