@inertiaui/modal-react 0.1.4 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/inertiaui-modal.js +2703 -4279
  2. package/dist/inertiaui-modal.umd.cjs +17 -22
  3. package/package.json +3 -2
  4. package/src/HeadlessModal.jsx +15 -5
  5. package/src/Modal.jsx +34 -7
  6. package/src/ModalLink.jsx +11 -20
  7. package/src/ModalRenderer.jsx +12 -12
  8. package/src/ModalRoot.jsx +286 -76
  9. package/src/helpers.js +2 -36
  10. package/src/inertiauiModal.js +2 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@inertiaui/modal-react",
3
3
  "author": "Pascal Baljet <pascal@protone.media>",
4
- "version": "0.1.4",
4
+ "version": "0.5.0",
5
5
  "private": false,
6
6
  "license": "MIT",
7
7
  "type": "module",
@@ -44,7 +44,8 @@
44
44
  "vite-plugin-eslint": "^1.8.1"
45
45
  },
46
46
  "peerDependencies": {
47
- "@inertiajs/react": "^1.2.0",
47
+ "@inertiajs/react": "^1.2.0||^2.0.0-beta.1",
48
+ "axios": "^1.6.0",
48
49
  "react": "^18.2.0",
49
50
  "react-dom": "^18.2.0"
50
51
  }
package/src/HeadlessModal.jsx CHANGED
@@ -9,7 +9,11 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
9
9
  const { stack, registerLocalModal, removeLocalModal } = useModalStack()
10
10
 
11
11
  const [localModalContext, setLocalModalContext] = useState(null)
12
- const modalContext = useMemo(() => (name ? localModalContext : stack[modalIndex]))
12
+ const modalContext = useMemo(() => (name ? localModalContext : stack[modalIndex]), [name, localModalContext, modalIndex, stack])
13
+
14
+ const nextIndex = useMemo(() => {
15
+ return stack.find((m) => m.shouldRender && m.index > modalContext?.index)?.index
16
+ }, [modalIndex, stack])
13
17
 
14
18
  const modalPropsSlideover = useMemo(() => modalContext?.modalProps.slideover ?? props.slideover ?? getConfig('type') === 'slideover', [props.slideover])
15
19
 
@@ -54,18 +58,21 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
54
58
  emit: (...args) => modalContext.emit(...args),
55
59
  getChildModal: () => modalContext.getChildModal(),
56
60
  getParentModal: () => modalContext.getParentModal(),
61
+ id: modalContext?.id,
57
62
  index: modalContext?.index,
58
- isOpen: modalContext?.open,
63
+ isOpen: modalContext?.isOpen,
59
64
  modalContext,
60
65
  modalProps,
66
+ onTopOfStack: modalContext?.onTopOfStack,
61
67
  reload: () => modalContext.reload(),
62
68
  setOpen: () => modalContext.setOpen(),
69
+ shouldRender: modalContext?.shouldRender,
63
70
  }),
64
71
  [modalContext],
65
72
  )
66
73
 
67
74
  return (
68
- modalContext && (
75
+ modalContext?.shouldRender && (
69
76
  <>
70
77
  {typeof children === 'function'
71
78
  ? children({
@@ -74,17 +81,20 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
74
81
  emit: modalContext.emit,
75
82
  getChildModal: modalContext.getChildModal,
76
83
  getParentModal: modalContext.getParentModal,
84
+ id: modalContext.id,
77
85
  index: modalContext.index,
78
- isOpen: modalContext.open,
86
+ isOpen: modalContext.isOpen,
79
87
  modalContext,
80
88
  modalProps,
89
+ onTopOfStack: modalContext.onTopOfStack,
81
90
  reload: modalContext.reload,
82
91
  setOpen: modalContext.setOpen,
92
+ shouldRender: modalContext.shouldRender,
83
93
  })
84
94
  : children}
85
95
 
86
96
  {/* Next modal in the stack */}
87
- {stack[modalContext.index + 1] && <ModalRenderer index={modalContext.index + 1} />}
97
+ {nextIndex && <ModalRenderer index={nextIndex} />}
88
98
  </>
89
99
  )
90
100
  )
package/src/Modal.jsx CHANGED
@@ -23,20 +23,35 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
23
23
  name={name}
24
24
  {...props}
25
25
  >
26
- {({ afterLeave, close, emit, getChildModal, getParentModal, modalContext, modalProps, reload }) => (
26
+ {({
27
+ afterLeave,
28
+ close,
29
+ emit,
30
+ getChildModal,
31
+ getParentModal,
32
+ id,
33
+ index,
34
+ isOpen,
35
+ modalContext,
36
+ modalProps,
37
+ onTopOfStack,
38
+ reload,
39
+ setOpen,
40
+ shouldRender,
41
+ }) => (
27
42
  <Transition
28
43
  appear={true}
29
- show={modalContext.open ?? false}
44
+ show={isOpen ?? false}
30
45
  >
31
46
  <Dialog
32
47
  as="div"
33
48
  className="im-dialog relative z-20"
34
49
  onClose={() => (modalProps.closeExplicitly ? null : close())}
35
- data-inertiaui-modal-id={modalContext.id}
36
- data-inertiaui-modal-index={modalContext.index}
50
+ data-inertiaui-modal-id={id}
51
+ data-inertiaui-modal-index={index}
37
52
  >
38
53
  {/* Only transition the backdrop for the first modal in the stack */}
39
- {modalContext.index === 0 ? (
54
+ {index === 0 ? (
40
55
  <TransitionChild
41
56
  enter="transition transform ease-in-out duration-300"
42
57
  enterFrom="opacity-0"
@@ -45,7 +60,7 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
45
60
  leaveFrom="opacity-100"
46
61
  leaveTo="opacity-0"
47
62
  >
48
- {modalContext.onTopOfStack ? (
63
+ {onTopOfStack ? (
49
64
  <div
50
65
  className="im-backdrop fixed inset-0 z-30 bg-black/75"
51
66
  aria-hidden="true"
@@ -57,7 +72,7 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
57
72
  ) : null}
58
73
 
59
74
  {/* On multiple modals, only show a backdrop for the modal that is on top of the stack */}
60
- {modalContext.index > 0 && modalContext.onTopOfStack ? <div className="im-backdrop fixed inset-0 z-30 bg-black/75" /> : null}
75
+ {index > 0 && onTopOfStack ? <div className="im-backdrop fixed inset-0 z-30 bg-black/75" /> : null}
61
76
 
62
77
  {/* The modal/slideover content itself */}
63
78
  {modalProps.slideover ? (
@@ -71,9 +86,15 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
71
86
  emit,
72
87
  getChildModal,
73
88
  getParentModal,
89
+ id,
90
+ index,
91
+ isOpen,
74
92
  modalContext,
75
93
  modalProps,
94
+ onTopOfStack,
76
95
  reload,
96
+ setOpen,
97
+ shouldRender,
77
98
  })}
78
99
  </SlideoverContent>
79
100
  ) : (
@@ -87,9 +108,15 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
87
108
  emit,
88
109
  getChildModal,
89
110
  getParentModal,
111
+ id,
112
+ index,
113
+ isOpen,
90
114
  modalContext,
91
115
  modalProps,
116
+ onTopOfStack,
92
117
  reload,
118
+ setOpen,
119
+ shouldRender,
93
120
  })}
94
121
  </ModalContent>
95
122
  )}
package/src/ModalLink.jsx CHANGED
@@ -1,13 +1,13 @@
1
- import { useCallback, useState, useEffect } from 'react'
1
+ import { useCallback, useState, useEffect, useMemo } from 'react'
2
2
  import { useModalStack, modalPropNames } from './ModalRoot'
3
3
  import { only, rejectNullValues } from './helpers'
4
+ import { getConfig } from './config'
4
5
 
5
6
  const ModalLink = ({
6
7
  href,
7
8
  method = 'get',
8
9
  data = {},
9
10
  as: Component = 'a',
10
- fragment = null,
11
11
  headers = {},
12
12
  queryStringArrayFormat = 'brackets',
13
13
  onAfterLeave = null,
@@ -17,6 +17,7 @@ const ModalLink = ({
17
17
  onFocus = null,
18
18
  onStart = null,
19
19
  onSuccess = null,
20
+ navigate = null,
20
21
  children,
21
22
  ...props
22
23
  }) => {
@@ -24,6 +25,10 @@ const ModalLink = ({
24
25
  const [modalContext, setModalContext] = useState(null)
25
26
  const { stack, visit } = useModalStack()
26
27
 
28
+ const shouldNavigate = useMemo(() => {
29
+ return navigate ?? getConfig('navigate')
30
+ }, [navigate])
31
+
27
32
  // Separate standard props from custom event handlers
28
33
  const standardProps = {}
29
34
  const customEvents = {}
@@ -44,12 +49,6 @@ const ModalLink = ({
44
49
  }
45
50
  })
46
51
 
47
- useEffect(() => {
48
- if (fragment && window.location.hash === `#${fragment}`) {
49
- handle()
50
- }
51
- }, [fragment])
52
-
53
52
  const [isBlurred, setIsBlurred] = useState(false)
54
53
 
55
54
  useEffect(() => {
@@ -66,15 +65,9 @@ const ModalLink = ({
66
65
  setIsBlurred(!modalContext.onTopOfStack)
67
66
  }, [stack])
68
67
 
69
- const onCloseCallback = useCallback(
70
- (index) => {
71
- if (fragment && index === 0) {
72
- window.location.hash = ''
73
- }
74
- onClose?.()
75
- },
76
- [onClose, fragment],
77
- )
68
+ const onCloseCallback = useCallback(() => {
69
+ onClose?.()
70
+ }, [onClose])
78
71
 
79
72
  const onAfterLeaveCallback = useCallback(() => {
80
73
  setModalContext(null)
@@ -100,12 +93,10 @@ const ModalLink = ({
100
93
  () => onCloseCallback(stack.length),
101
94
  onAfterLeaveCallback,
102
95
  queryStringArrayFormat,
96
+ shouldNavigate,
103
97
  )
104
98
  .then((newModalContext) => {
105
99
  setModalContext(newModalContext)
106
- if (fragment && newModalContext.index === 0) {
107
- window.location.hash = fragment
108
- }
109
100
  newModalContext.registerEventListenersFromProps(customEvents)
110
101
  onSuccess?.()
111
102
  })
package/src/ModalRenderer.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react'
1
+ import React, { useMemo } from 'react'
2
2
  import { useModalStack } from './ModalRoot'
3
3
 
4
4
  const ModalIndexContext = React.createContext(null)
@@ -15,19 +15,19 @@ export const useModalIndex = () => {
15
15
  const ModalRenderer = ({ index }) => {
16
16
  const { stack } = useModalStack()
17
17
 
18
- const modalContext = stack[index]
19
-
20
- if (!modalContext || !modalContext.component) {
21
- return null
22
- }
18
+ const modalContext = useMemo(() => {
19
+ return stack[index]
20
+ }, [stack, index])
23
21
 
24
22
  return (
25
- <ModalIndexContext.Provider value={index}>
26
- <modalContext.component
27
- {...modalContext.componentProps}
28
- onModalEvent={(...args) => modalContext.emit(...args)}
29
- />
30
- </ModalIndexContext.Provider>
23
+ modalContext?.component && (
24
+ <ModalIndexContext.Provider value={index}>
25
+ <modalContext.component
26
+ {...modalContext.componentProps}
27
+ onModalEvent={(...args) => modalContext.emit(...args)}
28
+ />
29
+ </ModalIndexContext.Provider>
30
+ )
31
31
  )
32
32
  }
33
33