@bbki.ng/components 1.5.14 → 1.5.17

package/dist/index.d.ts

@@ -89,7 +89,22 @@ declare const NotFound: (props: {
 }) => JSX.Element;
 declare const Error: (props: {
     error: Error;
-}) => JSX.Element;
+}) => JSX.Element;
+declare class ErrorBoundary extends React.Component<{
+    children: any;
+}, {
+    error?: Error;
+    hasError: boolean;
+}> {
+    constructor(props: {
+        children: any;
+    });
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: Error;
+    };
+    render(): any;
+}
 
 declare type PopConfirmProps = {
     onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>> | (() => Promise<void>);
@@ -126,12 +141,13 @@ declare enum SkeletonColor {
     BLACK = "black"
 }
 interface SkeletonProps {
+    className?: string;
     width?: number;
     height?: number;
     bgColor?: SkeletonColor;
 }
 interface ArticleSkeletonProps extends SkeletonProps {
-    titleLength: number;
+    titleLength?: number;
     descriptionLength?: number;
     children?: any;
 }
@@ -208,4 +224,4 @@ interface NoiseCoverProps {
 }
 declare const NoiseCover: (props: NoiseCoverProps) => JSX.Element;
 
-export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };
+export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };

package/dist/index.js

@@ -66,6 +66,7 @@ __export(src_exports, {
   ButtonType: () => ButtonType,
   DropImage: () => DropImage,
   Error: () => Error2,
+  ErrorBoundary: () => ErrorBoundary,
   Link: () => Link,
   LinkColor: () => LinkColor,
   LinkList: () => LinkList,
@@ -230,7 +231,8 @@ var Breadcrumb = (props) => {
     const isNonEnName = !/^[a-zA-Z~]+$/.test(name);
     const offsetCls = (0, import_classnames3.default)({ "relative top-[2px]": isNonEnName });
     const link = path ? /* @__PURE__ */ import_react4.default.createElement(Link, {
-      to: path
+      to: path,
+      className: offsetCls
     }, name) : /* @__PURE__ */ import_react4.default.createElement("span", {
       className: (0, import_classnames3.default)("text-gray-400", offsetCls)
     }, name);
@@ -359,6 +361,23 @@ var Error2 = (props) => {
     className: "flex justify-center items-center text-white"
   }, /* @__PURE__ */ import_react9.default.createElement("code", null, error.name, ": ", error.message));
 };
+var ErrorBoundary = class extends import_react9.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    if (this.state.error && this.state.hasError) {
+      return /* @__PURE__ */ import_react9.default.createElement(Error2, {
+        error: this.state.error
+      });
+    }
+    return this.props.children;
+  }
+};
 
 // src/pop-confirm/PopConfirm.tsx
 var import_react11 = __toESM(require("react"));
@@ -481,14 +500,19 @@ var COLOR_MAPPING2 = {
   ["black" /* BLACK */]: "bg-gray-200"
 };
 var Skeleton = (props) => {
-  const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
+  const {
+    bgColor = "gray" /* GRAY */,
+    width = 26,
+    height = 24,
+    className
+  } = props;
   return /* @__PURE__ */ import_react14.default.createElement("div", {
-    className: (0, import_classnames7.default)(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
+    className: (0, import_classnames7.default)(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded", className),
     style: { width, height }
   });
 };
 var ArticleSkeleton = (props) => {
-  const { children, titleLength, descriptionLength } = props;
+  const { children, titleLength = 0, descriptionLength } = props;
   return /* @__PURE__ */ import_react14.default.createElement(Article, {
     title: /* @__PURE__ */ import_react14.default.createElement(Skeleton, {
       width: 36 * titleLength,
@@ -504,10 +528,17 @@ var LinkListSkeleton = (props) => {
   const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
   const renderSkeleton = (length) => {
     return /* @__PURE__ */ import_react14.default.createElement(Skeleton, {
+      className: "inline-block",
       width: length * 16,
       bgColor: "blue" /* BLUE */
     });
   };
+  if (!rest.titleLength) {
+    return /* @__PURE__ */ import_react14.default.createElement(List, {
+      items: linksLength,
+      itemRenderer: renderSkeleton
+    });
+  }
   return /* @__PURE__ */ import_react14.default.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ import_react14.default.createElement(List, {
     items: linksLength,
     itemRenderer: renderSkeleton
@@ -812,6 +843,7 @@ module.exports = __toCommonJS(src_exports);
   ButtonType,
   DropImage,
   Error,
+  ErrorBoundary,
   Link,
   LinkColor,
   LinkList,

package/dist/index.mjs

@@ -173,7 +173,8 @@ var Breadcrumb = (props) => {
     const isNonEnName = !/^[a-zA-Z~]+$/.test(name);
     const offsetCls = classNames3({ "relative top-[2px]": isNonEnName });
     const link = path ? /* @__PURE__ */ React5.createElement(Link, {
-      to: path
+      to: path,
+      className: offsetCls
     }, name) : /* @__PURE__ */ React5.createElement("span", {
       className: classNames3("text-gray-400", offsetCls)
     }, name);
@@ -302,6 +303,23 @@ var Error2 = (props) => {
     className: "flex justify-center items-center text-white"
   }, /* @__PURE__ */ React10.createElement("code", null, error.name, ": ", error.message));
 };
+var ErrorBoundary = class extends React10.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    if (this.state.error && this.state.hasError) {
+      return /* @__PURE__ */ React10.createElement(Error2, {
+        error: this.state.error
+      });
+    }
+    return this.props.children;
+  }
+};
 
 // src/pop-confirm/PopConfirm.tsx
 import React12, { useState as useState2 } from "react";
@@ -424,14 +442,19 @@ var COLOR_MAPPING2 = {
   ["black" /* BLACK */]: "bg-gray-200"
 };
 var Skeleton = (props) => {
-  const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
+  const {
+    bgColor = "gray" /* GRAY */,
+    width = 26,
+    height = 24,
+    className
+  } = props;
   return /* @__PURE__ */ React15.createElement("div", {
-    className: classNames6(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
+    className: classNames6(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded", className),
     style: { width, height }
   });
 };
 var ArticleSkeleton = (props) => {
-  const { children, titleLength, descriptionLength } = props;
+  const { children, titleLength = 0, descriptionLength } = props;
   return /* @__PURE__ */ React15.createElement(Article, {
     title: /* @__PURE__ */ React15.createElement(Skeleton, {
       width: 36 * titleLength,
@@ -447,10 +470,17 @@ var LinkListSkeleton = (props) => {
   const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
   const renderSkeleton = (length) => {
     return /* @__PURE__ */ React15.createElement(Skeleton, {
+      className: "inline-block",
       width: length * 16,
       bgColor: "blue" /* BLUE */
     });
   };
+  if (!rest.titleLength) {
+    return /* @__PURE__ */ React15.createElement(List, {
+      items: linksLength,
+      itemRenderer: renderSkeleton
+    });
+  }
   return /* @__PURE__ */ React15.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ React15.createElement(List, {
     items: linksLength,
     itemRenderer: renderSkeleton
@@ -756,6 +786,7 @@ export {
   ButtonType,
   DropImage,
   Error2 as Error,
+  ErrorBoundary,
   Link,
   LinkColor,
   LinkList,

package/package.json

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