@g4rcez/components 2.0.31 → 2.0.33

package/dist/flow/flow.js

@@ -1,77 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { addEdge, Background, Controls, Handle, Position, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow } from "@xyflow/react";
-import { XIcon } from "lucide-react";
-import { createContext, Fragment, memo, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { css } from "../lib/dom";
-import { noop, uuid } from "../lib/fns";
-const DnDContext = createContext([null, () => { }]);
-const DnDProvider = ({ children }) => {
-    const [type, setType] = useState(null);
-    return _jsx(DnDContext.Provider, { value: [type, setType], children: children });
-};
-const useDnD = () => {
-    const [a, b] = useContext(DnDContext);
-    return [a, b];
-};
-const Sidebar = (props) => {
-    const [, setType] = useDnD();
-    const onDragStart = (event, nodeType) => {
-        setType(nodeType);
-        event.dataTransfer.effectAllowed = "move";
-    };
-    return (_jsx("aside", { className: "absolute top-0 right-0 p-2 rounded-lg border shadow min-w-24 border-floating-border bg-card-background shadow-lg", children: _jsx("ul", { className: "space-y-2", children: props.items.map((item) => (_jsxs("li", { draggable: true, onDragStart: (event) => onDragStart(event, item), className: "flex gap-1.5 items-center text-lg hover:cursor-grab hover:text-primary", children: [item.Icon ? _jsx(item.Icon, { size: 16 }) : null, item.title] }, `${item.id}-flow-side-item`))) }) }));
-};
-const Handlers = (props) => {
-    return (_jsxs(Fragment, { children: [_jsx(Handle, { id: `${props.id}-handle-top`, type: "source", position: Position.Top, className: "h-0.5 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: "source", position: Position.Left, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: "source", position: Position.Right, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: "source", position: Position.Bottom, className: "h-0.5 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-top`, type: "target", position: Position.Top, className: "h-0.5 w-10 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-left`, type: "target", position: Position.Left, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-right`, type: "target", position: Position.Right, className: "h-4 w-0.5 !bg-primary" }), _jsx(Handle, { id: `${props.id}-handle-bottom`, type: "target", position: Position.Bottom, className: "h-0.5 w-10 !bg-primary" })] }));
-};
-const Input = memo((node) => {
-    return (_jsxs("div", { className: css("relative flex border min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "", "border-floating-border"), children: [_jsx(Handlers, { id: node.data.id }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));
-});
-const Connection = memo((node) => {
-    const { deleteElements } = useReactFlow();
-    const onClick = () => deleteElements({ nodes: [node] }).then(noop);
-    return (_jsxs("div", { className: css("relative border flex min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "border-muted", "border-floating-border"), children: [_jsx("button", { className: "flex absolute top-2 right-2 justify-center items-center text-foreground hover:text-danger active:text-danger", onClick: onClick, children: _jsx(XIcon, { size: 18 }) }), _jsx(Handlers, { id: node.data.id }), node.data.Item ? _jsx(node.data.Item, { ...node }) : _jsx("h3", { className: "text-center", children: node.data.title })] }));
-});
-const nodeTypes = { input: Input, output: Connection };
-const AddNodeOnEdgeDrop = (props) => {
-    const [type, setType] = useDnD();
-    const ref = useRef(null);
-    const reactFlowWrapper = useRef(null);
-    const [nodes, setNodes, onNodesChange] = useNodesState(props.items);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const { screenToFlowPosition } = useReactFlow();
-    useEffect(() => {
-        props.onChange(nodes);
-    }, [nodes, edges]);
-    const onConnect = useCallback((params) => {
-        setEdges((eds) => addEdge({
-            ...params, animated: true, deletable: true, reconnectable: true,
-        }, eds));
-    }, [setEdges]);
-    const onDragOver = useCallback((event) => {
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "move";
-    }, []);
-    const onDrop = useCallback((event) => {
-        event.preventDefault();
-        if (!type)
-            return;
-        const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
-        const id = uuid();
-        const newNode = {
-            id,
-            position,
-            type: "output",
-            data: { ...type, id, label: type.title },
-        };
-        setNodes((prev) => [...prev, newNode]);
-    }, [screenToFlowPosition, setNodes, type]);
-    const onDragStart = (event, nodeType) => {
-        setType(nodeType);
-        event.dataTransfer.setData("text/plain", JSON.stringify(nodeType));
-        event.dataTransfer.effectAllowed = "move";
-    };
-    return (_jsxs("div", { className: "relative w-full bg-card-background", style: { height: 1000 }, ref: reactFlowWrapper, children: [_jsxs(ReactFlow, { fitView: true, ref: ref, edges: edges, nodes: nodes, onDrop: onDrop, nodeOrigin: [0, 0], onConnect: onConnect, onDragOver: onDragOver, className: "bg-transparent", nodeTypes: nodeTypes, onEdgesChange: onEdgesChange, onNodesChange: onNodesChange, attributionPosition: "bottom-left", fitViewOptions: { padding: 2 }, onDragStart: onDragStart, colorMode: props.theme ?? "dark", children: [_jsx(Controls, {}), _jsx(Background, { bgColor: "hsla(var(--floating-background))" })] }), _jsx(Sidebar, { items: props.parents })] }));
-};
-export const Flow = (props) => (_jsx(ReactFlowProvider, { fitView: true, initialMaxZoom: 1, children: _jsx(DnDProvider, { children: _jsx(AddNodeOnEdgeDrop, { ...props }) }) }));