@vuu-ui/vuu-layout 0.5.9 → 0.5.10

package/src/layout-view/View.css

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

@@ -0,0 +1,143 @@
+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 { useView } from "./useView";
+import { useViewResize } from "./useViewResize";
+import { ViewContext } from "./ViewContext";
+import { ViewProps } from "./viewTypes";
+
+import "./View.css";
+
+const View = forwardRef(function View(
+  props: ViewProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const {
+    children,
+    className,
+    collapsed,
+    closeable,
+    "data-resizeable": dataResizeable,
+    dropTargets,
+    expanded,
+    flexFill,
+    id: idProp,
+    header,
+    orientation = "horizontal",
+    path,
+    resize = "responsive",
+    resizeable = dataResizeable,
+    tearOut,
+    style = {},
+    title: titleProp,
+    ...restProps
+  } = props;
+
+  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 = () => {
+    if (React.isValidElement(children) && restoredState) {
+      return React.cloneElement(children, restoredState);
+    }
+    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={orientation}
+            tearOut={tearOut}
+            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

@@ -0,0 +1,30 @@
+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) => unknown;
+  loadSession?: (key?: string) => unknown;
+  onConfigChange?: (config: unknown) => void;
+  path?: string;
+  purge?: (key: string) => void;
+  save?: (state: unknown, key: string) => void;
+  saveSession?: (state: unknown, 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

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

package/src/layout-view/useView.tsx

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

package/src/layout-view/useViewActionDispatcher.ts

@@ -0,0 +1,123 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import {
+  ReactElement,
+  RefObject,
+  SyntheticEvent,
+  useCallback,
+  useState,
+} from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { DragStartAction } from "../layout-reducer";
+import { usePersistentState } from "../use-persistent-state";
+import { ViewDispatch } from "./ViewContext";
+import { ViewAction } from "./viewTypes";
+
+export type Contribution = {
+  index?: number;
+  location?: string;
+  content: ReactElement;
+};
+
+export const useViewActionDispatcher = (
+  id: string,
+  root: RefObject<HTMLDivElement>,
+  viewPath?: string,
+  dropTargets?: string[]
+): [ViewDispatch, Contribution[] | undefined] => {
+  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =
+    usePersistentState();
+
+  const [contributions, setContributions] = useState<Contribution[]>(
+    loadSessionState(id, "contributions") ?? []
+  );
+  const dispatchLayoutAction = useLayoutProviderDispatch();
+  const updateContributions = useCallback(
+    (location: string, content: ReactElement) => {
+      const updatedContributions = contributions.concat([
+        { location, content },
+      ]);
+      saveSessionState(id, "contributions", updatedContributions);
+      setContributions(updatedContributions);
+    },
+    [contributions, id, saveSessionState]
+  );
+
+  const clearContributions = useCallback(() => {
+    purgeSessionState(id, "contributions");
+    setContributions([]);
+  }, [id, purgeSessionState]);
+
+  const handleRemove = useCallback(() => {
+    const ds = loadSessionState(id, "data-source") as DataSource;
+    if (ds) {
+      ds.unsubscribe();
+    }
+    purgeSessionState(id);
+    purgeState(id);
+    dispatchLayoutAction({ type: "remove", path: viewPath });
+  }, [
+    dispatchLayoutAction,
+    id,
+    loadSessionState,
+    purgeSessionState,
+    purgeState,
+    viewPath,
+  ]);
+
+  const handleMouseDown = useCallback(
+    async (evt, index, preDragActivity): Promise<boolean> => {
+      evt.stopPropagation();
+      const dragRect = root.current?.getBoundingClientRect();
+      return new Promise((resolve, reject) => {
+        dispatchLayoutAction({
+          type: "drag-start",
+          evt,
+          path: index === undefined ? viewPath : `${viewPath}.${index}`,
+          dragRect,
+          preDragActivity,
+          dropTargets,
+          resolveDragStart: resolve,
+          rejectDragStart: reject,
+        } as DragStartAction);
+      });
+    },
+    [root, dispatchLayoutAction, viewPath, dropTargets]
+  );
+
+  const dispatchAction = useCallback(
+    async <A extends ViewAction = ViewAction>(
+      action: A,
+      evt?: SyntheticEvent
+    ): Promise<boolean | void> => {
+      const { type } = action;
+      switch (type) {
+        case "maximize":
+        case "minimize":
+        case "restore":
+          return dispatchLayoutAction({ type, path: action.path ?? viewPath });
+        case "remove":
+          return handleRemove();
+        case "mousedown":
+          console.log("2) ViewActionDispatch Hook dispatch Action mousedown");
+          return handleMouseDown(evt, action.index, action.preDragActivity);
+        case "add-toolbar-contribution":
+          return updateContributions(action.location, action.content);
+        case "remove-toolbar-contribution":
+          return clearContributions();
+        default: {
+          return undefined;
+        }
+      }
+    },
+    [
+      dispatchLayoutAction,
+      viewPath,
+      handleRemove,
+      handleMouseDown,
+      updateContributions,
+      clearContributions,
+    ]
+  );
+
+  return [dispatchAction, contributions];
+};

package/src/layout-view/useViewResize.ts

@@ -0,0 +1,53 @@
+import { useResizeObserver, WidthHeight } from "@heswell/salt-lab";
+import { RefObject, useCallback, useRef } from "react";
+
+const NO_MEASUREMENT: string[] = [];
+
+type size = {
+  height?: number;
+  width?: number;
+};
+
+export interface ViewResizeHookProps {
+  mainRef: RefObject<HTMLDivElement>;
+  resize?: "defer" | "responsive";
+  rootRef: RefObject<HTMLDivElement>;
+}
+
+export const useViewResize = ({
+  mainRef,
+  resize = "responsive",
+  rootRef,
+}: ViewResizeHookProps) => {
+  const deferResize = resize === "defer";
+
+  const mainSize = useRef<size>({});
+  const resizeHandle = useRef<number>();
+
+  const setMainSize = useCallback(() => {
+    if (mainRef.current) {
+      mainRef.current.style.height = mainSize.current.height + "px";
+      mainRef.current.style.width = mainSize.current.width + "px";
+    }
+    resizeHandle.current = undefined;
+  }, [mainRef]);
+
+  const onResize = useCallback(
+    ({ height, width }) => {
+      mainSize.current.height = height;
+      mainSize.current.width = width;
+      if (resizeHandle.current !== null) {
+        clearTimeout(resizeHandle.current);
+      }
+      resizeHandle.current = window.setTimeout(setMainSize, 40);
+    },
+    [setMainSize]
+  );
+
+  useResizeObserver(
+    rootRef,
+    deferResize ? WidthHeight : NO_MEASUREMENT,
+    onResize,
+    deferResize
+  );
+};

package/src/layout-view/viewTypes.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from "react";
+import { HeaderProps } from "../layout-header";
+import {
+  AddToolbarContributionViewAction, MaximizeAction,
+  MinimizeAction,
+  MousedownViewAction,
+  RemoveAction, RemoveToolbarContributionViewAction, RestoreAction,
+  TearoutAction
+} from "../layout-reducer";
+
+export type ViewAction =
+  | MaximizeAction
+  | MinimizeAction
+  | MousedownViewAction
+  | RemoveAction
+  | RestoreAction
+  | TearoutAction
+  | AddToolbarContributionViewAction
+  | RemoveToolbarContributionViewAction;
+
+export interface ViewProps extends HTMLAttributes<HTMLDivElement> {
+  closeable?: boolean;
+  collapsed?: boolean;
+  "data-resizeable"?: boolean;
+  dropTargets?: string[];
+  expanded?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  flexFill?: any;
+  header?: boolean | Partial<HeaderProps>;
+  orientation?: "vertical" | "horizontal";
+  path?: string;
+  resize?: "defer" | "responsive";
+  resizeable?: boolean;
+  tearOut?: boolean;
+}

package/src/palette/Palette.css

@@ -0,0 +1,33 @@
+.vuuPalette-horizontal {
+  align-items: center;
+  display: flex;
+}
+
+.vuuPaletteItem {
+  --vuu-icon-color: var(--salt-separable-primary-borderColor);
+  --vuu-icon-inset: calc(50% - 12px) auto auto -3px;
+  --vuu-icon-height: 24px;
+  --vuu-icon-width: 24px;
+  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
+}
+
+.vuuPaletteItem[data-draggable]:after {
+  height: 22px;
+  width: 6px;
+  content: "";
+  position: absolute;
+
+  background-image: 
+  linear-gradient(45deg, rgb(180, 183, 190) 25%, transparent 25%),
+  linear-gradient(-45deg, rgb(180, 183, 190) 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, rgb(180, 183, 190) 25%),
+  linear-gradient(-45deg, transparent 75%, rgb(180, 183, 190) 25%);
+  background-size: 4px 4px;
+  background-position: 0 0, 2px 0, 2px -2px, 0 2px;  
+
+}
+
+.vuuSimpleDraggableWrapper > .vuuPaletteItem {
+  --vuu-icon-color: var(--salt-selectable-foreground);
+
+}