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

package/src/components/subform-fields-value-checker.tsx

@@ -1,184 +1,184 @@
-import { memo, useCallback, useEffect, useState } from 'react';
-import { FieldType, IField } from '@baishuyun/types';
-import { FieldTypeNameMap } from '../const/ui';
-import { toHumanReadable } from '../lib/utils';
-import { Collapsible, CollapsibleContent } from './collapsible';
-import LineChecker from './line-checker';
-
-const Checker = ({
-  disabled,
-  onCheckedChange,
-
-  label,
-  val,
-  streaming,
-  readonly,
-}: {
-  label: string;
-  val: string;
-  onCheckedChange: (v: boolean) => void;
-  disabled?: boolean;
-  desc: string;
-  readonly?: boolean;
-  streaming?: boolean;
-}) => {
-  return (
-    <LineChecker
-      streaming={streaming}
-      readonly={readonly}
-      title={label}
-      disabled={disabled}
-      defaultChecked={true}
-      onCheckedChange={onCheckedChange}
-      className="pl-9"
-      shortDesc={val}
-    />
-  );
-};
-
-const SubFieldChecker = memo(
-  ({
-    field,
-    readonly,
-    onCheckedChange,
-    streaming,
-  }: {
-    onCheckedChange: (
-      checked: boolean,
-      field: IField,
-    ) => void;
-    readonly?: boolean;
-    streaming?: boolean;
-    field: IField;
-  }) => {
-    const { widget, label } = field;
-    if (!widget) {
-      return null;
-    }
-
-    const { type, value: v } = widget;
-    const t = type as FieldType;
-    if (!FieldTypeNameMap.hasOwnProperty(t)) {
-      return null;
-    }
-
-    const value = toHumanReadable(v, t);
-
-    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
-
-    const handleCheckChange = useCallback(
-      (v: boolean) => {
-        onCheckedChange(v, field);
-      },
-      [field]
-    );
-
-    useEffect(() => {
-      // 默认勾选上
-      handleCheckChange(true);
-    }, []);
-
-    return (
-      <Checker
-        streaming={streaming}
-        readonly={readonly}
-        desc={typeDesc}
-        label={label}
-        val={value as string}
-        onCheckedChange={handleCheckChange}
-      />
-    );
-  },
-  (p1, p2) => {
-    const isNameEqual =
-      p1.field.widget?.widgetName === p2.field.widget?.widgetName &&
-      p1.readonly === p2.readonly &&
-      p1.streaming === p2.streaming;
-    return isNameEqual;
-  }
-);
-
-type F = IField;
-
-interface generatedField {
-  label: string;
-  fieldName: string;
-  fieldType: FieldType;
-  value: any;
-}
-
-type onSubformFieldChangeParam = {
-  checked: boolean;
-  field: F;
-  parentFieldName: string;
-  row?: number;
-  col?: number;
-};
-
-/**
- * 专门渲染子表单下的字段勾选
- */
-export const SubformFieldsValueChecker = ({
-  subformField,
-  onChange,
-  streaming,
-  readonly,
-}: {
-  onChange: (p: onSubformFieldChangeParam) => void;
-  subformField: IField;
-  streaming?: boolean;
-  readonly?: boolean;
-}) => {
-  const subformValue = subformField.widget?.value;
-  if (!Array.isArray(subformValue) || subformValue.length === 0) {
-    return null;
-  }
-
-  const subformRecords = subformValue as generatedField[][];
-
-  // 默认展开
-  const [openAll, setOpenAll] = useState(true);
-
-  return (
-    <Collapsible open={openAll} onOpenChange={setOpenAll}>
-      <CollapsibleContent>
-        {subformRecords.map((rowData: generatedField[], row: number) => {
-          if (!rowData || !rowData.length) {
-            return null;
-          }
-          return (
-            <Collapsible defaultOpen={true} key={row}>
-              <CollapsibleContent>
-                {rowData.map((fData: generatedField, col: number) => {
-                  return (
-                    <SubFieldChecker
-                      readonly={readonly}
-                      streaming={streaming}
-                      field={{
-                        label: fData.label,
-                        widget: {
-                          widgetName: fData.fieldName,
-                          type: fData.fieldType,
-                          value: fData.value,
-                        },
-                      }}
-                      onCheckedChange={(checked: boolean, field: F) => {
-                        onChange({
-                          checked,
-                          field,
-                          row,
-                          col,
-                          parentFieldName: subformField.widget?.widgetName ?? "",
-                        });
-                      }}
-                    />
-                  );
-                })}
-              </CollapsibleContent>
-            </Collapsible>
-          );
-        })}
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
+import { memo, useCallback, useEffect, useState } from 'react';
+import { FieldType, IField } from '@baishuyun/types';
+import { FieldTypeNameMap } from '../const/ui';
+import { toHumanReadable } from '../lib/utils';
+import { Collapsible, CollapsibleContent } from './collapsible';
+import LineChecker from './line-checker';
+
+const Checker = ({
+  disabled,
+  onCheckedChange,
+
+  label,
+  val,
+  streaming,
+  readonly,
+}: {
+  label: string;
+  val: string;
+  onCheckedChange: (v: boolean) => void;
+  disabled?: boolean;
+  desc: string;
+  readonly?: boolean;
+  streaming?: boolean;
+}) => {
+  return (
+    <LineChecker
+      streaming={streaming}
+      readonly={readonly}
+      title={label}
+      disabled={disabled}
+      defaultChecked={true}
+      onCheckedChange={onCheckedChange}
+      className="pl-9"
+      shortDesc={val}
+    />
+  );
+};
+
+const SubFieldChecker = memo(
+  ({
+    field,
+    readonly,
+    onCheckedChange,
+    streaming,
+  }: {
+    onCheckedChange: (
+      checked: boolean,
+      field: IField,
+    ) => void;
+    readonly?: boolean;
+    streaming?: boolean;
+    field: IField;
+  }) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+    const t = type as FieldType;
+    if (!FieldTypeNameMap.hasOwnProperty(t)) {
+      return null;
+    }
+
+    const value = toHumanReadable(v, t);
+
+    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
+
+    const handleCheckChange = useCallback(
+      (v: boolean) => {
+        onCheckedChange(v, field);
+      },
+      [field]
+    );
+
+    useEffect(() => {
+      // 默认勾选上
+      handleCheckChange(true);
+    }, []);
+
+    return (
+      <Checker
+        streaming={streaming}
+        readonly={readonly}
+        desc={typeDesc}
+        label={label}
+        val={value as string}
+        onCheckedChange={handleCheckChange}
+      />
+    );
+  },
+  (p1, p2) => {
+    const isNameEqual =
+      p1.field.widget?.widgetName === p2.field.widget?.widgetName &&
+      p1.readonly === p2.readonly &&
+      p1.streaming === p2.streaming;
+    return isNameEqual;
+  }
+);
+
+type F = IField;
+
+interface generatedField {
+  label: string;
+  fieldName: string;
+  fieldType: FieldType;
+  value: any;
+}
+
+type onSubformFieldChangeParam = {
+  checked: boolean;
+  field: F;
+  parentFieldName: string;
+  row?: number;
+  col?: number;
+};
+
+/**
+ * 专门渲染子表单下的字段勾选
+ */
+export const SubformFieldsValueChecker = ({
+  subformField,
+  onChange,
+  streaming,
+  readonly,
+}: {
+  onChange: (p: onSubformFieldChangeParam) => void;
+  subformField: IField;
+  streaming?: boolean;
+  readonly?: boolean;
+}) => {
+  const subformValue = subformField.widget?.value;
+  if (!Array.isArray(subformValue) || subformValue.length === 0) {
+    return null;
+  }
+
+  const subformRecords = subformValue as generatedField[][];
+
+  // 默认展开
+  const [openAll, setOpenAll] = useState(true);
+
+  return (
+    <Collapsible open={openAll} onOpenChange={setOpenAll}>
+      <CollapsibleContent>
+        {subformRecords.map((rowData: generatedField[], row: number) => {
+          if (!rowData || !rowData.length) {
+            return null;
+          }
+          return (
+            <Collapsible defaultOpen={true} key={row}>
+              <CollapsibleContent>
+                {rowData.map((fData: generatedField, col: number) => {
+                  return (
+                    <SubFieldChecker
+                      readonly={readonly}
+                      streaming={streaming}
+                      field={{
+                        label: fData.label,
+                        widget: {
+                          widgetName: fData.fieldName,
+                          type: fData.fieldType,
+                          value: fData.value,
+                        },
+                      }}
+                      onCheckedChange={(checked: boolean, field: F) => {
+                        onChange({
+                          checked,
+                          field,
+                          row,
+                          col,
+                          parentFieldName: subformField.widget?.widgetName ?? "",
+                        });
+                      }}
+                    />
+                  );
+                })}
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        })}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/components/tab-radio-group.tsx

@@ -1,83 +1,83 @@
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-
-import { cn } from '../lib/utils';
-import { BsTooltip } from './tooltip';
-
-export interface TabRadioOption {
-  value: string;
-  label: React.ReactNode;
-  tooltips?: string;
-  className?: string;
-}
-
-export interface TabRadioGroupProps extends Omit<
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
-  'children'
-> {
-  options: TabRadioOption[];
-}
-
-const TabRadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  TabRadioGroupProps
->(({ className, options, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      ref={ref}
-      className={cn(
-        'flex flex-col items-start justify-center p-[2px] rounded-[4px] bg-[#EFF0F6]',
-        className
-      )}
-      {...props}
-    >
-      <div className="flex gap-[2px] items-center w-full">
-        {options.map((option) => (
-          <TabRadioItem
-            key={option.value}
-            value={option.value}
-            tooltips={option.tooltips}
-            className={option.className}
-          >
-            {option.label}
-          </TabRadioItem>
-        ))}
-      </div>
-    </RadioGroupPrimitive.Root>
-  );
-});
-TabRadioGroup.displayName = 'TabRadioGroup';
-
-interface TabRadioItemProps extends React.ComponentPropsWithoutRef<
-  typeof RadioGroupPrimitive.Item
-> {
-  children: React.ReactNode;
-  tooltips?: string;
-  className?: string;
-}
-
-const TabRadioItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  TabRadioItemProps
->(({ className, children, tooltips, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'flex-1 h-[30px] flex items-center justify-center px-[10px] py-[7px] rounded-[4px] text-[14px] text-[#121111] cursor-pointer',
-        'border border-solid border-[#EFF0F6] bg-transparent',
-        'transition-all ease-out duration-200',
-        'outline-none',
-        'hover:text-[#121111] hover:border-[#E0E0E0] hover:bg-white',
-        'data-[state=checked]:text-[#0265FF] data-[state=checked]:border-[#E0E0E0] data-[state=checked]:bg-white',
-        className
-      )}
-      {...props}
-    >
-      {tooltips ? <BsTooltip content={tooltips}>{children}</BsTooltip> : children}
-    </RadioGroupPrimitive.Item>
-  );
-});
-TabRadioItem.displayName = 'TabRadioItem';
-
-export { TabRadioGroup, TabRadioItem };
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../lib/utils';
+import { BsTooltip } from './tooltip';
+
+export interface TabRadioOption {
+  value: string;
+  label: React.ReactNode;
+  tooltips?: string;
+  className?: string;
+}
+
+export interface TabRadioGroupProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+  'children'
+> {
+  options: TabRadioOption[];
+}
+
+const TabRadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  TabRadioGroupProps
+>(({ className, options, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      ref={ref}
+      className={cn(
+        'flex flex-col items-start justify-center p-[2px] rounded-[4px] bg-[#EFF0F6]',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex gap-[2px] items-center w-full">
+        {options.map((option) => (
+          <TabRadioItem
+            key={option.value}
+            value={option.value}
+            tooltips={option.tooltips}
+            className={option.className}
+          >
+            {option.label}
+          </TabRadioItem>
+        ))}
+      </div>
+    </RadioGroupPrimitive.Root>
+  );
+});
+TabRadioGroup.displayName = 'TabRadioGroup';
+
+interface TabRadioItemProps extends React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+> {
+  children: React.ReactNode;
+  tooltips?: string;
+  className?: string;
+}
+
+const TabRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  TabRadioItemProps
+>(({ className, children, tooltips, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'flex-1 h-[30px] flex items-center justify-center px-[10px] py-[7px] rounded-[4px] text-[14px] text-[#121111] cursor-pointer',
+        'border border-solid border-[#EFF0F6] bg-transparent',
+        'transition-all ease-out duration-200',
+        'outline-none',
+        'hover:text-[#121111] hover:border-[#E0E0E0] hover:bg-white',
+        'data-[state=checked]:text-[#0265FF] data-[state=checked]:border-[#E0E0E0] data-[state=checked]:bg-white',
+        className
+      )}
+      {...props}
+    >
+      {tooltips ? <BsTooltip content={tooltips}>{children}</BsTooltip> : children}
+    </RadioGroupPrimitive.Item>
+  );
+});
+TabRadioItem.displayName = 'TabRadioItem';
+
+export { TabRadioGroup, TabRadioItem };

package/src/components/tooltip.tsx

@@ -1,53 +1,53 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
-
-export const BsTooltip = ({
-  children,
-  content,
-}: {
-  children: React.ReactNode;
-  content: React.ReactNode;
-}) => {
-  const triggerRef = useRef<HTMLSpanElement | null>(null);
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    const triggerEl = triggerRef.current;
-    if (!triggerEl) {
-      return;
-    }
-
-    const rootNode = triggerEl.getRootNode();
-    if (rootNode instanceof ShadowRoot) {
-      const existing = rootNode.querySelector<HTMLElement>('[data-bs-tooltip-portal]');
-      if (existing) {
-        setPortalContainer(existing);
-        return;
-      }
-
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-tooltip-portal', 'true');
-      rootNode.appendChild(container);
-      setPortalContainer(container);
-      return;
-    }
-
-    setPortalContainer(null);
-  }, []);
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span ref={triggerRef} className="inline-flex">
-          {children}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent
-        portalContainer={portalContainer}
-        className="rounded-[4px] bg-[#525867] px-[12px] !py-[7px] text-[12px] text-white leading-normal max-w-[288px] animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 duration-200"
-      >
-        {content}
-      </TooltipContent>
-    </Tooltip>
-  );
-};
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+export const BsTooltip = ({
+  children,
+  content,
+}: {
+  children: React.ReactNode;
+  content: React.ReactNode;
+}) => {
+  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) {
+      return;
+    }
+
+    const rootNode = triggerEl.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>('[data-bs-tooltip-portal]');
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-tooltip-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+      return;
+    }
+
+    setPortalContainer(null);
+  }, []);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span ref={triggerRef} className="inline-flex">
+          {children}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        portalContainer={portalContainer}
+        className="rounded-[4px] bg-[#525867] px-[12px] !py-[7px] text-[12px] text-white leading-normal max-w-[288px] animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 duration-200"
+      >
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+};