@flowgram.ai/form-materials 0.1.0-alpha.12 → 0.1.0-alpha.14

package/src/components/display-schema-tree/index.tsx

@@ -7,7 +7,8 @@ import React from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+
 import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
 
 interface PropsType {

package/src/components/dynamic-value-input/hooks.ts

@@ -3,12 +3,12 @@
  * 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';
 
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();
@@ -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) {
@@ -46,7 +67,7 @@ export function useIncludeSchema(schemaFromProps?: IJsonSchema) {
     if (schemaFromProps?.type === 'number') {
       return [schemaFromProps, { type: 'integer' }];
     }
-    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+    return { ...schemaFromProps, extra: { weak: true, ...schemaFromProps?.extra } };
   }, [schemaFromProps]);
 
   return includeSchema;

package/src/components/dynamic-value-input/index.tsx

@@ -5,15 +5,21 @@
 
 import React from 'react';
 
-import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
+import {
+  JsonSchemaUtils,
+  IJsonSchema,
+  useTypeManager,
+  type JsonSchemaTypeManager,
+} from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { VariableSelector } from '../variable-selector';
-import { TypeSelector } from '../type-selector';
-import { Strategy } from '../constant-input/types';
-import { ConstantInput } from '../constant-input';
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue, IFlowConstantValue } from '@/typings';
+import { createInjectMaterial } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { TypeSelector } from '@/components/type-selector';
+import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
+
 import { UIContainer, UIMain, UITrigger, UIType } from './styles';
 import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
@@ -25,12 +31,18 @@ interface PropsType {
   style?: React.CSSProperties;
   schema?: IJsonSchema;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     schema?: IJsonSchema; // set schema of constant input only
     [key: string]: any;
   };
 }
 
+const DEFAULT_VALUE: IFlowConstantValue = {
+  type: 'constant',
+  content: '',
+  schema: { type: 'string' },
+};
+
 export function DynamicValueInput({
   value,
   onChange,
@@ -43,6 +55,8 @@ export function DynamicValueInput({
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
 
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return <TypeSelector value={schemaFromProps} readonly={true} />;
@@ -59,24 +73,20 @@ export function DynamicValueInput({
         value={selectSchema}
         onChange={(_v) => {
           setSelectSchema(_v || { type: 'string' });
-          let content;
 
+          const schema = _v || { type: 'string' };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === 'object') {
             content = '{}';
           }
-
           if (_v?.type === 'array') {
             content = '[]';
           }
 
-          if (_v?.type === 'boolean') {
-            content = false;
-          }
-
           onChange({
             type: 'constant',
             content,
-            schema: _v || { type: 'string' },
+            schema,
           });
         }}
         readonly={readonly}
@@ -88,10 +98,10 @@ export function DynamicValueInput({
     if (value?.type === 'ref') {
       // Display Variable Or Delete
       return (
-        <VariableSelector
+        <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
-          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
           includeSchema={includeSchema}
           readonly={readonly}
         />
@@ -106,22 +116,22 @@ export function DynamicValueInput({
         onChange={(_v) => onChange({ type: 'constant', content: _v, schema: constantSchema })}
         schema={constantSchema || { type: 'string' }}
         readonly={readonly}
-        strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%' }}
-            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
             includeSchema={includeSchema}
             readonly={readonly}
           />
         )}
         {...constantProps}
+        strategies={[...(constantProps?.strategies || [])]}
       />
     );
   };
 
   const renderTrigger = () => (
-    <VariableSelector
+    <InjectVariableSelector
       style={{ width: '100%' }}
       value={value?.type === 'ref' ? value?.content : undefined}
       onChange={(_v) => onChange({ type: 'ref', content: _v })}
@@ -141,3 +151,6 @@ export function DynamicValueInput({
     </UIContainer>
   );
 }
+
+DynamicValueInput.renderKey = 'dynamic-value-input-render-key';
+export const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);

package/src/components/dynamic-value-input/styles.tsx

@@ -20,6 +20,8 @@ export const UIMain = styled.div`
   flex-grow: 1;
   overflow: hidden;
   min-width: 0;
+  border-left: 1px solid var(--semi-color-border);
+  border-right: 1px solid var(--semi-color-border);
 
   & .semi-tree-select,
   & .semi-input-number,
@@ -33,19 +35,27 @@ export const UIMain = styled.div`
     border: none;
     border-radius: 0;
   }
+
+  & .semi-input-textarea-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-textarea {
+    padding: 2px 6px;
+    border: none;
+    border-radius: 0;
+    word-break: break-all;
+  }
 `;
 
 export const UIType = styled.div`
-  border-right: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }
 `;
 
 export const UITrigger = styled.div`
-  border-left: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './batch-variable-selector';
 export * from './constant-input';
 export * from './dynamic-value-input';
 export * from './condition-row';
+export * from './db-condition-row';
 export * from './batch-outputs';
 export * from './prompt-editor';
 export * from './prompt-editor-with-variables';
@@ -25,3 +26,5 @@ export * from './display-flow-value';
 export * from './display-inputs-values';
 export * from './assign-rows';
 export * from './assign-row';
+export * from './blur-input';
+export * from './inputs-values-tree';

package/src/components/inputs-values/index.tsx

@@ -5,15 +5,17 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { useObjectList } from '@/hooks';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
+
 import { PropsType } from './types';
-import { DynamicValueInput } from '../dynamic-value-input';
-import { IFlowConstantRefValue, IFlowValue } from '../../typings';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
-import { BlurInput } from './components/blur-input';
 
 export function InputsValues({
   value,
@@ -41,9 +43,9 @@ export function InputsValues({
               size="small"
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
-              placeholder="Input Key"
+              placeholder={I18n.t('Input Key')}
             />
-            <DynamicValueInput
+            <InjectDynamicValueInput
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value as IFlowConstantRefValue}
@@ -65,8 +67,19 @@ export function InputsValues({
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
-        Add
+      <Button
+        disabled={readonly}
+        icon={<IconPlus />}
+        size="small"
+        onClick={() =>
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          })
+        }
+      >
+        {I18n.t('Add')}
       </Button>
     </div>
   );

package/src/components/inputs-values/styles.tsx

@@ -14,6 +14,6 @@ export const UIRows = styled.div`
 
 export const UIRow = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 5px;
 `;

package/src/components/inputs-values/types.ts

@@ -5,8 +5,8 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { Strategy } from '../constant-input/types';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {
   value?: Record<string, IFlowValue | undefined>;
@@ -16,7 +16,7 @@ export interface PropsType {
   schema?: IJsonSchema;
   style?: React.CSSProperties;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     [key: string]: any;
   };
 }

package/src/components/inputs-values-tree/hooks/use-child-list.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useMemo } from 'react';
+
+import { isPlainObject } from 'lodash-es';
+
+import { FlowValueUtils } from '@/shared';
+import { useObjectList } from '@/hooks';
+
+interface ListItem {
+  id: string;
+  key?: string;
+  value?: any;
+}
+
+export function useChildList(
+  value?: any,
+  onChange?: (value: any) => void
+): {
+  canAddField: boolean;
+  hasChildren: boolean;
+  list: ListItem[];
+  add: (defaultValue?: any) => void;
+  updateKey: (id: string, key: string) => void;
+  updateValue: (id: string, value: any) => void;
+  remove: (id: string) => void;
+} {
+  const canAddField = useMemo(() => {
+    if (!isPlainObject(value)) {
+      return false;
+    }
+
+    if (FlowValueUtils.isFlowValue(value)) {
+      // Constant Object Value Can Add child fields
+      return FlowValueUtils.isConstant(value) && value?.schema?.type === 'object';
+    }
+
+    return true;
+  }, [value]);
+
+  const objectListValue = useMemo(() => {
+    if (isPlainObject(value)) {
+      if (FlowValueUtils.isFlowValue(value)) {
+        return undefined;
+      }
+      return value;
+    }
+    return undefined;
+  }, [value]);
+
+  const { list, add, updateKey, updateValue, remove } = useObjectList<any>({
+    value: objectListValue,
+    onChange: (value) => {
+      onChange?.(value);
+    },
+    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,
+    updateValue,
+    remove,
+  };
+}

package/src/components/inputs-values-tree/index.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { Button } from '@douyinfe/semi-ui';
+import { IconPlus } from '@douyinfe/semi-icons';
+
+import { FlowValueUtils } from '@/shared';
+import { useObjectList } from '@/hooks';
+
+import { PropsType } from './types';
+import { UITreeItems } from './styles';
+import { InputValueRow } from './row';
+
+export function InputsValuesTree(props: PropsType) {
+  const { value, onChange, readonly, hasError, constantProps } = props;
+
+  const { list, updateKey, updateValue, remove, add } = useObjectList({
+    value,
+    onChange,
+    sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
+  });
+
+  return (
+    <div>
+      <UITreeItems>
+        {list.map((item) => (
+          <InputValueRow
+            key={item.id}
+            keyName={item.key}
+            value={item.value}
+            onUpdateKey={(key) => updateKey(item.id, key)}
+            onUpdateValue={(value) => updateValue(item.id, value)}
+            onRemove={() => remove(item.id)}
+            readonly={readonly}
+            hasError={hasError}
+            constantProps={constantProps}
+          />
+        ))}
+      </UITreeItems>
+      <Button
+        style={{ marginTop: 10, marginLeft: 16 }}
+        disabled={readonly}
+        icon={<IconPlus />}
+        size="small"
+        onClick={() => {
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          });
+        }}
+      >
+        {I18n.t('Add')}
+      </Button>
+    </div>
+  );
+}

package/src/components/inputs-values-tree/row.tsx

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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';
+import {
+  IconAddChildren,
+  UIActions,
+  UICollapseTrigger,
+  UICollapsible,
+  UIRow,
+  UITreeItemLeft,
+  UITreeItemMain,
+  UITreeItemRight,
+  UITreeItems,
+} from './styles';
+import { useChildList } from './hooks/use-child-list';
+import { InjectDynamicValueInput } from '../dynamic-value-input';
+import { BlurInput } from '../blur-input';
+
+const AddObjectChildStrategy: ConstantInputStrategy = {
+  hit: (schema) => schema.type === 'object',
+  Renderer: () => (
+    <Input
+      size="small"
+      disabled
+      style={{ pointerEvents: 'none' }}
+      value={I18n.t('Configure via child fields')}
+    />
+  ),
+};
+
+export function InputValueRow(
+  props: {
+    keyName?: string;
+    value?: any;
+    onUpdateKey: (key: string) => void;
+    onUpdateValue: (value: any) => void;
+    onRemove?: () => void;
+    $isLast?: boolean;
+    $level?: number;
+  } & Pick<PropsType, 'constantProps' | 'hasError' | 'readonly'>
+) {
+  const {
+    keyName,
+    value,
+    $level = 0,
+    onUpdateKey,
+    onUpdateValue,
+    $isLast,
+    onRemove,
+    constantProps,
+    hasError,
+    readonly,
+  } = props;
+  const [collapse, setCollapse] = useState(false);
+
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
+    value,
+    onUpdateValue
+  );
+
+  const strategies = useMemo(
+    () => [...(hasChildren ? [AddObjectChildStrategy] : []), ...(constantProps?.strategies || [])],
+    [hasChildren, constantProps?.strategies]
+  );
+
+  const flowDisplayValue = useMemo(
+    () =>
+      hasChildren
+        ? ({
+            type: 'constant',
+            schema: { type: 'object' },
+          } as IFlowConstantValue)
+        : value,
+    [hasChildren, value]
+  );
+
+  return (
+    <>
+      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={hasChildren}>
+        {hasChildren && (
+          <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
+            {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
+          </UICollapseTrigger>
+        )}
+      </UITreeItemLeft>
+      <UITreeItemRight>
+        <UITreeItemMain>
+          <UIRow>
+            <BlurInput
+              style={{ width: 100, minWidth: 100, maxWidth: 100 }}
+              disabled={readonly}
+              size="small"
+              value={keyName}
+              onChange={(v) => onUpdateKey?.(v)}
+              placeholder={I18n.t('Input Key')}
+            />
+            <InjectDynamicValueInput
+              style={{ flexGrow: 1 }}
+              readonly={readonly}
+              value={flowDisplayValue}
+              onChange={(v) => onUpdateValue(v)}
+              hasError={hasError}
+              constantProps={{
+                ...constantProps,
+                strategies,
+              }}
+            />
+            <UIActions>
+              {canAddField && (
+                <IconButton
+                  disabled={readonly}
+                  size="small"
+                  theme="borderless"
+                  icon={<IconAddChildren />}
+                  onClick={() => {
+                    add({
+                      type: 'constant',
+                      content: '',
+                      schema: { type: 'string' },
+                    });
+                    setCollapse(true);
+                  }}
+                />
+              )}
+              <IconButton
+                disabled={readonly}
+                theme="borderless"
+                icon={<IconDelete size="small" />}
+                size="small"
+                onClick={() => onRemove?.()}
+              />
+            </UIActions>
+          </UIRow>
+        </UITreeItemMain>
+        {hasChildren && (
+          <UICollapsible $collapse={collapse}>
+            <UITreeItems $shrink={true}>
+              {list.map((_item, index) => (
+                <InputValueRow
+                  readonly={readonly}
+                  hasError={hasError}
+                  constantProps={constantProps}
+                  key={_item.id}
+                  keyName={_item.key}
+                  value={_item.value}
+                  $level={$level + 1} // 传递递增的层级
+                  onUpdateValue={(_v) => {
+                    updateValue(_item.id, _v);
+                  }}
+                  onUpdateKey={(k) => {
+                    updateKey(_item.id, k);
+                  }}
+                  onRemove={() => {
+                    remove(_item.id);
+                  }}
+                  $isLast={index === list.length - 1}
+                />
+              ))}
+            </UITreeItems>
+          </UICollapsible>
+        )}
+      </UITreeItemRight>
+    </>
+  );
+}