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

package/dist/esm/components/db-condition-row/index.mjs

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button, Icon, Input, Select } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked } from "@douyinfe/semi-icons";
+import { useTypeManager } from "../../plugins/index.mjs";
+import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { useCondition } from "../condition-context/index.mjs";
+import { UIContainer, UILeft, UIOperator, UIOptionLabel, UIRight, UISelect, UIValues } from "./styles.mjs";
+const defaultRuleConfig = {
+    ops: {},
+    rules: {}
+};
+function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig = defaultRuleConfig }) {
+    const { left, operator, right } = value || {};
+    const typeManager = useTypeManager();
+    const leftSchema = useMemo(()=>options?.find((item)=>item.value === left)?.schema, [
+        left,
+        options
+    ]);
+    const { opConfig, rule, opOptionList, targetSchema } = useCondition({
+        leftSchema,
+        operator,
+        ruleConfig
+    });
+    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(UISelect, {
+            disabled: readonly,
+            size: "small",
+            style: {
+                width: '100%'
+            },
+            value: left,
+            onChange: (v)=>onChange({
+                    ...value,
+                    left: v
+                }),
+            optionList: options?.map((item)=>({
+                    label: /*#__PURE__*/ jsxs(UIOptionLabel, {
+                        children: [
+                            /*#__PURE__*/ jsx(Icon, {
+                                size: "small",
+                                svg: typeManager.getDisplayIcon(item.schema)
+                            }),
+                            item.label
+                        ]
+                    }),
+                    value: item.value
+                })) || []
+        });
+    const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            style: {
+                height: 22
+            },
+            disabled: readonly,
+            size: "small",
+            value: operator,
+            optionList: opOptionList,
+            onChange: (v)=>{
+                onChange({
+                    ...value,
+                    operator: v
+                });
+            },
+            triggerRender: ({ value })=>/*#__PURE__*/ jsx(Button, {
+                    size: "small",
+                    disabled: !rule,
+                    children: opConfig?.abbreviation || /*#__PURE__*/ jsx(IconChevronDownStroked, {
+                        size: "small"
+                    })
+                })
+        });
+    return /*#__PURE__*/ jsxs(UIContainer, {
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(UIOperator, {
+                children: renderOpSelect()
+            }),
+            /*#__PURE__*/ jsxs(UIValues, {
+                children: [
+                    /*#__PURE__*/ jsx(UILeft, {
+                        children: renderDBOptionSelect()
+                    }),
+                    /*#__PURE__*/ jsx(UIRight, {
+                        children: targetSchema ? /*#__PURE__*/ jsx(InjectDynamicValueInput, {
+                            readonly: readonly || !rule,
+                            value: right,
+                            schema: targetSchema,
+                            onChange: (v)=>onChange({
+                                    ...value,
+                                    right: v
+                                })
+                        }) : /*#__PURE__*/ jsx(Input, {
+                            size: "small",
+                            disabled: true,
+                            style: {
+                                pointerEvents: 'none'
+                            },
+                            value: opConfig?.rightDisplay || I18n.t('Empty')
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DBConditionRow };

package/dist/esm/components/db-condition-row/styles.mjs

@@ -0,0 +1,32 @@
+import styled_components from "styled-components";
+import { Select } from "@douyinfe/semi-ui";
+const UIContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const UIOperator = styled_components.div``;
+const UILeft = styled_components.div`
+  width: 100%;
+`;
+const UIRight = styled_components.div`
+  width: 100%;
+`;
+const UIValues = styled_components.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+const UIOptionLabel = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const UISelect = styled_components(Select)`
+  & .semi-select-selection {
+    margin-left: 5px;
+  }
+`;
+export { UIContainer, UILeft, UIOperator, UIOptionLabel, UIRight, UISelect, UIValues };

package/dist/esm/components/display-flow-value/index.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { useScopeAvailable } from "@flowgram.ai/editor";
+import { FlowValueUtils } from "../../shared/index.mjs";
+import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
+function DisplayFlowValue({ value, title, showIconInTree }) {
+    const available = useScopeAvailable();
+    const variable = value?.type === 'ref' ? available.getByKeyPath(value?.content) : void 0;
+    const schema = useMemo(()=>{
+        if (value?.type === 'ref') return JsonSchemaUtils.astToSchema(variable?.type);
+        if (value?.type === 'template') return {
+            type: 'string'
+        };
+        if (value?.type === 'constant') return FlowValueUtils.inferConstantJsonSchema(value);
+        return {
+            type: 'unknown'
+        };
+    }, [
+        value,
+        variable?.hash
+    ]);
+    return /*#__PURE__*/ jsx(DisplaySchemaTag, {
+        title: title,
+        value: schema,
+        showIconInTree: showIconInTree,
+        warning: value?.type === 'ref' && !variable
+    });
+}
+export { DisplayFlowValue };

package/dist/esm/components/display-inputs-values/index.mjs

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { isPlainObject } from "lodash-es";
+import { useScopeAvailable } from "@flowgram.ai/editor";
+import { FlowValueUtils } from "../../shared/index.mjs";
+import { DisplayFlowValue } from "../display-flow-value/index.mjs";
+import { DisplayInputsWrapper } from "./styles.mjs";
+import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
+function DisplayInputsValues({ value, showIconInTree }) {
+    const childEntries = Object.entries(value || {});
+    return /*#__PURE__*/ jsx(DisplayInputsWrapper, {
+        children: childEntries.map(([key, value])=>{
+            if (FlowValueUtils.isFlowValue(value)) return /*#__PURE__*/ jsx(DisplayFlowValue, {
+                title: key,
+                value: value,
+                showIconInTree: showIconInTree
+            }, key);
+            if (isPlainObject(value)) return /*#__PURE__*/ jsx(DisplayInputsValueAllInTag, {
+                title: key,
+                value: value,
+                showIconInTree: showIconInTree
+            }, key);
+            return null;
+        })
+    });
+}
+function DisplayInputsValueAllInTag({ value, title, showIconInTree }) {
+    const available = useScopeAvailable();
+    const schema = useMemo(()=>FlowValueUtils.inferJsonSchema(value, available.scope), [
+        available.version,
+        value
+    ]);
+    return /*#__PURE__*/ jsx(DisplaySchemaTag, {
+        title: title,
+        value: schema,
+        showIconInTree: showIconInTree
+    });
+}
+export { DisplayInputsValueAllInTag, DisplayInputsValues };

package/dist/esm/components/display-inputs-values/styles.mjs

@@ -0,0 +1,7 @@
+import styled_components from "styled-components";
+const DisplayInputsWrapper = styled_components.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;
+export { DisplayInputsWrapper };

package/dist/esm/components/display-outputs/index.mjs

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { useCurrentScope, useRefresh } from "@flowgram.ai/editor";
+import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
+import { DisplayOutputsWrapper } from "./styles.mjs";
+function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
+    const scope = useCurrentScope();
+    const refresh = useRefresh();
+    useEffect(()=>{
+        if (!displayFromScope) return ()=>null;
+        const disposable = scope.output.onListOrAnyVarChange(()=>{
+            refresh();
+        });
+        return ()=>{
+            disposable.dispose();
+        };
+    }, [
+        displayFromScope
+    ]);
+    const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr)=>{
+        acm = {
+            ...acm,
+            ...JsonSchemaUtils.astToSchema(curr.type)?.properties || {}
+        };
+        return acm;
+    }, {}) : value?.properties || {};
+    const childEntries = Object.entries(properties || {});
+    return /*#__PURE__*/ jsx(DisplayOutputsWrapper, {
+        children: childEntries.map(([key, schema])=>/*#__PURE__*/ jsx(DisplaySchemaTag, {
+                title: key,
+                value: schema,
+                showIconInTree: showIconInTree,
+                warning: !schema
+            }, key))
+    });
+}
+export { DisplayOutputs };

package/dist/esm/components/display-outputs/styles.mjs

@@ -0,0 +1,7 @@
+import styled_components from "styled-components";
+const DisplayOutputsWrapper = styled_components.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;
+export { DisplayOutputsWrapper };

package/dist/esm/components/display-schema-tag/index.mjs

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Popover } from "@douyinfe/semi-ui";
+import { useTypeManager } from "../../plugins/index.mjs";
+import { DisplaySchemaTree } from "../display-schema-tree/index.mjs";
+import { PopoverContent, StyledTag, TitleSpan } from "./styles.mjs";
+function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
+    const typeManager = useTypeManager();
+    const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({
+        type: 'unknown'
+    });
+    return /*#__PURE__*/ jsx(Popover, {
+        content: /*#__PURE__*/ jsx(PopoverContent, {
+            children: /*#__PURE__*/ jsx(DisplaySchemaTree, {
+                value: value,
+                typeManager: typeManager,
+                showIcon: showIconInTree
+            })
+        }),
+        children: /*#__PURE__*/ jsxs(StyledTag, {
+            color: warning ? 'amber' : 'white',
+            children: [
+                icon && /*#__PURE__*/ react.cloneElement(icon, {
+                    className: 'tag-icon'
+                }),
+                title && /*#__PURE__*/ jsx(TitleSpan, {
+                    children: title
+                })
+            ]
+        })
+    });
+}
+export { DisplaySchemaTag };

package/dist/esm/components/display-schema-tag/styles.mjs

@@ -0,0 +1,21 @@
+import styled_components from "styled-components";
+import { Tag } from "@douyinfe/semi-ui";
+const PopoverContent = styled_components.div`
+  padding: 10px;
+`;
+const StyledTag = styled_components(Tag)`
+  padding: 4px;
+
+  .tag-icon {
+    width: 12px;
+    height: 12px;
+  }
+`;
+const TitleSpan = styled_components.span`
+  display: inline-block;
+  margin-left: 4px;
+  margin-top: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export { PopoverContent, StyledTag, TitleSpan };

package/dist/esm/components/display-schema-tree/index.mjs

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { useTypeManager } from "@flowgram.ai/json-schema";
+import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from "./styles.mjs";
+function DisplaySchemaTree(props) {
+    return /*#__PURE__*/ jsx(SchemaTree, {
+        ...props
+    });
+}
+function SchemaTree(props) {
+    const { value: schema = {}, drilldown = true, depth = 0, showIcon = true, parentKey = '' } = props || {};
+    const typeManager = useTypeManager();
+    const config = typeManager.getTypeBySchema(schema);
+    const title = typeManager.getComplexText(schema);
+    const icon = typeManager?.getDisplayIcon(schema);
+    let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
+    const childEntries = Object.entries(properties || {});
+    return /*#__PURE__*/ jsxs(TreeItem, {
+        depth: depth,
+        children: [
+            /*#__PURE__*/ jsxs(TreeRow, {
+                children: [
+                    0 !== depth && /*#__PURE__*/ jsx(HorizontalLine, {}),
+                    showIcon && icon && /*#__PURE__*/ react.cloneElement(icon, {
+                        className: 'tree-icon'
+                    }),
+                    /*#__PURE__*/ jsx(TreeTitle, {
+                        children: parentKey ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                `${parentKey} (`,
+                                title,
+                                ')'
+                            ]
+                        }) : title
+                    })
+                ]
+            }),
+            childEntries?.length ? /*#__PURE__*/ jsx(TreeLevel, {
+                children: childEntries.map(([key, value])=>/*#__PURE__*/ jsx(SchemaTree, {
+                        ...props,
+                        parentKey: key,
+                        value: value,
+                        depth: depth + 1
+                    }, key))
+            }) : null
+        ]
+    }, parentKey || 'root');
+}
+export { DisplaySchemaTree };

package/dist/esm/components/display-schema-tree/styles.mjs

@@ -0,0 +1,79 @@
+import styled_components, { css } from "styled-components";
+const TreeRow = styled_components.div`
+  display: flex;
+  align-items: center;
+
+  .tree-icon {
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+  }
+
+  height: 27px;
+  white-space: nowrap;
+`;
+const HorizontalLine = styled_components.div`
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &::after {
+    top: 0px;
+    right: 6px;
+    width: 15px;
+    height: 1px;
+  }
+`;
+const TreeTitle = styled_components.div`
+  // overflow: hidden;
+  // text-overflow: ellipsis;
+`;
+const TreeLevel = styled_components.div`
+  padding-left: 30px;
+  position: relative;
+
+  /* &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+    top: 0px;
+    bottom: 0px;
+    left: -22px;
+    width: 1px;
+  } */
+`;
+const TreeItem = styled_components.div`
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &:not(:last-child)::before {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: -22px;
+  }
+
+  &:last-child::before {
+    width: 1px;
+    top: 0;
+    height: 14px;
+    left: -22px;
+  }
+
+  ${(props)=>0 === props.depth && css`
+      &::before {
+        width: 0px !important;
+      }
+    `}
+`;
+export { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle };

package/dist/esm/components/dynamic-value-input/hooks.mjs

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useScopeAvailable } from "@flowgram.ai/editor";
+function useRefVariable(value) {
+    const available = useScopeAvailable();
+    const refVariable = useMemo(()=>{
+        if (value?.type === 'ref') return available.getByKeyPath(value.content);
+    }, [
+        value,
+        available
+    ]);
+    return refVariable;
+}
+function useSelectSchema(schemaFromProps, constantProps, value) {
+    let defaultSelectSchema = schemaFromProps || constantProps?.schema || {
+        type: 'string'
+    };
+    if (value?.type === 'constant') defaultSelectSchema = value?.schema || defaultSelectSchema;
+    const changeVersion = useRef(0);
+    const effectVersion = useRef(0);
+    const [selectSchema, setSelectSchema] = useState(defaultSelectSchema);
+    useEffect(()=>{
+        effectVersion.current += 1;
+        if (changeVersion.current === effectVersion.current) return;
+        effectVersion.current = changeVersion.current;
+        if (value?.type === 'constant' && value?.schema) return void setSelectSchema(value?.schema);
+    }, [
+        value
+    ]);
+    const setSelectSchemaWithVersionUpdate = (schema)=>{
+        setSelectSchema(schema);
+        changeVersion.current += 1;
+    };
+    return [
+        selectSchema,
+        setSelectSchemaWithVersionUpdate
+    ];
+}
+function useIncludeSchema(schemaFromProps) {
+    const includeSchema = useMemo(()=>{
+        if (!schemaFromProps) return;
+        if (schemaFromProps?.type === 'number') return [
+            schemaFromProps,
+            {
+                type: 'integer'
+            }
+        ];
+        return {
+            ...schemaFromProps,
+            extra: {
+                weak: true,
+                ...schemaFromProps?.extra
+            }
+        };
+    }, [
+        schemaFromProps
+    ]);
+    return includeSchema;
+}
+export { useIncludeSchema, useRefVariable, useSelectSchema };

package/dist/esm/components/dynamic-value-input/index.mjs

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { JsonSchemaUtils, useTypeManager } from "@flowgram.ai/json-schema";
+import { IconButton } from "@douyinfe/semi-ui";
+import { IconSetting } from "@douyinfe/semi-icons";
+import { createInjectMaterial } from "../../shared/index.mjs";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { TypeSelector } from "../type-selector/index.mjs";
+import { ConstantInput } from "../constant-input/index.mjs";
+import { UIContainer, UIMain, UITrigger, UIType } from "./styles.mjs";
+import { useIncludeSchema, useRefVariable, useSelectSchema } from "./hooks.mjs";
+const DEFAULT_VALUE = {
+    type: 'constant',
+    content: '',
+    schema: {
+        type: 'string'
+    }
+};
+function DynamicValueInput({ value, onChange, readonly, style, schema: schemaFromProps, constantProps }) {
+    const refVariable = useRefVariable(value);
+    const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
+    const includeSchema = useIncludeSchema(schemaFromProps);
+    const typeManager = useTypeManager();
+    const renderTypeSelector = ()=>{
+        if (schemaFromProps) return /*#__PURE__*/ jsx(TypeSelector, {
+            value: schemaFromProps,
+            readonly: true
+        });
+        if (value?.type === 'ref') {
+            const schema = refVariable?.type ? JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
+            return /*#__PURE__*/ jsx(TypeSelector, {
+                value: schema,
+                readonly: true
+            });
+        }
+        return /*#__PURE__*/ jsx(TypeSelector, {
+            value: selectSchema,
+            onChange: (_v)=>{
+                setSelectSchema(_v || {
+                    type: 'string'
+                });
+                const schema = _v || {
+                    type: 'string'
+                };
+                let content = typeManager.getDefaultValue(schema);
+                if (_v?.type === 'object') content = '{}';
+                if (_v?.type === 'array') content = '[]';
+                onChange({
+                    type: 'constant',
+                    content,
+                    schema
+                });
+            },
+            readonly: readonly
+        });
+    };
+    const renderMain = ()=>{
+        if (value?.type === 'ref') return /*#__PURE__*/ jsx(InjectVariableSelector, {
+            style: {
+                width: '100%'
+            },
+            value: value?.content,
+            onChange: (_v)=>onChange(_v ? {
+                    type: 'ref',
+                    content: _v
+                } : DEFAULT_VALUE),
+            includeSchema: includeSchema,
+            readonly: readonly
+        });
+        const constantSchema = schemaFromProps || selectSchema || {
+            type: 'string'
+        };
+        return /*#__PURE__*/ jsx(ConstantInput, {
+            value: value?.content,
+            onChange: (_v)=>onChange({
+                    type: 'constant',
+                    content: _v,
+                    schema: constantSchema
+                }),
+            schema: constantSchema || {
+                type: 'string'
+            },
+            readonly: readonly,
+            fallbackRenderer: ()=>/*#__PURE__*/ jsx(InjectVariableSelector, {
+                    style: {
+                        width: '100%'
+                    },
+                    onChange: (_v)=>onChange(_v ? {
+                            type: 'ref',
+                            content: _v
+                        } : DEFAULT_VALUE),
+                    includeSchema: includeSchema,
+                    readonly: readonly
+                }),
+            ...constantProps,
+            strategies: [
+                ...constantProps?.strategies || []
+            ]
+        });
+    };
+    const renderTrigger = ()=>/*#__PURE__*/ jsx(InjectVariableSelector, {
+            style: {
+                width: '100%'
+            },
+            value: value?.type === 'ref' ? value?.content : void 0,
+            onChange: (_v)=>onChange({
+                    type: 'ref',
+                    content: _v
+                }),
+            includeSchema: includeSchema,
+            readonly: readonly,
+            triggerRender: ()=>/*#__PURE__*/ jsx(IconButton, {
+                    disabled: readonly,
+                    size: "small",
+                    icon: /*#__PURE__*/ jsx(IconSetting, {
+                        size: "small"
+                    })
+                })
+        });
+    return /*#__PURE__*/ jsxs(UIContainer, {
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(UIType, {
+                children: renderTypeSelector()
+            }),
+            /*#__PURE__*/ jsx(UIMain, {
+                children: renderMain()
+            }),
+            /*#__PURE__*/ jsx(UITrigger, {
+                children: renderTrigger()
+            })
+        ]
+    });
+}
+DynamicValueInput.renderKey = 'dynamic-value-input-render-key';
+const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);
+export { DynamicValueInput, InjectDynamicValueInput };