@flowgram.ai/form-materials 0.4.8 → 0.4.10

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

@@ -0,0 +1,21 @@
+import styled_components from "styled-components";
+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;
+`;
+export { UIContainer, UILeft, UIOperator, UIRight, UIValues };

package/dist/esm/components/condition-row/types.mjs

@@ -0,0 +1,18 @@
+var types_Op = /*#__PURE__*/ function(Op) {
+    Op["EQ"] = "eq";
+    Op["NEQ"] = "neq";
+    Op["GT"] = "gt";
+    Op["GTE"] = "gte";
+    Op["LT"] = "lt";
+    Op["LTE"] = "lte";
+    Op["IN"] = "in";
+    Op["NIN"] = "nin";
+    Op["CONTAINS"] = "contains";
+    Op["NOT_CONTAINS"] = "not_contains";
+    Op["IS_EMPTY"] = "is_empty";
+    Op["IS_NOT_EMPTY"] = "is_not_empty";
+    Op["IS_TRUE"] = "is_true";
+    Op["IS_FALSE"] = "is_false";
+    return Op;
+}({});
+export { types_Op as Op };

package/dist/esm/components/constant-input/index.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import react, { useMemo } from "react";
+import { Input } from "@douyinfe/semi-ui";
+import { useTypeManager } from "../../plugins/index.mjs";
+function ConstantInput(props) {
+    const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
+    const typeManager = useTypeManager();
+    const Renderer = useMemo(()=>{
+        const strategy = (strategies || []).find((_strategy)=>_strategy.hit(schema));
+        if (!strategy) return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
+        return strategy?.Renderer;
+    }, [
+        strategies,
+        schema
+    ]);
+    if (!Renderer) {
+        if (fallbackRenderer) return /*#__PURE__*/ react.createElement(fallbackRenderer, {
+            value,
+            onChange,
+            readonly,
+            ...rest
+        });
+        return /*#__PURE__*/ jsx(Input, {
+            size: "small",
+            disabled: true,
+            placeholder: "Unsupported type"
+        });
+    }
+    return /*#__PURE__*/ jsx(Renderer, {
+        value: value,
+        onChange: onChange,
+        readonly: readonly,
+        ...rest
+    });
+}
+export { ConstantInput };

package/dist/esm/components/db-condition-row/hooks/use-left.mjs

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTypeManager } from "@flowgram.ai/json-schema";
+import { Icon } from "@douyinfe/semi-ui";
+import { ConditionRow } from "../../index.mjs";
+import { UIOptionLabel, UISelect } from "../styles.mjs";
+const defaultRules = ConditionRow.defaultRules;
+function useLeft({ left, options, userRules, readonly, onChange }) {
+    const rules = useMemo(()=>({
+            ...defaultRules,
+            ...userRules || {}
+        }), [
+        userRules
+    ]);
+    const typeManager = useTypeManager();
+    const rule = useMemo(()=>{
+        if (!left) return;
+        const option = options?.find((item)=>item.value === left);
+        if (!option?.schema?.type) return;
+        return rules[option.schema.type];
+    }, [
+        left,
+        options,
+        rules
+    ]);
+    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(UISelect, {
+            disabled: readonly,
+            size: "small",
+            style: {
+                width: '100%'
+            },
+            value: left,
+            onChange: (v)=>onChange(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
+                })) || []
+        });
+    return {
+        rule,
+        renderDBOptionSelect
+    };
+}
+export { useLeft };

package/dist/esm/components/db-condition-row/hooks/use-op.mjs

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button, Select } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked } from "@douyinfe/semi-icons";
+import { ConditionRow } from "../../index.mjs";
+const defaultOpConfigs = ConditionRow.defaultOpConfigs;
+function useOp({ rule, op, onChange, readonly, userOps }) {
+    const options = useMemo(()=>Object.keys(rule || {}).map((_op)=>({
+                ...defaultOpConfigs[_op] || {},
+                ...userOps?.[_op] || {},
+                value: _op,
+                label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
+            })), [
+        rule,
+        userOps
+    ]);
+    const opConfig = useMemo(()=>defaultOpConfigs[op], [
+        op
+    ]);
+    const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            style: {
+                height: 22
+            },
+            disabled: readonly,
+            size: "small",
+            value: op,
+            optionList: options,
+            onChange: (v)=>{
+                onChange(v);
+            },
+            triggerRender: ({ value })=>/*#__PURE__*/ jsx(Button, {
+                    size: "small",
+                    disabled: !rule,
+                    children: opConfig?.abbreviation || /*#__PURE__*/ jsx(IconChevronDownStroked, {
+                        size: "small"
+                    })
+                })
+        });
+    return {
+        renderOpSelect,
+        opConfig
+    };
+}
+export { useOp };

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

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Input } from "@douyinfe/semi-ui";
+import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from "./styles.mjs";
+import { useOp } from "./hooks/use-op.mjs";
+import { useLeft } from "./hooks/use-left.mjs";
+const defaultRuleConfig = {
+    ops: {},
+    rules: {}
+};
+function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig = defaultRuleConfig }) {
+    const { left, operator, right } = value || {};
+    const { rule, renderDBOptionSelect } = useLeft({
+        left,
+        options,
+        onChange: (leftKey)=>onChange({
+                ...value,
+                left: leftKey
+            }),
+        readonly,
+        userRules: ruleConfig.rules
+    });
+    const { renderOpSelect, opConfig } = useOp({
+        rule,
+        op: operator,
+        onChange: (v)=>onChange({
+                ...value,
+                operator: v
+            }),
+        readonly,
+        userOps: ruleConfig.ops
+    });
+    const targetSchema = useMemo(()=>{
+        const targetType = rule?.[operator || ''] || null;
+        return targetType ? {
+            type: targetType,
+            extra: {
+                weak: true
+            }
+        } : null;
+    }, [
+        rule,
+        opConfig
+    ]);
+    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 "../../plugins/index.mjs";
+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 };