plugins modals.ts

0% Statements 0/106

0% Branches 0/1

0% Functions 0/1

0% Lines 0/106

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

import {
  App,
  Component,
  ComponentInternalInstance,
  ComponentPublicInstance,
  Ref,
  warn,
} from '@vue/runtime-core'
import { Application, ShowModalOptions, View } from '@nativescript/core'
import { createApp, NSVElement } from '@nativescript-vue/runtime'
import { isObject } from '@vue/shared'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    /**
     * todo: update docblock
     */
    $showModal: <T = any>(
      component: Component,
      options?: ModalOptions
    ) => Promise<T | false | undefined>
  }
}

type ResolvableModalTarget =
  | Ref
  | ComponentInternalInstance
  | ComponentPublicInstance
  | NSVElement
  | View
  | any

export interface ModalOptions extends ShowModalOptions {
  props?: Record<string, any>
  target?: ResolvableModalTarget
}

/**
 * @internal
 */
export function install(app: App) {
  app.config.globalProperties.$showModal = $showModal
}

function resolveModalTarget(target: ResolvableModalTarget): View | false {
  if (isObject(target) && isObject(target.$el)) {
    return target.$el.nativeView
  } else if (target instanceof NSVElement) {
    return target.nativeView
  } else if (target instanceof View) {
    return target
  }

  return false
}

export async function $showModal<T = any>(
  component: Component,
  options?: ModalOptions
): Promise<T | false | undefined> {
  options = Object.assign(
    {
      target: Application.getRootView(),
    },
    options
  )

  const modalTarget = resolveModalTarget(options.target)

  if (!modalTarget) {
    if (__DEV__) {
      warn(`could not open modal because the target does not exist`)
    }
    return false
  }

  return new Promise((resolve) => {
    const modalApp = createApp(component, options ? options.props : null)
    let isResolved = false
    const closeCallback = (data?: T) => {
      if (isResolved) return
      isResolved = true

      try {
        modalContent.closeModal()
      } catch (e) {
        // ignore?
      }

      modalApp.unmount()
      resolve(data)
    }

    modalApp.config.globalProperties.$modal = {
      close: closeCallback,
    }

    const modalContent = modalApp.mount().$el.nativeView

    modalTarget.showModal(modalContent, {
      ...options,
      context: null,
      closeCallback,
    })
  })
}