flowstudio/dist/components/xnode.js

Enterprise Flow Designer

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button, Card, Flex, Badge, Text, Popover, TextField, TextArea, Inset, } from "@radix-ui/themes";
import { CiMenuKebab } from "react-icons/ci";
import { Handle, Position } from "@xyflow/react";
import { BiPlus, BiTrash } from "react-icons/bi";
import { useConfigStore } from "../zustand/store";
// Constants
const color_start = '#009688';
const color_normal = '#2196f3';
const color_end = '#ff5c4d';
export default function XNode({ id = 0, data, fns = [], inputs = [], type = 'normal' }) {
    const { stateType, setStateType } = useConfigStore();
    return (_jsx(Card, { style: { overflow: 'unset', contain: 'layout' }, children: _jsx(Inset, { style: { overflow: 'unset' }, children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsxs(Flex, { width: '100%', align: 'center', justify: 'between', p: '1', className: "drag-handle", style: { backgroundColor: type == 'start' ? color_start : type == 'normal' ? color_normal : type == 'end' ? color_end : color_normal, borderTopLeftRadius: 7, borderTopRightRadius: 7 }, children: [_jsx(Text, { size: '2', ml: '1', children: type == 'start' ? 'Start' : type == 'normal' ? 'Normal' : type == 'end' ? 'End' : 'Normal' }), _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { children: _jsx(Button, { size: '1', variant: 'soft', "aria-label": 'Options', children: _jsx(CiMenuKebab, {}) }) }), _jsx(Popover.Content, { size: '1', align: "end", children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsx(Button, { variant: 'ghost', size: '1', onClick: () => { }, children: "Change Node" }), _jsx(Button, { variant: 'ghost', size: '1', onClick: () => { }, color: 'red', children: "Delete Node" })] }) })] })] }), _jsxs(Flex, { direction: 'column', gap: '3', px: '3', children: [stateType == 'build' ?
                                _jsx(TextArea, { size: '1', className: "nodrag", placeholder: 'Message', defaultValue: (data === null || data === void 0 ? void 0 : data.message) || '' })
                                : _jsx(Text, { size: '1', color: 'gray', style: { maxWidth: '180px', textWrap: 'wrap' }, children: data === null || data === void 0 ? void 0 : data.message }), type != 'end' && inputs.length > 0 &&
                                _jsx(Flex, { direction: 'column', gap: '2', children: inputs.map((val, ind) => (_jsx(InputNode, { identifier: ind, id: val.id, parentType: type, type: val.type, text: val.text, inputType: val.inputType, allowDrag: inputs.length > 1, allowInsert: inputs.length == (ind + 1) }, ind))) })] }), _jsxs(Flex, { width: '100%', align: 'center', px: '2', pb: '2', children: [_jsx(Flex, { flexGrow: '1', children: fns.length > 0 &&
                                    _jsx(Flex, { wrap: 'wrap', gap: '2', children: fns.map((val, ind) => (_jsxs(Badge, { size: '1', color: val.type == 'system' ? 'green' : 'purple', children: ["fn (", val.functions.length, ")"] }, ind))) }) }), _jsx(Flex, { flexShrink: '0', children: _jsx(Text, { size: '1', children: "1pg (50)" }) })] }), type != 'start' &&
                        _jsx(Handle, { type: "target", position: Position.Left, id: "g", style: { left: -6, background: type == 'normal' ? color_normal : type == 'end' ? color_end : color_normal, borderColor: '#fff', borderWidth: 1, width: 10, height: 15, borderRadius: 3, zIndex: 10 } })] }) }) }));
}
export function InputNode({ identifier, id = 0, parentType, type = 'choice', text = '', inputType = 'text', allowDrag = false, allowInsert = false }) {
    const [show, setShow] = useState(false);
    const handleClick = () => setShow(!show);
    return (_jsxs(Flex, { position: 'relative', gap: '0', align: 'center', style: { zIndex: 20 }, children: [_jsxs(Flex, { width: '100%', direction: 'column', align: 'end', children: [_jsxs(Flex, { width: '100%', align: 'center', children: [allowDrag && _jsx(Flex, { gap: '1', children: _jsx(Button, { size: '1', variant: 'soft', style: { borderTopRightRadius: 0, borderBottomRightRadius: 0 }, children: id }) }), _jsx(TextField.Root, { type: inputType, defaultValue: text, id: 'text_value', placeholder: type == 'choice' ? 'Option Text' : inputType == 'number' ? '0' : 'User Input', autoComplete: 'off', style: { width: '100%' }, children: identifier != 0 &&
                                    _jsx(TextField.Slot, { side: 'right', pr: '1', children: _jsx(Button, { color: 'red', "aria-label": 'close', size: '1', variant: 'soft', onClick: handleClick, style: { width: 20, padding: 4 }, children: _jsx(BiTrash, { size: 20 }) }) }) })] }), allowInsert &&
                        _jsx(Button, { "aria-label": 'Add', size: '1', style: { borderTopLeftRadius: 0, borderTopRightRadius: 0, marginRight: 5 }, children: _jsx(BiPlus, {}) })] }), _jsx(Handle, { type: "source", position: Position.Right, isConnectable: true, id: id, style: { right: -19, background: parentType == 'start' ? color_start : parentType == 'normal' ? color_normal : parentType == 'end' ? color_end : color_normal, borderColor: '#fff', borderWidth: 1, width: 10, height: 15, borderRadius: 3, position: 'absolute', top: 16, zIndex: 20 } })] }));
}
//# sourceMappingURL=xnode.js.map