@hrnec06/react_utils 1.11.0 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "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/ErrorBoundary/ErrorBoundary.tsx

@@ -3,8 +3,10 @@ import useSignal, { Signal } from "../../../hooks/useSignal";
 import { ErrorBoundaryContext } from "./ErrorBoundaryContext";
 import React from "react";
 
+type FallbackType = React.ReactNode | ((error: Error) => React.ReactNode);
+
 type ErrorBoundaryProps = ReactUtils.Props<{
-    fallback: React.ReactNode,
+    fallback: FallbackType,
     children: React.ReactNode
 }>;
 export default function ErrorBoundary({
@@ -28,7 +30,7 @@ export default function ErrorBoundary({
                         {children}
                     </ErrorCatcher>
                 ) : (
-                    fallback
+                    <ErrorFallback error={error.value} fallback={fallback} />
                 )
             }
         </ErrorBoundaryContext.Provider>
@@ -63,4 +65,18 @@ class ErrorCatcher extends React.Component<ErrorCatcherProps>
 	{
 		return this.props.children;
 	}
+}
+
+type ErrorFallback = ReactUtils.Props<{
+    fallback: FallbackType,
+    error: Error
+}>;
+function ErrorFallback({ error, fallback }: ErrorFallback)
+{
+    if (typeof fallback === "function")
+    {
+        return fallback(error);
+    }
+
+    return fallback;
 }

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

@@ -0,0 +1,38 @@
+import { Nullable, ReactUtils } from "@hrnec06/util";
+import useTransition from "../../../hooks/useTransition";
+import useSyncRef, { useSyncRefAuto } from "../../../hooks/useSyncRef";
+import clsx from "clsx";
+import { useRef } from "react";
+
+type SmoothExpanderProps = ReactUtils.Props<{
+    open?: boolean
+}, HTMLDivElement>;
+export default function SmoothExpander({
+    open = false,
+    children,
+    ...props
+}: SmoothExpanderProps)
+{
+    const ref = useRef<HTMLDivElement>(null);
+
+    return (
+        <div
+            {...props}
+
+            className={clsx(
+                "overflow-hidden transition-all relative",
+            )}
+
+            style={{
+                height: open && ref.current ? ref.current.clientHeight : 0
+            }}
+        >
+            <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
+    }
+}