Dialog

lunar add dialog

import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogClose,
} from '@/components/ui/dialog';

<Dialog>
<DialogTrigger>
  <Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogDescription>
      This is the dialog description.
    </DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <DialogClose>
      <Button variant="outline">Cancel</Button>
    </DialogClose>
    <Button>Continue</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

const [open, setOpen] = useState(false);
 
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger>
  <Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Controlled Dialog</DialogTitle>
    <DialogDescription>
      This dialog's state is controlled externally.
    </DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button onPress={() => setOpen(false)}>Close</Button>
  </DialogFooter>
</DialogContent>
</Dialog>
 
{/* Open programmatically */}
<Button onPress={() => setOpen(true)}>
Open from outside
</Button>

<Dialog>
<DialogTrigger>
  <Button>Edit Profile</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Edit Profile</DialogTitle>
    <DialogDescription>
      Make changes to your profile here.
    </DialogDescription>
  </DialogHeader>
  
  <View className="gap-4 py-4">
    <Input
      label="Name"
      value={name}
      onChangeText={setName}
    />
    <Input
      label="Email"
      value={email}
      onChangeText={setEmail}
    />
  </View>
  
  <DialogFooter>
    <DialogClose>
      <Button variant="outline">Cancel</Button>
    </DialogClose>
    <Button onPress={handleSave}>Save Changes</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

export function ConfirmDialog({ onConfirm, onCancel }) {
return (
  <Dialog>
    <DialogTrigger>
      <Button variant="destructive">Delete Account</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your
          account and remove your data from our servers.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose>
          <Button variant="outline" onPress={onCancel}>
            Cancel
          </Button>
        </DialogClose>
        <Button variant="destructive" onPress={onConfirm}>
          Delete
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);
}