@vuu-ui/vuu-layout 0.5.14 → 0.5.15

package/src/layout-action.ts

@@ -0,0 +1,21 @@
+export const Action = {
+  ADD: 'add',
+  BLUR: 'blur',
+  BLUR_SPLITTER: 'blur-splitter',
+  DRAG_START: 'drag-start',
+  DRAG_STARTED: 'drag-started',
+  DRAG_DROP: 'drag-drop',
+  FOCUS: 'focus',
+  FOCUS_SPLITTER: 'focus-splitter',
+  INITIALIZE: 'initialize',
+  MAXIMIZE: 'maximize',
+  MINIMIZE: 'minimize',
+  REMOVE: 'remove',
+  REPLACE: 'replace',
+  RESTORE: 'restore',
+  SAVE: 'save',
+  SET_TITLE: 'set-title',
+  SPLITTER_RESIZE: 'splitter-resize',
+  SWITCH_TAB: 'switch-tab',
+  TEAR_OUT: 'tear-out'
+};

package/src/layout-header/ActionButton.tsx

@@ -0,0 +1,23 @@
+import classnames from 'classnames';
+import { HTMLAttributes, MouseEvent } from 'react';
+
+export interface ActionButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
+  actionId: 'maximize' | 'minimize' | 'restore' | 'tearout';
+  iconName?: string;
+  onClick: (evt: MouseEvent, actionId: 'maximize' | 'minimize' | 'restore' | 'tearout') => void;
+}
+
+const ActionButton = ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => {
+  const handleClick = (evt: MouseEvent) => {
+    onClick(evt, actionId);
+  };
+  return (
+    <button
+      {...props}
+      className={classnames('ActionButton', className)}
+      onClick={handleClick}
+      title="Close View"></button>
+  );
+};
+
+export default ActionButton;

package/src/layout-header/Header.css

@@ -0,0 +1,8 @@
+.vuuHeader {
+  --saltToolbar-background: var(--salt-container-tertiary-background);
+}
+
+.salt-density-high .vuuHeader {
+--saltToolbarField-marginTop: 0;
+}
+

package/src/layout-header/Header.tsx

@@ -0,0 +1,216 @@
+import classnames from "classnames";
+import React, {
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  useRef,
+  useState
+} from "react";
+import { Contribution, useViewDispatch } from "../layout-view";
+
+import {
+  EditableLabel,
+  Toolbar,
+  ToolbarButton,
+  ToolbarField,
+  Tooltray
+} from "@heswell/salt-lab";
+import { CloseIcon } from "@salt-ds/icons";
+
+import "./Header.css";
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  collapsed?: boolean;
+  contributions?: Contribution[];
+  expanded?: boolean;
+  closeable?: boolean;
+  onEditTitle: (value: string) => void;
+  orientation?: "horizontal" | "vertical";
+  tearOut?: boolean;
+}
+
+export const Header = ({
+  className: classNameProp,
+  contributions,
+  collapsed,
+  closeable,
+  onEditTitle,
+  orientation: orientationProp = "horizontal",
+  style,
+  title = "Untitled",
+}: HeaderProps) => {
+  const labelFieldRef = useRef<HTMLDivElement>(null);
+  const [value, setValue] = useState<string>(title);
+  const [editing, setEditing] = useState<boolean>(false);
+
+  const viewDispatch = useViewDispatch();
+  const handleClose = (evt: MouseEvent) =>
+    viewDispatch?.({ type: "remove" }, evt);
+  const classBase = "vuuHeader";
+
+  const handleTitleMouseDown = () => {
+    labelFieldRef.current?.focus();
+  };
+
+  const handleButtonMouseDown = (evt: MouseEvent) => {
+    // do not allow drag to be initiated
+    evt.stopPropagation();
+  };
+
+  const orientation = collapsed || orientationProp;
+
+  const className = classnames(
+    classBase,
+    classNameProp,
+    `${classBase}-${orientation}`
+  );
+
+  const handleEnterEditMode = () => {
+    setEditing(true);
+  };
+
+  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {
+    if (evt.key === "Enter") {
+      setEditing(true);
+    }
+  };
+
+  const handleExitEditMode = (
+    originalValue = "",
+    finalValue = "",
+    allowDeactivation = true,
+    editCancelled = false
+  ) => {
+    setEditing(false);
+    if (editCancelled) {
+      setValue(originalValue);
+    } else if (finalValue !== originalValue) {
+      setValue(finalValue);
+      onEditTitle?.(finalValue);
+    }
+    if (allowDeactivation === false) {
+      labelFieldRef.current?.focus();
+    }
+  };
+
+  const handleMouseDown = (e: MouseEvent) => {
+    viewDispatch?.({ type: "mousedown" }, e);
+  };
+
+  const toolbarItems: ReactElement[] = [];
+  const contributedItems: ReactElement[] = [];
+  const actionButtons: ReactElement[] = [];
+
+  title &&
+    toolbarItems.push(
+      <ToolbarField className="vuuHeader-title" key="title">
+        <EditableLabel
+          editing={editing}
+          key="title"
+          value={value}
+          onChange={setValue}
+          onMouseDownCapture={handleTitleMouseDown}
+          onEnterEditMode={handleEnterEditMode}
+          onExitEditMode={handleExitEditMode}
+          onKeyDown={handleTitleKeyDown}
+          ref={labelFieldRef}
+          tabIndex={0}
+        />
+      </ToolbarField>
+    );
+
+  contributions?.forEach((contribution, i) => {
+    contributedItems.push(React.cloneElement(contribution.content, { key: i }));
+  });
+
+  closeable &&
+    actionButtons.push(
+      <ToolbarButton
+        key="close"
+        onClick={handleClose}
+        onMouseDown={handleButtonMouseDown}
+      >
+        <CloseIcon /> Close
+      </ToolbarButton>
+    );
+
+  contributedItems.length > 0 &&
+    toolbarItems.push(
+      <Tooltray data-align-end key="contributions">
+        {contributedItems}
+      </Tooltray>
+    );
+
+  actionButtons.length > 0 &&
+    toolbarItems.push(
+      <Tooltray data-align-end key="actions">
+        {actionButtons}
+      </Tooltray>
+    );
+
+  return (
+    <Toolbar
+      className={className}
+      orientation={orientationProp}
+      style={style}
+      onMouseDown={handleMouseDown}
+    >
+      {toolbarItems}
+      {/* 
+      {collapsed === false ? (
+        <ActionButton
+          aria-label="Minimize View"
+          actionId="minimize"
+          iconName="minimize"
+          onClick={handleAction}
+          onMouseDown={handleButtonMouseDown}
+        />
+      ) : null}
+      {collapsed ? (
+        <ActionButton
+          aria-label="Restore View"
+          actionId="restore"
+          iconName="double-chevron-right"
+          onClick={handleAction}
+          onMouseDown={handleButtonMouseDown}
+        />
+      ) : null}
+      {expanded === false ? (
+        <ActionButton
+          aria-label="Maximize View"
+          actionId="maximize"
+          iconName="maximize"
+          onClick={handleAction}
+          onMouseDown={handleButtonMouseDown}
+        />
+      ) : null}
+      {expanded ? (
+        <ActionButton
+          aria-label="Restore View"
+          actionId="restore"
+          iconName="restore"
+          onClick={handleAction}
+          onMouseDown={handleButtonMouseDown}
+        />
+      ) : null}
+      {tearOut ? (
+        <ActionButton
+          aria-label="Tear out View"
+          actionId="tearout"
+          iconName="tear-out"
+          onClick={handleAction}
+          onMouseDown={handleButtonMouseDown}
+        />
+      ) : null}
+      {closeable ? (
+        <Button
+          aria-label="close"
+          data-icon
+          onClick={handleClose}
+          onMouseDown={handleButtonMouseDown}
+        />
+      ) : null} */}
+    </Toolbar>
+  );
+};

package/src/layout-header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

package/src/layout-provider/LayoutProvider.tsx

@@ -0,0 +1,161 @@
+import {
+  MutableRefObject,
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  LayoutActionType,
+  layoutFromJson,
+  LayoutJSON,
+  layoutReducer,
+  LayoutReducerAction,
+  layoutToJSON,
+  processLayoutElement
+} from "../layout-reducer";
+import { findTarget, getChildProp, getProps, typeOf } from "../utils";
+import {
+  LayoutProviderContext,
+  LayoutProviderDispatch
+} from "./LayoutProviderContext";
+import { useLayoutDragDrop } from "./useLayoutDragDrop";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const withDropTarget = (props: any) => props.dropTarget;
+const shouldSave = (action: LayoutReducerAction) =>
+  [
+    "drag-drop",
+    "remove",
+    "set-title",
+    "splitter-resize",
+    "switch-tab",
+  ].includes(action.type);
+
+type LayoutChangeHandler = (layout: LayoutJSON, source: string) => void;
+
+export interface LayoutProviderProps {
+  children: ReactElement;
+  layout?: LayoutJSON;
+  onLayoutChange?: LayoutChangeHandler;
+}
+
+export const LayoutProviderVersion = () => {
+  const version = useLayoutProviderVersion();
+  return <div>{`Context: ${version} `}</div>;
+};
+
+export const LayoutProvider = (props: LayoutProviderProps): ReactElement => {
+  const { children, layout, onLayoutChange } = props;
+  const state = useRef<ReactElement | undefined>(undefined);
+  const childrenRef = useRef<ReactElement>(children);
+
+  const [, forceRefresh] = useState<unknown>(null);
+
+  const serializeState = useCallback(
+    (source) => {
+      if (onLayoutChange) {
+        const targetContainer =
+          findTarget(source, withDropTarget) || state.current;
+        const isDraggableLayout = typeOf(targetContainer) === "DraggableLayout";
+        const target = isDraggableLayout
+          ? getProps(targetContainer).children[0]
+          : targetContainer;
+        const serializedModel = layoutToJSON(target);
+        onLayoutChange(serializedModel, "drag-root");
+      }
+    },
+    [onLayoutChange]
+  );
+
+  const dispatchLayoutAction = useCallback(
+    (action: LayoutReducerAction, suppressSave = false) => {
+      const nextState = layoutReducer(state.current as ReactElement, action);
+      if (nextState !== state.current) {
+        state.current = nextState;
+        forceRefresh({});
+        if (!suppressSave && shouldSave(action)) {
+          serializeState(nextState);
+        }
+      }
+    },
+    [serializeState]
+  );
+
+  const layoutActionDispatcher: LayoutProviderDispatch = useCallback(
+    (action) => {
+      switch(action.type) {
+        case "drag-start": {
+          prepareToDragLayout(action); break
+        }
+        case "save": {
+          serializeState(state.current); break
+        }
+        default: {
+          dispatchLayoutAction(action); break
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatchLayoutAction, serializeState]
+  );
+
+  const prepareToDragLayout = useLayoutDragDrop(
+    state as MutableRefObject<ReactElement>,
+    layoutActionDispatcher
+  );
+
+  useEffect(() => {
+    if (layout) {
+      const targetContainer = findTarget(
+        state.current as never,
+        withDropTarget
+      ) as ReactElement;
+      const target = getChildProp(targetContainer);
+      const newLayout = layoutFromJson(
+        layout,
+        `${targetContainer.props.path}.0`
+      );
+      const action = target
+        ? {
+            type: LayoutActionType.REPLACE,
+            target,
+            replacement: newLayout,
+          }
+        : {
+            type: LayoutActionType.ADD,
+            path: targetContainer.props.path,
+            component: newLayout,
+          };
+      dispatchLayoutAction(action, true);
+    }
+  }, [dispatchLayoutAction, layout]);
+
+  if (state.current === undefined) {
+    state.current = processLayoutElement(children);
+  } else if (children !== childrenRef.current) {
+    state.current = processLayoutElement(children, state.current);
+    childrenRef.current = children;
+  }
+
+  return (
+    <LayoutProviderContext.Provider
+      value={{ dispatchLayoutProvider: layoutActionDispatcher, version: 0 }}
+    >
+      {state.current}
+    </LayoutProviderContext.Provider>
+  );
+};
+
+export const useLayoutProviderDispatch = () => {
+  const { dispatchLayoutProvider } = useContext(LayoutProviderContext);
+  return dispatchLayoutProvider;
+};
+
+export const useLayoutProviderVersion = () => {
+  console.log({ LayoutProviderContext });
+  const { version } = useContext(LayoutProviderContext);
+  return version;
+};

package/src/layout-provider/LayoutProviderContext.ts

@@ -0,0 +1,17 @@
+import { createContext, Dispatch } from 'react';
+import { DragStartAction, LayoutReducerAction, SaveAction } from '../layout-reducer';
+
+const unconfiguredLayoutProviderDispatch: LayoutProviderDispatch = (action) =>
+  console.log(`dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`);
+
+export type LayoutProviderDispatch = Dispatch<LayoutReducerAction | SaveAction | DragStartAction>;
+
+export interface LayoutProviderContextProps {
+  dispatchLayoutProvider: LayoutProviderDispatch;
+  version: number;
+}
+
+export const LayoutProviderContext = createContext<LayoutProviderContextProps>({
+  dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,
+  version: -1
+});

package/src/layout-provider/index.ts

@@ -0,0 +1,3 @@
+export * from './LayoutProvider';
+export * from './LayoutProviderContext';
+

package/src/layout-provider/useLayoutDragDrop.ts

@@ -0,0 +1,210 @@
+import { MutableRefObject, ReactElement, useCallback, useRef } from "react";
+import {
+  DragDropRect,
+  DragEndCallback,
+  Draggable,
+  DragInstructions
+} from "../drag-drop";
+import { DragStartAction } from "../layout-reducer";
+import { getIntrinsicSize } from "../layout-reducer/flexUtils";
+import { followPath } from "../utils";
+import { LayoutProviderDispatch } from "./LayoutProviderContext";
+
+const NO_INSTRUCTIONS = {} as DragInstructions;
+const NO_OFFSETS: [number, number] = [0, 0];
+
+interface CurrentDragAction extends Omit<DragStartAction, "evt" | "type"> {
+  dragContainerPath: string;
+}
+
+interface DragOperation {
+  payload: ReactElement;
+  originalCSS: string;
+  dragRect: unknown;
+  dragInstructions: DragInstructions;
+  dragOffsets: [number, number];
+  targetPosition: { left: number; top: number };
+}
+
+const getDragElement = (
+  rect: DragDropRect,
+  id: string,
+  dragElement?: HTMLElement
+): [HTMLElement, string, number, number] => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "vuuSimpleDraggableWrapper";
+  wrapper.classList.add(
+    "vuuSimpleDraggableWrapper",
+    "salt-theme",
+    "salt-density-medium"
+  );
+  wrapper.dataset.dragging = "true";
+
+  const div = dragElement ?? document.createElement("div");
+  div.id = id;
+
+  wrapper.appendChild(div);
+  document.body.appendChild(wrapper);
+  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;
+  return [wrapper, cssText, rect.left, rect.top];
+};
+
+const determineDragOffsets = (
+  draggedElement: HTMLElement
+): [number, number] => {
+  const { offsetParent } = draggedElement;
+  if (offsetParent === null) {
+    return NO_OFFSETS;
+  } else {
+    const { left: offsetLeft, top: offsetTop } =
+      offsetParent.getBoundingClientRect();
+    return [offsetLeft, offsetTop];
+  }
+};
+
+export const useLayoutDragDrop = (
+  rootLayoutRef: MutableRefObject<ReactElement>,
+  dispatch: LayoutProviderDispatch
+) => {
+  const dragActionRef = useRef<CurrentDragAction>();
+  const dragOperationRef = useRef<DragOperation>();
+  const draggableHTMLElementRef = useRef<HTMLElement>();
+
+  const handleDrag = useCallback((x, y) => {
+    if (dragOperationRef.current && draggableHTMLElementRef.current) {
+      const {
+        dragOffsets: [offsetX, offsetY],
+        targetPosition,
+      } = dragOperationRef.current;
+      const left = typeof x === "number" ? x - offsetX : targetPosition.left;
+      const top = typeof y === "number" ? y - offsetY : targetPosition.top;
+      if (left !== targetPosition.left || top !== targetPosition.top) {
+        dragOperationRef.current.targetPosition.left = left;
+        dragOperationRef.current.targetPosition.top = top;
+        draggableHTMLElementRef.current.style.top = top + "px";
+        draggableHTMLElementRef.current.style.left = left + "px";
+      }
+    }
+  }, []);
+
+  const handleDrop: DragEndCallback = useCallback((dropTarget) => {
+    if (dragOperationRef.current) {
+      const {
+        dragInstructions,
+        payload: draggedReactElement,
+        originalCSS,
+      } = dragOperationRef.current;
+      dispatch({
+        type: "drag-drop",
+        draggedReactElement,
+        dragInstructions,
+        dropTarget,
+      });
+
+      console.log(`[useLayoutDragDrop]`, {
+        dragInstructions,
+      });
+      if (draggableHTMLElementRef.current) {
+        if (dragInstructions.RemoveDraggableOnDragEnd) {
+          document.body.removeChild(draggableHTMLElementRef.current);
+        } else {
+          draggableHTMLElementRef.current.style.cssText = originalCSS;
+          delete draggableHTMLElementRef.current.dataset.dragging;
+        }
+      }
+
+      dragActionRef.current = undefined;
+      dragOperationRef.current = undefined;
+      draggableHTMLElementRef.current = undefined;
+    }
+  }, [dispatch]);
+
+  const handleDragStart = useCallback(
+    (evt: MouseEvent) => {
+      if (dragActionRef.current) {
+        const {
+          payload: component,
+          dragContainerPath,
+          dragElement,
+          dragRect,
+          instructions = NO_INSTRUCTIONS,
+          path,
+        } = dragActionRef.current;
+        const { current: rootLayout } = rootLayoutRef;
+        const dragPos = { x: evt.clientX, y: evt.clientY };
+        const dragPayload = component ?? followPath(rootLayout, path, true);
+        const { id: dragPayloadId } = dragPayload.props;
+        const intrinsicSize = getIntrinsicSize(dragPayload);
+        let originalCSS = "",
+          dragCSS = "",
+          dragTransform = "";
+
+        let dragStartLeft = -1;
+        let dragStartTop = -1;
+        let dragOffsets: [number, number] = NO_OFFSETS;
+
+        let element = document.getElementById(dragPayloadId);
+
+        if (element === null) {
+          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(
+            dragRect,
+            dragPayloadId,
+            dragElement
+          );
+        } else {
+          dragOffsets = determineDragOffsets(element);
+          const [offsetLeft, offsetTop] = dragOffsets;
+          const { width, height, left, top } = element.getBoundingClientRect();
+          dragStartLeft = left - offsetLeft;
+          dragStartTop = top - offsetTop;
+          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;
+          element.dataset.dragging = "true";
+          originalCSS = element.style.cssText;
+        }
+
+        dragTransform = Draggable.initDrag(
+          rootLayoutRef.current,
+          dragContainerPath,
+          dragRect,
+          dragPos,
+          {
+            drag: handleDrag,
+            drop: handleDrop,
+          },
+          intrinsicSize
+          // dropTargets
+        );
+
+        element.style.cssText = dragCSS + dragTransform;
+        draggableHTMLElementRef.current = element;
+
+        dragOperationRef.current = {
+          payload: dragPayload,
+          originalCSS,
+          dragRect,
+          dragOffsets,
+          dragInstructions: instructions,
+          targetPosition: { left: dragStartLeft, top: dragStartTop },
+        };
+      }
+    },
+    [handleDrag, handleDrop, rootLayoutRef]
+  );
+
+  const prepareToDrag = useCallback(
+    (action: DragStartAction) => {
+      const { evt, ...options } = action;
+      console.log(`prepare to drag`, {
+        options,
+      });
+      dragActionRef.current = {
+        ...options,
+        dragContainerPath: "",
+      };
+      Draggable.handleMousedown(evt, handleDragStart, options.instructions);
+    },
+    [handleDragStart]
+  );
+
+  return prepareToDrag;
+};