@vuu-ui/vuu-layout 0.5.4 → 0.5.6

package/src/layout-reducer/wrap-layout-element.ts

@@ -1,317 +0,0 @@
-import React, { ReactElement } from "react";
-import { uuid } from "@vuu-ui/vuu-utils";
-import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
-import { ComponentRegistry } from "../registry/ComponentRegistry";
-import {
-  createFlexbox,
-  createPlaceHolder,
-  flexDirection,
-  getFlexStyle,
-  getIntrinsicSize,
-  wrapIntrinsicSizeComponentWithFlexbox,
-} from "./flexUtils";
-import { applyLayoutProps, LayoutProps } from "./layoutUtils";
-import { LayoutModel } from "./layoutTypes";
-import { DropPos } from "../drag-drop/dragDropTypes";
-import { rectTuple } from "../common-types";
-import { DropTarget } from "../drag-drop/DropTarget";
-
-export interface LayoutSpec {
-  type: "Stack" | "Flexbox";
-  flexDirection: "column" | "row";
-  showTabs?: boolean;
-}
-
-const isHtmlElement = (component: LayoutModel) => {
-  const [firstLetter] = typeOf(component) as string;
-  return firstLetter === firstLetter.toLowerCase();
-};
-
-// newComponent has been dropped onto an existingComponent. A wrapper container will be inserted
-// into the layout tree, wrapping the existingComponent. newComponent will be injected into the
-// new wrapper, so existingComponent and newComponent will be siblings. Putting it another way,
-// wrapper will replace existingComponent in the layout tree and it will contain existingComponent
-// and newComponent.
-export function wrap(
-  container: ReactElement,
-  existingComponent: any,
-  newComponent: any,
-  pos: DropPos,
-  clientRect?: DropTarget["clientRect"],
-  dropRect?: DropTarget["dropRect"]
-): ReactElement {
-  const { children: containerChildren, path: containerPath } =
-    getProps(container);
-
-  const existingComponentPath = getProp(existingComponent, "path");
-  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);
-  const children = finalStep
-    ? updateChildren(
-        container,
-        containerChildren,
-        existingComponent,
-        newComponent,
-        pos,
-        clientRect,
-        dropRect
-      )
-    : containerChildren.map((child: ReactElement, index: number) =>
-        index === idx
-          ? wrap(
-              child,
-              existingComponent,
-              newComponent,
-              pos,
-              clientRect,
-              dropRect
-            )
-          : child
-      );
-
-  return React.cloneElement(container, undefined, children);
-}
-
-function updateChildren(
-  container: LayoutModel,
-  containerChildren: ReactElement[],
-  existingComponent: ReactElement,
-  newComponent: ReactElement,
-  pos: DropPos,
-  clientRect?: DropTarget["clientRect"],
-  dropRect?: rectTuple
-) {
-  const intrinsicSize = getIntrinsicSize(newComponent);
-
-  if (intrinsicSize?.width && intrinsicSize?.height) {
-    if (clientRect === undefined || dropRect === undefined) {
-      throw Error(
-        "wrap-layout-element, updateChildren clientRect and dropRect must both be available"
-      );
-    }
-    return wrapIntrinsicSizedComponent(
-      containerChildren,
-      existingComponent,
-      newComponent,
-      pos,
-      clientRect,
-      dropRect
-    );
-  } else {
-    return wrapFlexComponent(
-      container,
-      containerChildren,
-      existingComponent,
-      newComponent,
-      pos
-    );
-  }
-}
-
-function wrapFlexComponent(
-  container: LayoutModel,
-  containerChildren: ReactElement[],
-  existingComponent: ReactElement,
-  newComponent: ReactElement,
-  pos: DropPos
-) {
-  const { version = 0 } = getProps(newComponent);
-  const existingComponentPath = getProp(existingComponent, "path");
-  const {
-    type,
-    flexDirection,
-    showTabs: showTabsProp,
-  } = getLayoutSpecForWrapper(pos);
-  const [style, existingComponentStyle, newComponentStyle] =
-    getWrappedFlexStyles(
-      type,
-      existingComponent,
-      newComponent,
-      flexDirection,
-      pos
-    );
-  const targetFirst = isTargetFirst(pos);
-  const active = targetFirst ? 1 : 0; // double check this
-
-  // TODO how do we decide whether children should be resizable ?
-  const newComponentProps = {
-    resizeable: true,
-    style: newComponentStyle,
-    version: version + 1,
-  };
-  const resizeProp = isHtmlElement(existingComponent)
-    ? "data-resizeable"
-    : "resizeable";
-  const existingComponentProps = {
-    [resizeProp]: true,
-    style: existingComponentStyle,
-  };
-
-  const showTabs = type === "Stack" ? { showTabs: showTabsProp } : undefined;
-  const splitterSize =
-    type === "Flexbox"
-      ? {
-          splitterSize:
-            (typeOf(container) === "Flexbox" && container.props.splitterSize) ??
-            undefined,
-        }
-      : undefined;
-
-  const id = uuid();
-  var wrapper = React.createElement(
-    ComponentRegistry[type],
-    {
-      active,
-      id,
-      key: id,
-      path: getProp(existingComponent, "path"),
-      flexFill: getProp(existingComponent, "flexFill"),
-      // TODO we should be able to configure this in setDefaultLayoutProps
-      ...splitterSize,
-      ...showTabs,
-      style,
-      resizeable: getProp(existingComponent, "resizeable"),
-    } as LayoutProps,
-    targetFirst
-      ? [
-          resetPath(
-            existingComponent,
-            `${existingComponentPath}.0`,
-            existingComponentProps
-          ),
-          // resetPath(newComponent, `${existingComponentPath}.1`, newComponentProps),
-          applyLayoutProps(
-            React.cloneElement(newComponent, newComponentProps),
-            `${existingComponentPath}.1`
-          ),
-        ]
-      : [
-          applyLayoutProps(
-            React.cloneElement(newComponent, newComponentProps),
-            `${existingComponentPath}.0`
-          ),
-          // resetPath(newComponent, `${existingComponentPath}.0`, newComponentProps),
-          resetPath(
-            existingComponent,
-            `${existingComponentPath}.1`,
-            existingComponentProps
-          ),
-        ]
-  );
-  return containerChildren.map((child: ReactElement) =>
-    child === existingComponent ? wrapper : child
-  );
-}
-
-function wrapIntrinsicSizedComponent(
-  containerChildren: ReactElement[],
-  existingComponent: ReactElement,
-  newComponent: ReactElement,
-  pos: DropPos,
-  clientRect: DropTarget["clientRect"],
-  dropRect: rectTuple
-) {
-  const { flexDirection } = getLayoutSpecForWrapper(pos);
-  const contraDirection = flexDirection === "column" ? "row" : "column";
-  const targetFirst = isTargetFirst(pos);
-
-  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
-  const [startPlaceholder, endPlaceholder] =
-    flexDirection === "column"
-      ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]
-      : [dropLeft - clientRect.left, clientRect.right - dropRight];
-  const pathRoot = getProp(existingComponent, "path");
-  let pathIndex = 0;
-
-  const resizeProp = isHtmlElement(existingComponent)
-    ? "data-resizeable"
-    : "resizeable";
-
-  const wrappedChildren = [];
-  if (startPlaceholder) {
-    wrappedChildren.push(
-      targetFirst
-        ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
-            [resizeProp]: true,
-            style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 },
-          })
-        : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {
-            flexGrow: 0,
-            flexShrink: 0,
-          })
-    );
-  }
-  wrappedChildren.push(
-    wrapIntrinsicSizeComponentWithFlexbox(
-      newComponent,
-      contraDirection,
-      `${pathRoot}.${pathIndex++}`,
-      clientRect,
-      dropRect
-    )
-  );
-  if (endPlaceholder) {
-    wrappedChildren.push(
-      targetFirst
-        ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0)
-        : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {
-            [resizeProp]: true,
-            style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
-          })
-    );
-  }
-
-  const wrapper = createFlexbox(
-    flexDirection,
-    existingComponent.props,
-    wrappedChildren,
-    pathRoot
-  );
-  return containerChildren.map((child) =>
-    child === existingComponent ? wrapper : child
-  );
-}
-
-//TODO we need to respect styles on the source, full-on flex might not be appropriate
-function getWrappedFlexStyles(
-  type: string,
-  existingComponent: ReactElement,
-  newComponent: ReactElement,
-  flexDirection: flexDirection,
-  pos: DropPos
-) {
-  const style = {
-    ...existingComponent.props.style,
-    flexDirection,
-  };
-
-  const dimension =
-    type === "Flexbox" && flexDirection === "column" ? "height" : "width";
-  const newComponentStyle = getFlexStyle(newComponent, dimension, pos);
-  const existingComponentStyle = getFlexStyle(existingComponent, dimension);
-
-  return [style, existingComponentStyle, newComponentStyle];
-}
-
-const isTargetFirst = (pos: DropPos) =>
-  pos.position.SouthOrEast
-    ? true
-    : pos?.tab?.positionRelativeToTab === "before"
-    ? false
-    : pos.position.Header
-    ? true
-    : false;
-
-function getLayoutSpecForWrapper(pos: DropPos): LayoutSpec {
-  if (pos.position.Header) {
-    return {
-      type: "Stack",
-      flexDirection: "column",
-      showTabs: true,
-    };
-  } else {
-    return {
-      type: "Flexbox",
-      flexDirection: pos.position.EastOrWest ? "row" : "column",
-    };
-  }
-}

package/src/layout-view/View.css

@@ -1,61 +0,0 @@
-.vuuView {
-  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));
-  border-width: var(--vuuView-borderWidth, 1px);
-  border-style: var(--vuuView-borderStyle, none);
-
-  display: flex;
-  flex-direction: column;
-  margin: var(--vuuView-margin, 0px);
-  min-height: 50px;
-  min-width: 50px;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-}
-
-.vuuView.focus-visible:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: dotted cornflowerblue 2px;
-}
-
-.vuuView.dragging {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-}
-
-.vuuView-main {
-  /* height: var(--view-content-height);
-  width: var(--view-content-width); */
-  display: flex;
-  flex-direction: var(--vuuView-flexDirection, column);
-  flex-wrap: var(--vuuView-flex-wrap, nowrap);
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.vuuView-main > * {
-  flex-basis: auto;
-  flex-grow: var(--vuuView-flex-grow, 1);
-  flex-shrink: var(--vuuView-flex-shrink, 1);
-}
-
-.vuuView-collapsed .vuuView-main {
-  display: none;
-}
-
-.vuuView-collapsed + .Splitter {
-  display: none;
-}
-
-.vuuView-collapsed .Toolbar-vertical {
-  border-right: solid 1px var(--grey40);
-}
-
-.vuuView-collapsed .Toolbar-vertical .toolbar-title {
-  display: none;
-}

package/src/layout-view/View.tsx

@@ -1,149 +0,0 @@
-import { useForkRef, useIdMemo as useId } from "@salt-ds/core";
-import cx from "classnames";
-import React, { ForwardedRef, forwardRef, useMemo, useRef } from "react";
-import { Header } from "../layout-header/Header";
-import { registerComponent } from "../registry/ComponentRegistry";
-import { ViewContext } from "./ViewContext";
-import { ViewProps } from "./viewTypes";
-import { useView } from "./useView";
-import { useViewResize } from "./useViewResize";
-
-import "./View.css";
-
-const View = forwardRef(function View(
-  props: ViewProps,
-  forwardedRef: ForwardedRef<HTMLDivElement>
-) {
-  const {
-    children,
-    className,
-    collapsed, // "vertical" | "horizontal" | false | undefined
-    closeable,
-    "data-resizeable": dataResizeable,
-    dropTargets,
-    expanded,
-    flexFill, // use data-flexfill instead
-    id: idProp,
-    header,
-    orientation = "horizontal",
-    path,
-    resize = "responsive", // maybe throttle or debounce ?
-    resizeable = dataResizeable,
-    tearOut,
-    style = {},
-    title: titleProp,
-    ...restProps
-  } = props;
-
-  // A View within a managed layout will always be passed an id
-  const id = useId(idProp);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const mainRef = useRef<HTMLDivElement>(null);
-
-  const {
-    contributions,
-    dispatchViewAction,
-    load,
-    loadSession,
-    onConfigChange,
-    onEditTitle,
-    purge,
-    restoredState,
-    save,
-    saveSession,
-    title,
-  } = useView({
-    id,
-    rootRef,
-    path,
-    dropTargets,
-    title: titleProp,
-  });
-
-  useViewResize({ mainRef, resize, rootRef });
-
-  const classBase = "vuuView";
-
-  const getContent = () => {
-    // We only inject restored state as props if child is a single element. Maybe we
-    // should take this further and only do it if the component has opted into this
-    // behaviour.
-    if (React.isValidElement(children) && restoredState) {
-      return React.cloneElement(children, restoredState);
-    } else {
-      return children;
-    }
-  };
-
-  const viewContextValue = useMemo(
-    () => ({
-      dispatch: dispatchViewAction,
-      id,
-      path,
-      title,
-      load,
-      loadSession,
-      onConfigChange,
-      purge,
-      save,
-      saveSession,
-    }),
-    [
-      dispatchViewAction,
-      id,
-      load,
-      loadSession,
-      onConfigChange,
-      path,
-      purge,
-      save,
-      saveSession,
-      title,
-    ]
-  );
-
-  const headerProps = typeof header === "object" ? header : {};
-
-  return (
-    <div
-      {...restProps}
-      className={cx(classBase, className, {
-        [`${classBase}-collapsed`]: collapsed,
-        [`${classBase}-expanded`]: expanded,
-        [`${classBase}-resize-defer`]: resize === "defer",
-      })}
-      data-resizeable={resizeable}
-      id={id}
-      ref={useForkRef(forwardedRef, rootRef)}
-      style={style}
-      tabIndex={-1}
-    >
-      <ViewContext.Provider value={viewContextValue}>
-        {header ? (
-          <Header
-            {...headerProps}
-            collapsed={collapsed}
-            contributions={contributions}
-            expanded={expanded}
-            closeable={closeable}
-            onEditTitle={onEditTitle}
-            orientation={/*collapsed || */ orientation}
-            tearOut={tearOut}
-            // title={`${title} v${version} #${id}`}
-            title={title}
-          />
-        ) : null}
-        <div className={`${classBase}-main`} ref={mainRef}>
-          {getContent()}
-        </div>
-      </ViewContext.Provider>
-    </div>
-  );
-});
-View.displayName = "View";
-
-const MemoView = React.memo(View) as React.FunctionComponent<ViewProps>;
-MemoView.displayName = "View";
-registerComponent("View", MemoView, "view");
-
-export { MemoView as View };

package/src/layout-view/ViewContext.ts

@@ -1,31 +0,0 @@
-import path from "path";
-import React, { SyntheticEvent, useContext } from "react";
-import { ViewAction } from "./viewTypes";
-
-export type ViewDispatch = <Action extends ViewAction = ViewAction>(
-  action: Action,
-  evt?: SyntheticEvent
-) => Promise<boolean | void>;
-
-export interface ViewContextProps {
-  dispatch: ViewDispatch | null;
-  id: string;
-  load: (key?: string) => any;
-  loadSession: (key?: string) => any;
-  onConfigChange?: (config: any) => void;
-  path?: string;
-  purge: (key: string) => void;
-  save: (state: any, key: string) => void;
-  saveSession: (state: any, key: string) => void;
-  title?: string;
-}
-
-const NO_CONTEXT = { dispatch: null } as ViewContextProps;
-export const ViewContext = React.createContext<ViewContextProps>(NO_CONTEXT);
-
-export const useViewDispatch = () => {
-  const context = useContext(ViewContext);
-  return context?.dispatch ?? null;
-};
-
-export const useViewContext = () => useContext(ViewContext);

package/src/layout-view/index.ts

@@ -1,4 +0,0 @@
-export * from './ViewContext';
-export * from './View';
-export * from './useViewActionDispatcher';
-export * from './viewTypes';

package/src/layout-view/useView.tsx

@@ -1,104 +0,0 @@
-import { RefObject, useCallback, useMemo } from "react";
-import { useLayoutProviderDispatch } from "../layout-provider";
-import { usePersistentState } from "../use-persistent-state";
-import { useViewActionDispatcher } from "./useViewActionDispatcher";
-
-export interface ViewHookProps {
-  id: string;
-  rootRef: RefObject<HTMLDivElement>;
-  path?: string;
-  dropTargets?: string[];
-  title?: string;
-}
-
-export const useView = ({
-  id,
-  rootRef,
-  path,
-  dropTargets,
-  title: titleProp,
-}: ViewHookProps) => {
-  const layoutDispatch = useLayoutProviderDispatch();
-
-  const {
-    loadState,
-    loadSessionState,
-    purgeState,
-    saveState,
-    saveSessionState,
-  } = usePersistentState();
-
-  const [dispatchViewAction, contributions] = useViewActionDispatcher(
-    id,
-    rootRef,
-    path,
-    dropTargets
-  );
-
-  const title = useMemo(
-    () => loadState("view-title") ?? titleProp,
-    [loadState, titleProp]
-  );
-
-  const onEditTitle = useCallback(
-    (title: string) => {
-      if (path) {
-        layoutDispatch({ type: "set-title", path, title });
-      }
-    },
-    [layoutDispatch, path]
-  );
-
-  const restoredState = useMemo(() => loadState(id), [id, loadState]);
-
-  const load = useCallback(
-    (key?: string) => loadState(id, key),
-    [id, loadState]
-  );
-
-  const purge = useCallback(
-    (key) => {
-      purgeState(id, key);
-      layoutDispatch({ type: "save" });
-    },
-    [id, purgeState]
-  );
-
-  const save = useCallback(
-    (state, key) => {
-      saveState(id, key, state);
-      layoutDispatch({ type: "save" });
-    },
-    [id, layoutDispatch, saveState]
-  );
-  const loadSession = useCallback(
-    (key?: string) => loadSessionState(id, key),
-    [id, loadSessionState]
-  );
-  const saveSession = useCallback(
-    (state, key) => saveSessionState(id, key, state),
-    [id, saveSessionState]
-  );
-
-  const onConfigChange = useCallback(
-    ({ type: key, ...config }) => {
-      const { [key]: data } = config;
-      save(data, key);
-    },
-    [save]
-  );
-
-  return {
-    contributions,
-    dispatchViewAction,
-    load,
-    loadSession,
-    onConfigChange,
-    onEditTitle,
-    purge,
-    restoredState,
-    save,
-    saveSession,
-    title,
-  };
-};