@vuu-ui/vuu-layout 0.5.10 → 0.5.11

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,143 +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 { 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

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

@@ -1,5 +0,0 @@
-export * from './useViewActionDispatcher';
-export * from './View';
-export * from './ViewContext';
-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, 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

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

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

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

@@ -1,33 +0,0 @@
-.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);
-
-}