fix(materials): inputs-values-tree display bug (#692)

* fix(materials): inputs-values-tree display bug

* fix: console log

packages/materials/form-materials/src/components/display-flow-value/index.tsx

@@ -9,6 +9,7 @@ import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
 import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
@@ -31,18 +32,7 @@ export function DisplayFlowValue({ value, title, showIconInTree }: PropsType) {
       return { type: 'string' };
     }
     if (value?.type === 'constant') {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === 'string') {
-        return { type: 'string' };
-      }
-      if (typeof value?.content === 'number') {
-        return { type: 'number' };
-      }
-      if (typeof value?.content === 'boolean') {
-        return { type: 'boolean' };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
 
     return { type: 'unknown' };

packages/materials/form-materials/src/components/display-inputs-values/index.tsx

@@ -3,15 +3,19 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { IFlowValue } from '@/typings';
+import { isPlainObject } from 'lodash';
+import { useScopeAvailable } from '@flowgram.ai/editor';
+
+import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
 import { DisplayInputsWrapper } from './styles';
+import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: Record<string, IFlowValue | undefined>;
+  value?: any;
   showIconInTree?: boolean;
 }
 
@@ -20,9 +24,43 @@ export function DisplayInputsValues({ value, showIconInTree }: PropsType) {
 
   return (
     <DisplayInputsWrapper>
-      {childEntries.map(([key, value]) => (
-        <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
-      ))}
+      {childEntries.map(([key, value]) => {
+        if (FlowValueUtils.isFlowValue(value)) {
+          return (
+            <DisplayFlowValue key={key} title={key} value={value} showIconInTree={showIconInTree} />
+          );
+        }
+
+        if (isPlainObject(value)) {
+          return (
+            <DisplayInputsValueAllInTag
+              key={key}
+              title={key}
+              value={value}
+              showIconInTree={showIconInTree}
+            />
+          );
+        }
+
+        return null;
+      })}
     </DisplayInputsWrapper>
   );
 }
+
+export function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree,
+}: PropsType & {
+  title: string;
+}) {
+  const available = useScopeAvailable();
+
+  const schema = useMemo(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+
+  return <DisplaySchemaTag title={title} value={schema} showIconInTree={showIconInTree} />;
+}

packages/materials/form-materials/src/components/dynamic-value-input/hooks.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
@@ -33,9 +33,30 @@ export function useSelectSchema(
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
 
+  const changeVersion = useRef(0);
+  const effectVersion = useRef(0);
+
   const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
 
-  return [selectSchema, setSelectSchema] as const;
+  useEffect(() => {
+    effectVersion.current += 1;
+    if (changeVersion.current === effectVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+
+    if (value?.type === 'constant' && value?.schema) {
+      setSelectSchema(value?.schema);
+      return;
+    }
+  }, [value]);
+
+  const setSelectSchemaWithVersionUpdate = (schema: IJsonSchema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+
+  return [selectSchema, setSelectSchemaWithVersionUpdate] as const;
 }
 
 export function useIncludeSchema(schemaFromProps?: IJsonSchema) {

packages/materials/form-materials/src/components/dynamic-value-input/index.tsx

@@ -107,7 +107,6 @@ export function DynamicValueInput({
         onChange={(_v) => onChange({ type: 'constant', content: _v, schema: constantSchema })}
         schema={constantSchema || { type: 'string' }}
         readonly={readonly}
-        strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
           <InjectVariableSelector
             style={{ width: '100%' }}
@@ -117,6 +116,7 @@ export function DynamicValueInput({
           />
         )}
         {...constantProps}
+        strategies={[...(constantProps?.strategies || [])]}
       />
     );
   };

packages/materials/form-materials/src/components/inputs-values-tree/hooks/use-child-list.tsx

@@ -21,6 +21,7 @@ export function useChildList(
   onChange?: (value: any) => void
 ): {
   canAddField: boolean;
+  hasChildren: boolean;
   list: ListItem[];
   add: (key?: string) => void;
   updateKey: (id: string, key: string) => void;
@@ -50,8 +51,6 @@ export function useChildList(
     return undefined;
   }, [value]);
 
-  console.log('debugger objectListValue', objectListValue);
-
   const { list, add, updateKey, updateValue, remove } = useObjectList<any>({
     value: objectListValue,
     onChange: (value) => {
@@ -60,8 +59,14 @@ export function useChildList(
     sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
   });
 
+  const hasChildren = useMemo(
+    () => canAddField && (list.length > 0 || Object.keys(objectListValue || {}).length > 0),
+    [canAddField, list.length, Object.keys(objectListValue || {}).length]
+  );
+
   return {
     canAddField,
+    hasChildren,
     list,
     add,
     updateKey,

packages/materials/form-materials/src/components/inputs-values-tree/row.tsx

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { I18n } from '@flowgram.ai/editor';
 import { IconButton, Input } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronRight, IconDelete } from '@douyinfe/semi-icons';
 
+import { IFlowConstantValue } from '@/typings';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 import { PropsType } from './types';
@@ -64,14 +65,26 @@ export function InputValueRow(
   } = props;
   const [collapse, setCollapse] = useState(false);
 
-  const { canAddField, list, add, updateKey, updateValue, remove } = useChildList(
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
     value,
     onUpdateValue
   );
 
-  const hasChildren = canAddField && list.length > 0;
+  const strategies = useMemo(
+    () => [...(hasChildren ? [AddObjectChildStrategy] : []), ...(constantProps?.strategies || [])],
+    [hasChildren, constantProps?.strategies]
+  );
 
-  const flowDisplayValue = hasChildren ? { type: 'constant', schema: { type: ' object' } } : value;
+  const flowDisplayValue = useMemo(
+    () =>
+      hasChildren
+        ? ({
+            type: 'constant',
+            schema: { type: 'object' },
+          } as IFlowConstantValue)
+        : value,
+    [hasChildren, value]
+  );
 
   return (
     <>
@@ -101,10 +114,7 @@ export function InputValueRow(
               hasError={hasError}
               constantProps={{
                 ...constantProps,
-                strategies: [
-                  ...(hasChildren ? [AddObjectChildStrategy] : []),
-                  ...(constantProps?.strategies || []),
-                ],
+                strategies,
               }}
             />
             <UIActions>

packages/materials/form-materials/src/shared/flow-value/schema.ts

@@ -14,7 +14,7 @@ export const extraSchema = z
 
 export const constantSchema = z.object({
   type: z.literal('constant'),
-  content: z.union([z.string(), z.number(), z.boolean()]).optional(),
+  content: z.any().optional(),
   schema: z.any().optional(),
   extra: extraSchema,
 });