@inertiaui/modal-react 0.1.0

package/src/Modal.jsx

@@ -0,0 +1,137 @@
+import { Dialog, Transition, TransitionChild } from '@headlessui/react'
+import { useMemo, useState, forwardRef, useImperativeHandle, useEffect } from 'react'
+import { getConfig, getConfigByType } from './config'
+import { useModalIndex } from './ModalRenderer.jsx'
+import { useModalStack } from './ModalRoot.jsx'
+import ModalContent from './ModalContent'
+import ModalRenderer from './ModalRenderer'
+import SlideoverContent from './SlideoverContent'
+
+const Modal = forwardRef(({ name, children, ...props }, ref) => {
+    const modalIndex = useModalIndex()
+    const { stack, registerLocalModal, removeLocalModal } = useModalStack()
+
+    const [localModalContext, setLocalModalContext] = useState(null)
+    const modalContext = useMemo(() => (name ? localModalContext : stack[modalIndex]))
+
+    const modalPropsSlideover = useMemo(() => modalContext?.modalProps.slideover ?? props.slideover ?? getConfig('type') === 'slideover', [props.slideover])
+
+    const modalProps = useMemo(
+        () => ({
+            slideover: modalPropsSlideover,
+            closeButton: props.closeButton ?? getConfigByType(modalPropsSlideover, 'closeButton'),
+            closeExplicitly: props.closeExplicitly ?? getConfigByType(modalPropsSlideover, 'closeExplicitly'),
+            maxWidth: props.maxWidth ?? getConfigByType(modalPropsSlideover, 'maxWidth'),
+            paddingClasses: props.paddingClasses ?? getConfigByType(modalPropsSlideover, 'paddingClasses'),
+            panelClasses: props.panelClasses ?? getConfigByType(modalPropsSlideover, 'panelClasses'),
+            position: props.position ?? getConfigByType(modalPropsSlideover, 'position'),
+            ...modalContext?.modalProps,
+        }),
+        [props, modalContext?.modalProps],
+    )
+
+    const Content = useMemo(() => (modalProps.slideover ? SlideoverContent : ModalContent), [modalProps.slideover])
+
+    useEffect(() => {
+        if (name) {
+            let removeListeners = null
+
+            registerLocalModal(name, (localContext) => {
+                removeListeners = localContext.registerEventListenersFromProps(props)
+                setLocalModalContext(localContext)
+            })
+
+            return () => {
+                removeListeners?.()
+                removeListeners = null
+                removeLocalModal(name)
+            }
+        }
+
+        return modalContext.registerEventListenersFromProps(props)
+    }, [name])
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            close: () => modalContext.close(),
+            emit: (...args) => modalContext.emit(...args),
+            getChildModal: () => modalContext.getChildModal(),
+            getParentModal: () => modalContext.getParentModal(),
+            modalContext: modalContext,
+            reload: () => modalContext.reload(),
+        }),
+        [modalContext],
+    )
+
+    const closeDialog = () => {
+        if (!modalProps.closeExplicitly) {
+            modalContext.close()
+        }
+    }
+
+    return (
+        modalContext && (
+            <Transition
+                appear={true}
+                show={modalContext.open ?? false}
+            >
+                <Dialog
+                    as="div"
+                    className="im-dialog relative z-20"
+                    onClose={closeDialog}
+                    data-inertiaui-modal-id={modalContext.id}
+                    data-inertiaui-modal-index={modalContext.index}
+                >
+                    {/* Only transition the backdrop for the first modal in the stack */}
+                    {modalContext.index === 0 ? (
+                        <TransitionChild
+                            enter="transition transform ease-in-out duration-300"
+                            enterFrom="opacity-0"
+                            enterTo="opacity-100"
+                            leave="transition transform ease-in-out duration-300"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                        >
+                            {modalContext.onTopOfStack ? (
+                                <div
+                                    className="im-backdrop fixed inset-0 z-30 bg-black/75"
+                                    aria-hidden="true"
+                                />
+                            ) : (
+                                <div />
+                            )}
+                        </TransitionChild>
+                    ) : null}
+
+                    {/* On multiple modals, only show a backdrop for the modal that is on top of the stack */}
+                    {modalContext.index > 0 && modalContext.onTopOfStack ? <div className="im-backdrop fixed inset-0 z-30 bg-black/75" /> : null}
+
+                    {/* The modal/slideover content itself */}
+                    <Content
+                        modalContext={modalContext}
+                        modalProps={modalProps}
+                    >
+                        {typeof children === 'function'
+                            ? children({
+                                  close: modalContext.close,
+                                  emit: modalContext.emit,
+                                  getChildModal: modalContext.getChildModal,
+                                  getParentModal: modalContext.getParentModal,
+                                  modalContext,
+                                  modalProps,
+                                  reload: modalContext.reload,
+                              })
+                            : children}
+                    </Content>
+
+                    {/* Next modal in the stack */}
+                    {stack[modalContext.index + 1] && <ModalRenderer index={modalContext.index + 1} />}
+                </Dialog>
+            </Transition>
+        )
+    )
+})
+
+Modal.displayName = 'Modal'
+export default Modal

package/src/ModalContent.jsx

@@ -0,0 +1,48 @@
+import { TransitionChild, DialogPanel } from '@headlessui/react'
+import CloseButton from './CloseButton'
+import clsx from 'clsx'
+
+const ModalContent = ({ modalContext, modalProps, children }) => {
+    return (
+        <div className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4">
+            <div
+                className={clsx('im-modal-positioner flex min-h-full justify-center', {
+                    'items-start': modalProps.position === 'top',
+                    'items-center': modalProps.position === 'center',
+                    'items-end': modalProps.position === 'bottom',
+                })}
+            >
+                <TransitionChild
+                    enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    enterTo="opacity-100 translate-y-0 sm:scale-100"
+                    leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                    leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    afterLeave={modalContext.afterLeave}
+                    className={clsx('im-modal-wrapper w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
+                        'sm:max-w-sm': modalProps.maxWidth === 'sm',
+                        'sm:max-w-md': modalProps.maxWidth === 'md',
+                        'sm:max-w-md md:max-w-lg': modalProps.maxWidth === 'lg',
+                        'sm:max-w-md md:max-w-xl': modalProps.maxWidth === 'xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-2xl': modalProps.maxWidth === '2xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl': modalProps.maxWidth === '3xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': modalProps.maxWidth === '4xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': modalProps.maxWidth === '5xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': modalProps.maxWidth === '6xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': modalProps.maxWidth === '7xl',
+                    })}
+                >
+                    <DialogPanel className={`im-modal-content relative ${modalProps.paddingClasses} ${modalProps.panelClasses}`}>
+                        {modalProps.closeButton && (
+                            <div className="absolute right-0 top-0 pr-3 pt-3">
+                                <CloseButton onClick={modalContext.close} />
+                            </div>
+                        )}
+                        {typeof children === 'function' ? children({ modalContext, modalProps }) : children}
+                    </DialogPanel>
+                </TransitionChild>
+            </div>
+        </div>
+    )
+}
+
+export default ModalContent

package/src/ModalLink.jsx

@@ -0,0 +1,132 @@
+import { useCallback, useState, useEffect } from 'react'
+import { useModalStack, modalPropNames } from './ModalRoot'
+import { only, rejectNullValues } from './helpers'
+
+const ModalLink = ({
+    href,
+    method = 'get',
+    data = {},
+    as: Component = 'a',
+    fragment = null,
+    headers = {},
+    queryStringArrayFormat = 'brackets',
+    onAfterLeave = null,
+    onBlur = null,
+    onClose = null,
+    onError = null,
+    onFocus = null,
+    onStart = null,
+    onSuccess = null,
+    children,
+    ...props
+}) => {
+    const [loading, setLoading] = useState(false)
+    const [modalContext, setModalContext] = useState(null)
+    const { stack, visit } = useModalStack()
+
+    // Separate standard props from custom event handlers
+    const standardProps = {}
+    const customEvents = {}
+
+    Object.keys(props).forEach((key) => {
+        if (modalPropNames.includes(key)) {
+            return
+        }
+
+        if (key.startsWith('on') && typeof props[key] === 'function') {
+            if (key.toLowerCase() in window) {
+                standardProps[key] = props[key]
+            } else {
+                customEvents[key] = props[key]
+            }
+        } else {
+            standardProps[key] = props[key]
+        }
+    })
+
+    useEffect(() => {
+        if (fragment && window.location.hash === `#${fragment}`) {
+            handle()
+        }
+    }, [fragment])
+
+    const [isBlurred, setIsBlurred] = useState(false)
+
+    useEffect(() => {
+        if (!modalContext) {
+            return
+        }
+
+        if (modalContext.onTopOfStack && isBlurred) {
+            onFocus?.()
+        } else if (!modalContext.onTopOfStack && !isBlurred) {
+            onBlur?.()
+        }
+
+        setIsBlurred(!modalContext.onTopOfStack)
+    }, [stack])
+
+    const onCloseCallback = useCallback(
+        (index) => {
+            if (fragment && index === 0) {
+                window.location.hash = ''
+            }
+            onClose?.()
+        },
+        [onClose, fragment],
+    )
+
+    const onAfterLeaveCallback = useCallback(() => {
+        setModalContext(null)
+        onAfterLeave?.()
+    }, [onAfterLeave])
+
+    const handle = useCallback(
+        (e) => {
+            e?.preventDefault()
+            if (loading) return
+
+            if (!href.startsWith('#')) {
+                setLoading(true)
+                onStart?.()
+            }
+
+            visit(
+                href,
+                method,
+                data,
+                headers,
+                rejectNullValues(only(props, modalPropNames)),
+                () => onCloseCallback(stack.length),
+                onAfterLeaveCallback,
+                queryStringArrayFormat,
+            )
+                .then((newModalContext) => {
+                    setModalContext(newModalContext)
+                    if (fragment && newModalContext.index === 0) {
+                        window.location.hash = fragment
+                    }
+                    newModalContext.registerEventListenersFromProps(customEvents)
+                    onSuccess?.()
+                })
+                .catch((error) => {
+                    console.error(error)
+                    onError?.(error)
+                })
+                .finally(() => setLoading(false))
+        },
+        [href, method, data, headers, queryStringArrayFormat, props, onCloseCallback, onAfterLeaveCallback],
+    )
+
+    return (
+        <Component
+            {...standardProps}
+            href={href}
+            onClick={handle}
+        >
+            {typeof children === 'function' ? children({ loading }) : children}
+        </Component>
+    )
+}
+
+export default ModalLink

package/src/ModalRenderer.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useModalStack } from './ModalRoot'
+
+const ModalIndexContext = React.createContext(null)
+ModalIndexContext.displayName = 'ModalIndexContext'
+
+export const useModalIndex = () => {
+    const context = React.useContext(ModalIndexContext)
+    if (context === undefined) {
+        throw new Error('useModalIndex must be used within a ModalIndexProvider')
+    }
+    return context
+}
+
+const ModalRenderer = ({ index }) => {
+    const { stack } = useModalStack()
+
+    const modalContext = stack[index]
+
+    if (!modalContext || !modalContext.component) {
+        return null
+    }
+
+    return (
+        <ModalIndexContext.Provider value={index}>
+            <modalContext.component
+                {...modalContext.componentProps}
+                onModalEvent={(...args) => modalContext.emit(...args)}
+            />
+        </ModalIndexContext.Provider>
+    )
+}
+
+export default ModalRenderer

package/src/ModalRoot.jsx

@@ -0,0 +1,282 @@
+import { useState } from 'react'
+import { default as Axios } from 'axios'
+import { except, only, resolveInteriaPageFromRouter } from './helpers'
+import { router } from '@inertiajs/react'
+import { mergeDataIntoQueryString } from '@inertiajs/core'
+import { createContext, useContext } from 'react'
+import ModalRenderer from './ModalRenderer'
+
+const ModalStackContext = createContext(null)
+ModalStackContext.displayName = 'ModalStackContext'
+
+export const ModalStackProvider = ({ children }) => {
+    const [stack, setStack] = useState([])
+    const [localModals, setLocalModals] = useState({})
+
+    class Modal {
+        constructor(component, response, modalProps, onClose, afterLeave) {
+            this.id = Modal.generateId()
+            this.open = true
+            this.listeners = {}
+
+            this.component = component
+            this.componentProps = response.props
+            this.response = response
+            this.modalProps = modalProps
+            this.onCloseCallback = onClose
+            this.afterLeaveCallback = afterLeave
+
+            this.index = -1 // Will be set when added to the stack
+            this.getParentModal = () => null // Will be set in push()
+            this.getChildModal = () => null // Will be set in push()
+            this.onTopOfStack = true // Will be updated in push()
+        }
+
+        static generateId() {
+            if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+                return `inertiaui_modal_${crypto.randomUUID()}`
+            }
+            // Fallback for environments where crypto.randomUUID is not available
+            return `inertiaui_modal_${Date.now().toString(36)}_${Math.random().toString(36).substr(2, 9)}`
+        }
+
+        updateStack = (withStack) => {
+            setStack((prevStack) => {
+                const newStack = withStack([...prevStack])
+
+                newStack.forEach((modal, index) => {
+                    newStack[index].index = index
+                    newStack[index].onTopOfStack = index === newStack.length - 1
+                })
+
+                return newStack
+            })
+        }
+
+        close = () => {
+            this.updateStack((prevStack) =>
+                prevStack.map((modal) => {
+                    if (modal.id === this.id) {
+                        Object.keys(modal.listeners).forEach((event) => {
+                            modal.off(event)
+                        })
+
+                        modal.open = false
+                        modal.onCloseCallback?.()
+                    }
+                    return modal
+                }),
+            )
+        }
+
+        afterLeave = () => {
+            this.updateStack((prevStack) =>
+                prevStack.filter((modal) => {
+                    if (modal.id !== this.id) {
+                        return true
+                    }
+
+                    modal.afterLeaveCallback?.()
+                    return false
+                }),
+            )
+        }
+
+        on = (event, callback) => {
+            this.listeners[event] = this.listeners[event] ?? []
+            this.listeners[event].push(callback)
+        }
+
+        off = (event, callback) => {
+            if (callback) {
+                this.listeners[event] = this.listeners[event]?.filter((cb) => cb !== callback) ?? []
+            } else {
+                delete this.listeners[event]
+            }
+        }
+
+        emit = (event, ...args) => {
+            console.log('Emitting', event, 'with args', args)
+            this.listeners[event]?.forEach((callback) => callback(...args))
+            return 'OK'
+        }
+
+        registerEventListenersFromProps = (props) => {
+            const unsubscribers = []
+
+            Object.keys(props)
+                .filter((key) => key.startsWith('on'))
+                .forEach((key) => {
+                    // e.g. onRefreshKey -> refresh-key
+                    const snakeCaseKey = key
+                        .replace(/^on/, '')
+                        .replace(/^./, (firstLetter) => firstLetter.toLowerCase())
+                        .replace(/([A-Z])/g, '-$1')
+                        .toLowerCase()
+
+                    this.on(snakeCaseKey, props[key])
+                    unsubscribers.push(() => this.off(snakeCaseKey, props[key]))
+                })
+
+            return () => unsubscribers.forEach((unsub) => unsub())
+        }
+
+        reload = (options = {}) => {
+            let keys = Object.keys(this.response.props)
+
+            if (options.only) {
+                keys = only(keys, options.only)
+            }
+
+            if (options.except) {
+                keys = except(keys, options.except)
+            }
+
+            Axios.get(this.response.url, {
+                headers: {
+                    Accept: 'text/html, application/xhtml+xml',
+                    'X-Inertia': true,
+                    'X-Inertia-Partial-Component': this.response.component,
+                    'X-Inertia-Version': this.response.version,
+                    'X-Inertia-Partial-Data': keys.join(','),
+                },
+            }).then((response) => {
+                Object.assign(this.componentProps, response.data.props)
+                setStack((prevStack) => [...prevStack]) // Trigger re-render
+            })
+        }
+    }
+
+    const push = (component, response, modalProps, onClose, afterLeave) => {
+        const newModal = new Modal(component, response, modalProps, onClose, afterLeave)
+
+        setStack((prevStack) => {
+            const updatedStack = [...prevStack, newModal]
+
+            // Set index and update onTopOfStack for all modals
+            updatedStack.forEach((modal, index) => {
+                modal.index = index
+                modal.onTopOfStack = index === updatedStack.length - 1
+            })
+
+            // Set getParentModal and getChildModal
+            updatedStack.forEach((modal, index) => {
+                modal.getParentModal = () => (index > 0 ? updatedStack[index - 1] : null)
+                modal.getChildModal = () => (index < updatedStack.length - 1 ? updatedStack[index + 1] : null)
+            })
+
+            return updatedStack
+        })
+
+        return newModal
+    }
+
+    function pushLocalModal(name, modalProps, onClose, afterLeave) {
+        if (!localModals[name]) {
+            throw new Error(`The local modal "${name}" has not been registered.`)
+        }
+
+        const modal = push(null, {}, modalProps, onClose, afterLeave)
+        modal.name = name
+        localModals[name].callback(modal)
+        return modal
+    }
+
+    const visitModal = (url, options = {}) => {
+        return visit(
+            url,
+            options.method ?? 'get',
+            options.data ?? {},
+            options.headers ?? {},
+            options.config ?? {},
+            options.onClose,
+            options.onAfterLeave,
+            options.queryStringArrayFormat ?? 'brackets',
+        )
+    }
+
+    const visit = (href, method, payload = {}, headers = {}, modalProps = {}, onClose = null, onAfterLeave = null, queryStringArrayFormat = 'brackets') => {
+        return new Promise((resolve, reject) => {
+            if (href.startsWith('#')) {
+                const localModal = pushLocalModal(href.substring(1), modalProps, onClose, onAfterLeave)
+                resolve(localModal)
+                return
+            }
+
+            const [url, data] = mergeDataIntoQueryString(method, href || '', payload, queryStringArrayFormat)
+
+            resolveInteriaPageFromRouter().then((inertiaPage) => {
+                Axios({
+                    url,
+                    method,
+                    data,
+                    headers: {
+                        ...headers,
+                        Accept: 'text/html, application/xhtml+xml',
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-Inertia': true,
+                        'X-Inertia-Version': inertiaPage.version,
+                        'X-InertiaUI-Modal': true,
+                    },
+                })
+                    .then((response) => {
+                        router.resolveComponent(response.data.component).then((component) => {
+                            resolve(push(component, response.data, modalProps, onClose, onAfterLeave))
+                        })
+                    })
+                    .catch((error) => {
+                        reject(error)
+                    })
+            })
+        })
+    }
+
+    const registerLocalModal = (name, callback) => {
+        setLocalModals((prevLocalModals) => ({
+            ...prevLocalModals,
+            [name]: { name, callback },
+        }))
+    }
+
+    const removeLocalModal = (name) => {
+        setLocalModals((prevLocalModals) => {
+            const newLocalModals = { ...prevLocalModals }
+            delete newLocalModals[name]
+            return newLocalModals
+        })
+    }
+
+    const value = {
+        stack,
+        localModals,
+        push,
+        reset: () => setStack([]),
+        visit,
+        visitModal,
+        registerLocalModal,
+        removeLocalModal,
+    }
+
+    return <ModalStackContext.Provider value={value}>{children}</ModalStackContext.Provider>
+}
+
+export const useModalStack = () => {
+    const context = useContext(ModalStackContext)
+    if (context === null) {
+        throw new Error('useModalStack must be used within a ModalStackProvider')
+    }
+    return context
+}
+
+export const modalPropNames = ['closeButton', 'closeExplicitly', 'maxWidth', 'paddingClasses', 'panelClasses', 'position', 'slideover']
+
+export const ModalRoot = ({ children }) => {
+    const stack = useContext(ModalStackContext).stack
+
+    return (
+        <>
+            {children}
+            {stack.length > 0 && <ModalRenderer index={0} />}
+        </>
+    )
+}

package/src/SlideoverContent.jsx

@@ -0,0 +1,47 @@
+import { TransitionChild, DialogPanel } from '@headlessui/react'
+import CloseButton from './CloseButton'
+import clsx from 'clsx'
+
+const SlideoverContent = ({ modalContext, modalProps, children }) => {
+    return (
+        <div className="im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden">
+            <div
+                className={clsx('im-slideover-positioner flex min-h-full items-center', {
+                    'justify-start': modalProps.position === 'left',
+                    'justify-end': modalProps.position === 'right',
+                })}
+            >
+                <TransitionChild
+                    enterFrom={`opacity-0 ${modalProps.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
+                    enterTo="opacity-100 translate-x-0"
+                    leaveFrom="opacity-100 translate-x-0"
+                    leaveTo={`opacity-0 ${modalProps.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
+                    afterLeave={modalContext.afterLeave}
+                    className={clsx('im-slideover-wrapper w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
+                        'sm:max-w-sm': modalProps.maxWidth === 'sm',
+                        'sm:max-w-md': modalProps.maxWidth === 'md',
+                        'sm:max-w-md md:max-w-lg': modalProps.maxWidth === 'lg',
+                        'sm:max-w-md md:max-w-xl': modalProps.maxWidth === 'xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-2xl': modalProps.maxWidth === '2xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl': modalProps.maxWidth === '3xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': modalProps.maxWidth === '4xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': modalProps.maxWidth === '5xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': modalProps.maxWidth === '6xl',
+                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': modalProps.maxWidth === '7xl',
+                    })}
+                >
+                    <DialogPanel className={`im-slideover-content relative ${modalProps.paddingClasses} ${modalProps.panelClasses}`}>
+                        {modalProps.closeButton && (
+                            <div className="absolute right-0 top-0 pr-3 pt-3">
+                                <CloseButton onClick={modalContext.close} />
+                            </div>
+                        )}
+                        {typeof children === 'function' ? children({ modalContext, modalProps }) : children}
+                    </DialogPanel>
+                </TransitionChild>
+            </div>
+        </div>
+    )
+}
+
+export default SlideoverContent

package/src/config.js

@@ -0,0 +1,3 @@
+import { resetConfig, putConfig, getConfig, getConfigByType } from './../../vue/src/config.js'
+
+export { resetConfig, putConfig, getConfig, getConfigByType }