@flowgram.ai/form-materials 0.1.31 → 0.2.0

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 // src/components/variable-selector/index.tsx
-import React3 from "react";
-import { TreeSelect } from "@douyinfe/semi-ui";
+import React3, { useMemo } from "react";
+import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
 
 // src/components/variable-selector/use-variable-tree.tsx
 import React2, { useCallback } from "react";
@@ -397,10 +397,11 @@ var options = [
 ];
 
 // src/components/variable-selector/use-variable-tree.tsx
-function useVariableTree() {
+function useVariableTree(params) {
+  const { includeSchema, excludeSchema } = params;
   const available = useScopeAvailable();
   const getVariableTypeIcon = useCallback((variable) => {
-    if (variable.meta.icon) {
+    if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
         return /* @__PURE__ */ React2.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
       }
@@ -423,6 +424,9 @@ function useVariableTree() {
   }, []);
   const renderVariable = (variable, parentFields = []) => {
     let type = variable?.type;
+    if (!type) {
+      return null;
+    }
     let children;
     if (ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...parentFields, variable])).filter(Boolean);
@@ -430,18 +434,70 @@ function useVariableTree() {
         return null;
       }
     }
-    const currPath = [...parentFields.map((_field) => _field.key), variable.key].join(".");
+    const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
+    const key = keyPath.join(".");
+    const isSchemaInclude = includeSchema ? type.isEqualWithJSONSchema(includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? type.isEqualWithJSONSchema(excludeSchema) : false;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+    if (!isSchemaMatch && !children?.length) {
+      return null;
+    }
     return {
-      key: currPath,
-      label: variable.meta.title || variable.key,
-      value: currPath,
+      key,
+      label: variable.meta?.title || variable.key,
+      value: key,
+      keyPath,
       icon: getVariableTypeIcon(variable),
-      children
+      children,
+      disabled: !isSchemaMatch,
+      rootMeta: parentFields[0]?.meta
     };
   };
   return [...available.variables.slice(0).reverse()].map((_variable) => renderVariable(_variable)).filter(Boolean);
 }
 
+// src/components/variable-selector/styles.tsx
+import styled from "styled-components";
+import { Tag, TreeSelect } from "@douyinfe/semi-ui";
+var UIRootTitle = styled.span`
+  margin-right: 4px;
+  color: var(--semi-color-text-2);
+`;
+var UITag = styled(Tag)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0;
+  }
+`;
+var UITreeSelect = styled(TreeSelect)`
+  outline: ${({ $error }) => $error ? "1px solid red" : "none"};
+
+  height: 22px;
+  min-height: 22px;
+  line-height: 22px;
+
+  & .semi-tree-select-selection {
+    padding: 0 2px;
+    height: 22px;
+  }
+
+  & .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  & .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+`;
+
 // src/components/variable-selector/index.tsx
 var VariableSelector = ({
   value,
@@ -449,33 +505,77 @@ var VariableSelector = ({
   onChange,
   style,
   readonly = false,
-  hasError
+  includeSchema,
+  excludeSchema,
+  hasError,
+  triggerRender
 }) => {
-  const treeData = useVariableTree();
+  const treeData = useVariableTree({ includeSchema, excludeSchema });
+  const treeValue = useMemo(() => {
+    if (typeof value === "string") {
+      console.warn(
+        "The Value of VariableSelector is a string, it should be an ARRAY. \n",
+        "Please check the value of VariableSelector \n"
+      );
+      return value;
+    }
+    return value?.join(".");
+  }, [value]);
+  const renderIcon = (icon) => {
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ React3.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+    }
+    return icon;
+  };
   return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    TreeSelect,
+    UITreeSelect,
     {
       dropdownMatchSelectWidth: false,
       disabled: readonly,
       treeData,
       size: "small",
-      value,
-      style: {
-        ...style,
-        outline: hasError ? "1px solid red" : void 0
-      },
+      value: treeValue,
+      clearIcon: null,
+      $error: hasError,
+      style,
       validateStatus: hasError ? "error" : void 0,
-      onChange: (option) => {
-        onChange(option);
+      onChange: (_, _config) => {
+        onChange(_config.keyPath);
       },
-      showClear: true,
+      renderSelectedItem: (_option) => {
+        if (!_option?.keyPath) {
+          return /* @__PURE__ */ React3.createElement(
+            UITag,
+            {
+              prefixIcon: /* @__PURE__ */ React3.createElement(IconIssueStroked, null),
+              color: "amber",
+              closable: !readonly,
+              onClose: () => onChange(void 0)
+            },
+            config?.notFoundContent ?? "Undefined"
+          );
+        }
+        return /* @__PURE__ */ React3.createElement(
+          UITag,
+          {
+            prefixIcon: renderIcon(_option.rootMeta?.icon || _option?.icon),
+            closable: !readonly,
+            onClose: () => onChange(void 0)
+          },
+          /* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null),
+          _option.label
+        );
+      },
+      showClear: false,
+      arrowIcon: value ? null : /* @__PURE__ */ React3.createElement(IconChevronDownStroked, { size: "small" }),
+      triggerRender,
       placeholder: config?.placeholder ?? "Select Variable..."
     }
   ));
 };
 
 // src/components/type-selector/index.tsx
-import React4, { useMemo } from "react";
+import React4, { useMemo as useMemo2 } from "react";
 import { Button, Cascader } from "@douyinfe/semi-ui";
 var getTypeSelectValue = (value) => {
   if (value?.type === "array" && value?.items) {
@@ -491,13 +591,14 @@ var parseTypeSelectValue = (value) => {
   return { type };
 };
 function TypeSelector(props) {
-  const { value, onChange } = props;
-  const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
+  const { value, onChange, disabled, style } = props;
+  const selectValue = useMemo2(() => getTypeSelectValue(value), [value]);
   return /* @__PURE__ */ React4.createElement(
     Cascader,
     {
+      disabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ React4.createElement(Button, { size: "small", style: { width: 50 } }, getSchemaIcon(value)),
+      triggerRender: () => /* @__PURE__ */ React4.createElement(Button, { size: "small", style }, getSchemaIcon(value)),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -509,7 +610,7 @@ function TypeSelector(props) {
 }
 
 // src/components/json-schema-editor/index.tsx
-import React6, { useMemo as useMemo3, useState as useState2 } from "react";
+import React6, { useMemo as useMemo4, useState as useState2 } from "react";
 import { Button as Button2, Checkbox, IconButton, Input } from "@douyinfe/semi-ui";
 import {
   IconExpand,
@@ -522,35 +623,35 @@ import {
 
 // src/components/json-schema-editor/styles.tsx
 import React5 from "react";
-import styled, { css } from "styled-components";
+import styled2, { css } from "styled-components";
 import Icon3 from "@douyinfe/semi-icons";
-var UIContainer = styled.div`
+var UIContainer = styled2.div`
   /* & .semi-input {
     background-color: #fff;
     border-radius: 6px;
     height: 24px;
   } */
 `;
-var UIRow = styled.div`
+var UIRow = styled2.div`
   display: flex;
   align-items: center;
   gap: 6px;
 `;
-var UICollapseTrigger = styled.div`
+var UICollapseTrigger = styled2.div`
   cursor: pointer;
   margin-right: 5px;
 `;
-var UIExpandDetail = styled.div`
+var UIExpandDetail = styled2.div`
   display: flex;
   flex-direction: column;
 `;
-var UILabel = styled.div`
+var UILabel = styled2.div`
   font-size: 12px;
   color: #999;
   font-weight: 400;
   margin-bottom: 2px;
 `;
-var UIProperties = styled.div`
+var UIProperties = styled2.div`
   display: grid;
   grid-template-columns: auto 1fr;
 
@@ -559,7 +660,7 @@ var UIProperties = styled.div`
       margin-top: 10px;
     `}
 `;
-var UIPropertyLeft = styled.div`
+var UIPropertyLeft = styled2.div`
   grid-column: 1;
   position: relative;
 
@@ -589,7 +690,7 @@ var UIPropertyLeft = styled.div`
       }
     `}
 `;
-var UIPropertyRight = styled.div`
+var UIPropertyRight = styled2.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -597,7 +698,7 @@ var UIPropertyRight = styled.div`
     margin-bottom: 0px;
   }
 `;
-var UIPropertyMain = styled.div`
+var UIPropertyMain = styled2.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -608,19 +709,19 @@ var UIPropertyMain = styled.div`
       border-radius: 4px;
     `}
 `;
-var UICollapsible = styled.div`
+var UICollapsible = styled2.div`
   display: none;
 
   ${({ $collapse }) => $collapse && css`
       display: block;
     `}
 `;
-var UIName = styled.div`
+var UIName = styled2.div`
   flex-grow: 1;
 `;
-var UIType = styled.div``;
-var UIRequired = styled.div``;
-var UIActions = styled.div`
+var UIType = styled2.div``;
+var UIRequired = styled2.div``;
+var UIActions = styled2.div`
   white-space: nowrap;
 `;
 var iconAddChildrenSvg = /* @__PURE__ */ React5.createElement(
@@ -646,7 +747,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ React5.createElement(
 var IconAddChildren = () => /* @__PURE__ */ React5.createElement(Icon3, { size: "small", svg: iconAddChildrenSvg });
 
 // src/components/json-schema-editor/hooks.tsx
-import { useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
 var _id = 0;
 function genId() {
   return _id++;
@@ -661,15 +762,19 @@ function getDrilldownSchema(value, path) {
   return { schema: value, path };
 }
 function usePropertiesEdit(value, onChange) {
-  const drilldown = useMemo2(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
+  const drilldown = useMemo3(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
   const isDrilldownObject = drilldown.schema?.type === "object";
-  const initPropertyList = useMemo2(
-    () => isDrilldownObject ? Object.entries(drilldown.schema?.properties || {}).map(
-      ([name, _value]) => ({
+  const initPropertyList = useMemo3(
+    () => isDrilldownObject ? Object.entries(drilldown.schema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(
+      ([name, _value], index) => ({
         key: genId(),
         name,
         isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-        ..._value
+        ..._value,
+        extra: {
+          ..._value.extra || {},
+          index
+        }
       })
     ) : [],
     [isDrilldownObject]
@@ -685,7 +790,7 @@ function usePropertiesEdit(value, onChange) {
             nameMap.set(_property.name, _property);
           }
         }
-        return Object.entries(drilldown.schema?.properties || {}).map(([name, _value]) => {
+        return Object.entries(drilldown.schema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([name, _value]) => {
           const _property = nameMap.get(name);
           if (_property) {
             return {
@@ -731,7 +836,10 @@ function usePropertiesEdit(value, onChange) {
     });
   };
   const onAddProperty = () => {
-    updatePropertyList((_list) => [..._list, { key: genId(), name: "", type: "string" }]);
+    updatePropertyList((_list) => [
+      ..._list,
+      { key: genId(), name: "", type: "string", extra: { index: _list.length + 1 } }
+    ]);
   };
   const onRemoveProperty = (key) => {
     updatePropertyList((_list) => _list.filter((_property) => _property.key !== key));
@@ -782,7 +890,7 @@ function PropertyEdit(props) {
   const [expand, setExpand] = useState2(false);
   const [collapse, setCollapse] = useState2(false);
   const { name, type, items, description, isPropertyRequired } = value || {};
-  const typeSelectorValue = useMemo3(() => ({ type, items }), [type, items]);
+  const typeSelectorValue = useMemo4(() => ({ type, items }), [type, items]);
   const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
   const onChange = (key, _value) => {
     onChangeProps?.({
@@ -868,11 +976,306 @@ function PropertyEdit(props) {
     }
   ))))));
 }
+
+// src/components/batch-variable-selector/index.tsx
+import React7 from "react";
+import { PrivateScopeProvider } from "@flowgram.ai/editor";
+var batchVariableSchema = {
+  type: "array",
+  extra: { weak: true }
+};
+function BatchVariableSelector(props) {
+  return /* @__PURE__ */ React7.createElement(PrivateScopeProvider, null, /* @__PURE__ */ React7.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+}
+
+// src/components/constant-input/index.tsx
+import React8, { useMemo as useMemo5 } from "react";
+import { Input as Input2, InputNumber, Select } from "@douyinfe/semi-ui";
+var defaultStrategies = [
+  {
+    hit: (schema) => schema?.type === "string",
+    Renderer: (props) => /* @__PURE__ */ React8.createElement(Input2, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+  },
+  {
+    hit: (schema) => schema?.type === "number",
+    Renderer: (props) => /* @__PURE__ */ React8.createElement(
+      InputNumber,
+      {
+        placeholder: "Please Input Number",
+        size: "small",
+        disabled: props.readonly,
+        hideButtons: true,
+        ...props
+      }
+    )
+  },
+  {
+    hit: (schema) => schema?.type === "integer",
+    Renderer: (props) => /* @__PURE__ */ React8.createElement(
+      InputNumber,
+      {
+        placeholder: "Please Input Integer",
+        size: "small",
+        disabled: props.readonly,
+        hideButtons: true,
+        precision: 0,
+        ...props
+      }
+    )
+  },
+  {
+    hit: (schema) => schema?.type === "boolean",
+    Renderer: (props) => {
+      const { value, onChange, ...rest } = props;
+      return /* @__PURE__ */ React8.createElement(
+        Select,
+        {
+          placeholder: "Please Select Boolean",
+          size: "small",
+          disabled: props.readonly,
+          optionList: [
+            { label: "True", value: 1 },
+            { label: "False", value: 0 }
+          ],
+          value: value ? 1 : 0,
+          onChange: (value2) => onChange?.(!!value2),
+          ...rest
+        }
+      );
+    }
+  }
+];
+function ConstantInput(props) {
+  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const strategies = useMemo5(
+    () => [...defaultStrategies, ...extraStrategies || []],
+    [extraStrategies]
+  );
+  const Renderer = useMemo5(() => {
+    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+    return strategy?.Renderer;
+  }, [strategies, schema]);
+  if (!Renderer) {
+    return /* @__PURE__ */ React8.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
+  }
+  return /* @__PURE__ */ React8.createElement(Renderer, { value, onChange, readonly, ...rest });
+}
+
+// src/components/dynamic-value-input/index.tsx
+import React9 from "react";
+import { IconButton as IconButton2 } from "@douyinfe/semi-ui";
+import { IconSetting } from "@douyinfe/semi-icons";
+
+// src/components/dynamic-value-input/styles.tsx
+import styled3 from "styled-components";
+var UIContainer2 = styled3.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+var UIMain = styled3.div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
+var UITrigger = styled3.div``;
+
+// src/components/dynamic-value-input/index.tsx
+function DynamicValueInput({
+  value,
+  onChange,
+  readonly,
+  style,
+  schema,
+  constantProps
+}) {
+  const renderMain = () => {
+    if (value?.type === "ref") {
+      return /* @__PURE__ */ React9.createElement(
+        VariableSelector,
+        {
+          value: value?.content,
+          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+          includeSchema: schema,
+          readonly
+        }
+      );
+    }
+    return /* @__PURE__ */ React9.createElement(
+      ConstantInput,
+      {
+        value: value?.content,
+        onChange: (_v) => onChange({ type: "constant", content: _v }),
+        schema: schema || { type: "string" },
+        readonly,
+        ...constantProps
+      }
+    );
+  };
+  const renderTrigger = () => /* @__PURE__ */ React9.createElement(
+    VariableSelector,
+    {
+      style: { width: "100%" },
+      value: value?.type === "ref" ? value?.content : void 0,
+      onChange: (_v) => onChange({ type: "ref", content: _v }),
+      includeSchema: schema,
+      readonly,
+      triggerRender: () => /* @__PURE__ */ React9.createElement(IconButton2, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React9.createElement(IconSetting, { size: "small" }) })
+    }
+  );
+  return /* @__PURE__ */ React9.createElement(UIContainer2, { style }, /* @__PURE__ */ React9.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React9.createElement(UITrigger, null, renderTrigger()));
+}
+
+// src/effects/provide-batch-input/index.ts
+import {
+  ASTFactory,
+  createEffectFromVariableProvider,
+  getNodeForm
+} from "@flowgram.ai/editor";
+var provideBatchInputEffect = createEffectFromVariableProvider({
+  private: true,
+  parse: (value, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: getNodeForm(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: ASTFactory.createObject({
+        properties: [
+          ASTFactory.createProperty({
+            key: "item",
+            initializer: ASTFactory.createEnumerateExpression({
+              enumerateFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || []
+              })
+            })
+          }),
+          ASTFactory.createProperty({
+            key: "index",
+            type: ASTFactory.createNumber()
+          })
+        ]
+      })
+    })
+  ]
+});
+
+// src/effects/provide-batch-outputs/index.ts
+import {
+  ASTFactory as ASTFactory2,
+  createEffectFromVariableProvider as createEffectFromVariableProvider2,
+  getNodeForm as getNodeForm2
+} from "@flowgram.ai/editor";
+var provideBatchOutputsEffect = createEffectFromVariableProvider2({
+  private: true,
+  parse: (value, ctx) => [
+    ASTFactory2.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: getNodeForm2(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: ASTFactory2.createObject({
+        properties: Object.entries(value).map(
+          ([_key, value2]) => ASTFactory2.createProperty({
+            key: _key,
+            initializer: ASTFactory2.createWrapArrayExpression({
+              wrapFor: ASTFactory2.createKeyPathExpression({
+                keyPath: value2.content || []
+              })
+            })
+          })
+        )
+      })
+    })
+  ]
+});
+
+// src/utils/format-legacy-refs/index.ts
+import { isObject } from "lodash";
+function formatLegacyRefOnSubmit(value) {
+  if (isObject(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnSubmit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+  return value;
+}
+function formatLegacyRefOnInit(value) {
+  if (isObject(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnInit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+  return value;
+}
+function isLegacyFlowRefValueSchema(value) {
+  return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+}
+function isNewFlowRefValueSchema(value) {
+  return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+}
+function formatLegacyRefToNewRef(value) {
+  const keyPath = value.content.split(".");
+  if (keyPath[1] === "outputs") {
+    return {
+      type: "ref",
+      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
+    };
+  }
+  return {
+    type: "ref",
+    content: keyPath
+  };
+}
+function formatNewRefToLegacyRef(value) {
+  return {
+    type: "ref",
+    content: value.content.join(".")
+  };
+}
 export {
   ArrayIcons,
+  BatchVariableSelector,
+  ConstantInput,
+  DynamicValueInput,
   JsonSchemaEditor,
   TypeSelector,
   VariableSelector,
-  VariableTypeIcons
+  VariableTypeIcons,
+  formatLegacyRefOnInit,
+  formatLegacyRefOnSubmit,
+  formatLegacyRefToNewRef,
+  formatNewRefToLegacyRef,
+  getSchemaIcon,
+  getTypeSelectValue,
+  isLegacyFlowRefValueSchema,
+  isNewFlowRefValueSchema,
+  parseTypeSelectValue,
+  provideBatchInputEffect,
+  provideBatchOutputsEffect
 };
 //# sourceMappingURL=index.js.map