@flowgram.ai/form-materials 0.4.9 → 0.4.11

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

@@ -0,0 +1,128 @@
+import { Op } from "./types.mjs";
+const defaultRules = {
+    string: {
+        [Op.EQ]: 'string',
+        [Op.NEQ]: 'string',
+        [Op.CONTAINS]: 'string',
+        [Op.NOT_CONTAINS]: 'string',
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array',
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null
+    },
+    number: {
+        [Op.EQ]: 'number',
+        [Op.NEQ]: 'number',
+        [Op.GT]: 'number',
+        [Op.GTE]: 'number',
+        [Op.LT]: 'number',
+        [Op.LTE]: 'number',
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array'
+    },
+    integer: {
+        [Op.EQ]: 'number',
+        [Op.NEQ]: 'number',
+        [Op.GT]: 'number',
+        [Op.GTE]: 'number',
+        [Op.LT]: 'number',
+        [Op.LTE]: 'number',
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array'
+    },
+    boolean: {
+        [Op.EQ]: 'boolean',
+        [Op.NEQ]: 'boolean',
+        [Op.IS_TRUE]: null,
+        [Op.IS_FALSE]: null,
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array'
+    },
+    object: {
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null
+    },
+    array: {
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null,
+        [Op.CONTAINS]: 'array',
+        [Op.NOT_CONTAINS]: 'array',
+        [Op.EQ]: 'array',
+        [Op.NEQ]: 'array'
+    },
+    map: {
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null
+    },
+    ['date-time']: {
+        [Op.EQ]: 'date-time',
+        [Op.NEQ]: 'date-time',
+        [Op.GT]: 'date-time',
+        [Op.GTE]: 'date-time',
+        [Op.LT]: 'date-time',
+        [Op.LTE]: 'date-time'
+    }
+};
+const defaultOpConfigs = {
+    [Op.EQ]: {
+        label: 'Equal',
+        abbreviation: '='
+    },
+    [Op.NEQ]: {
+        label: 'Not Equal',
+        abbreviation: "\u2260"
+    },
+    [Op.GT]: {
+        label: 'Greater Than',
+        abbreviation: '>'
+    },
+    [Op.GTE]: {
+        label: 'Greater Than or Equal',
+        abbreviation: '>='
+    },
+    [Op.LT]: {
+        label: 'Less Than',
+        abbreviation: '<'
+    },
+    [Op.LTE]: {
+        label: 'Less Than or Equal',
+        abbreviation: '<='
+    },
+    [Op.IN]: {
+        label: 'In',
+        abbreviation: "\u2208"
+    },
+    [Op.NIN]: {
+        label: 'Not In',
+        abbreviation: "\u2209"
+    },
+    [Op.CONTAINS]: {
+        label: 'Contains',
+        abbreviation: "\u2287"
+    },
+    [Op.NOT_CONTAINS]: {
+        label: 'Not Contains',
+        abbreviation: "\u2289"
+    },
+    [Op.IS_EMPTY]: {
+        label: 'Is Empty',
+        abbreviation: '=',
+        rightDisplay: 'Empty'
+    },
+    [Op.IS_NOT_EMPTY]: {
+        label: 'Is Not Empty',
+        abbreviation: "\u2260",
+        rightDisplay: 'Empty'
+    },
+    [Op.IS_TRUE]: {
+        label: 'Is True',
+        abbreviation: '=',
+        rightDisplay: 'True'
+    },
+    [Op.IS_FALSE]: {
+        label: 'Is False',
+        abbreviation: '=',
+        rightDisplay: 'False'
+    }
+};
+export { defaultOpConfigs, defaultRules };

package/dist/esm/components/condition-row/hooks/useOp.mjs

@@ -0,0 +1,44 @@
+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 { defaultOpConfigs } from "../constants.mjs";
+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/condition-row/hooks/useRule.mjs

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { useScopeAvailable } from "@flowgram.ai/editor";
+import { defaultRules } from "../constants.mjs";
+function useRule(left, userRules) {
+    const available = useScopeAvailable();
+    const rules = useMemo(()=>({
+            ...defaultRules,
+            ...userRules || {}
+        }), [
+        userRules
+    ]);
+    const variable = useMemo(()=>{
+        if (!left) return;
+        return available.getByKeyPath(left.content);
+    }, [
+        available,
+        left
+    ]);
+    const rule = useMemo(()=>{
+        if (!variable) return;
+        const schema = JsonSchemaUtils.astToSchema(variable.type, {
+            drilldown: false
+        });
+        return rules[schema?.type];
+    }, [
+        variable?.type,
+        rules
+    ]);
+    return {
+        rule
+    };
+}
+export { useRule };

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Input } from "@douyinfe/semi-ui";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from "./styles.mjs";
+import { useRule } from "./hooks/useRule.mjs";
+import { useOp } from "./hooks/useOp.mjs";
+import { defaultOpConfigs, defaultRules } from "./constants.mjs";
+const defaultRuleConfig = {
+    ops: {},
+    rules: {}
+};
+function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRuleConfig }) {
+    const { left, operator, right } = value || {};
+    const { rule } = useRule(left, 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: /*#__PURE__*/ jsx(InjectVariableSelector, {
+                            readonly: readonly,
+                            style: {
+                                width: '100%'
+                            },
+                            value: left?.content,
+                            onChange: (v)=>onChange({
+                                    ...value,
+                                    left: {
+                                        type: 'ref',
+                                        content: v
+                                    }
+                                })
+                        })
+                    }),
+                    /*#__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')
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+ConditionRow.defaultRules = defaultRules;
+ConditionRow.defaultOpConfigs = defaultOpConfigs;
+export { ConditionRow };

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/coze-editor-extensions/extensions/inputs-tree.mjs

@@ -0,0 +1,135 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { isPlainObject, last } from "lodash-es";
+import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import { FlowValueUtils } from "../../../shared/index.mjs";
+function InputsPicker({ inputsValues, onSelect }) {
+    const available = useScopeAvailable();
+    const getArrayDrilldown = (type, depth = 1)=>{
+        if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
+        return {
+            type: type.items,
+            depth: depth
+        };
+    };
+    const renderVariable = (variable, keyPath)=>{
+        let type = variable?.type;
+        let children;
+        if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...keyPath,
+                _property.key
+            ])).filter(Boolean);
+        if (ASTMatch.isArray(type)) {
+            const drilldown = getArrayDrilldown(type);
+            if (ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
+                    ...keyPath,
+                    ...new Array(drilldown.depth).fill('[0]'),
+                    _property.key
+                ])).filter(Boolean);
+        }
+        const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
+        return {
+            key: key,
+            label: last(keyPath),
+            value: key,
+            children
+        };
+    };
+    const getTreeData = (value, keyPath)=>{
+        const currKey = keyPath.join('.');
+        if (FlowValueUtils.isFlowValue(value)) {
+            if (FlowValueUtils.isRef(value)) {
+                const variable = available.getByKeyPath(value.content || []);
+                if (variable) return renderVariable(variable, keyPath);
+            }
+            return {
+                key: currKey,
+                value: currKey,
+                label: last(keyPath)
+            };
+        }
+        if (isPlainObject(value)) return {
+            key: currKey,
+            value: currKey,
+            label: last(keyPath),
+            children: Object.entries(value).map(([key, value])=>getTreeData(value, [
+                    ...keyPath,
+                    key
+                ])).filter(Boolean)
+        };
+    };
+    const treeData = useMemo(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
+                key
+            ])).filter(Boolean), []);
+    return /*#__PURE__*/ jsx(Tree, {
+        treeData: treeData,
+        onSelect: (v)=>onSelect(v)
+    });
+}
+const DEFAULT_TRIGGER_CHARACTERS = [
+    '{',
+    '{}',
+    '@'
+];
+function InputsTree({ inputsValues, triggerCharacters = DEFAULT_TRIGGER_CHARACTERS }) {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = getCurrentMentionReplaceRange(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            ...range,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ jsx(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { InputsPicker, InputsTree };

package/dist/esm/components/coze-editor-extensions/extensions/variable-tag.mjs

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect } from "react";
+import { isEqual, last } from "lodash-es";
+import { Disposable, DisposableCollection, useCurrentScope } from "@flowgram.ai/editor";
+import { useInjector } from "@flowgram.ai/coze-editor/react";
+import { Popover } from "@douyinfe/semi-ui";
+import { IconIssueStroked } from "@douyinfe/semi-icons";
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { polyfillCreateRoot } from "../../../shared/index.mjs";
+import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from "../styles.mjs";
+class VariableTagWidget extends WidgetType {
+    constructor({ keyPath, scope }){
+        super(), this.toDispose = new DisposableCollection(), this.renderIcon = (icon)=>{
+            if ('string' == typeof icon) return /*#__PURE__*/ jsx("img", {
+                style: {
+                    marginRight: 8
+                },
+                width: 12,
+                height: 12,
+                src: icon
+            });
+            return icon;
+        };
+        this.keyPath = keyPath;
+        this.scope = scope;
+    }
+    renderVariable(v) {
+        if (!v) return void this.root.render(/*#__PURE__*/ jsx(UITag, {
+            prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
+            color: "amber",
+            children: "Unknown"
+        }));
+        const rootField = last(v.parentFields);
+        const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
+        });
+        const rootIcon = this.renderIcon(rootField?.meta.icon);
+        this.root.render(/*#__PURE__*/ jsx(Popover, {
+            content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+                children: [
+                    rootIcon,
+                    rootTitle,
+                    /*#__PURE__*/ jsx(UIVarName, {
+                        children: v?.keyPath.slice(1).join('.')
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ jsxs(UITag, {
+                prefixIcon: rootIcon,
+                children: [
+                    rootTitle,
+                    /*#__PURE__*/ jsx(UIVarName, {
+                        children: v?.key
+                    })
+                ]
+            })
+        }));
+    }
+    toDOM(view) {
+        const dom = document.createElement('span');
+        this.root = polyfillCreateRoot(dom);
+        this.toDispose.push(Disposable.create(()=>{
+            this.root.unmount();
+        }));
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
+            this.renderVariable(v);
+        }, {
+            triggerOnInit: false
+        }));
+        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        return dom;
+    }
+    eq(other) {
+        return isEqual(this.keyPath, other.keyPath);
+    }
+    ignoreEvent() {
+        return false;
+    }
+    destroy(dom) {
+        this.toDispose.dispose();
+    }
+}
+function VariableTagInject() {
+    const injector = useInjector();
+    const scope = useCurrentScope();
+    useLayoutEffect(()=>{
+        const atMatcher = new MatchDecorator({
+            regexp: /\{\{([^\}\{]+)\}\}/g,
+            decoration: (match)=>Decoration.replace({
+                    widget: new VariableTagWidget({
+                        keyPath: match[1]?.split('.') ?? [],
+                        scope
+                    })
+                })
+        });
+        return injector.inject([
+            ViewPlugin.fromClass(class {
+                constructor(view){
+                    this.view = view;
+                    this.decorations = atMatcher.createDeco(view);
+                }
+                update() {
+                    this.decorations = atMatcher.createDeco(this.view);
+                }
+            }, {
+                decorations: (p)=>p.decorations,
+                provide (p) {
+                    return EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? Decoration.none);
+                }
+            })
+        ]);
+    }, [
+        injector
+    ]);
+    return null;
+}
+export { VariableTagInject };