@flowgram.ai/form-materials 0.3.1 → 0.3.3

package/bin/materials.ts

@@ -28,6 +28,7 @@ const _types: string[] = [
   'plugins',
   'shared',
   'typings',
+  'validate',
   'form-plugins',
   'hooks',
 ];

package/dist/esm/index.js

@@ -735,7 +735,7 @@ var VariableSelector = ({
       showClear: false,
       arrowIcon: /* @__PURE__ */ React11.createElement(IconChevronDownStroked, { size: "small" }),
       triggerRender,
-      placeholder: config?.placeholder ?? "Select Variable..."
+      placeholder: config?.placeholder ?? "Select Variable"
     }
   ));
 };
@@ -3126,7 +3126,16 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     return acm;
   }, {}) : value?.properties || {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ React37.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ React37.createElement(DisplaySchemaTag, { key, title: key, value: schema, showIconInTree })));
+  return /* @__PURE__ */ React37.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ React37.createElement(
+    DisplaySchemaTag,
+    {
+      key,
+      title: key,
+      value: schema,
+      showIconInTree,
+      warning: !schema
+    }
+  )));
 }
 
 // src/components/display-flow-value/index.tsx
@@ -3187,6 +3196,127 @@ function DisplayInputsValues({ value, showIconInTree }) {
   return /* @__PURE__ */ React39.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
 }
 
+// src/components/assign-rows/index.tsx
+import React42 from "react";
+import { FieldArray } from "@flowgram.ai/editor";
+import { Button as Button5 } from "@douyinfe/semi-ui";
+import { IconPlus as IconPlus4 } from "@douyinfe/semi-icons";
+
+// src/components/assign-row/index.tsx
+import React41 from "react";
+import { IconButton as IconButton6 } from "@douyinfe/semi-ui";
+import { IconMinus as IconMinus2 } from "@douyinfe/semi-icons";
+
+// src/components/assign-row/components/blur-input.tsx
+import React40, { useEffect as useEffect11, useState as useState11 } from "react";
+import Input7 from "@douyinfe/semi-ui/lib/es/input";
+function BlurInput3(props) {
+  const [value, setValue] = useState11("");
+  useEffect11(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ React40.createElement(
+    Input7,
+    {
+      ...props,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+      },
+      onBlur: (e) => props.onChange?.(value, e)
+    }
+  );
+}
+
+// src/components/assign-row/index.tsx
+function AssignRow(props) {
+  const {
+    value = {
+      operator: "assign"
+    },
+    onChange,
+    onDelete,
+    readonly
+  } = props;
+  return /* @__PURE__ */ React41.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ React41.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ React41.createElement(
+    VariableSelector,
+    {
+      style: { width: "100%", height: 26 },
+      value: value?.left?.content,
+      config: { placeholder: "Select Left" },
+      onChange: (v) => onChange?.({
+        ...value,
+        left: { type: "ref", content: v }
+      })
+    }
+  ) : /* @__PURE__ */ React41.createElement(
+    BlurInput3,
+    {
+      style: { height: 26 },
+      size: "small",
+      placeholder: "Input Name",
+      value: value?.left,
+      onChange: (v) => onChange?.({
+        ...value,
+        left: v
+      })
+    }
+  )), /* @__PURE__ */ React41.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ React41.createElement(
+    DynamicValueInput,
+    {
+      readonly,
+      value: value?.right,
+      onChange: (v) => onChange?.({
+        ...value,
+        right: v
+      })
+    }
+  )), onDelete && /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement(
+    IconButton6,
+    {
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ React41.createElement(IconMinus2, null),
+      onClick: () => onDelete?.()
+    }
+  )));
+}
+
+// src/components/assign-rows/index.tsx
+function AssignRows(props) {
+  const { name, readonly } = props;
+  return /* @__PURE__ */ React42.createElement(FieldArray, { name }, ({ field }) => /* @__PURE__ */ React42.createElement(React42.Fragment, null, field.map((childField, index) => /* @__PURE__ */ React42.createElement(
+    AssignRow,
+    {
+      key: childField.key,
+      readonly,
+      value: childField.value,
+      onChange: (value) => {
+        childField.onChange(value);
+      },
+      onDelete: () => field.remove(index)
+    }
+  )), /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ React42.createElement(
+    Button5,
+    {
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ React42.createElement(IconPlus4, null),
+      onClick: () => field.append({ operator: "assign" })
+    },
+    "Assign"
+  ), /* @__PURE__ */ React42.createElement(
+    Button5,
+    {
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ React42.createElement(IconPlus4, null),
+      onClick: () => field.append({ operator: "declare" })
+    },
+    "Declaration"
+  ))));
+}
+
 // src/effects/provide-batch-input/index.ts
 import {
   ASTFactory,
@@ -3358,6 +3488,86 @@ var syncVariableTitle = [
   }
 ];
 
+// src/effects/validate-when-variable-sync/index.ts
+import { isEmpty } from "lodash";
+import {
+  DataEvent as DataEvent3,
+  getNodeScope,
+  getNodePrivateScope
+} from "@flowgram.ai/editor";
+var validateWhenVariableSync = ({
+  scope
+} = {}) => [
+  {
+    event: DataEvent3.onValueInit,
+    effect: ({ context, form }) => {
+      const nodeScope = scope === "private" ? getNodePrivateScope(context.node) : getNodeScope(context.node);
+      const disposable = nodeScope.available.onListOrAnyVarChange(() => {
+        if (!isEmpty(form.state.errors)) {
+          form.validate();
+        }
+      });
+      return () => disposable.dispose();
+    }
+  }
+];
+
+// src/effects/listen-ref-value-change/index.ts
+import {
+  DataEvent as DataEvent4,
+  getNodeScope as getNodeScope2
+} from "@flowgram.ai/editor";
+var listenRefValueChange = (cb) => [
+  {
+    event: DataEvent4.onValueInitOrChange,
+    effect: (params) => {
+      const { context, value } = params;
+      if (value?.type !== "ref") {
+        return () => null;
+      }
+      const disposable = getNodeScope2(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (v) => {
+          cb({ ...params, variable: v });
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+
+// src/effects/listen-ref-schema-change/index.ts
+import { JsonSchemaUtils as JsonSchemaUtils8 } from "@flowgram.ai/json-schema";
+import {
+  DataEvent as DataEvent5,
+  getNodeScope as getNodeScope3
+} from "@flowgram.ai/editor";
+var listenRefSchemaChange = (cb) => [
+  {
+    event: DataEvent5.onValueInitOrChange,
+    effect: (params) => {
+      const { context, value } = params;
+      if (value?.type !== "ref") {
+        return () => null;
+      }
+      const disposable = getNodeScope3(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (_type) => {
+          cb({ ...params, schema: JsonSchemaUtils8.astToSchema(_type) });
+        },
+        {
+          selector: (_v) => _v?.type
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+
 // src/shared/format-legacy-refs/index.ts
 import { isObject as isObject3 } from "lodash";
 function formatLegacyRefOnSubmit(value) {
@@ -3426,8 +3636,8 @@ import {
   createEffectFromVariableProvider as createEffectFromVariableProvider3,
   defineFormPluginCreator,
   getNodeForm as getNodeForm3,
-  getNodePrivateScope,
-  getNodeScope,
+  getNodePrivateScope as getNodePrivateScope2,
+  getNodeScope as getNodeScope4,
   ScopeChainTransformService,
   FlowNodeScopeType
 } from "@flowgram.ai/editor";
@@ -3472,7 +3682,7 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, getNodeScope(node.parent)];
+          return [...covers, getNodeScope4(node.parent)];
         }
         return covers;
       },
@@ -3485,8 +3695,8 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            getNodePrivateScope(node),
-            ...childBlocks.map((_childBlock) => getNodeScope(_childBlock))
+            getNodePrivateScope2(node),
+            ...childBlocks.map((_childBlock) => getNodeScope4(_childBlock))
           ];
         }
         return scopes;
@@ -3497,11 +3707,11 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
 
 // src/form-plugins/infer-inputs-plugin/index.ts
 import { get as get2, set as set2 } from "lodash";
-import { JsonSchemaUtils as JsonSchemaUtils8 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils9 } from "@flowgram.ai/json-schema";
 import {
   defineFormPluginCreator as defineFormPluginCreator2,
-  getNodePrivateScope as getNodePrivateScope2,
-  getNodeScope as getNodeScope2
+  getNodePrivateScope as getNodePrivateScope3,
+  getNodeScope as getNodeScope5
 } from "@flowgram.ai/editor";
 var createInferInputsPlugin = defineFormPluginCreator2({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
@@ -3514,7 +3724,7 @@ var createInferInputsPlugin = defineFormPluginCreator2({
         targetKey,
         infer(
           get2(formData, sourceKey),
-          scope === "private" ? getNodePrivateScope2(ctx.node) : getNodeScope2(ctx.node)
+          scope === "private" ? getNodePrivateScope3(ctx.node) : getNodeScope5(ctx.node)
         )
       );
       return formData;
@@ -3554,7 +3764,7 @@ var infer = (values, scope) => {
     }
     if (isRef2(values)) {
       const variable = scope.available.getByKeyPath(values?.content);
-      const schema = variable?.type ? JsonSchemaUtils8.astToSchema(variable?.type) : void 0;
+      const schema = variable?.type ? JsonSchemaUtils9.astToSchema(variable?.type) : void 0;
       return schema;
     }
     if (isTemplate2(values)) {
@@ -3574,7 +3784,110 @@ var infer = (values, scope) => {
     };
   }
 };
+
+// src/form-plugins/infer-assign-plugin/index.ts
+import { set as set3, uniqBy } from "lodash";
+import { JsonSchemaUtils as JsonSchemaUtils10 } from "@flowgram.ai/json-schema";
+import {
+  ASTFactory as ASTFactory4,
+  createEffectFromVariableProvider as createEffectFromVariableProvider4,
+  defineFormPluginCreator as defineFormPluginCreator3,
+  getNodeForm as getNodeForm4,
+  getNodeScope as getNodeScope6
+} from "@flowgram.ai/editor";
+var createInferAssignPlugin = defineFormPluginCreator3({
+  onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
+    if (!assignKey || !outputKey) {
+      return;
+    }
+    mergeEffect({
+      [assignKey]: createEffectFromVariableProvider4({
+        parse: (value, ctx) => {
+          const declareRows = uniqBy(
+            value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
+            "left"
+          );
+          return [
+            ASTFactory4.createVariableDeclaration({
+              key: `${ctx.node.id}`,
+              meta: {
+                title: getNodeForm4(ctx.node)?.getValueIn("title"),
+                icon: ctx.node.getNodeRegistry().info?.icon
+              },
+              type: ASTFactory4.createObject({
+                properties: declareRows.map(
+                  (_v) => ASTFactory4.createProperty({
+                    key: _v.left,
+                    type: _v.right?.type === "constant" ? JsonSchemaUtils10.schemaToAST(_v.right?.schema || {}) : void 0,
+                    initializer: _v.right?.type === "ref" ? ASTFactory4.createKeyPathExpression({
+                      keyPath: _v.right?.content || []
+                    }) : {}
+                  })
+                )
+              })
+            })
+          ];
+        }
+      })
+    });
+    addFormatOnSubmit((formData, ctx) => {
+      set3(
+        formData,
+        outputKey,
+        JsonSchemaUtils10.astToSchema(getNodeScope6(ctx.node).output.variables?.[0]?.type)
+      );
+      return formData;
+    });
+  }
+});
+
+// src/validate/validate-flow-value/index.tsx
+import { isNil, uniq as uniq2 } from "lodash";
+import { FeedbackLevel, getNodeScope as getNodeScope7 } from "@flowgram.ai/editor";
+function validateFlowValue(value, ctx) {
+  const { node, required, errorMessages } = ctx;
+  const {
+    required: requiredMessage = "Field is required",
+    unknownVariable: unknownVariableMessage = "Unknown Variable"
+  } = errorMessages || {};
+  if (required && (isNil(value) || isNil(value?.content) || value?.content === "")) {
+    return {
+      level: FeedbackLevel.Error,
+      message: requiredMessage
+    };
+  }
+  if (value?.type === "ref") {
+    const variable = getNodeScope7(node).available.getByKeyPath(value?.content || []);
+    if (!variable) {
+      return {
+        level: FeedbackLevel.Error,
+        message: unknownVariableMessage
+      };
+    }
+  }
+  if (value?.type === "template") {
+    const allRefs = getTemplateKeyPaths2(value);
+    for (const ref of allRefs) {
+      const variable = getNodeScope7(node).available.getByKeyPath(ref);
+      if (!variable) {
+        return {
+          level: FeedbackLevel.Error,
+          message: unknownVariableMessage
+        };
+      }
+    }
+  }
+  return void 0;
+}
+function getTemplateKeyPaths2(value) {
+  const keyPathReg = /{{(.*?)}}/g;
+  return uniq2(value.content?.match(keyPathReg) || []).map(
+    (_keyPath) => _keyPath.slice(2, -2).split(".")
+  );
+}
 export {
+  AssignRow,
+  AssignRows,
   BatchOutputs,
   BatchVariableSelector,
   CodeEditor,
@@ -3600,6 +3913,7 @@ export {
   autoRenameRefEffect,
   createBatchOutputsFormPlugin,
   createDisableDeclarationPlugin,
+  createInferAssignPlugin,
   createInferInputsPlugin,
   createTypePresetPlugin,
   formatLegacyRefOnInit,
@@ -3609,12 +3923,16 @@ export {
   getTypeSelectValue,
   isLegacyFlowRefValueSchema,
   isNewFlowRefValueSchema,
+  listenRefSchemaChange,
+  listenRefValueChange,
   parseTypeSelectValue,
   provideBatchInputEffect,
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
   useTypeManager,
-  useVariableTree
+  useVariableTree,
+  validateFlowValue,
+  validateWhenVariableSync
 };
 //# sourceMappingURL=index.js.map