@hrnec06/react_utils 1.11.1 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"

package/src/components/UI/DragNDrop/DragField.tsx

@@ -0,0 +1,11 @@
+import { ReactUtils } from "@hrnec06/util";
+
+type DragFieldProps = ReactUtils.Props<{
+    children?: React.ReactNode,
+    onHover?: (item: string) => void,
+    onDrop?: (item: string) => void,
+}>;
+export default function DragField({}: DragFieldProps)
+{
+    
+}

package/src/components/UI/DragNDrop/DragItem.tsx

@@ -0,0 +1,10 @@
+import { ReactUtils } from "@hrnec06/util";
+
+type DragItemProps = ReactUtils.Props<{
+    children?: React.ReactNode,
+    id: string
+}>;
+export default function DragItem({}: DragItemProps)
+{
+    
+}

package/src/components/UI/SmoothExpander/SmoothExpander.tsx

@@ -0,0 +1,64 @@
+import { Nullable, ReactUtils, Vector2 } from "@hrnec06/util";
+import useTransition from "../../../hooks/useTransition";
+import useSyncRef, { useSyncRefAuto } from "../../../hooks/useSyncRef";
+import clsx from "clsx";
+import { useLayoutEffect, useRef, useState } from "react";
+
+type SmoothExpanderProps = ReactUtils.Props<{
+    open?: boolean
+}, HTMLDivElement>;
+export default function SmoothExpander({
+    open = false,
+    children,
+    ...props
+}: SmoothExpanderProps)
+{
+    const ref = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState<Vector2>([0, 0]);
+
+    useLayoutEffect(() => {
+        if (!ref.current || !open)
+        {
+            setDimensions([0, 0]);
+            
+            return;
+        }
+
+        const observer = new ResizeObserver(() => {
+            if (!ref.current) return;
+
+            setDimensions([
+                ref.current.clientWidth,
+                ref.current.clientHeight
+            ]);
+        });
+
+        observer.observe(ref.current);
+
+        return () => {
+            observer.disconnect();
+        }
+    }, [ref.current, open]);
+
+    return (
+        <div
+            {...props}
+
+            className={clsx(
+                "overflow-hidden relative",
+            )}
+
+            style={{
+                width: dimensions[0],
+                height: dimensions[1],
+            }}
+        >
+            <div
+                ref={ref}
+                className="absolute top-0 left-0"
+            >
+                {children}
+            </div>
+        </div>
+    );
+}

package/src/index.ts

@@ -32,6 +32,7 @@ import ShadowRoot from "./components/ShadowRoot/ShadowRoot";
 
 import Tooltip from "./components/UI/Tooltip/Tooltip";
 import ErrorBoundary from "./components/UI/ErrorBoundary/ErrorBoundary";
+import SmoothExpander from "./components/UI/SmoothExpander/SmoothExpander";
 
 import * as util from './lib/utils';
 import ContextError from "./lib/errors/ContextError";
@@ -76,6 +77,7 @@ export {
 	// UI
 	Tooltip,
 	ErrorBoundary,
+	SmoothExpander,
 
 	// Shadow root
 	ShadowRoot,

package/src/lib/createContext.ts

@@ -0,0 +1,27 @@
+import { Optional } from "@hrnec06/util";
+import { Context, createContext, useContext } from "react";
+import ContextError from "./errors/ContextError";
+
+interface ContextReturn<T> {
+    context: Context<Optional<T>>,
+    useContext: () => T
+}
+export default function createOptionalContext<T>(name: string): ContextReturn<T>
+{
+    const context = createContext<Optional<T>>(undefined);
+
+    function useCtx(): T
+    {
+        const ctx: Optional<T> = useContext(context);
+
+        if (!ctx)
+            throw new ContextError(name);
+
+        return ctx;
+    }
+
+    return {
+        context: context,
+        useContext: useCtx
+    }
+}