@kwiz/fluentui 1.0.21 → 1.0.24

package/src/helpers/drag-drop/drag-drop-container.tsx

@@ -0,0 +1,47 @@
+import { isNullOrEmptyString } from "@kwiz/common";
+import { useDragDropContext } from "./drag-drop-context";
+import { iDraggedItemType, iDraggableProps } from "./use-draggable";
+import { iDroppableProps } from "./use-droppable";
+
+interface one<DragItemType extends iDraggedItemType<string>> {
+    dragInfo: iDraggableProps<DragItemType>;
+}
+interface other<
+    DropInfoTypes extends string = never,
+    DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never,
+> {
+    dropInfo: iDroppableProps<DropInfoTypes, DropInfoItemTypes>;
+}
+type iDragDropProps<
+    DragItemType extends iDraggedItemType<string>,
+    DropInfoTypes extends string = never,
+    DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never,
+> = one<DragItemType>
+    | other<DropInfoTypes, DropInfoItemTypes>
+    | (one<DragItemType> & other<DropInfoTypes, DropInfoItemTypes>);
+
+type iProps<DragItemType extends iDraggedItemType<string>, DropInfoTypes extends string, DropInfoItemTypes extends iDraggedItemType<DropInfoTypes>> =
+    //all DIV props, except ref - we need ref.
+    Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">
+    //pass drag class names
+    & {
+        onDraggingClassName?: string;
+        onDragOverClassName?: string;
+    }
+    //drag/drop info
+    & iDragDropProps<DragItemType, DropInfoTypes, DropInfoItemTypes>
+
+export function DragDropContainer<
+    DragItemType extends iDraggedItemType<string> = never,
+    DropInfoTypes extends string = never,
+    DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never
+>(props: React.PropsWithChildren<iProps<DragItemType, DropInfoTypes, DropInfoItemTypes>>) {
+
+    const { drag, drop, dragDropRef } = useDragDropContext(props);
+
+    const classNames: string[] = isNullOrEmptyString(props.className) ? [] : props.className.split(' ');
+    if (drag.isDragging && props.onDraggingClassName) classNames.push(props.onDraggingClassName);
+    if (drop.isOver && props.onDragOverClassName) classNames.push(props.onDragOverClassName);
+
+    return <div {...(props || {})} ref={dragDropRef} className={classNames.join(' ')}>{props.children}</div>;
+}

package/src/helpers/drag-drop/drag-drop-context.tsx

@@ -0,0 +1,67 @@
+import { isNullOrUndefined } from "@kwiz/common";
+import React, { useContext } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useStateEX } from "../hooks";
+import { iDraggableProps, iDraggedItemType, useDraggable } from "./use-draggable";
+import useDroppable, { iDroppableProps } from "./use-droppable";
+
+export interface iDragDropContext {
+    isDragging: boolean;
+    setIsDragging: (value: boolean) => void;
+}
+//create context
+export const DragDropContext = React.createContext<iDragDropContext>(null);
+//use context from within controls
+export function useDragDropContextInternal() {
+    const dragDropContext = useContext(DragDropContext);
+    return dragDropContext;
+}
+export function useDragDropContext<
+    DragItemType extends iDraggedItemType<string> = never,
+    DropInfoType extends iDroppableProps<string, any> = never
+>(info: {
+    dragInfo?: iDraggableProps<DragItemType>;
+    dropInfo?: DropInfoType;
+}) {
+    const dragDropContext = useDragDropContextInternal();
+    const isDraggable = !isNullOrUndefined(info.dragInfo);
+    const isDroppable = !isNullOrUndefined(info.dropInfo);
+    const drag = useDraggable(info?.dragInfo);
+    const drop = useDroppable(info?.dropInfo);
+    const acceptDrops = isDroppable && !drag.isDragging && dragDropContext.isDragging;
+
+    return {
+        dragDropContext,
+        drag,
+        drop,
+        dragDropRef: isDraggable && !isDroppable
+            ? drag.dragRef
+            : !isDraggable && isDroppable
+                ? drop.dropRef
+                //both drag and drop allowed
+                : acceptDrops ? drop.dropRef : drag.dragRef
+    };
+}
+export function useDragDropContextProvider(): iDragDropContext {
+    const [isDragging, setIsDragging] = useStateEX(false);
+
+    //build context
+    const ctx: iDragDropContext = {
+        isDragging, setIsDragging
+    };
+
+
+    return ctx;
+}
+
+interface iProps {
+}
+export const DragDropContextProvider: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
+    const provider = useDragDropContextProvider();
+    return <DragDropContext.Provider value={provider}>
+        <DndProvider backend={HTML5Backend}>
+            {props.children}
+        </DndProvider>
+    </DragDropContext.Provider>;
+}

package/src/helpers/drag-drop/exports.ts

@@ -0,0 +1,4 @@
+export { DragDropContainer } from './drag-drop-container';
+export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
+export type { iDraggedItemType } from "./use-draggable";
+export type { iDroppableProps } from "./use-droppable";

package/src/helpers/drag-drop/readme.md

@@ -0,0 +1,76 @@
+Use drag drop with types examples:
+
+Wrap everything within drag/drop context:
+```tsx
+<DragDropContextProvider>
+...
+</DragDropContextProvider>
+```
+
+Define the types you want to allow drag/drop:
+```tsx
+export type dragColumnType = "column";
+export type dragCellType = "cell";
+export interface dragColumn extends iDraggedItemType<dragColumnType> {
+    data: iDesignerContextFields
+}
+
+export interface dragCell extends iDraggedItemType<dragCellType> {
+    row: number;
+    cell: number;
+}
+export interface dropCellOrColumn extends iDroppableProps<dragColumnType | dragCellType, dragColumn | dragCell> {
+}
+```
+
+use within a control:
+```tsx
+    const { drag, drop, dragDropRef } = useDragDropContext<
+        dragCell, dropCellOrColumn
+    >({
+        dragInfo: {
+            item: {
+                type: "cell",
+                cell: props.index,
+                row: props.rowIndex
+            },
+        },
+        dropInfo: {
+            acceptTypes: ["cell", "column"],
+            onItemDrop: item => {
+                switch (item.type) {
+                    case "cell":
+                        alert(item.cell);
+                        break;
+                    case "column":
+                        alert(item.data.title);
+                        break;
+                }
+            }
+        }
+    });
+
+...
+
+<Section css={[
+        drop.isOver && classes.hover,
+        drag.isDragging && classes.dragging
+        ]}
+        ref={dragDropRef}>
+        ...
+</Section>
+```
+
+Use with a wrapper:
+
+```tsx
+<DragDropContainer<dragColumn>
+    dragInfo={{
+        item: {
+            type: "column",
+            data: f
+        }
+    }}>
+<ButtonEX  ... />
+</DragDropContainer>
+```

package/src/helpers/drag-drop/use-draggable.ts

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { ConnectDragSource, DragSourceMonitor, useDrag } from 'react-dnd';
+import { useDragDropContextInternal } from './drag-drop-context';
+
+export interface iDraggedItemType<DragType extends string> {
+    type: DragType;
+}
+export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
+    item: ItemType;
+    onBeginDrag?: () => void;
+    onEndDrag?: (dropResult: any) => void;
+}
+
+export function useDraggable<ItemType extends iDraggedItemType<string>>(props?: iDraggableProps<ItemType>): {
+    isDragging: boolean;
+    dragRef: ConnectDragSource
+} {
+    const {
+        item,
+        onBeginDrag,
+        onEndDrag,
+    } = props || {
+        item: {
+            type: "~invalid~"
+        }
+    };
+
+    const dragDropContext = useDragDropContextInternal();
+
+    const [{ isDragging }, dragRef] = useDrag(
+        () => ({
+            type: item.type,
+            item,
+            collect: (monitor: DragSourceMonitor) => ({
+                isDragging: monitor.isDragging(),
+            }),
+            end: (item, monitor) => {
+                dragDropContext.setIsDragging(false);
+                onEndDrag && onEndDrag(monitor.getDropResult());
+            },
+        }),
+        [item, item.type]
+    );
+
+    useEffect(() => {
+        if (isDragging) {
+            dragDropContext.setIsDragging(true);
+            onBeginDrag && onBeginDrag();
+        }
+    }, [isDragging, onBeginDrag])
+
+    return {
+        isDragging,
+        dragRef,
+    };
+}

package/src/helpers/drag-drop/use-droppable.ts

@@ -0,0 +1,48 @@
+import { ConnectDropTarget, DropTargetMonitor, useDrop } from 'react-dnd';
+import { iDraggedItemType } from './use-draggable';
+
+export interface iDroppableProps<DropTypes extends string, ItemTypes extends iDraggedItemType<DropTypes>> {
+    acceptTypes: DropTypes[];
+    onItemDrop: (item: ItemTypes) => void;
+    onHover?: (item: ItemTypes) => void;
+    onDrop?: () => void;
+}
+
+function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
+    canDrop: boolean;
+    isOver: boolean;
+    dropRef: ConnectDropTarget;
+} {
+    const {
+        acceptTypes,
+        onItemDrop,
+        onHover,
+        onDrop,
+    } = props || {
+        acceptTypes: [],
+        onItemDrop: () => { }
+    };
+
+    const [{ canDrop, isOver }, dropRef] = useDrop({
+        accept: acceptTypes,
+        drop: (item: ItemType) => {
+            onItemDrop(item);
+            onDrop?.();
+        },
+        hover: (item: ItemType) => {
+            onHover?.(item);
+        },
+        collect: (monitor: DropTargetMonitor) => ({
+            canDrop: monitor.canDrop(),
+            isOver: monitor.isOver(),
+        }),
+    });
+
+    return {
+        canDrop,
+        isOver,
+        dropRef,
+    };
+}
+
+export default useDroppable;

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './controls/vertical';
 export * from './controls/vertical-content';
 export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
 export type { iKWIZFluentContext } from './helpers/context';
+export * from './helpers/drag-drop/exports';
 export * from './helpers/hooks';
 export { KnownClassNames } from './styles/styles';