zebflow 0.10.4

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { useState } from "zeb/react";

/**
 * Dialog — controlled/uncontrolled open-state wrapper.
 *
 * Injects _isOpen / _onOpen / _onClose into its direct children
 * (typically a single <DialogContent>).
 *
 * Usage (controlled):
 *   <Dialog open={open} onOpenChange={setOpen}>
 *     <DialogContent>…</DialogContent>
 *   </Dialog>
 *
 * Usage (uncontrolled):
 *   <Dialog defaultOpen>
 *     <DialogContent>…</DialogContent>
 *   </Dialog>
 */
export function Dialog({ open, defaultOpen = false, onOpenChange, children }: any) {
  const [internal, setInternal] = useState(defaultOpen);
  const controlled = open !== undefined;
  const isOpen = controlled ? open : internal;

  const toggle = (v: boolean) => {
    if (!controlled) setInternal(v);
    onOpenChange?.(v);
  };

  const items = Array.isArray(children) ? children : [children];
  const enhanced = items.map((child: any) => {
    if (!child || typeof child !== "object") return child;
    return {
      ...child,
      props: {
        ...child.props,
        _isOpen: isOpen,
        _onOpen: () => toggle(true),
        _onClose: () => toggle(false),
      },
    };
  });

  return <>{enhanced}</>;
}

export default Dialog;