@codeleap/web 3.10.6 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.10.6",
+  "version": "3.11.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/SearchInput/index.tsx

@@ -30,7 +30,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
     debounce,
     value,
     onValueChange,
-    defaultValue,
+    defaultValue = '',
     ...rest
   } = {
     ...SearchInput.defaultProps,

package/src/index.ts

@@ -6,4 +6,5 @@ export * from './lib/useSearchParams'
 export * from './lib/useBreakpointMatch'
 export * from './lib/usePopState'
 export { default as Toast } from './lib/Toast'
-export { CreateOSAlert } from './lib/OSAlert'
+export { CreateOSAlert, useGlobalAlertComponent, AlertOutlet } from './lib/OSAlert'
+export type { GlobalAlertComponentProps, GlobalAlertType } from './lib/OSAlert'

package/src/lib/OSAlert.tsx

@@ -1,29 +1,38 @@
-import { AnyFunction, onMount, onUpdate, StyleContextProps, StyleProvider, useBooleanToggle, usePrevious } from '@codeleap/common'
-import { Modal, Text, Button } from '../components/components'
+import React from 'react'
+import { AnyFunction, onMount, onUpdate, useBooleanToggle, usePrevious } from '@codeleap/common'
 import ReactDOM from 'react-dom'
-
+import { v4 as uuid } from 'uuid'
 type AlertButton = {
-    text: string
-    onPress: AnyFunction
-    variants?: any[]
+  text: string
+  onPress: AnyFunction
+  variants?: any[]
 }
 
 type OSAlertArgs = {
   title: string
   body?: string
   options?: AlertButton[]
+  onDismiss?: AnyFunction
+  onAction?: AnyFunction
 }
 type AlertEvent = AlertButton['onPress']
-// type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
+
 type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
-type AlertContext = StyleContextProps<any, any>
-function RenderModal(props: {args:OSAlertArgs; contextProps:AlertContext ; removeSelf:AnyFunction}) {
+
+export type GlobalAlertType = 'info' | 'error' | 'warn' | 'ask'
+
+export type GlobalAlertComponentProps = {
+  args: OSAlertArgs
+  removeSelf: AnyFunction
+  type: GlobalAlertType
+  id: string
+}
+
+export function useGlobalAlertComponent(props: GlobalAlertComponentProps) {
   const [visible, toggle] = useBooleanToggle(false)
 
   const previousVisible = usePrevious(visible)
 
-  const { title, body, options = [] } = props.args
-
   onMount(() => {
     toggle()
   })
@@ -34,35 +43,28 @@ function RenderModal(props: {args:OSAlertArgs; contextProps:AlertContext ; remov
     }
   }, [visible])
 
-  return <StyleProvider {...props.contextProps}>
-    <Modal
-      visible={visible}
-      toggle={toggle}
-      title={title}
-      showClose={false}
-      closable={false}
-      
-      footer={<>
-        {
-          options.map((o, idx) => <Button debugName={`OSAlert ${title}`} key={idx} {...o} onPress={() => {
-            o.onPress?.()
-            toggle()
-
-          }}/>)
-        }
-      </>}
-    >
-      <Text text={body || ''} />
-
-    </Modal>
-  </StyleProvider>
+  return {
+    visible,
+    toggle,
+  }
+}
+
+function RenderModal(props: GlobalAlertComponentProps) {
+
+  return null
 }
 
 const MODAL_ID = '__CODELEAP_MODAL__'
 
-function OSAlert(props:OSAlertArgs & {context: AlertContext}) {
+function OSAlert(props: OSAlertArgs & { type: GlobalAlertType }) {
   if (!document) return
-  let modalDiv = document.getElementById(MODAL_ID)
+
+  const modalId = MODAL_ID + '_' + uuid()
+
+  const modalsRootDiv = document.getElementById(MODAL_ID)
+
+  let modalDiv = document.getElementById(modalId)
+
   const remove = () => {
     ReactDOM.unmountComponentAtNode(modalDiv)
   }
@@ -72,30 +74,39 @@ function OSAlert(props:OSAlertArgs & {context: AlertContext}) {
 
     modalDiv.setAttribute('id', MODAL_ID)
 
-    document.body.appendChild(modalDiv)
-  } else {
-    remove()
+    modalsRootDiv.appendChild(modalDiv)
+
   }
 
-  ReactDOM.render(
-    <RenderModal
-      contextProps={props.context}
+  ReactDOM.render(<>
+
+    <OSAlert.Component
       removeSelf={remove}
       args={props}
-    />, modalDiv,
-  )
+      type={props.type}
+      id={modalId}
+    />
+
+  </>, modalDiv)
+
 }
+OSAlert.Component = RenderModal
+
+export function CreateOSAlert(Component) {
+
+  OSAlert.Component = Component
 
-export function CreateOSAlert(context: AlertContext) {
   function ask({ title, body, options }: OSAlertArgs) {
     if (!title) {
       title = 'Quick quetion'
     }
     OSAlert({
-      context,
       title,
       body,
       options,
+      type: 'ask',
+      onAction: null,
+      onDismiss: null,
     })
   }
 
@@ -113,17 +124,11 @@ export function CreateOSAlert(context: AlertContext) {
     }
     OSAlert({
       title,
-      context,
+
       body,
-      options: [
-        {
-          text: 'OK',
-          onPress: () => {
-
-            args?.onDismiss?.()
-          },
-        },
-      ],
+      type: 'error',
+      onAction: args.onDismiss,
+      onDismiss: args.onDismiss,
     })
   }
 
@@ -136,25 +141,13 @@ export function CreateOSAlert(context: AlertContext) {
     } = args
 
     OSAlert({
-      context,
+
       title,
       body,
-      options: [
-        {
-          text: 'Cancel',
-          onPress: () => {
-
-            onReject()
-          },
-        },
-        {
-          text: 'OK',
-          onPress: () => {
-
-            onAccept?.()
-          },
-        },
-      ],
+      type: 'warn',
+      onAction: onAccept,
+      onDismiss: onReject,
+
     })
   }
 
@@ -167,18 +160,10 @@ export function CreateOSAlert(context: AlertContext) {
     } = args
 
     OSAlert({
-      context,
       title,
       body,
-      options: [
-        {
-          text: 'OK',
-          onPress: () => {
-
-            onDismiss?.()
-          },
-        },
-      ],
+      type: 'info',
+      onDismiss,
     })
   }
   return {
@@ -188,3 +173,7 @@ export function CreateOSAlert(context: AlertContext) {
     error: OSError,
   }
 }
+
+export const AlertOutlet = () => {
+  return <div id={MODAL_ID} />
+}