@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/fields-previewer.tsx

@@ -1,216 +1,216 @@
-import classNames from 'classnames';
-import { forwardRef, useState } from 'react';
-import { AbsFullscreenGradientBg } from './abs-fullscreen-gradient-bg';
-import { BorderColorAnimation } from './border-color-animation';
-import { FieldsGeneratingIndicator } from './fields-generating-indicator';
-import { PreviewerHeader, PreviewerHeaderProps } from './previewer-header';
-import { useShadow } from '../hooks/use-shadow';
-import { TooltipProvider } from './ui/tooltip';
-
-export interface FieldsPreviewerProps extends PreviewerHeaderProps {
-  fullscreen?: boolean;
-
-  rightSpaceWidth?: number;
-  rightSpaceRef?: (right: HTMLDivElement) => void;
-  rightElement?: React.ReactNode;
-
-  // generating fields
-  streaming?: boolean;
-  streamingText?: string;
-
-  empty?: boolean;
-
-  zIndex?: number;
-
-  padding?: number;
-
-  containerStyle?: string;
-
-  fullContent?: boolean;
-
-  // children means the content inside the previewer, not the right side components
-  children?: React.ReactNode;
-
-  readonly?: boolean;
-
-  disableShadowContainer?: boolean;
-}
-
-const PlaceholderDashedBox = () => {
-  return (
-    <div
-      style={{
-        borderRadius: 10,
-        width: '100%',
-        height: '100%',
-        border: '1px dashed var(---e0e0e0, #E0E0E0)',
-      }}
-    />
-  );
-};
-
-export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
-  ({
-    zIndex = 1,
-    children,
-    title,
-    tips,
-    active,
-    fullscreen,
-    padding = 10,
-    className,
-    empty,
-    rightSpaceWidth,
-    rightSpaceRef,
-    rightElement,
-    streaming,
-    streamingText,
-    onBackClick,
-    dialogContainer,
-    disableShadowContainer,
-    variant = 'fields-previewer',
-    onSave,
-    onCancel,
-    onClear,
-    style,
-    confirmContent,
-    fullContent,
-    confirmTitle,
-    containerStyle,
-    readonly,
-
-    closeBtnLabel,
-    disableOperation,
-    disableConfirm,
-
-    customOperationElement,
-  }: FieldsPreviewerProps, _) => {
-    const p = fullscreen ? 0 : padding;
-    const pr = fullscreen ? 0 : rightSpaceWidth;
-
-    // const absWrapperRef = useRef<HTMLDivElement>(null);
-    const [absContainer, setAbsContainer] = useState<HTMLDivElement | null>(null);
-
-    const isFields = variant === 'fields-previewer';
-    const isData = variant === 'data-previewer';
-
-    const contentCls = classNames({
-      'm-[20px]': isFields,
-      'mx-[12px] mb-[10px]': isData,
-      'p-[10px]': isFields,
-      'p-0': isData,
-      'opacity-60': streaming && isFields,
-      'w-[calc(100%-40px)] h-[calc(100%-90px)] relative overflow-x-hidden overflow-y-auto':
-        isFields,
-      'w-[calc(100%-24px)] h-[calc(100%-62px)] relative overflow-x-hidden overflow-y-auto': isData,
-      'rounded-[4px] bg-white': isData,
-    });
-
-    const fullContentStyle = fullContent
-      ? {
-          width: '100%',
-          height: '100%',
-          padding: 0,
-          margin: 0,
-        }
-      : {};
-
-    const { shadowContainer } = useShadow({
-      id: 'dialog-container',
-      rootEl: dialogContainer,
-      style: containerStyle,
-      wrapperStyle: {
-        zIndex: Date.now(),
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-      },
-    });
-
-    const contentJsx = (
-      <>
-        <PreviewerHeader
-          title={title}
-          tips={tips}
-          active={active}
-          variant={variant}
-          className={className}
-          onBackClick={onBackClick}
-          onSave={streaming ? undefined : onSave}
-          onCancel={streaming ? undefined : onCancel}
-          style={style}
-          dialogContainer={disableShadowContainer ? absContainer! : (shadowContainer || absContainer!)}
-          confirmTitle={confirmTitle}
-          confirmContent={confirmContent}
-          closeBtnLabel={closeBtnLabel}
-          disableOperation={disableOperation}
-          disableConfirm={disableConfirm}
-          onClear={onClear}
-          customOperationElement={customOperationElement}
-        />
-        <div className={contentCls} style={fullContentStyle}>
-          {empty && isFields ? <PlaceholderDashedBox /> : children}
-          {readonly && <div className="absolute inset-0 z-50 cursor-not-allowed" />}
-        </div>
-        {streaming && (
-          // abs center
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <FieldsGeneratingIndicator>{streamingText}</FieldsGeneratingIndicator>
-          </div>
-        )}
-      </>
-    );
-
-    const content = isFields ? (
-      <BorderColorAnimation
-        width={pr ? `calc(100% - ${pr}px)` : '100%'}
-        style={{ overflow: 'hidden' }}
-      >
-        {contentJsx}
-      </BorderColorAnimation>
-    ) : (
-      <div className="h-full" style={{ width: pr ? `calc(100% - ${pr}px)` : '100%' }}>
-        {contentJsx}
-      </div>
-    );
-
-    const rightArea = (
-      <div
-        style={{
-          width: fullscreen ? 0 : rightSpaceWidth,
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          pointerEvents: fullscreen ? 'none' : 'auto',
-        }}
-        className="h-full"
-        ref={(n) => {
-          if (n) {
-            rightSpaceRef?.(n);
-          }
-        }}
-      >
-        {rightElement}
-      </div>
-    );
-
-    return (
-      <TooltipProvider
-        delayDuration={100}
-        zIndex={zIndex}
-      >
-        <AbsFullscreenGradientBg
-          zIndex={zIndex}
-          padding={isFields ? p : 0}
-          disableGradient
-          bgColor="#f6f7fa"
-          ref={setAbsContainer}
-        >
-          {fullscreen ? contentJsx : content}
-          {rightArea}
-        </AbsFullscreenGradientBg>
-      </TooltipProvider>
-    );
-  }
-);
+import classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+import { AbsFullscreenGradientBg } from './abs-fullscreen-gradient-bg';
+import { BorderColorAnimation } from './border-color-animation';
+import { FieldsGeneratingIndicator } from './fields-generating-indicator';
+import { PreviewerHeader, PreviewerHeaderProps } from './previewer-header';
+import { useShadow } from '../hooks/use-shadow';
+import { TooltipProvider } from './ui/tooltip';
+
+export interface FieldsPreviewerProps extends PreviewerHeaderProps {
+  fullscreen?: boolean;
+
+  rightSpaceWidth?: number;
+  rightSpaceRef?: (right: HTMLDivElement) => void;
+  rightElement?: React.ReactNode;
+
+  // generating fields
+  streaming?: boolean;
+  streamingText?: string;
+
+  empty?: boolean;
+
+  zIndex?: number;
+
+  padding?: number;
+
+  containerStyle?: string;
+
+  fullContent?: boolean;
+
+  // children means the content inside the previewer, not the right side components
+  children?: React.ReactNode;
+
+  readonly?: boolean;
+
+  disableShadowContainer?: boolean;
+}
+
+const PlaceholderDashedBox = () => {
+  return (
+    <div
+      style={{
+        borderRadius: 10,
+        width: '100%',
+        height: '100%',
+        border: '1px dashed var(---e0e0e0, #E0E0E0)',
+      }}
+    />
+  );
+};
+
+export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
+  ({
+    zIndex = 1,
+    children,
+    title,
+    tips,
+    active,
+    fullscreen,
+    padding = 10,
+    className,
+    empty,
+    rightSpaceWidth,
+    rightSpaceRef,
+    rightElement,
+    streaming,
+    streamingText,
+    onBackClick,
+    dialogContainer,
+    disableShadowContainer,
+    variant = 'fields-previewer',
+    onSave,
+    onCancel,
+    onClear,
+    style,
+    confirmContent,
+    fullContent,
+    confirmTitle,
+    containerStyle,
+    readonly,
+
+    closeBtnLabel,
+    disableOperation,
+    disableConfirm,
+
+    customOperationElement,
+  }: FieldsPreviewerProps, _) => {
+    const p = fullscreen ? 0 : padding;
+    const pr = fullscreen ? 0 : rightSpaceWidth;
+
+    // const absWrapperRef = useRef<HTMLDivElement>(null);
+    const [absContainer, setAbsContainer] = useState<HTMLDivElement | null>(null);
+
+    const isFields = variant === 'fields-previewer';
+    const isData = variant === 'data-previewer';
+
+    const contentCls = classNames({
+      'm-[20px]': isFields,
+      'mx-[12px] mb-[10px]': isData,
+      'p-[10px]': isFields,
+      'p-0': isData,
+      'opacity-60': streaming && isFields,
+      'w-[calc(100%-40px)] h-[calc(100%-90px)] relative overflow-x-hidden overflow-y-auto':
+        isFields,
+      'w-[calc(100%-24px)] h-[calc(100%-62px)] relative overflow-x-hidden overflow-y-auto': isData,
+      'rounded-[4px] bg-white': isData,
+    });
+
+    const fullContentStyle = fullContent
+      ? {
+          width: '100%',
+          height: '100%',
+          padding: 0,
+          margin: 0,
+        }
+      : {};
+
+    const { shadowContainer } = useShadow({
+      id: 'dialog-container',
+      rootEl: dialogContainer,
+      style: containerStyle,
+      wrapperStyle: {
+        zIndex: Date.now(),
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+      },
+    });
+
+    const contentJsx = (
+      <>
+        <PreviewerHeader
+          title={title}
+          tips={tips}
+          active={active}
+          variant={variant}
+          className={className}
+          onBackClick={onBackClick}
+          onSave={streaming ? undefined : onSave}
+          onCancel={streaming ? undefined : onCancel}
+          style={style}
+          dialogContainer={disableShadowContainer ? absContainer! : (shadowContainer || absContainer!)}
+          confirmTitle={confirmTitle}
+          confirmContent={confirmContent}
+          closeBtnLabel={closeBtnLabel}
+          disableOperation={disableOperation}
+          disableConfirm={disableConfirm}
+          onClear={onClear}
+          customOperationElement={customOperationElement}
+        />
+        <div className={contentCls} style={fullContentStyle}>
+          {empty && isFields ? <PlaceholderDashedBox /> : children}
+          {readonly && <div className="absolute inset-0 z-50 cursor-not-allowed" />}
+        </div>
+        {streaming && (
+          // abs center
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            <FieldsGeneratingIndicator>{streamingText}</FieldsGeneratingIndicator>
+          </div>
+        )}
+      </>
+    );
+
+    const content = isFields ? (
+      <BorderColorAnimation
+        width={pr ? `calc(100% - ${pr}px)` : '100%'}
+        style={{ overflow: 'hidden' }}
+      >
+        {contentJsx}
+      </BorderColorAnimation>
+    ) : (
+      <div className="h-full" style={{ width: pr ? `calc(100% - ${pr}px)` : '100%' }}>
+        {contentJsx}
+      </div>
+    );
+
+    const rightArea = (
+      <div
+        style={{
+          width: fullscreen ? 0 : rightSpaceWidth,
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          pointerEvents: fullscreen ? 'none' : 'auto',
+        }}
+        className="h-full"
+        ref={(n) => {
+          if (n) {
+            rightSpaceRef?.(n);
+          }
+        }}
+      >
+        {rightElement}
+      </div>
+    );
+
+    return (
+      <TooltipProvider
+        delayDuration={100}
+        zIndex={zIndex}
+      >
+        <AbsFullscreenGradientBg
+          zIndex={zIndex}
+          padding={isFields ? p : 0}
+          disableGradient
+          bgColor="#f6f7fa"
+          ref={setAbsContainer}
+        >
+          {fullscreen ? contentJsx : content}
+          {rightArea}
+        </AbsFullscreenGradientBg>
+      </TooltipProvider>
+    );
+  }
+);

package/src/components/font-icon.tsx

@@ -1,65 +1,65 @@
-import { getIconUnicode } from "@baishuyun/ai-feat-utils";
-
-function getFormIconClass(icon: number): string {
-  const isNew = icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
-}
-
-export const AppIcon = ({
-  name
-}: {
-  name: number | string;
-}) => {
-  return (
-    <div className={"imgbg-bsy-app imgbg-bsy-app-" + name}/>
-  );
-}
-
-export const FontIcon = ({
-  code,
-  name,
-  className,
-  fontCls= 'sdk-icon',
-  style,
-  color,
-}: {
-  code?: string;
-  name?: number;
-  className?: string;
-  fontCls?: string;
-  style?: React.CSSProperties;
-  color?: string;
-}) => {
-  if (!code && !name) {
-    return null;
-  }
-
-  if (code) {
-    return (
-      <i
-        className={`${fontCls} ${className || ''}`}
-        style={{ ...style, color }}
-        dangerouslySetInnerHTML={{ __html: code }}
-      />
-    );
-  }
-
-  const iconCode = code || getIconUnicode(name?.toString() || '');
-  if (!iconCode) {
-    return (
-      <i
-        className={getFormIconClass(name!)}
-        style={{ fontSize: 16, lineHeight: 1 }}
-      />
-    )
-  }
-
-  return (
-    <i
-      className={`sdk-icon ${className || ''}`}
-      style={{ ...style, color }}
-      dangerouslySetInnerHTML={{ __html: iconCode }}
-    />
-  );
-};
+import { getIconUnicode } from "@baishuyun/ai-feat-utils";
+
+function getFormIconClass(icon: number): string {
+  const isNew = icon >= 25;
+  const newStr = isNew ? '-new' : '';
+  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
+}
+
+export const AppIcon = ({
+  name
+}: {
+  name: number | string;
+}) => {
+  return (
+    <div className={"imgbg-bsy-app imgbg-bsy-app-" + name}/>
+  );
+}
+
+export const FontIcon = ({
+  code,
+  name,
+  className,
+  fontCls= 'sdk-icon',
+  style,
+  color,
+}: {
+  code?: string;
+  name?: number;
+  className?: string;
+  fontCls?: string;
+  style?: React.CSSProperties;
+  color?: string;
+}) => {
+  if (!code && !name) {
+    return null;
+  }
+
+  if (code) {
+    return (
+      <i
+        className={`${fontCls} ${className || ''}`}
+        style={{ ...style, color }}
+        dangerouslySetInnerHTML={{ __html: code }}
+      />
+    );
+  }
+
+  const iconCode = code || getIconUnicode(name?.toString() || '');
+  if (!iconCode) {
+    return (
+      <i
+        className={getFormIconClass(name!)}
+        style={{ fontSize: 16, lineHeight: 1 }}
+      />
+    )
+  }
+
+  return (
+    <i
+      className={`sdk-icon ${className || ''}`}
+      style={{ ...style, color }}
+      dangerouslySetInnerHTML={{ __html: iconCode }}
+    />
+  );
+};