publ-echo 0.0.1

package/src/lib/GridLayoutEditor/ReactGridLayout.tsx

@@ -0,0 +1,662 @@
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+
+import type { ReactElement } from "react";
+import { PropsWithChildren } from "../../utils/types";
+import {
+  DragOverEvent,
+  Layout,
+  LayoutItem,
+  PositionParams,
+  ReactGridLayoutProps,
+} from "./types";
+import {
+  DroppingPosition,
+  GridDragEvent,
+  GridResizeEvent,
+} from "../GridItem/types";
+import classNames from "classnames";
+import {
+  bottom,
+  cloneLayoutItem,
+  compact,
+  getAllCollisions,
+  getLayoutItem,
+  moveElement,
+  noop,
+  synchronizeLayoutWithChildren,
+  withLayoutItem,
+} from "./utils/renderHelpers";
+import {
+  calcGridColWidth,
+  calcXY,
+  resolveRowHeight,
+} from "../GridItem/utils/calculateUtils";
+import GridItem from "../GridItem/GridItem";
+import { isEqual } from "lodash";
+
+import "./styles/styles.css";
+
+const layoutClassName = "react-grid-layout";
+
+const ReactGridLayout = ({
+  children,
+  ...props
+}: PropsWithChildren<ReactGridLayoutProps>) => {
+  const {
+    autoSize = true,
+    cols = 12,
+    className = "",
+    style = {},
+    draggableHandle = "",
+    draggableCancel = "",
+    containerPadding = undefined,
+    rowHeight = 150,
+    maxRows = Infinity,
+    margin = [10, 10],
+    isBounded = false,
+    isDraggable = true,
+    isResizable = true,
+    allowOverlap = false,
+    isDroppable = false,
+    useCSSTransforms = true,
+    transformScale = 1,
+    compactType = "vertical",
+    preventCollision = false,
+    droppingItem = {
+      i: "__dropping-elem__",
+      h: 1,
+      w: 1,
+    } as any, // TODO fix
+    resizeHandles = ["se"],
+    width = 0,
+    resizeHandle,
+    isHiddenVisibility = true,
+    innerRef,
+  } = props;
+
+  const [activeDrag, setActiveDrag] = useState<LayoutItem>();
+  const [oldDragItem, setOldDragItem] = useState<LayoutItem>();
+  const [oldLayout, setOldLayout] = useState<Layout>();
+  const [oldResizeItem, setOldResizeItem] = useState<LayoutItem>();
+  const [droppingDOMNode, setDroppingDOMNode] = useState<ReactElement>();
+  const [droppingPosition, setDroppingPosition] = useState<DroppingPosition>();
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  const [layout, setLayout] = useState<Layout>(() =>
+    synchronizeLayoutWithChildren(
+      props.layout || [],
+      children,
+      cols,
+      compactType,
+      allowOverlap
+    )
+  );
+
+  const dragEnterCounter = useRef(0);
+
+  useEffect(() => {
+    setIsMounted(true);
+    onLayoutMaybeChanged(layout, layout);
+  }, []);
+
+  useEffect(() => {
+    if (props.layout && !Array.isArray(props.layout)) {
+      console.error("Expecting layout to be an Array but got: ", props.layout);
+    }
+
+    setLayout(
+      synchronizeLayoutWithChildren(
+        props.layout || [],
+        children,
+        cols,
+        compactType,
+        allowOverlap
+      )
+    );
+  }, [props.layout]);
+
+  useEffect(() => {
+    const newLayout = synchronizeLayoutWithChildren(
+      props.layout || layout,
+      children,
+      props.cols || cols,
+      props.compactType || "vertical",
+      props.allowOverlap
+    );
+
+    setLayout(newLayout);
+  }, [children]);
+
+  /**
+   * Calculates a pixel value for the container.
+   * @return {String} Container height in pixels.
+   */
+  const containerHeight = (): string | undefined => {
+    if (!autoSize) return;
+
+    const nbRow = bottom(layout);
+    const containerPaddingY = containerPadding
+      ? containerPadding[1]
+      : margin[1];
+
+    return (
+      nbRow *
+        resolveRowHeight(rowHeight, calcGridColWidth(getPositionParams())) +
+      (nbRow - 1) * margin[1] +
+      containerPaddingY * 2 +
+      "px"
+    );
+  };
+
+  /**
+   * When dragging starts
+   * @param {String} i Id of the child
+   * @param {Number} x X position of the move
+   * @param {Number} y Y position of the move
+   * @param {Event} e The mousedown event
+   * @param {Element} node The current dragging DOM element
+   */
+  const onDragStartHandler = (
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridDragEvent
+  ) => {
+    const l = getLayoutItem(layout, i);
+
+    if (!l) return;
+
+    setOldDragItem(cloneLayoutItem(l));
+    setOldLayout(layout);
+
+    props.onDragStart &&
+      props.onDragStart({
+        layout,
+        prev: l,
+        item: l,
+        placeholder: undefined,
+        e,
+        node,
+      });
+  };
+
+  /**
+   * Each drag movement create a new dragelement and move the element to the dragged location
+   * @param {String} i Id of the child
+   * @param {Number} x X position of the move
+   * @param {Number} y Y position of the move
+   * @param {Event} e The mousedown event
+   * @param {Element} node The current dragging DOM element
+   */
+  const onDragHandler = (
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridDragEvent
+  ) => {
+    const l = getLayoutItem(layout, i);
+    if (!l) return;
+
+    const placeholder = {
+      w: l.w,
+      h: l.h,
+      x: l.x,
+      y: l.y,
+      z: l.z,
+      placeholder: true,
+      i,
+    };
+
+    const isUserAction = true;
+    let newLayout = moveElement({
+      layout,
+      l,
+      x,
+      y,
+      isUserAction,
+      preventCollision,
+      compactType,
+      cols,
+      allowOverlap,
+    });
+
+    props.onDrag &&
+      props.onDrag({
+        layout: newLayout,
+        prev: oldDragItem,
+        item: l,
+        placeholder,
+        e,
+        node,
+      });
+
+    setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
+    setActiveDrag(placeholder);
+  };
+
+  /**
+   * When dragging stops, figure out which position the element is closest to and update its x and y.
+   * @param  {String} i Index of the child.
+   * @param {Number} x X position of the move
+   * @param {Number} y Y position of the move
+   * @param {Event} e The mousedown event
+   * @param {Element} node The current dragging DOM element
+   */
+  const onDragStopHandler = (
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridDragEvent
+  ) => {
+    if (!activeDrag) return;
+
+    const l = getLayoutItem(layout, i);
+    if (!l) return;
+
+    const isUserAction = true;
+    const movedLayout = moveElement({
+      layout,
+      l,
+      x,
+      y,
+      isUserAction,
+      preventCollision,
+      compactType,
+      cols,
+      allowOverlap,
+    });
+
+    props.onDragStop &&
+      props.onDragStop({
+        layout: movedLayout,
+        prev: oldDragItem,
+        item: l,
+        placeholder: undefined,
+        e,
+        node,
+      });
+
+    const newLayout = allowOverlap
+      ? movedLayout
+      : compact(movedLayout, compactType, cols);
+    setActiveDrag(undefined);
+    setLayout(newLayout);
+    setOldDragItem(undefined);
+    setOldLayout(undefined);
+
+    props.onLayoutChange && props.onLayoutChange(newLayout);
+  };
+
+  const onLayoutMaybeChanged = (newLayout: Layout, oldLayout?: Layout) => {
+    if (!oldLayout) {
+      oldLayout = layout;
+    }
+    if (!isEqual(oldLayout, newLayout)) {
+      props.onLayoutChange && props.onLayoutChange(newLayout);
+    }
+  };
+
+  const onResizeStartHandler = (
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridResizeEvent
+  ) => {
+    const l = getLayoutItem(layout, i);
+    if (!l) return;
+
+    setOldResizeItem(cloneLayoutItem(l));
+    setOldLayout(layout);
+    props.onResizeStart &&
+      props.onResizeStart({
+        layout,
+        prev: l,
+        item: l,
+        e,
+        node,
+      });
+  };
+
+  const onResizeHandler = (
+    i: string,
+    w: number,
+    h: number,
+    { e, node }: GridResizeEvent,
+    x: number,
+    y: number
+  ) => {
+    const [newLayout, l] = withLayoutItem(layout, i, (l) => {
+      let hasCollisions;
+      if (preventCollision && !allowOverlap) {
+        const collisions = getAllCollisions(layout, {
+          ...l,
+          w: x,
+          h: y,
+        }).filter((layoutItem) => layoutItem.i !== l.i);
+        hasCollisions = collisions.length > 0;
+
+        if (hasCollisions) {
+          let leastX = Infinity,
+            leastY = Infinity;
+          collisions.forEach((layoutItem) => {
+            if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+            if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+          });
+
+          if (Number.isFinite(leastX)) l.w = leastX - l.x;
+          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+        }
+      }
+
+      if (!hasCollisions) {
+        // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
+        l.w = w;
+        l.h = h;
+        l.x = x;
+        l.y = y;
+      }
+
+      return l;
+    });
+
+    if (!l) return;
+
+    const placeholder = {
+      w: l.w,
+      h: l.h,
+      x: l.x,
+      y: l.y,
+      z: l.z,
+      static: true,
+      i: i,
+    };
+
+    props.onResize &&
+      props.onResize({
+        layout: newLayout,
+        prev: oldResizeItem,
+        item: l,
+        placeholder,
+        e,
+        node,
+      });
+
+    setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
+    setActiveDrag(placeholder);
+  };
+
+  const onResizeStopHandler = (
+    i: string,
+    x: number,
+    y: number,
+    { e, node }: GridResizeEvent
+  ) => {
+    const l = getLayoutItem(layout, i);
+    props.onResizeStop &&
+      props.onResizeStop({ layout, prev: oldResizeItem, item: l, e, node });
+
+    const newLayout = allowOverlap
+      ? layout
+      : compact(layout, compactType, cols);
+
+    setActiveDrag(undefined);
+    setLayout(newLayout);
+    setOldResizeItem(undefined);
+    setOldLayout(undefined);
+
+    onLayoutMaybeChanged(newLayout, oldLayout);
+  };
+
+  /**
+   * Create a placeholder object.
+   * @return {Element} Placeholder div.
+   */
+  const placeholder = () => {
+    if (!activeDrag) return;
+
+    // {...activeDrag} is pretty slow, actually
+
+    const l = getLayoutItem(props.layout, String(activeDrag.i));
+
+    if (!l) {
+      return null;
+    }
+
+    // NOTE: toChildren changes key
+    // LINK: https://legacy.reactjs.org/docs/react-api.html
+    const items = React.Children.toArray(children);
+
+    const item = items.find((child: any) => {
+      const originalKey = String(child.key).split(".$");
+
+      return originalKey[1] === l.i;
+    }) as React.ReactElement;
+
+    if (!item) {
+      return null;
+    }
+
+    return (
+      <GridItem
+        w={activeDrag.w}
+        h={activeDrag.h}
+        x={activeDrag.x}
+        y={activeDrag.y}
+        z={activeDrag.z || 0}
+        i={activeDrag.i}
+        className={"placeholder"}
+        containerWidth={width}
+        cols={cols}
+        margin={margin}
+        containerPadding={containerPadding || margin}
+        maxRows={maxRows}
+        rowHeight={rowHeight}
+        isDraggable={false}
+        isResizable={false}
+        isBounded={false}
+        useCSSTransforms={useCSSTransforms}
+        transformScale={transformScale}
+      >
+        {item && item}
+      </GridItem>
+    );
+  };
+
+  /**
+   * Given a grid item, set its style attributes & surround in a <Draggable>.
+   * @param  {Element} child React element.
+   * @return {Element}       Element wrapped in draggable and properly placed.
+   */
+  const processGridItem = (
+    child: ReactElement<any>,
+    isDroppingItem?: boolean
+  ): ReactElement<any> | undefined => {
+    if (!child || !child.key) return;
+    const l = getLayoutItem(layout, String(child.key));
+    if (!l) return;
+
+    const draggable =
+      typeof l.isDraggable === "boolean"
+        ? l.isDraggable
+        : !l.static && isDraggable;
+    const resizable =
+      typeof l.isResizable === "boolean"
+        ? l.isResizable
+        : !l.static && isResizable;
+    const resizeHandlesOptions = l.resizeHandles || resizeHandles;
+
+    const bounded = draggable && isBounded && l.isBounded !== false;
+
+    return (
+      <GridItem
+        containerWidth={width}
+        cols={cols}
+        margin={margin}
+        containerPadding={containerPadding || margin}
+        maxRows={maxRows}
+        rowHeight={rowHeight}
+        cancel={draggableCancel}
+        handle={draggableHandle}
+        onDragStop={onDragStopHandler}
+        onDragStart={onDragStartHandler}
+        onDrag={onDragHandler}
+        onResizeStart={onResizeStartHandler}
+        onResize={onResizeHandler}
+        onResizeStop={onResizeStopHandler}
+        isDraggable={draggable}
+        isResizable={resizable}
+        isBounded={bounded}
+        useCSSTransforms={useCSSTransforms && isMounted}
+        usePercentages={!isMounted}
+        transformScale={transformScale}
+        w={l.w}
+        h={l.h}
+        x={l.x}
+        y={l.y}
+        z={l.z || 0}
+        i={l.i}
+        minH={l.minH}
+        minW={l.minW}
+        maxH={l.maxH}
+        maxW={l.maxW}
+        static={l.static}
+        droppingPosition={isDroppingItem ? droppingPosition : undefined}
+        resizeHandles={resizeHandlesOptions}
+        resizeHandle={resizeHandle}
+        isHiddenVisibility={isHiddenVisibility}
+      >
+        {child}
+      </GridItem>
+    );
+  };
+
+  const getPositionParams = (): PositionParams => {
+    return {
+      cols,
+      margin,
+      maxRows,
+      rowHeight,
+      containerWidth: width,
+      containerPadding: containerPadding || margin,
+    };
+  };
+
+  const onDragOverHandler: React.DragEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const onDragOverResult = props.onDropDragOver?.(e as any as DragOverEvent); // TODO fix
+    if (onDragOverResult === false) {
+      if (droppingDOMNode) {
+        removeDroppingPlaceholder();
+      }
+      return false;
+    }
+    const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
+
+    const { layerX, layerY } = e.nativeEvent as any; // TODO fix
+    const droppingPosition = {
+      left: layerX / transformScale,
+      top: layerY / transformScale,
+      e,
+    };
+
+    if (!droppingDOMNode) {
+      const calculatedPosition = calcXY(
+        getPositionParams(),
+        layerY,
+        layerX,
+        finalDroppingItem.w,
+        finalDroppingItem.h
+      );
+
+      setDroppingDOMNode(<div key={finalDroppingItem.i} />);
+      setDroppingPosition(droppingPosition);
+      setLayout([
+        ...layout,
+        {
+          ...finalDroppingItem,
+          x: calculatedPosition.x,
+          y: calculatedPosition.y,
+          static: false,
+          isDraggable: true,
+        },
+      ]);
+    } else if (droppingPosition) {
+      const { left, top } = droppingPosition;
+      const shouldUpdatePosition = left != layerX || top != layerY;
+      if (shouldUpdatePosition) {
+        setDroppingPosition(droppingPosition);
+      }
+    }
+  };
+
+  const removeDroppingPlaceholder: () => void = () => {
+    const newLayout = compact(
+      layout.filter((l) => l.i !== droppingItem.i),
+      compactType,
+      cols,
+      allowOverlap
+    );
+
+    setLayout(newLayout);
+    setDroppingDOMNode(undefined);
+    setActiveDrag(undefined);
+    setDroppingPosition(undefined);
+  };
+
+  const onDragLeaveHandler: React.DragEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragEnterCounter.current = dragEnterCounter.current - 1;
+
+    if (dragEnterCounter.current === 0) {
+      removeDroppingPlaceholder();
+    }
+  };
+
+  const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragEnterCounter.current += 1;
+  };
+
+  const onDropHandler: React.DragEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const item = layout.find((l) => l.i === droppingItem.i);
+
+    dragEnterCounter.current = 0;
+
+    removeDroppingPlaceholder();
+
+    if (item) {
+      props.onDrop && props.onDrop(layout, item, e);
+    }
+  };
+
+  const mergedClassName = classNames(layoutClassName, className);
+  const mergedStyle = {
+    height: containerHeight(),
+    ...style,
+  };
+
+  return (
+    <div
+      ref={innerRef}
+      className={mergedClassName}
+      style={mergedStyle}
+      onDrop={isDroppable ? onDropHandler : noop}
+      onDragLeave={isDroppable ? onDragLeaveHandler : noop}
+      onDragEnter={isDroppable ? onDragEnterHandler : noop}
+      onDragOver={isDroppable ? onDragOverHandler : noop}
+    >
+      {React.Children.map(children, (child) => processGridItem(child))}
+      {/* TODO: 복수개의 placeholder 지원예정 */}
+      {placeholder()}
+    </div>
+  );
+};
+
+export default ReactGridLayout;