Skip to content

Commit 1637253

Browse files
pascalbaljetpascalbaljet
committed
Cleanup
1 parent 337abd7 commit 1637253

File tree

3 files changed

+35
-30
lines changed

3 files changed

+35
-30
lines changed

‎react/src/Modal.jsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Transition, TransitionChild } from '@headlessui/react'
2-
import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react'
2+
import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react'
33
import HeadlessModal from './HeadlessModal'
44
import ModalContent from './ModalContent'
55
import SlideoverContent from './SlideoverContent'
@@ -15,12 +15,10 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
1515
}
1616

1717
const headlessModalRef = useRef(null)
18-
const [preparedDOM, setPreparedDOM] = useState(false)
1918

2019
useEffect(() => {
2120
if (headlessModalRef?.current?.index === 0) {
2221
modalDOMHandler.prepare()
23-
setPreparedDOM(true)
2422

2523
return () => modalDOMHandler.cleanup()
2624
}
@@ -56,7 +54,6 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
5654
>
5755
<div
5856
className="im-dialog relative z-20"
59-
onClose={() => (config.closeExplicitly ? null : close())}
6057
data-inertiaui-modal-id={id}
6158
data-inertiaui-modal-index={index}
6259
>

‎react/src/ModalContent.jsx

+17-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import clsx from 'clsx'
44
import { useFocusTrap } from './useFocusTrap'
55

66
const ModalContent = ({ modalContext, config, children }) => {
7-
const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close());
7+
const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
88

99
return (
1010
<div className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4">
@@ -23,18 +23,22 @@ const ModalContent = ({ modalContext, config, children }) => {
2323
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
2424
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
2525
afterLeave={modalContext.afterLeave}
26-
className={clsx('im-modal-wrapper pointer-events-auto w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
27-
'sm:max-w-sm': config.maxWidth === 'sm',
28-
'sm:max-w-md': config.maxWidth === 'md',
29-
'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
30-
'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
31-
'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
32-
'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
33-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
34-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
35-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
36-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
37-
})}
26+
className={clsx(
27+
'im-modal-wrapper pointer-events-auto w-full transition duration-300 ease-in-out',
28+
modalContext.onTopOfStack ? '' : 'blur-sm',
29+
{
30+
'sm:max-w-sm': config.maxWidth === 'sm',
31+
'sm:max-w-md': config.maxWidth === 'md',
32+
'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
33+
'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
34+
'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
35+
'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
36+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
37+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
38+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
39+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
40+
},
41+
)}
3842
>
3943
<div className={`im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`}>
4044
{config.closeButton && (

‎react/src/SlideoverContent.jsx

+17-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import clsx from 'clsx'
44
import { useFocusTrap } from './useFocusTrap'
55

66
const SlideoverContent = ({ modalContext, config, children }) => {
7-
const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close());
7+
const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
88

99
return (
1010
<div className="im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden">
@@ -22,18 +22,22 @@ const SlideoverContent = ({ modalContext, config, children }) => {
2222
leaveFrom="opacity-100 translate-x-0"
2323
leaveTo={`opacity-0 ${config.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
2424
afterLeave={modalContext.afterLeave}
25-
className={clsx('im-slideover-wrapper pointer-events-auto w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
26-
'sm:max-w-sm': config.maxWidth === 'sm',
27-
'sm:max-w-md': config.maxWidth === 'md',
28-
'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
29-
'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
30-
'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
31-
'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
32-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
33-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
34-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
35-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
36-
})}
25+
className={clsx(
26+
'im-slideover-wrapper pointer-events-auto w-full transition duration-300 ease-in-out',
27+
modalContext.onTopOfStack ? '' : 'blur-sm',
28+
{
29+
'sm:max-w-sm': config.maxWidth === 'sm',
30+
'sm:max-w-md': config.maxWidth === 'md',
31+
'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
32+
'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
33+
'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
34+
'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
35+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
36+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
37+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
38+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
39+
},
40+
)}
3741
>
3842
<div className={`im-slideover-content relative ${config.paddingClasses} ${config.panelClasses}`}>
3943
{config.closeButton && (

0 commit comments

Comments
 (0)