publ-echo 0.0.1

package/src/lib/GridLayoutEditor/ResponsiveGridLayout.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Breakpoint,
+  Breakpoints,
+  Layout,
+  ResponsiveGridLayoutProps,
+  ResponsiveGridLayoutStateType,
+} from "./types";
+import {
+  cloneLayout,
+  noop,
+  synchronizeLayoutWithChildren,
+} from "./utils/renderHelpers";
+import {
+  findOrGenerateResponsiveLayout,
+  getBreakpointFromWidth,
+  getColsFromBreakpoint,
+} from "./utils/responsiveUtils";
+import { isEqual } from "lodash";
+import { PropsWithChildren } from "../../utils/types";
+import ReactGridLayout from "./ReactGridLayout";
+
+/**
+ * Get a value of margin or containerPadding.
+ *
+ * @param  {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
+ * @param  {String} breakpoint   Breakpoint: lg, md, sm, xs and etc.
+ * @return {Array}
+ */
+function getIndentationValue<T extends [number, number]>(
+  param: Record<string, T> | T,
+  breakpoint: Breakpoint
+): T {
+  return Array.isArray(param) ? param : param[breakpoint];
+}
+
+export const ResponsiveGridLayout = ({
+  children,
+  ...props
+}: PropsWithChildren<ResponsiveGridLayoutProps>) => {
+  const {
+    breakpoint,
+    compactType,
+    breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+    cols = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+    containerPadding = {},
+    layouts = {},
+    width = 0,
+    margin = [10, 10],
+    onBreakpointChange = noop,
+    onLayoutChange = noop,
+    onWidthChange = noop,
+    ...restProps
+  } = props;
+
+  const [prevProps, setPrevProps] = useState<{
+    width: number;
+    breakpoints: Breakpoints<Breakpoint>;
+    cols: Record<Breakpoint, number>;
+  }>({ width, breakpoints, cols });
+
+  const generateInitialState = (): ResponsiveGridLayoutStateType => {
+    const breakpoint = getBreakpointFromWidth(breakpoints, width);
+    const colNo = getColsFromBreakpoint(breakpoint, cols);
+    const compactType = props.compactType;
+    const initialLayout = findOrGenerateResponsiveLayout(
+      layouts,
+      breakpoints,
+      breakpoint,
+      breakpoint,
+      colNo,
+      compactType || "vertical",
+      false
+    );
+
+    return {
+      layout: initialLayout,
+      layouts,
+      breakpoint: breakpoint,
+      cols: colNo,
+    };
+  };
+
+  const [state, setState] = useState<ResponsiveGridLayoutStateType>(() =>
+    generateInitialState()
+  );
+  const emittedBreakpointChangeOnce = useRef(breakpoint != null);
+
+  useEffect(() => {
+    if (!state || !isEqual(state.layouts, layouts)) {
+      setState(generateInitialState());
+    }
+  }, [layouts]);
+
+  useEffect(() => {
+    onWidthChangeHandler();
+  }, [width, breakpoint, JSON.stringify(breakpoints), cols]);
+
+  const onLayoutChangeHandler: (layout: Layout) => void = (layout: Layout) => {
+    const newLayouts = {
+      ...layouts,
+      [state.breakpoint]: layout,
+    };
+
+    setState({
+      breakpoint: state.breakpoint,
+      cols: state.cols,
+      layout,
+      layouts: newLayouts,
+    });
+
+    onLayoutChange({
+      layout,
+      layouts: newLayouts,
+    });
+  };
+
+  const onWidthChangeHandler = () => {
+    const newBreakpoint =
+      breakpoint || getBreakpointFromWidth(breakpoints, width);
+
+    const lastBreakpoint = state.breakpoint;
+    const newCols: number = getColsFromBreakpoint(newBreakpoint, cols);
+    const newLayouts = { ...layouts };
+
+    if (
+      !emittedBreakpointChangeOnce.current ||
+      lastBreakpoint !== newBreakpoint ||
+      !isEqual(prevProps.breakpoints, breakpoints) ||
+      !isEqual(prevProps.cols, cols)
+    ) {
+      emittedBreakpointChangeOnce.current = true;
+
+      if (!(lastBreakpoint in newLayouts)) {
+        newLayouts[lastBreakpoint] = cloneLayout(state.layout);
+      }
+
+      const newBreakpointIsBiggerOrEqual =
+        lastBreakpoint === newBreakpoint ||
+        breakpoints[newBreakpoint] > breakpoints[lastBreakpoint];
+
+      const isNewLayout = layouts[newBreakpoint] == null;
+
+      let overlap =
+        !!props.allowOverlap && (!isNewLayout || newBreakpointIsBiggerOrEqual); //  allow resize overlap only if we are going into a larger screen
+
+      let layout = findOrGenerateResponsiveLayout(
+        newLayouts,
+        breakpoints,
+        newBreakpoint,
+        lastBreakpoint,
+        newCols,
+        compactType || "vertical",
+        overlap
+      );
+
+      layout = synchronizeLayoutWithChildren(
+        layout,
+        children,
+        newCols,
+        compactType || "vertical",
+        overlap
+      );
+
+      newLayouts[newBreakpoint] = layout;
+
+      setState({
+        breakpoint: newBreakpoint,
+        layout: layout,
+        layouts: newLayouts,
+        cols: newCols,
+      });
+
+      onLayoutChange({ layout, layouts: newLayouts });
+      onBreakpointChange(newBreakpoint, newCols);
+    }
+
+    setPrevProps({ breakpoints, cols, width: width });
+
+    let modifiedMargin = getIndentationValue(margin, newBreakpoint);
+
+    const containerPaddingModified = getIndentationValue(
+      containerPadding,
+      newBreakpoint
+    );
+
+    onWidthChange(width, modifiedMargin!, newCols, containerPaddingModified);
+  };
+
+  return (
+    <ReactGridLayout
+      {...restProps}
+      children={children}
+      width={width}
+      margin={getIndentationValue(margin, state.breakpoint)}
+      containerPadding={getIndentationValue(containerPadding, state.breakpoint)}
+      onLayoutChange={onLayoutChangeHandler}
+      layout={state.layout}
+      cols={state.cols}
+    />
+  );
+};
+
+export default ResponsiveGridLayout;

package/src/lib/GridLayoutEditor/index.ts

@@ -0,0 +1,9 @@
+export { ResponsiveGridLayout as ResponsiveGridEditor } from "./ResponsiveGridLayout";
+export { default as GridEditor } from "./ReactGridLayout";
+export type {
+  Breakpoint,
+  Breakpoints,
+  DefaultBreakpoints,
+  OnLayoutChangeCallback,
+  ResponsiveLayout,
+} from "./types";

package/src/lib/GridLayoutEditor/styles/styles.css

@@ -0,0 +1,133 @@
+.react-grid-layout {
+  position: relative;
+}
+.react-grid-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.react-grid-item img {
+  pointer-events: none;
+  user-select: none;
+}
+
+.react-grid-item.isResizing {
+  visibility: hidden;
+}
+
+.react-grid-item.react-draggable.isDragging {
+  visibility: hidden;
+}
+
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
+.react-grid-item.static::after {
+  content: "this is static, can't drag";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: red;
+}
+
+/* .react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-grid-item.react-draggable.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+} */
+
+.react-grid-item.placeholder {
+  z-index: 9999;
+  background-color: blue;
+  opacity: 0.5;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+/* .react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+} */
+
+.react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+
+/* .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+} */

package/src/lib/GridLayoutEditor/types.ts

@@ -0,0 +1,199 @@
+import { DragEvent, ReactElement, RefObject } from "react";
+import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
+import { ResizeEventType } from "../GridItem/types";
+
+export type CompactType = "vertical" | "horizontal";
+
+export type LayoutItem = {
+  w: number;
+  h: number;
+  x: number;
+  y: number;
+  z?: number;
+  i: string;
+  minW?: number;
+  minH?: number;
+  maxW?: number;
+  maxH?: number;
+  moved?: boolean;
+  static?: boolean;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+  resizeHandles?: ResizeHandleAxis[];
+  isBounded?: boolean;
+};
+
+export type Layout = LayoutItem[];
+
+export type DroppedEvent = {
+  layout: Layout;
+  item?: LayoutItem;
+  event?: DragEvent<HTMLDivElement>;
+};
+
+export type ReactGridLayoutProps = {
+  children: ReactElement<any> | ReactElement[];
+  className?: string;
+  style?: Object;
+  width?: number;
+  autoSize?: boolean;
+  cols: number;
+  draggableCancel?: string;
+  draggableHandle?: string;
+  verticalCompact?: boolean;
+  compactType?: CompactType;
+  layout: Layout;
+  margin: [number, number];
+  containerPadding?: [number, number] | null;
+  rowHeight: number;
+  maxRows?: number;
+  isBounded?: boolean;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+  isDroppable?: boolean;
+  preventCollision?: boolean;
+  useCSSTransforms?: boolean;
+  transformScale?: number;
+  droppingItem?: Partial<LayoutItem>;
+  resizeHandles?: ResizeHandleAxis[];
+  resizeHandle?: ResizeHandleType;
+  allowOverlap?: boolean;
+  onLayoutChange?: (layout: Layout) => void;
+  onDrag?: EventCallback;
+  onDragStart?: EventCallback;
+  onDragStop?: EventCallback;
+  onResize?: EventCallback;
+  onResizeStart?: EventCallback;
+  onResizeStop?: EventCallback;
+  onDropDragOver?: (
+    e: DragOverEvent
+  ) => ({ w?: number; h?: number } | false) | null;
+  onDrop?: (
+    layout: Layout,
+    item: LayoutItem | null,
+    e: ResizeEventType
+  ) => void;
+  // onDrop?: (layout: Layout, item: LayoutItem | null, e: Event) => void;
+  isHiddenVisibility?: boolean;
+  innerRef?: RefObject<HTMLDivElement>;
+};
+
+export type DragOverEvent = MouseEvent & {
+  nativeEvent: {
+    layerX: number;
+    layerY: number;
+  } & Event;
+};
+
+export type EventCallback = (properties: {
+  layout: Layout;
+  prev?: LayoutItem;
+  item?: LayoutItem;
+  placeholder?: LayoutItem;
+  e?: ResizeEventType;
+  node?: HTMLElement;
+}) => void;
+
+export type RowHeight = number | ((width: number) => number);
+
+export type Position = {
+  left: number;
+  top: number;
+  z?: number;
+  width: number;
+  height: number;
+};
+
+export type PositionParams = {
+  margin: [number, number];
+  containerPadding: [number, number];
+  containerWidth: number;
+  cols: number;
+  rowHeight: RowHeight;
+  maxRows: number;
+};
+
+// ResponsiveGridLayout
+export type ResponsiveGridLayoutStateType = {
+  breakpoint: string;
+  cols: number;
+  layout: Layout;
+  layouts?: ResponsiveLayout<string>;
+};
+
+type CoreType = Omit<
+  ReactGridLayoutProps,
+  | "cols"
+  | "layout"
+  | "margin"
+  | "containerPadding"
+  | "transformScale"
+  | "onLayoutChange"
+  | "isHiddenVisibility"
+>;
+
+export type ResponsiveGridLayoutProps = {
+  breakpoint?: Breakpoint;
+  breakpoints?: Breakpoints<Breakpoint>;
+  cols?: Record<Breakpoint, number>;
+  layouts?: ResponsiveLayout<Breakpoint>;
+  margin?: Record<Breakpoint, [number, number]> | [number, number] | undefined;
+  containerPadding?:
+    | Record<Breakpoint, [number, number]>
+    | [number, number]
+    | undefined;
+  onBreakpointChange?: OnBreakpointChangeCallback;
+  onLayoutChange?: OnLayoutChangeCallback;
+  onWidthChange?: OnWidthChangeCallback;
+} & CoreType;
+
+// type Modify<T, R> = Omit<T, keyof R> & R;
+
+// export type ResponsiveGridLayoutProps<Breakpoint extends string = string> =
+//   Modify<
+//     ReactGridLayoutProps,
+//     {
+//       // Responsive config
+//       breakpoint?: Breakpoint;
+//       breakpoints: Breakpoints<Breakpoint>;
+//       cols: Record<Breakpoint, number>;
+//       layouts: ResponsiveLayout<Breakpoint>;
+//       width: number;
+//       margin?:
+//         | Record<Breakpoint, [number, number]>
+//         | [number, number]
+//         | undefined;
+//       containerPadding?:
+//         | Record<Breakpoint, [number, number]>
+//         | [number, number]
+//         | undefined;
+
+//       // Callbacks
+//       onBreakpointChange: OnBreakpointChangeCallback;
+//       onLayoutChange: OnLayoutChangeCallback;
+//       onWidthChange: OnWidthChangeCallback;
+//     }
+//   >;
+
+export type Breakpoint = string;
+export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
+
+export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
+export type Breakpoints<T extends Breakpoint> = Record<T, number>;
+
+export type OnLayoutChangeCallback = (properties: {
+  layout: Layout;
+  layouts: ResponsiveLayout<Breakpoint>;
+}) => void;
+
+export type OnBreakpointChangeCallback = (
+  breakpoint: Breakpoint,
+  cols: number
+) => void;
+
+export type OnWidthChangeCallback = (
+  containerWidth: number,
+  margin: [number, number],
+  cols: number,
+  containerPadding?: [number, number]
+) => void;