@flowgram.ai/form-materials 0.2.14 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "chalk": "^5.3.0",
     "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@flowgram.ai/editor": "0.2.14"
+    "@flowgram.ai/editor": "0.2.16"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -46,8 +46,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.2.14",
-    "@flowgram.ai/eslint-config": "0.2.14"
+    "@flowgram.ai/eslint-config": "0.2.16",
+    "@flowgram.ai/ts-config": "0.2.16"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/condition-row/index.tsx

@@ -68,4 +68,4 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
   );
 }
 
-export { ConditionRowValueType };
+export { type ConditionRowValueType };

package/src/components/json-schema-editor/index.tsx

@@ -38,6 +38,7 @@ export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
   onChange?: (value: IJsonSchema) => void;
   config?: ConfigType;
+  className?: string;
 }) {
   const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
@@ -46,7 +47,7 @@ export function JsonSchemaEditor(props: {
   );
 
   return (
-    <UIContainer>
+    <UIContainer className={props.className}>
       <UIProperties>
         {propertyList.map((_property, index) => (
           <PropertyEdit
@@ -63,7 +64,12 @@ export function JsonSchemaEditor(props: {
           />
         ))}
       </UIProperties>
-      <Button size="small" style={{ marginTop: 10 }} icon={<IconPlus />} onClick={onAddProperty}>
+      <Button
+        size="small"
+        style={{ marginTop: 10, marginLeft: 16 }}
+        icon={<IconPlus />}
+        onClick={onAddProperty}
+      >
         {config?.addButtonText ?? 'Add'}
       </Button>
     </UIContainer>

package/src/effects/index.ts

@@ -1,3 +1,5 @@
 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/effects/provide-json-schema-outputs/config.json

@@ -0,0 +1,8 @@
+{
+  "name": "provide-json-schema-outputs",
+  "depMaterials": [
+    "typings/json-schema",
+    "utils/json-schema"
+  ],
+  "depPackages": []
+}

package/src/effects/provide-json-schema-outputs/index.ts

@@ -0,0 +1,23 @@
+import {
+  ASTFactory,
+  EffectOptions,
+  FlowNodeRegistry,
+  createEffectFromVariableProvider,
+  getNodeForm,
+} from '@flowgram.ai/editor';
+
+import { JsonSchemaUtils } from '../../utils';
+import { IJsonSchema } from '../../typings';
+
+export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
+  parse: (value: IJsonSchema, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn('title') || ctx.node.id,
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: JsonSchemaUtils.schemaToAST(value),
+    }),
+  ],
+});

package/src/effects/sync-variable-title/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "sync-variable-title",
+  "depMaterials": [],
+  "depPackages": []
+}

package/src/effects/sync-variable-title/index.ts

@@ -0,0 +1,23 @@
+import {
+  DataEvent,
+  Effect,
+  EffectOptions,
+  FlowNodeRegistry,
+  FlowNodeVariableData,
+} from '@flowgram.ai/editor';
+
+export const syncVariableTitle: EffectOptions[] = [
+  {
+    event: DataEvent.onValueChange,
+    effect: (({ value, context }) => {
+      context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
+        _scope.output.variables.forEach((_var) => {
+          _var.updateMeta({
+            title: value || context.node.id,
+            icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+          });
+        });
+      });
+    }) as Effect,
+  },
+];