add native-modal element

app/javascript/application.js

@@ -11,6 +11,7 @@ import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import NativeAction from './elements/native_action'
 import NativeSearch from './elements/native_search'
+import NativeModal from './elements/native_modal'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
@@ -110,6 +111,7 @@ safeRegisterElement('disable-hidden', DisableHidden)
 safeRegisterElement('turbo-modal', TurboModal)
 safeRegisterElement('native-action', NativeAction)
 safeRegisterElement('native-search', NativeSearch)
+safeRegisterElement('native-modal', NativeModal)
 safeRegisterElement('file-dropzone', FileDropzone)
 safeRegisterElement('menu-active', MenuActive)
 safeRegisterElement('clipboard-copy', ClipboardCopy)

app/javascript/elements/native_modal.js

@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    document.addEventListener('turbo:submit-end', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.onSubmit)
+  }
+
+  onSubmit = (e) => {
+    if (!e.detail.success || e.detail.fetchResponse?.redirected) return
+    if (this.dataset.closeAfterSubmit === 'false') return
+    if (e.detail.formSubmission?.formElement?.dataset?.closeOnSubmit === 'false') return
+
+    window.webkit?.messageHandlers?.modal?.postMessage({ action: 'submitted' })
+  }
+}

app/views/shared/_turbo_drawer.html.erb

@@ -1,9 +1,9 @@
 <% if turbo_native_app? && !turbo_frame_request? %>
   <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="drawer">
-    <div class="w-full">
+    <native-modal class="block w-full" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
       <%= yield %>
-    </div>
+    </native-modal>
   </turbo-frame>
 <% else %>
   <% offset = local_assigns[:title] ? '45px' : '0px' %>

app/views/shared/_turbo_modal.html.erb

@@ -1,9 +1,9 @@
 <% if turbo_native_app? && !turbo_frame_request? %>
   <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="modal">
-    <div class="max-w-lg mx-auto px-4 pb-6">
+    <native-modal class="block max-w-lg mx-auto px-4 pb-6" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
       <%= yield %>
-    </div>
+    </native-modal>
   </turbo-frame>
 <% else %>
   <turbo-frame id="modal">

app/views/shared/_turbo_modal_large.html.erb

@@ -19,9 +19,9 @@
   </turbo-frame>
 <% elsif turbo_native_app? %>
   <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
-  <div class="w-full [&>.px-5]:px-4">
+  <native-modal class="block w-full [&>.px-5]:px-4" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
     <%= yield %>
-  </div>
+  </native-modal>
 <% else %>
   <% if local_assigns[:title] %>
     <div class="sticky top-0 z-10 flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium">