@xwadex/fesd-next 0.3.6 → 0.3.7

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

@@ -0,0 +1,17 @@
+import { DragResizePropsTypes, ResizeTypes } from "../../hooks";
+import { AsPropsTypes } from "../../types";
+type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
+    as?: React.ElementType;
+    children: React.ReactNode;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    resizeClass?: 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

@@ -0,0 +1,74 @@
+"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";
+import { DragResizeContext } from "./dragResizeContext";
+import { mergeClassName } from "../../utils";
+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, 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 })] }) }));
+};
+const DragResize = memo(DragResizeBase);
+DragResize.displayName = "DragResize";
+export default DragResize;

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface DragResizeContextType {
+    setResizeActive: (active: boolean) => void;
+    clearResizeStore: () => void;
+    defaultResizeSize: () => void;
+}
+export declare const DragResizeContext: React.Context<DragResizeContextType | undefined> & {
+    displayName: string;
+};
+export declare const useDragResizeContext: () => DragResizeContextType;

package/dist/components/dragResize/dragResizeContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { use, createContext, } from "react";
+export const DragResizeContext = Object.assign(createContext(undefined), { displayName: "DragResizeContext" });
+export const useDragResizeContext = () => {
+    const context = use(DragResizeContext);
+    if (context)
+        return context;
+    throw new Error("DragResizeContext is not defined!!");
+};

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

@@ -0,0 +1,2 @@
+export { default as DragResize } from "./dragResize";
+export * from "./dragResizeContext";

package/dist/components/dragResize/index.js

@@ -0,0 +1,2 @@
+export { default as DragResize } from "./dragResize";
+export * from "./dragResizeContext";

package/dist/components/dragSortable/dragSortable.d.ts

@@ -0,0 +1,19 @@
+import type { Sortable, Store } from "react-sortablejs";
+import type { AsPropsTypes } from "../../types";
+type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
+    as?: string;
+    children: React.ReactNode;
+    datasets: any[];
+    rootClass?: string;
+    sorterClass?: string;
+    handlerClass?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    animation?: number;
+    onChange?: (newState: any[], sortable: Sortable | null, store: Store) => void;
+    onStart?: ((evt: Sortable.SortableEvent, sortable: Sortable | null, store: Store) => void) | undefined;
+    onEnd?: ((evt: Sortable.SortableEvent, sortable: Sortable | null, store: Store) => void) | undefined;
+}>;
+declare const DragSortableBase: <T extends React.ElementType = "div">(props: PropsTypes<T>) => import("react/jsx-runtime").JSX.Element;
+declare const DragSortable: React.MemoExoticComponent<typeof DragSortableBase>;
+export default DragSortable;

package/dist/components/dragSortable/dragSortable.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { ReactSortable } from "react-sortablejs";
+const DragSortableBase = (props) => {
+    const { as, children, datasets = [], rootClass, sorterClass, handlerClass, style, animation = 150, disabled = false, onChange, onStart, onEnd, ...othersProps } = props;
+    return (_jsx(ReactSortable, { ...othersProps, tag: as, disabled: disabled, className: rootClass, ghostClass: sorterClass, handle: "." + handlerClass, fallbackClass: "sortable-fallback", list: datasets, setList: onChange, animation: animation, style: style, onStart: onStart, onEnd: onEnd, children: children }));
+};
+const DragSortable = memo(DragSortableBase);
+DragSortable.displayName = "DragSortable";
+export default DragSortable;

package/dist/components/dragSortable/dragSortable.module.scss

@@ -0,0 +1,7 @@
+.dragging {
+  > * {
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+}

package/dist/components/dragSortable/index.d.ts

@@ -0,0 +1 @@
+export { default as DragSortable } from "./dragSortable";

package/dist/components/dragSortable/index.js

@@ -0,0 +1 @@
+export { default as DragSortable } from "./dragSortable";

package/dist/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./myComponents";
 export * from "./accordions";
+export * from "./dragResize";
+export * from "./dragSortable";

package/dist/components/index.js

@@ -1,2 +1,4 @@
 export * from "./myComponents";
 export * from "./accordions";
+export * from "./dragResize";
+export * from "./dragSortable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwadex/fesd-next",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,6 +38,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "next": ">=15.3.3",
-    "tua-body-scroll-lock": ">=1.5.3"
+    "tua-body-scroll-lock": ">=1.5.3",
+    "react-sortablejs": ">=6.1.4"
   }
 }