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

package/src/components/agent-helper/condition-item/index.tsx

@@ -1,237 +1,237 @@
-import { useState, useCallback, useRef, useMemo } from 'react';
-import type { IField, IConditionItem, relationalOperator, IFieldValueService } from '@baishuyun/types';
-import { getAvailableOperators, getDefaultOperator } from '@baishuyun/ai-feat-utils';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-import { FieldSelect } from '../field-select';
-import { RelationalOperatorSelect } from '../relational-operator-select';
-import { FieldValueInput } from '../field-value-input';
-import { TrashIcon } from '../../bs-icons';
-
-// ── Helpers ──────────────────────────────────────────────────────────
-
-function findFieldKey(_: IField[], targetField: IField): string | undefined {
-  return targetField.widget?.widgetName;
-
-  // for (let i = 0; i < fields.length; i++) {
-  //   if (fields[i] === targetField) return targetField.widget?.widgetName || String(i);
-  // }
-  // return undefined;
-}
-
-function generateId(): string {
-  return `cond-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-}
-
-// ── Props ────────────────────────────────────────────────────────────
-
-export interface ConditionItemProps {
-  fields: IField[];
-  value?: IConditionItem;
-  defaultValue?: IConditionItem;
-  onChange?: (item: IConditionItem) => void;
-  onRemoveClick?: () => void;
-  service?: IFieldValueService;
-  disabled?: boolean;
-  className?: string;
-}
-
-// ── Component ────────────────────────────────────────────────────────
-
-export const ConditionItem = ({
-  fields,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  onRemoveClick,
-  service,
-  disabled = false,
-  className,
-}: ConditionItemProps) => {
-  const idRef = useRef<string>(controlledValue?.id || defaultValue?.id || generateId());
-
-  const [internalField, setInternalField] = useState<IField | undefined>(
-    defaultValue?.field,
-  );
-  const [internalKey, setInternalKey] = useState<string | undefined>(() =>
-    defaultValue?.field ? findFieldKey(fields, defaultValue.field) : undefined,
-  );
-  const [internalOperator, setInternalOperator] = useState<relationalOperator>(
-    defaultValue?.operator ||
-      getDefaultOperator(defaultValue?.field?.widget?.type),
-  );
-  const [internalValue, setInternalValue] = useState<unknown>(
-    defaultValue?.value,
-  );
-
-  const isControlled = controlledValue !== undefined;
-
-  const currentField = isControlled ? controlledValue.field : internalField;
-  const currentKey = useMemo(() => {
-    if (isControlled && controlledValue.field) {
-      return findFieldKey(fields, controlledValue.field);
-    }
-    return internalKey;
-  }, [isControlled, controlledValue?.field, fields, internalKey]);
-  const currentOperator = isControlled
-    ? controlledValue.operator
-    : internalOperator;
-  const currentValue = isControlled ? controlledValue.value : internalValue;
-
-  const fieldType = currentField?.widget?.type;
-  const availableOperators = useMemo(
-    () => getAvailableOperators(fieldType),
-    [fieldType],
-  );
-
-  const emitChange = useCallback(
-    (field: IField, operator: relationalOperator, value: unknown) => {
-      onChange?.({
-        id: idRef.current,
-        field,
-        operator,
-        value,
-      });
-    },
-    [onChange],
-  );
-
-  // ── Handlers ──────────────────────────────────────────────────
-
-  const handleFieldChange = useCallback(
-    (field: IField, nodeKey: string) => {
-      const newOperator = getDefaultOperator(field.widget?.type);
-
-      if (!isControlled) {
-        setInternalField(field);
-        setInternalKey(nodeKey);
-        setInternalOperator(newOperator);
-        setInternalValue(undefined);
-      }
-
-      emitChange(field, newOperator, undefined);
-    },
-    [isControlled, emitChange],
-  );
-
-  const handleOperatorChange = useCallback(
-    (operator: relationalOperator) => {
-      const isEmptyOp = operator === 'empty' || operator === 'not_empty';
-      const isRangeOp = operator === 'range';
-      const isMultiOp = operator === 'in' || operator === 'nin' || operator === 'all';
-
-      let newValue: unknown;
-      if (isEmptyOp) {
-        newValue = undefined;
-      } else if (isRangeOp) {
-        newValue = { min: undefined, max: undefined };
-      } else if (isMultiOp) {
-        newValue = [];
-      } else if (
-        typeof currentValue === 'object' &&
-        currentValue !== null &&
-        !Array.isArray(currentValue)
-      ) {
-        newValue = undefined;
-      } else {
-        newValue = currentValue;
-      }
-
-      if (!isControlled) {
-        setInternalOperator(operator);
-        if (isEmptyOp || isRangeOp || isMultiOp) setInternalValue(newValue);
-      }
-
-      if (currentField) {
-        emitChange(currentField, operator, newValue);
-      }
-    },
-    [isControlled, currentField, currentValue, emitChange],
-  );
-
-  const handleValueChange = useCallback(
-    (value: unknown) => {
-      if (!isControlled) {
-        setInternalValue(value);
-      }
-
-      if (currentField) {
-        emitChange(currentField, currentOperator, value);
-      }
-    },
-    [isControlled, currentField, currentOperator, emitChange],
-  );
-
-  const hideValueInput =
-    currentField != null &&
-    (currentOperator === 'empty' || currentOperator === 'not_empty');
-
-  return (
-    <div className={cn('flex items-center gap-[10px]', className)}>
-      <FieldSelect
-        fields={fields}
-        value={currentKey}
-        onChange={handleFieldChange}
-        placeholder="请选择字段"
-        searchPlaceholder="输入字段名称来搜索"
-        disabled={disabled}
-        showTypeBadge
-        className="w-[200px] shrink-0"
-      />
-
-      <RelationalOperatorSelect
-        value={currentOperator}
-        onChange={handleOperatorChange}
-        operators={availableOperators}
-        borderless
-        disabled={disabled}
-        className="w-[120px] shrink-0"
-      />
-
-      {hideValueInput ? (
-        <div className="flex-1 min-w-0 h-[34px]" />
-      ) : currentField ? (
-        <div className="flex-1 min-w-0">
-          <FieldValueInput
-            field={currentField}
-            value={currentValue}
-            onChange={handleValueChange}
-            operator={currentOperator}
-            service={service}
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <div
-          className={cn(
-            'flex-1 min-w-0 flex items-center',
-            'bg-white border border-[#E0E0E0] rounded-[4px]',
-            'h-[34px] px-[10px] py-[7px]',
-          )}
-        >
-          <span className="text-[14px] leading-[normal] text-[#999] truncate">
-            请选择
-          </span>
-        </div>
-      )}
-
-      {onRemoveClick && (
-        <button
-          type="button"
-          onClick={onRemoveClick}
-          disabled={disabled}
-          className={cn(
-            'shrink-0 flex items-center justify-center size-[16px]',
-            'text-[#999] hover:text-[#FF5631]',
-            disabled && 'opacity-50 cursor-not-allowed',
-            transCls,
-          )}
-        >
-          <TrashIcon />
-        </button>
-      )}
-    </div>
-  );
-};
-
-ConditionItem.displayName = 'ConditionItem';
+import { useState, useCallback, useRef, useMemo } from 'react';
+import type { IField, IConditionItem, relationalOperator, IFieldValueService } from '@baishuyun/types';
+import { getAvailableOperators, getDefaultOperator } from '@baishuyun/ai-feat-utils';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { FieldSelect } from '../field-select';
+import { RelationalOperatorSelect } from '../relational-operator-select';
+import { FieldValueInput } from '../field-value-input';
+import { TrashIcon } from '../../bs-icons';
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+function findFieldKey(_: IField[], targetField: IField): string | undefined {
+  return targetField.widget?.widgetName;
+
+  // for (let i = 0; i < fields.length; i++) {
+  //   if (fields[i] === targetField) return targetField.widget?.widgetName || String(i);
+  // }
+  // return undefined;
+}
+
+function generateId(): string {
+  return `cond-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// ── Props ────────────────────────────────────────────────────────────
+
+export interface ConditionItemProps {
+  fields: IField[];
+  value?: IConditionItem;
+  defaultValue?: IConditionItem;
+  onChange?: (item: IConditionItem) => void;
+  onRemoveClick?: () => void;
+  service?: IFieldValueService;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ── Component ────────────────────────────────────────────────────────
+
+export const ConditionItem = ({
+  fields,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onRemoveClick,
+  service,
+  disabled = false,
+  className,
+}: ConditionItemProps) => {
+  const idRef = useRef<string>(controlledValue?.id || defaultValue?.id || generateId());
+
+  const [internalField, setInternalField] = useState<IField | undefined>(
+    defaultValue?.field,
+  );
+  const [internalKey, setInternalKey] = useState<string | undefined>(() =>
+    defaultValue?.field ? findFieldKey(fields, defaultValue.field) : undefined,
+  );
+  const [internalOperator, setInternalOperator] = useState<relationalOperator>(
+    defaultValue?.operator ||
+      getDefaultOperator(defaultValue?.field?.widget?.type),
+  );
+  const [internalValue, setInternalValue] = useState<unknown>(
+    defaultValue?.value,
+  );
+
+  const isControlled = controlledValue !== undefined;
+
+  const currentField = isControlled ? controlledValue.field : internalField;
+  const currentKey = useMemo(() => {
+    if (isControlled && controlledValue.field) {
+      return findFieldKey(fields, controlledValue.field);
+    }
+    return internalKey;
+  }, [isControlled, controlledValue?.field, fields, internalKey]);
+  const currentOperator = isControlled
+    ? controlledValue.operator
+    : internalOperator;
+  const currentValue = isControlled ? controlledValue.value : internalValue;
+
+  const fieldType = currentField?.widget?.type;
+  const availableOperators = useMemo(
+    () => getAvailableOperators(fieldType),
+    [fieldType],
+  );
+
+  const emitChange = useCallback(
+    (field: IField, operator: relationalOperator, value: unknown) => {
+      onChange?.({
+        id: idRef.current,
+        field,
+        operator,
+        value,
+      });
+    },
+    [onChange],
+  );
+
+  // ── Handlers ──────────────────────────────────────────────────
+
+  const handleFieldChange = useCallback(
+    (field: IField, nodeKey: string) => {
+      const newOperator = getDefaultOperator(field.widget?.type);
+
+      if (!isControlled) {
+        setInternalField(field);
+        setInternalKey(nodeKey);
+        setInternalOperator(newOperator);
+        setInternalValue(undefined);
+      }
+
+      emitChange(field, newOperator, undefined);
+    },
+    [isControlled, emitChange],
+  );
+
+  const handleOperatorChange = useCallback(
+    (operator: relationalOperator) => {
+      const isEmptyOp = operator === 'empty' || operator === 'not_empty';
+      const isRangeOp = operator === 'range';
+      const isMultiOp = operator === 'in' || operator === 'nin' || operator === 'all';
+
+      let newValue: unknown;
+      if (isEmptyOp) {
+        newValue = undefined;
+      } else if (isRangeOp) {
+        newValue = { min: undefined, max: undefined };
+      } else if (isMultiOp) {
+        newValue = [];
+      } else if (
+        typeof currentValue === 'object' &&
+        currentValue !== null &&
+        !Array.isArray(currentValue)
+      ) {
+        newValue = undefined;
+      } else {
+        newValue = currentValue;
+      }
+
+      if (!isControlled) {
+        setInternalOperator(operator);
+        if (isEmptyOp || isRangeOp || isMultiOp) setInternalValue(newValue);
+      }
+
+      if (currentField) {
+        emitChange(currentField, operator, newValue);
+      }
+    },
+    [isControlled, currentField, currentValue, emitChange],
+  );
+
+  const handleValueChange = useCallback(
+    (value: unknown) => {
+      if (!isControlled) {
+        setInternalValue(value);
+      }
+
+      if (currentField) {
+        emitChange(currentField, currentOperator, value);
+      }
+    },
+    [isControlled, currentField, currentOperator, emitChange],
+  );
+
+  const hideValueInput =
+    currentField != null &&
+    (currentOperator === 'empty' || currentOperator === 'not_empty');
+
+  return (
+    <div className={cn('flex items-center gap-[10px]', className)}>
+      <FieldSelect
+        fields={fields}
+        value={currentKey}
+        onChange={handleFieldChange}
+        placeholder="请选择字段"
+        searchPlaceholder="输入字段名称来搜索"
+        disabled={disabled}
+        showTypeBadge
+        className="w-[200px] shrink-0"
+      />
+
+      <RelationalOperatorSelect
+        value={currentOperator}
+        onChange={handleOperatorChange}
+        operators={availableOperators}
+        borderless
+        disabled={disabled}
+        className="w-[120px] shrink-0"
+      />
+
+      {hideValueInput ? (
+        <div className="flex-1 min-w-0 h-[34px]" />
+      ) : currentField ? (
+        <div className="flex-1 min-w-0">
+          <FieldValueInput
+            field={currentField}
+            value={currentValue}
+            onChange={handleValueChange}
+            operator={currentOperator}
+            service={service}
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'flex-1 min-w-0 flex items-center',
+            'bg-white border border-[#E0E0E0] rounded-[4px]',
+            'h-[34px] px-[10px] py-[7px]',
+          )}
+        >
+          <span className="text-[14px] leading-[normal] text-[#999] truncate">
+            请选择
+          </span>
+        </div>
+      )}
+
+      {onRemoveClick && (
+        <button
+          type="button"
+          onClick={onRemoveClick}
+          disabled={disabled}
+          className={cn(
+            'shrink-0 flex items-center justify-center size-[16px]',
+            'text-[#999] hover:text-[#FF5631]',
+            disabled && 'opacity-50 cursor-not-allowed',
+            transCls,
+          )}
+        >
+          <TrashIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+ConditionItem.displayName = 'ConditionItem';