feat: miss option

myshell-ai · Sep 20, 2024 · b118dfc · b118dfc
1 parent a31225a
commit b118dfc
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/web/apps/web/src/components/workflow/node-form/index.tsx b/web/apps/web/src/components/workflow/node-form/index.tsx
@@ -44,7 +44,7 @@ interface NodeFormProps {
   loading?: boolean;
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
-  onStatusChange?: (status?: string) => void;
+  onStatusChange?: (status: { [key: string]: string }) => void;
 }
 
 const NodeForm = forwardRef<FormRef, NodeFormProps>(

diff --git a/web/apps/web/src/components/workflow/nodes/widget-node/index.tsx b/web/apps/web/src/components/workflow/nodes/widget-node/index.tsx
@@ -6,7 +6,13 @@ import {
 import { TValues, TFieldMode } from '@shellagent/form-engine';
 import { FormRef } from '@shellagent/ui';
 import { useKeyPress } from 'ahooks';
-import React, { useCallback, useRef, useEffect, useState } from 'react';
+import React, {
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { useWorkflowState } from '@/stores/workflow/use-workflow-state';
@@ -21,6 +27,7 @@ import { useDuplicateState } from './hook/use-duplicate-state';
 import { EventType, useEventEmitter } from '../../emitter';
 import NodeCard from '../../node-card';
 import NodeForm from '../../node-form';
+import { some } from 'lodash-es';
 
 const WidgetNode: React.FC<NodeProps<WidgetNodeType>> = ({
   id,
@@ -29,6 +36,7 @@ const WidgetNode: React.FC<NodeProps<WidgetNodeType>> = ({
 }) => {
   const formRef = useRef<FormRef>(null);
   const nodeRef = useRef<HTMLElement | null>(null);
+  const statusRef = useRef({});
   const { duplicateState } = useDuplicateState(id);
   const { onDelNode } = useReactFlowStore(state => ({
     onDelNode: state.onDelNode,
@@ -146,15 +154,16 @@ const WidgetNode: React.FC<NodeProps<WidgetNodeType>> = ({
     }
   });
 
-  const onStatusChange = (status?: string) => {
-    setHasError(status === 'error');
+  const onStatusChange = (obj: { [key: string]: string }) => {
+    statusRef.current = { ...statusRef.current, ...obj };
+    setHasError(some(statusRef.current, value => value === 'missOption'));
   };
 
   return (
     <NodeCard
       selected={selected}
       mode={nodeData[data.id]?.mode}
-      has_error={hasError}
+      has_error={some(statusRef.current, value => value === 'missOption')}
       {...data}>
       <NodeForm
         ref={formRef}

diff --git a/web/packages/form-engine/src/components/control/index.tsx b/web/packages/form-engine/src/components/control/index.tsx
@@ -287,12 +287,13 @@ const Control: React.FC<IControlProps> = props => {
           }
           const missOption =
             xComponentProps?.options?.length &&
+            newField[valuePropsName] &&
             !xComponentProps?.options?.find(
               (item: { value: string }) =>
                 item.value === (newField[valuePropsName] as unknown as string),
             );
-          if (missOption) {
-            onStatusChange?.('error');
+          if (missOption !== undefined) {
+            onStatusChange?.({ [name]: missOption ? 'missOption' : '' });
           }
           const FormItemWithDesc =
             (!checked && xSwithable) || xHiddenControl ? null : (

diff --git a/web/packages/form-engine/src/components/provider/index.tsx b/web/packages/form-engine/src/components/provider/index.tsx
@@ -26,7 +26,7 @@ const FormEngineContext = createContext<{
   reorder: (path: TPath, startIndex: number, endIndex: number) => void;
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
-  onStatusChange?: (status?: string) => void;
+  onStatusChange?: (obj: { [key: string]: string }) => void;
 }>({
   components: {},
   fields: {},
@@ -43,7 +43,7 @@ export interface IFormEngineProviderProps {
   layout?: 'Horizontal' | 'Vertical';
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
-  onStatusChange?: (status?: string) => void;
+  onStatusChange?: (obj: { [key: string]: string }) => void;
   children: React.ReactNode | React.ReactNode[];
 }
 

diff --git a/web/packages/form-engine/src/index.tsx b/web/packages/form-engine/src/index.tsx
@@ -37,7 +37,7 @@ export interface IFormEngineProps {
   children?: React.ReactNode;
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
-  onStatusChange?: (status?: string) => void;
+  onStatusChange?: (obj: { [key: string]: string }) => void;
 }
 
 const FormEngine = forwardRef<FormRef, IFormEngineProps>((props, ref) => {