@contember/react-utils 1.1.0 → 1.2.0-alpha.1

package/src/hooks/useScrollOffsets.ts

@@ -0,0 +1,88 @@
+import { assert } from '@contember/utilities'
+import { useLayoutEffect, useMemo, useState } from 'react'
+import { useScopedConsoleRef } from '../debug-context'
+import { useReferentiallyStableCallback } from '../referentiallyStable'
+import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
+import { useOnScrollWithin } from './useOnScrollWithin'
+import { useOnWindowResize } from './useOnWindowResize'
+
+export type Offsets = {
+	bottom: number;
+	left: number;
+	right: number;
+	top: number;
+}
+
+export function useScrollOffsets(refOrElement: RefObjectOrElement<HTMLElement | null> | null, interval: number = 1000 / 60) {
+	const { logged } = useScopedConsoleRef('useScrollOffsets').current
+
+	const [top, setTop] = useState(0)
+	const [bottom, setBottom] = useState(0)
+	const [left, setLeft] = useState(0)
+	const [right, setRight] = useState(0)
+
+	const updateScrollOffsetsState = useReferentiallyStableCallback((offsets: Offsets) => {
+		logged('Update the offsets:', {
+			previous: { bottom, left, right, top },
+			next: offsets,
+		})
+
+		if (offsets.bottom !== bottom) setBottom(offsets.bottom)
+		if (offsets.left !== left) setLeft(offsets.left)
+		if (offsets.right !== right) setRight(offsets.right)
+		if (offsets.top !== top) setTop(offsets.top)
+	})
+
+	const handler = useReferentiallyStableCallback(() => {
+		const maybeScrollContent = unwrapRefValue(refOrElement) ?? document
+
+		if (maybeScrollContent) {
+			updateScrollOffsetsState(
+				getElementScrollOffsets(maybeScrollContent),
+			)
+		}
+	})
+
+	useOnScrollWithin(refOrElement, handler, interval)
+	useOnWindowResize(handler)
+	useLayoutEffect(handler, [handler])
+
+	return useMemo(() => ({ bottom, left, right, top }), [bottom, left, right, top])
+}
+
+function isIntrinsicScrollElement(element: unknown): element is Document {
+	return element instanceof HTMLBodyElement
+		|| element instanceof HTMLHtmlElement
+		|| element instanceof DocumentType
+		|| element instanceof Document
+		|| element instanceof HTMLDocument
+}
+
+function getIntrinsicScrollContainer(element: HTMLElement | Document): HTMLElement {
+	const html = document.body.parentElement
+	assert('HTML element exists', html, (value): value is HTMLElement => value instanceof HTMLElement)
+
+	if (isIntrinsicScrollElement(element)) {
+		return html
+	} else {
+		return element
+	}
+}
+
+function getElementScrollOffsets(element: HTMLElement | Document): Offsets {
+	const isIntrinsicScrolling = isIntrinsicScrollElement(element)
+	const scrollContainer = getIntrinsicScrollContainer(element)
+
+	const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer
+
+	const height = isIntrinsicScrolling ? window.innerHeight : scrollContainer.offsetHeight
+	const width = isIntrinsicScrolling ? window.innerWidth : scrollContainer.offsetWidth
+
+	const left = Math.round(scrollLeft)
+	const top = Math.round(scrollTop)
+
+	const right = Math.round(scrollWidth - width - left)
+	const bottom = Math.round(scrollHeight - height - top)
+
+	return { bottom, left, right, top }
+}

package/src/hooks/useStoredState.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react'
 import { Serializable } from '../types'
 
-type SetState<V extends Serializable> = (value: V | ((current: V) => V)) => void;
-type ValueInitializer<V extends Serializable> = (storedValue: V | undefined) => V;
+export type SetState<V extends Serializable> = (value: V | ((current: V) => V)) => void;
+export type ValueInitializer<V extends Serializable> = (storedValue: V | undefined) => V;
 
 const createStoredStateHook = (getStorage: () => Storage) => {
 	return <V extends Serializable>(key: string, initializeValue: ValueInitializer<V>): [V, SetState<V>] => {

package/src/hooks/useUpdatedRef.ts

@@ -0,0 +1,14 @@
+import { useRef } from 'react'
+
+/**
+ * Returns a stable mutable object with value that is updated upon each call
+ *
+ * @param value - Value that could update after initial call
+ * @returns Mutable ref object with updated value
+ */
+export function useUpdatedRef<T>(value: T) {
+	const ref = useRef(value)
+	ref.current = value
+
+	return ref
+}

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,20 @@
+import { useMemo, useState } from 'react'
+import { useOnWindowResize } from './useOnWindowResize'
+
+export function useWindowSize() {
+  const [width, setWidth] = useState(window.innerWidth)
+  const [height, setHeight] = useState(window.innerHeight)
+
+  useOnWindowResize(() => {
+    const { innerHeight, innerWidth } = window
+    if (innerHeight !== height) {
+      setHeight(innerHeight)
+    }
+
+    if (innerWidth !== width) {
+      setWidth(innerWidth)
+    }
+  })
+
+  return useMemo(() => ({ height, width }), [height, width])
+}

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from './context'
+export * from './debug-context'
 export * from './hooks'
 export * from './referentiallyStable'
 export * from './types'

package/src/referentiallyStable/index.ts

@@ -4,3 +4,4 @@ export * from './identityFunction'
 export * from './noop'
 export * from './returnFalse'
 export * from './returnTrue'
+export * from './useReferentiallyStableCallback'

package/src/referentiallyStable/useReferentiallyStableCallback.ts

@@ -0,0 +1,11 @@
+import { useCallback, useRef } from 'react'
+
+// TODO: Should be possible to remove when React.useEvent() lands
+export const useReferentiallyStableCallback = <T extends (...args: any[]) => any>(callback: T): T => {
+	const ref = useRef(callback)
+	ref.current = callback
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	return useCallback<T>(((...args: any[]) => {
+		return ref.current(...args)
+	}) as T, [])
+}

package/src/tsconfig.json

@@ -2,5 +2,8 @@
 	"extends": "../../../tsconfig.settings.json",
 	"compilerOptions": {
 		"outDir": "../dist/types"
-	}
+	},
+	"references": [
+		{ "path": "../../utilities/src" },
+	]
 }

package/src/types/PropsWithRequiredChildren.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react'
+
+export type PropsWithRequiredChildren<P = unknown> = P & { children: ReactNode | undefined };

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './PropsWithRequiredChildren'
+export * from './Serializable'

package/dist/types/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GACrB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,YAAY,EAAE,GACvB;IAAE,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,YAAY;CAAE,CAAA"}

package/src/ambient.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />