From d4b5de4f8cbc3c04f8c41490dac237d34de61dad Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 6 Oct 2020 17:05:08 +0200 Subject: [PATCH] add Transition Modal example with Event callbacks --- .../transitions/component-examples/modal.tsx | 168 ++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 packages/@headlessui-react/pages/transitions/component-examples/modal.tsx diff --git a/packages/@headlessui-react/pages/transitions/component-examples/modal.tsx b/packages/@headlessui-react/pages/transitions/component-examples/modal.tsx new file mode 100644 index 0000000000..31e4a0048d --- /dev/null +++ b/packages/@headlessui-react/pages/transitions/component-examples/modal.tsx @@ -0,0 +1,168 @@ +import React, { useRef, useState } from 'react' +import { Transition } from '@headlessui/react' + +export default function Home() { + const [isOpen, setIsOpen] = useState(false) + function toggle() { + setIsOpen(v => !v) + } + + const [email, setEmail] = useState('') + const [events, setEvents] = useState([]) + const inputRef = useRef(null) + + function addEvent(name) { + setEvents(existing => [...existing, `${new Date().toJSON()} - ${name}`]) + } + + return ( +
+
+
+ + + +
+ +
    +

    Events:

    + {events.map((event, i) => ( +
  • + {event} +
    • + ))} +
+
+ + { + addEvent('Before enter') + }} + afterEnter={() => { + inputRef.current.focus() + addEvent('After enter') + }} + beforeLeave={() => { + addEvent('Before leave (before confirm)') + window.confirm('Are you sure?') + addEvent('Before leave (after confirm)') + }} + afterLeave={() => { + addEvent('After leave (before alert)') + window.alert('Consider it done!') + addEvent('After leave (after alert)') + setEmail('') + }} + > +
+ +
+
+
+ + {/* This element is to trick the browser into centering the modal contents. */} + ​ + +
+
+
+ {/* Heroicon name: exclamation */} + + + +
+
+ +
+

+ Are you sure you want to deactivate your account? All of your data will be + permanently removed. This action cannot be undone. +

+
+
+
+ +
+ setEmail(event.target.value)} + id="email" + className="block w-full px-3 form-input sm:text-sm sm:leading-5" + placeholder="name@example.com" + /> +
+
+
+
+
+
+
+ + + + + + +
+ +
+ +
+ ) +}