@flowgram.ai/form-materials 0.2.26 → 0.2.28

package/src/components/variable-selector/styles.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Tag, TreeSelect } from '@douyinfe/semi-ui';
 
 export const UIRootTitle = styled.div`
@@ -15,11 +15,16 @@ export const UIRootTitle = styled.div`
   color: var(--semi-color-text-2);
 `;
 
-export const UIVarName = styled.div`
+export const UIVarName = styled.div<{ $inSelector?: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 50%;
+
+  ${({ $inSelector }) =>
+    $inSelector &&
+    css`
+      min-width: 50%;
+    `}
 `;
 
 export const UITag = styled(Tag)`
@@ -34,18 +39,15 @@ export const UITag = styled(Tag)`
 
   &.semi-tag {
     margin: 0;
+    height: 22px;
   }
 `;
 
 export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
   outline: ${({ $error }) => ($error ? '1px solid red' : 'none')};
 
-  height: 22px;
-  min-height: 22px;
-  line-height: 22px;
-
   & .semi-tree-select-selection {
-    padding: 0 2px;
+    padding: 0px;
     height: 22px;
   }
 
@@ -57,3 +59,11 @@ export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
     padding-left: 10px;
   }
 `;
+
+export const UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+`;

package/src/effects/auto-rename-ref/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject } from 'lodash';
+import { isArray, isObject, uniq } from 'lodash';
 import {
   DataEvent,
   Effect,
@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
 
 /**
  * Auto rename ref when form item's key is renamed
@@ -44,9 +44,34 @@ export const autoRenameRefEffect: EffectOptions[] = [
 
         // traverse rename refs inside form item 'name'
         traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
-          if (isRefMatch(_v, beforeKeyPath)) {
-            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
-            form.setValueIn(_drilldownName, _v);
+          if (_v.type === 'ref') {
+            // ref auto rename
+            if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+              _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+              form.setValueIn(_drilldownName, _v);
+            }
+          } else if (_v.type === 'template') {
+            // template auto rename
+            const templateKeyPaths = getTemplateKeyPaths(_v);
+            let hasMatch = false;
+
+            templateKeyPaths.forEach((_keyPath) => {
+              if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                hasMatch = true;
+                const nextKeyPath = [
+                  ...afterKeyPath,
+                  ...(_keyPath || [])?.slice(beforeKeyPath.length),
+                ];
+                _v.content = _v.content?.replace(
+                  `{{${_keyPath.join('.')}}`,
+                  `{{${nextKeyPath.join('.')}}`
+                );
+              }
+            });
+
+            if (hasMatch) {
+              form.setValueIn(_drilldownName, { ..._v });
+            }
           }
         });
       });
@@ -64,8 +89,21 @@ export const autoRenameRefEffect: EffectOptions[] = [
  * @param targetKeyPath
  * @returns
  */
-function isRefMatch(value: IFlowRefValue, targetKeyPath: string[]) {
-  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
+  return targetKeyPath.every((_key, index) => _key === keyPath[index]);
+}
+
+/**
+ * get template key paths
+ * @param value
+ * @returns
+ */
+function getTemplateKeyPaths(value: IFlowTemplateValue) {
+  // find all keyPath wrapped in {{}}
+  const keyPathReg = /{{(.*?)}}/g;
+  return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
+    _keyPath.slice(2, -2).split('.')
+  );
 }
 
 /**
@@ -79,19 +117,32 @@ function isRef(value: any): value is IFlowRefValue {
   );
 }
 
+function isTemplate(value: any): value is IFlowTemplateValue {
+  return value?.type === 'template' && typeof value?.content === 'string';
+}
+
 /**
  * Traverse value to find ref
  * @param value
  * @param options
  * @returns
  */
-function traverseRef(name: string, value: any, cb: (name: string, _v: IFlowRefValue) => void) {
+function traverseRef(
+  name: string,
+  value: any,
+  cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
+) {
   if (isObject(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
     }
 
+    if (isTemplate(value)) {
+      cb(name, value);
+      return;
+    }
+
     Object.entries(value).forEach(([_key, _value]) => {
       traverseRef(`${name}.${_key}`, _value, cb);
     });

package/src/effects/index.ts

@@ -4,7 +4,6 @@
  */
 
 export * from './provide-batch-input';
-export * from './provide-batch-outputs';
 export * from './auto-rename-ref';
 export * from './provide-json-schema-outputs';
 export * from './sync-variable-title';

package/src/form-plugins/index.ts

@@ -3,4 +3,5 @@
  * SPDX-License-Identifier: MIT
  */
 
-export { createBatchOutputsFormPlugin } from './batch-outputs-plugin';
+export * from './batch-outputs-plugin';
+export * from './infer-inputs-plugin';

package/src/form-plugins/infer-inputs-plugin/config.json

@@ -0,0 +1,7 @@
+{
+  "name": "infer-inputs-plugin",
+  "depMaterials": [
+    "flow-value"
+  ],
+  "depPackages": []
+}

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { get, set } from 'lodash';
+import {
+  defineFormPluginCreator,
+  getNodePrivateScope,
+  getNodeScope,
+  Scope,
+} from '@flowgram.ai/editor';
+
+import { JsonSchemaUtils } from '../../utils';
+import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue, IJsonSchema } from '../../typings';
+
+interface InputConfig {
+  sourceKey: string;
+  targetKey: string;
+  scope?: 'private' | 'public';
+}
+
+export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+    if (!sourceKey || !targetKey) {
+      return;
+    }
+
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        targetKey,
+        infer(
+          get(formData, sourceKey),
+          scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
+        )
+      );
+
+      return formData;
+    });
+  },
+});
+
+function isRef(value: any): value is IFlowRefValue {
+  return (
+    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
+  );
+}
+
+function isTemplate(value: any): value is IFlowTemplateValue {
+  return value?.type === 'template' && typeof value?.content === 'string';
+}
+
+function isConstant(value: any): value is IFlowConstantValue {
+  return value?.type === 'constant' && typeof value?.content !== 'undefined';
+}
+
+const infer = (values: any, scope: Scope): IJsonSchema | undefined => {
+  if (typeof values === 'object') {
+    if (isConstant(values)) {
+      if (values?.schema) {
+        return values.schema;
+      }
+
+      if (typeof values.content === 'string') {
+        return {
+          type: 'string',
+        };
+      }
+
+      if (typeof values.content === 'number') {
+        return {
+          type: 'number',
+        };
+      }
+
+      if (typeof values.content === 'boolean') {
+        return {
+          type: 'boolean',
+        };
+      }
+    }
+
+    if (isRef(values)) {
+      const variable = scope.available.getByKeyPath(values?.content);
+      const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : undefined;
+
+      return schema;
+    }
+
+    if (isTemplate(values)) {
+      return {
+        type: 'string',
+      };
+    }
+
+    return {
+      type: 'object',
+      properties: Object.keys(values).reduce((acc, key) => {
+        const schema = infer(values[key], scope);
+        if (schema) {
+          acc[key] = schema;
+        }
+        return acc;
+      }, {} as Record<string, IJsonSchema>),
+    };
+  }
+};

package/src/hooks/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './use-object-list';

package/src/hooks/use-object-list/config.json

@@ -0,0 +1,8 @@
+{
+  "name": "use-object-list",
+  "depMaterials": [],
+  "depPackages": [
+    "lodash",
+    "nanoid"
+  ]
+}

package/src/{components/batch-outputs/use-list.ts → hooks/use-object-list/index.tsx}

@@ -5,17 +5,29 @@
 
 import { useEffect, useState } from 'react';
 
+import { nanoid } from 'nanoid';
 import { difference } from 'lodash';
 
-import { OutputItem, PropsType } from './types';
-
-let _id = 0;
 function genId() {
-  return _id++;
+  return nanoid();
+}
+
+interface ListItem<ValueType> {
+  id: string;
+  key?: string;
+  value?: ValueType;
 }
 
-export function useList({ value, onChange }: PropsType) {
-  const [list, setList] = useState<OutputItem[]>([]);
+type ObjectType<ValueType> = Record<string, ValueType | undefined>;
+
+export function useObjectList<ValueType>({
+  value,
+  onChange,
+}: {
+  value?: ObjectType<ValueType>;
+  onChange: (value?: ObjectType<ValueType>) => void;
+}) {
+  const [list, setList] = useState<ListItem<ValueType>[]>([]);
 
   useEffect(() => {
     setList((_prevList) => {
@@ -28,7 +40,7 @@ export function useList({ value, onChange }: PropsType) {
         .map((item) => ({
           id: item.id,
           key: item.key,
-          value: item.key ? value?.[item.key!] : undefined,
+          value: item.key ? value?.[item.key!] : item.value,
         }))
         .concat(
           addKeys.map((_key) => ({
@@ -49,11 +61,36 @@ export function useList({ value, onChange }: PropsType) {
     ]);
   };
 
-  const update = (item: OutputItem) => {
+  const updateValue = (itemId: string, value: ValueType) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            value,
+          };
+        }
+        return _item;
+      });
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  const updateKey = (itemId: string, key: string) => {
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
-        if (_item.id === item.id) {
-          return item;
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            key,
+          };
         }
         return _item;
       });
@@ -68,7 +105,7 @@ export function useList({ value, onChange }: PropsType) {
     });
   };
 
-  const remove = (itemId: number) => {
+  const remove = (itemId: string) => {
     setList((prevList) => {
       const nextList = prevList.filter((_item) => _item.id !== itemId);
 
@@ -82,5 +119,5 @@ export function useList({ value, onChange }: PropsType) {
     });
   };
 
-  return { list, add, update, remove };
+  return { list, add, updateKey, updateValue, remove };
 }

package/src/typings/flow-value/config.json

@@ -1,5 +1,7 @@
 {
   "name": "flow-value",
-  "depMaterials": [],
+  "depMaterials": [
+    "typings/json-schema"
+  ],
   "depPackages": []
 }

package/src/typings/flow-value/index.ts

@@ -3,9 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { IJsonSchema } from '../json-schema';
+
 export interface IFlowConstantValue {
   type: 'constant';
   content?: string | number | boolean;
+  schema?: IJsonSchema;
 }
 
 export interface IFlowRefValue {

package/src/effects/provide-batch-outputs/config.json

@@ -1,5 +0,0 @@
-{
-  "name": "provide-batch-outputs",
-  "depMaterials": ["flow-value"],
-  "depPackages": []
-}

package/src/effects/provide-batch-outputs/index.ts

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import {
-  ASTFactory,
-  EffectOptions,
-  FlowNodeRegistry,
-  createEffectFromVariableProvider,
-  getNodeForm,
-} from '@flowgram.ai/editor';
-
-import { IFlowRefValue } from '../../typings';
-
-export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
-  parse: (value: Record<string, IFlowRefValue>, ctx) => [
-    ASTFactory.createVariableDeclaration({
-      key: `${ctx.node.id}`,
-      meta: {
-        title: getNodeForm(ctx.node)?.getValueIn('title'),
-        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
-      },
-      type: ASTFactory.createObject({
-        properties: Object.entries(value).map(([_key, value]) =>
-          ASTFactory.createProperty({
-            key: _key,
-            initializer: ASTFactory.createWrapArrayExpression({
-              wrapFor: ASTFactory.createKeyPathExpression({
-                keyPath: value.content || [],
-              }),
-            }),
-          })
-        ),
-      }),
-    }),
-  ],
-});