Replace Modal with Popup (#119)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/ui/src/components/PopupInstance.svelte

@@ -16,12 +16,12 @@
 
 <script lang="ts">
 import Component from './Component.svelte'
-import type { AnySvelteComponent, AnyComponent } from '../types'
+import type { AnySvelteComponent, AnyComponent, PopupAlignment } from '../types'
 import { closePopup } from '..'
 
 export let is: AnyComponent | AnySvelteComponent
 export let props: object
-export let element: HTMLElement | undefined
+export let element: PopupAlignment | undefined
 export let onClose: (result: any) => void | undefined
 export let zIndex: number
 
@@ -37,27 +37,32 @@ function close(ev: CustomEvent) {
 $: {
   if (modalHTML) {
     if (element) {
-      const rect = element.getBoundingClientRect()
-      if (rect.top > document.body.clientHeight - rect.bottom) {
-        modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
-      } else {
-        modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
-      }
-      if (rect.left > document.body.clientWidth - rect.right) {
-        modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
-      } else {
-        modalHTML.style.left = rect.left + 'px'
+      if (typeof element !== 'string') {
+        const rect = element.getBoundingClientRect()
+        if (rect.top > document.body.clientHeight - rect.bottom) {
+          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
+        } else {
+          modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
+        }
+        if (rect.left > document.body.clientWidth - rect.right) {
+          modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
+        } else {
+          modalHTML.style.left = rect.left + 'px'
+        }
+      } else if (element === 'right') {
+        modalHTML.style.top = '4rem'
+        modalHTML.style.bottom = '4rem'
+        modalHTML.style.right = '4rem'
       }
     } else {
-      modalHTML.style.top = '4rem'
-      modalHTML.style.bottom = '4rem'
-      modalHTML.style.right = '4rem'
+      modalHTML.style.top = '50%'
+      modalHTML.style.left = '50%'
+      modalHTML.style.transform = 'translate(-50%, -50%)'
     }
   }
 }
 </script>
 
-
 <div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
   {#if typeof(is) === 'string'}
     <Component is={is} props={props} on:close={close}/>

packages/ui/src/index.ts

@@ -61,7 +61,7 @@ export { default as IconComments } from './components/icons/Comments.svelte'
 
 export * from './utils'
 
-import type { AnySvelteComponent, AnyComponent } from './types'
+import type { AnySvelteComponent, AnyComponent, PopupAlignment } from './types'
 import { writable } from 'svelte/store'
 
 export function createApp (target: HTMLElement): SvelteComponent {
@@ -71,7 +71,7 @@ export function createApp (target: HTMLElement): SvelteComponent {
 interface CompAndProps {
   is: AnySvelteComponent | AnyComponent | undefined
   props: any
-  element?: HTMLElement
+  element?: PopupAlignment
   onClose?: (result: any) => void
 }
 
@@ -80,17 +80,9 @@ export const store = writable<CompAndProps>({
   props: {},
 })
 
-export function showModal (component: AnySvelteComponent | AnyComponent, props: any, element?: HTMLElement): void {
-  store.set({ is: component, props, element: element })
-}
-
-export function closeModal (): void {
-  store.set({ is: undefined, props: {}, element: undefined })
-}
-
 export const popupstore = writable<CompAndProps[]>([])
 
-export function showPopup (component: AnySvelteComponent | AnyComponent, props: any, element?: HTMLElement, onClose?: (result: any) => void): void {
+export function showPopup (component: AnySvelteComponent | AnyComponent, props: any, element?: PopupAlignment, onClose?: (result: any) => void): void {
   popupstore.update(popups => {
     popups.push({ is: component, props, element, onClose })
     return popups

packages/ui/src/types.ts

@@ -53,3 +53,5 @@ export interface Tab {
 }
 
 export type TabModel = Tab[]
+
+export type PopupAlignment = HTMLElement | 'right'