@xwadex/fesd-next 0.3.44-beta.19 → 0.3.44-beta.20

package/dist/components/dragResize/dragResize.js

@@ -43,17 +43,24 @@ const DragResizeBase = (props) => {
         onResizeEnd: onResizeEndHandler,
     });
     //Context Functions
-    const setResizeActive = useCallback((active) => setActive(active), [setActive]);
+    const setResizeActive = useCallback((active) => setActive(active), []);
+    const setResizeClose = useCallback((active) => {
+        if (!resizeRef.current)
+            return;
+        // resizeRef.current.style.width = active0 + "px"
+        // resizeRef.current.style.height = minHeight + "px"
+        clearResizeStore();
+    }, []);
     const clearResizeStore = useCallback(() => resizeStoreKey
         ? deleteCookies(resizeStoreKey)
-        : console.error("resizeStoreKey is not undefined"), [resizeStoreKey]);
+        : console.error("resizeStoreKey is not undefined"), []);
     const defaultResizeSize = useCallback(() => {
         if (!resizeRef.current)
             return;
         resizeRef.current.style.width = minWidth + "px";
         // resizeRef.current.style.height = minHeight + "px"
         clearResizeStore();
-    }, [resizeRef.current, clearResizeStore]);
+    }, []);
     const contextValue = useMemo(() => ({
         setResizeActive,
         clearResizeStore,

package/dist/hooks/useDragResize.d.ts

@@ -7,6 +7,8 @@ export interface DragResizePropsTypes {
     direction?: "width" | "height";
     minWidth?: number;
     maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
     onInit?: (size: ResizeTypes) => void;
     onResizeStart?: (size: ResizeTypes) => void;
     onResizing?: (size: ResizeTypes) => void;
@@ -15,5 +17,6 @@ export interface DragResizePropsTypes {
 export type DragResizeTypes = {
     dragRef: React.RefObject<HTMLDivElement | null>;
     resizeRef: React.RefObject<HTMLDivElement | null>;
+    resize?: ResizeTypes;
 };
-export declare function useDragResize({ active, direction, minWidth, maxWidth, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;
+export declare function useDragResize({ active, direction, minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;

package/dist/hooks/useDragResize.js

@@ -1,9 +1,10 @@
 "use client";
 //wade 2024.12.06
-import { useEffect, useRef } from "react";
-export function useDragResize({ active = true, direction = "width", minWidth = 300, maxWidth = 500, onInit, onResizeStart, onResizing, onResizeEnd }) {
+import { useEffect, useRef, useState } from "react";
+export function useDragResize({ active = true, direction = "width", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {
     const dragRef = useRef(null);
     const resizeRef = useRef(null);
+    const [resize, setResize] = useState({ width: 0, height: 0 });
     const getResizeSizeValue = () => {
         if (!resizeRef.current)
             return;
@@ -18,10 +19,13 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
         const rect = resizeRef.current.getBoundingClientRect();
         const resizeWidth = clientX - rect.left;
         const resizeHeight = clientY - rect.top;
-        if (resizeWidth <= minWidth || resizeWidth >= maxWidth)
-            return;
-        resizeRef.current.style.width = resizeWidth + "px";
-        return { width: resizeWidth };
+        if ((minWidth && resizeWidth > minWidth) || (maxWidth && resizeWidth > maxWidth)) {
+            resizeRef.current.style.width = resizeWidth + "px";
+        }
+        if ((minHeight && resizeWidth > minHeight) || (maxHeight && resizeWidth > maxHeight)) {
+            resizeRef.current.style.height = resizeHeight + "px";
+        }
+        return { width: resizeWidth, height: resizeHeight };
     };
     const onInitCallback = () => {
         const resizeValue = getResizeSizeValue();
@@ -33,7 +37,10 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
     };
     const onMouseMove = (e) => {
         const resizeValue = setResizeValue(e.clientX, e.clientY);
-        resizeValue && onResizing?.(resizeValue);
+        if (!resizeValue)
+            return;
+        setResize(() => ({ ...resizeValue }));
+        onResizing?.(resizeValue);
     };
     const onMouseUp = () => {
         const resizeValue = getResizeSizeValue();
@@ -59,5 +66,5 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
             removeEventListeners();
         };
     }, [active]);
-    return { dragRef, resizeRef };
+    return { dragRef, resizeRef, resize };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.44-beta.19",
+	"version": "0.3.44-beta.20",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

package/dist/components/dragResize/_dragResize.d.ts

@@ -1,19 +0,0 @@
-import { DragResizePropsTypes, ResizeTypes } from "../../hooks/index.js";
-import { AsPropsTypes } from "../../types/index.js";
-type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
-    as?: React.ElementType;
-    children: React.ReactNode;
-    defaultWidth?: number;
-    defaultHeight?: number;
-    resizeClass?: string;
-    dragLineWidth?: number;
-    dragLineColor?: string;
-    containerClass?: string;
-    dragClass?: string;
-    resizeStore?: boolean;
-    resizeStoreKey?: string;
-    resizeStoreValue?: ResizeTypes;
-} & DragResizePropsTypes>;
-declare const DragResizeBase: <T extends React.ElementType = "div">(props: PropsTypes<T>) => import("react/jsx-runtime").JSX.Element;
-declare const DragResize: React.MemoExoticComponent<typeof DragResizeBase>;
-export default DragResize;

package/dist/components/dragResize/_dragResize.js

@@ -1,77 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useState } from "react";
-import { useDragResize, useCookies } from "../../hooks/index.js";
-import { DragResizeContext } from "./dragResizeContext";
-import { mergeClassName } from "../../utils/index.js";
-import styles from "./dragResize.module.scss";
-const DragResizeBase = (props) => {
-    const { as, children, defaultWidth, defaultHeight, resizeClass, containerClass, dragClass, resizeStore = true, resizeStoreKey, resizeStoreValue, active = true, direction = "width", minWidth = 500, maxWidth = 950, dragLineWidth = 5, dragLineColor = "rgba(0, 0, 0, 1)", onInit, onResizeStart, onResizing, onResizeEnd, ...othersProps } = props;
-    const RootComponent = as || "div";
-    const [isActive, setActive] = useState(active);
-    const { setCookies, deleteCookies } = useCookies();
-    const resizeCSS = useMemo(() => mergeClassName(styles.root, resizeClass ? resizeClass : ""), [resizeClass]);
-    const dragCSS = useMemo(() => mergeClassName(styles.drag, dragClass ? dragClass : "", !isActive ? styles.off : ""), [isActive, dragClass]);
-    const containerCSS = useMemo(() => mergeClassName(styles.container, containerClass ? containerClass : ""), [containerClass]);
-    const isCookieStore = useMemo(() => resizeStore
-        && resizeStoreKey
-        && resizeStoreKey !== ""
-        ? true : false, [resizeStore, resizeStoreKey]);
-    const resizeDefauleStyles = useMemo(() => {
-        if (!isCookieStore || !resizeStoreValue)
-            return {
-                width: minWidth + "px",
-                // height: minHeight + "px"
-            };
-        const { width, height } = resizeStoreValue;
-        return {
-            width: width ? width + "px" : "inherit",
-            height: height ? height + "px" : "inherit",
-        };
-    }, [isCookieStore, resizeStoreValue]);
-    const onResizeEndHandler = useCallback((size) => {
-        onResizeEnd?.(size);
-        if (!isCookieStore)
-            return;
-        setCookies(resizeStoreKey, JSON.stringify(size));
-    }, [isCookieStore, onResizeEnd, resizeStore]);
-    //Hooks
-    const { dragRef, resizeRef } = useDragResize({
-        active: isActive,
-        direction,
-        minWidth,
-        maxWidth,
-        onInit,
-        onResizeStart,
-        onResizing,
-        onResizeEnd: onResizeEndHandler,
-    });
-    //Context Functions
-    const setResizeActive = useCallback((active) => setActive(active), [setActive]);
-    const clearResizeStore = useCallback(() => resizeStoreKey
-        ? deleteCookies(resizeStoreKey)
-        : console.error("resizeStoreKey is not undefined"), [resizeStoreKey]);
-    const defaultResizeSize = useCallback(() => {
-        if (!resizeRef.current)
-            return;
-        resizeRef.current.style.width = minWidth + "px";
-        // resizeRef.current.style.height = minHeight + "px"
-        clearResizeStore();
-    }, [resizeRef.current, clearResizeStore]);
-    const contextValue = useMemo(() => ({
-        setResizeActive,
-        clearResizeStore,
-        defaultResizeSize
-    }), [
-        setResizeActive,
-        clearResizeStore,
-        defaultResizeSize
-    ]);
-    return (_jsx(DragResizeContext, { value: contextValue, children: _jsxs(RootComponent, { ...othersProps, ref: resizeRef, className: resizeCSS, style: resizeDefauleStyles, children: [_jsx("div", { className: containerCSS, children: children }), _jsx("div", { ref: dragRef, className: dragCSS, style: {
-                        "--drag-line-width": dragLineWidth + "px",
-                        "--drag-line-color": dragLineColor
-                    } })] }) }));
-};
-const DragResize = memo(DragResizeBase);
-DragResize.displayName = "DragResize";
-export default DragResize;

package/dist/components/dragResize/dragResize.module.scss

@@ -1,42 +0,0 @@
-.root {
-  width: inherit;
-  height: inherit;
-  display: flex;
-  flex-direction: row;
-}
-
-.container {
-  width: inherit;
-  height: inherit;
-}
-
-.drag {
-  --drag-line-width: 2px;
-  --drag-line-color: rgbs(0, 0, 0, 1);
-
-  width: 0;
-  height: inherit;
-  position: relative;
-  z-index: 2;
-
-  &::before {
-    content: "";
-    width: 0;
-    height: inherit;
-    border-left: var(--drag-line-width) solid var(--drag-line-color);
-    position: absolute;
-    inset: 0 0 0 calc(var(--drag-line-width) / 2 * -1);
-    z-index: 1;
-    opacity: 0;
-    transition: 0.5s ease-in-out;
-  }
-
-  &:not(.off) {
-    &:hover {
-      cursor: ew-resize;
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-}