feat(ui): Boundary add className prop & built in ob-boundary-error, o…

…b-boundary-403 and ob-boundary-404 className
oceanbase · Apr 25, 2024 · 59be31e · 59be31e
1 parent 1eb26e6
commit 59be31e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/packages/ui/src/Boundary/Components/Code.tsx b/packages/ui/src/Boundary/Components/Code.tsx
@@ -6,8 +6,9 @@ import type { CodeType } from '../constant';
 import { CODE_PRESET } from '../constant';
 import type { BoundaryLocale } from '../IBoundary';
 import zhCN from '../locale/zh-CN';
+import classNames from 'classnames';
 
-export interface IBoundaryCode extends LocaleWrapperProps {
+export interface IBoundaryCode extends LocaleWrapperProps, React.HTMLProps<HTMLDivElement> {
   code: CodeType;
   onClick?: () => void;
   children?: React.ReactNode;
@@ -18,7 +19,8 @@ export interface IBoundaryCode extends LocaleWrapperProps {
 }
 
 const BoundaryCode: React.FC<IBoundaryCode> = props => {
-  const { children, onClick, code, imageUrl, title, buttonText, locale } = props;
+  const { children, onClick, code, imageUrl, title, buttonText, locale, className, ...restProps } =
+    props;
 
   const info = useMemo(() => {
     const data = CODE_PRESET(locale);
@@ -27,7 +29,15 @@ const BoundaryCode: React.FC<IBoundaryCode> = props => {
   }, [code, locale]);
 
   return (
-    <div className="boundary-container boundary-code">
+    <div
+      className={classNames(
+        'boundary-container',
+        'boundary-code',
+        `ob-boundary-${code}`,
+        className
+      )}
+      {...restProps}
+    >
       <div className="empty">
         <img src={imageUrl || info.imageUrl} />
         <h4>{title || info.title}</h4>

diff --git a/packages/ui/src/Boundary/Components/Exception.tsx b/packages/ui/src/Boundary/Components/Exception.tsx
@@ -5,8 +5,9 @@ import LocaleWrapper from '../../locale/LocaleWrapper';
 import { EXCEPTION_PRESET } from '../constant';
 import type { BoundaryLocale } from '../IBoundary';
 import zhCN from '../locale/zh-CN';
+import classNames from 'classnames';
 
-export interface ExceptionProps extends LocaleWrapperProps {
+export interface ExceptionProps extends LocaleWrapperProps, React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   style?: React.CSSProperties;
   imageUrl?: string;
@@ -62,6 +63,8 @@ class BoundaryException extends React.PureComponent<ExceptionProps, ExceptionSta
       showError = false,
       hasButton = true,
       locale,
+      className,
+      ...restProps
     } = this.props;
 
     const errorInfo = EXCEPTION_PRESET(locale).ERROR_BOUNDARY;
@@ -72,7 +75,10 @@ class BoundaryException extends React.PureComponent<ExceptionProps, ExceptionSta
 
     if (this.state?.hasError) {
       return (
-        <div className="boundary-container">
+        <div
+          className={classNames('boundary-container', 'ob-boundary-error', className)}
+          {...restProps}
+        >
           <div className="empty">
             <img src={imageUrl || errorInfo.imageUrl} />
             <h4>{title || errorInfo.title}</h4>
@@ -105,7 +111,14 @@ class BoundaryException extends React.PureComponent<ExceptionProps, ExceptionSta
       );
     } else if (isNotCompatible) {
       return (
-        <div className="boundary-container">
+        <div
+          className={classNames(
+            'boundary-container',
+            'ob-boundary-browser-not-compatible',
+            className
+          )}
+          {...restProps}
+        >
           <div className="empty">
             <img src={imageUrl || notCompatibleInfo.imageUrl} />
             <h4>{title || notCompatibleInfo.title}</h4>

diff --git a/packages/ui/src/Boundary/Components/Function.tsx b/packages/ui/src/Boundary/Components/Function.tsx
@@ -1,22 +1,26 @@
 import { Button } from '@oceanbase/design';
 import React, { useMemo } from 'react';
 import type { FunctionConfigType, FunctionStateType } from '../constant';
+import classNames from 'classnames';
 
-export interface IBoundaryFunction {
+export interface IBoundaryFunction extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   state: FunctionStateType;
   config: FunctionConfigType;
   onClick?: () => void;
 }
 
 export const BoundaryFunction: React.FC<IBoundaryFunction> = props => {
-  const { children, state, config, onClick } = props;
+  const { children, state, config, onClick, className, ...restProps } = props;
   const info = useMemo(() => {
     return state ? config[state] : config[Object.keys(config)[0]];
   }, [config, state]);
 
   return (
-    <div className="boundary-container">
+    <div
+      className={classNames('boundary-container', 'ob-boundary-function', className)}
+      {...restProps}
+    >
       <div className="empty">
         <img src={info.imageUrl} />
         <h4>{info.title}</h4>