@vuu-ui/vuu-layout 0.5.10 → 0.5.11

package/src/layout-action.ts

@@ -1,21 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/src/layout-header/Header.tsx

@@ -1,216 +0,0 @@
-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

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

package/src/layout-provider/LayoutProvider.tsx

@@ -1,161 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/src/layout-provider/useLayoutDragDrop.ts

@@ -1,210 +0,0 @@
-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;
-};