@codeleap/web 3.4.0 → 3.5.0

package/src/lib/index.ts

@@ -1,2 +1,5 @@
 export * from './utils'
-export * from './hooks'
+export * from './hooks'
+export * from './useSearchParams'
+export * from './usePopState'
+export * from './useBreakpointMatch'

package/src/lib/useBreakpointMatch.ts

@@ -0,0 +1,33 @@
+import { useCodeleapContext, useMemo } from '@codeleap/common'
+import { useMediaQuery } from './hooks'
+
+export type BreakpointsMatch = Record<string, any> & {
+  defaultMedia: string
+}
+
+export const useBreakpointMatch = (values: BreakpointsMatch) => {
+  const { Theme } = useCodeleapContext()
+
+  const breakpoints = useMemo(() => {
+    const breaks = Object.entries(Theme.breakpoints as Record<string, number>)
+
+    breaks?.sort((a, b) => a?.[1] - b?.[1])
+
+    const sortBreakpoints = Object.fromEntries(breaks)
+
+    return sortBreakpoints
+  }, [])
+
+  const breakpointMatches = {}
+
+  for (const breakpoint in breakpoints) {
+    const matchesDown = useMediaQuery(Theme.media.down(breakpoint))
+    const matchesUp = useMediaQuery(Theme.media.up(breakpoint))
+
+    breakpointMatches[breakpoint] = !matchesUp && matchesDown
+  }
+
+  const breakpoint = Object.keys(breakpointMatches).find((key) => breakpointMatches[key])
+
+  return values[breakpoint] ?? values[values.defaultMedia]
+}

package/src/lib/usePopState.ts

@@ -0,0 +1,30 @@
+import { AnyFunction, useIsomorphicEffect, useUnmount } from '@codeleap/common'
+
+export const usePopState = (dependence: boolean, handler: AnyFunction, scrollLocked = true) => {
+  useIsomorphicEffect(() => {
+    if (dependence) {
+      if (scrollLocked) {
+        document.body.style.overflow = 'hidden'
+        document.body.style.overflowX = 'hidden'
+        document.body.style.overflowY = 'hidden'
+        document.body.style.maxHeight = '100vh'
+      }
+
+      window.history.pushState(null, null, window.location.pathname)
+      window.addEventListener('popstate', handler)
+    } else {
+      if (scrollLocked) {
+        document.body.style.overflow = 'hidden'
+        document.body.style.overflowX = 'hidden'
+        document.body.style.overflowY = 'auto'
+        document.body.style.maxHeight = 'auto'
+      }
+
+      window.removeEventListener('popstate', handler)
+    }
+  }, [dependence])
+
+  useUnmount(() => {
+    window.removeEventListener('popstate', handler)
+  })
+}

package/src/lib/useSearchParams.ts

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+import { usePrevious } from '@codeleap/common'
+
+export type UseSearchParamsReturn<T> = [
+  T,
+  React.Dispatch<React.SetStateAction<T>>,
+  () => void,
+  URLSearchParams
+]
+
+export function useSearchParams<
+  T extends Record<string, string> = Record<string, string>
+>(initial?: T): UseSearchParamsReturn<T> {
+  const searchParams = useRef(new URLSearchParams(typeof window === 'undefined' ? '' : location.search))
+  const [params, setParams] = useState<T>(() => {
+
+    const initialParams = Object.fromEntries(searchParams.current as any) as T
+
+    for (const key in initial) {
+      if (initialParams[key] === '' || typeof initialParams[key] === 'undefined') {
+        initialParams[key] = initial[key]
+      }
+    }
+
+    return initialParams
+  })
+  const previousParams = usePrevious(params)
+
+  useEffect(() => {
+    if (window.history) {
+      Object.entries({ ...previousParams, ...params }).forEach(([k, v]) => {
+        if (!!previousParams?.[k] && !params?.[k]) {
+          searchParams.current.delete(k)
+        } else if (v) {
+          searchParams.current.set(k, v)
+        } else {
+          searchParams.current.delete(k)
+        }
+      })
+
+      const url =
+        window.location.origin +
+        window.location.pathname +
+        `?${searchParams.current?.toString()}`
+      window.history.replaceState({ path: url }, '', url)
+    }
+  }, [params])
+
+  function reset() {
+    setParams(initial)
+  }
+
+  return [params, setParams, reset, searchParams.current]
+}

package/src/lib/utils/stopPropagation.ts

@@ -2,9 +2,9 @@ import { AnyFunction } from '@codeleap/common'
 
 export function stopPropagation(event: any) {
   const tryCalls = [
-    event?.stopPropagation,
-    event?.preventDefault,
-    event.nativeEvent?.stopImmediatePropagation as AnyFunction,
+    event?.stopPropagation.bind(event),
+    event?.preventDefault.bind(event),
+    event.nativeEvent?.stopImmediatePropagation.bind(event.nativeEvent) as AnyFunction,
   ]
 
   for (const call of tryCalls) {

package/src/types/index.ts

@@ -1 +1 @@
-export * from './utility'
+export * from './utility'

package/src/types/utility.ts

@@ -30,3 +30,7 @@ export type NativeHTMLElement = keyof ElementMap
 export type HTMLProps<T extends NativeHTMLElement> = ElementMap[T]
 
 export type ComponentWithDefaultProps<P> = ((props: P) => JSX.Element) & { defaultProps?: Partial<P> }
+
+export type ComponentCommonProps = {
+  debugName: string
+}