@bbki.ng/components 1.5.5 → 1.5.8

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,30 @@ 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;
+
+declare type threeColLayoutProps = {
+    leftRenderer?: () => ReactElement | null;
+    rightRenderer?: () => ReactElement | null;
+    middleRenderer?: () => ReactElement | null;
+};
+declare const ThreeColLayout: (props: threeColLayoutProps) => JSX.Element;
+
+interface listProps {
+    className?: string;
+    compact?: boolean;
+    items: any[];
+    itemRenderer: (itemProps: any, index: number) => ReactElement;
+    horizontal?: boolean;
+}
+declare const List: FunctionComponent<listProps>;
+
+export { Article, ArticleProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkProps, List, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, listProps, threeColLayoutProps };

package/dist/index.js

@@ -59,12 +59,14 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var src_exports = {};
 __export(src_exports, {
   Article: () => Article,
+  BlinkDot: () => BlinkDot,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   ButtonType: () => ButtonType,
   DropImage: () => DropImage,
   Link: () => Link,
   LinkColor: () => LinkColor,
+  List: () => List,
   Logo: () => Logo,
   Nav: () => Nav,
   Page: () => Page,
@@ -74,7 +76,8 @@ __export(src_exports, {
   SkeletonColor: () => SkeletonColor,
   Table: () => Table,
   Tag: () => Tag,
-  Tags: () => Tags
+  Tags: () => Tags,
+  ThreeColLayout: () => ThreeColLayout
 });
 
 // src/article/Article.tsx
@@ -455,6 +458,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 +558,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,26 +606,80 @@ 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"
+  }));
+};
+
+// src/layout/layout.tsx
+var import_classnames8 = __toESM(require("classnames"));
+var import_react16 = __toESM(require("react"));
+var ThreeColLayout = (props) => {
+  const { leftRenderer, middleRenderer, rightRenderer } = props;
+  const colCls = (0, import_classnames8.default)("max-h-full overflow-auto md:block py-64");
+  return /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: "grid grid-cols-1 xl:grid-cols-3 gap-4 h-full w-full"
+  }, /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: (0, import_classnames8.default)("hidden", colCls)
+  }, leftRenderer && leftRenderer()), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: (0, import_classnames8.default)(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
+      hidden: !middleRenderer
+    })
+  }, middleRenderer && middleRenderer()), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: (0, import_classnames8.default)("hidden", colCls)
+  }, rightRenderer && rightRenderer()));
+};
+
+// src/list/list.tsx
+var import_classnames9 = __toESM(require("classnames"));
+var import_react17 = __toESM(require("react"));
+var List = (props) => {
+  const { items, itemRenderer, className, horizontal, compact } = props;
+  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
+  return /* @__PURE__ */ import_react17.default.createElement("ul", {
+    className: (0, import_classnames9.default)(className, "list-style-none", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ import_react17.default.createElement("li", {
+      key: item.id || index,
+      className: (0, import_classnames9.default)(spaceCls, "flex-shrink-0")
+    }, itemRenderer(item, index));
+  }));
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Article,
+  BlinkDot,
   Breadcrumb,
   Button,
   ButtonType,
   DropImage,
   Link,
   LinkColor,
+  List,
   Logo,
   Nav,
   Page,
@@ -537,5 +689,6 @@ module.exports = __toCommonJS(src_exports);
   SkeletonColor,
   Table,
   Tag,
-  Tags
+  Tags,
+  ThreeColLayout
 });

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,24 +559,78 @@ 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"
+  }));
+};
+
+// src/layout/layout.tsx
+import cls2 from "classnames";
+import React15 from "react";
+var ThreeColLayout = (props) => {
+  const { leftRenderer, middleRenderer, rightRenderer } = props;
+  const colCls = cls2("max-h-full overflow-auto md:block py-64");
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: "grid grid-cols-1 xl:grid-cols-3 gap-4 h-full w-full"
+  }, /* @__PURE__ */ React15.createElement("div", {
+    className: cls2("hidden", colCls)
+  }, leftRenderer && leftRenderer()), /* @__PURE__ */ React15.createElement("div", {
+    className: cls2(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
+      hidden: !middleRenderer
+    })
+  }, middleRenderer && middleRenderer()), /* @__PURE__ */ React15.createElement("div", {
+    className: cls2("hidden", colCls)
+  }, rightRenderer && rightRenderer()));
+};
+
+// src/list/list.tsx
+import cls3 from "classnames";
+import React16 from "react";
+var List = (props) => {
+  const { items, itemRenderer, className, horizontal, compact } = props;
+  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
+  return /* @__PURE__ */ React16.createElement("ul", {
+    className: cls3(className, "list-style-none", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ React16.createElement("li", {
+      key: item.id || index,
+      className: cls3(spaceCls, "flex-shrink-0")
+    }, itemRenderer(item, index));
+  }));
+};
 export {
   Article,
+  BlinkDot,
   Breadcrumb,
   Button,
   ButtonType,
   DropImage,
   Link,
   LinkColor,
+  List,
   Logo,
   Nav,
   Page,
@@ -488,5 +640,6 @@ export {
   SkeletonColor,
   Table,
   Tag,
-  Tags
+  Tags,
+  ThreeColLayout
 };

package/package.json

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