@vuu-ui/vuu-layout 0.0.27

package/src/layout-view/useViewActionDispatcher.ts

@@ -0,0 +1,133 @@
+import {
+  ReactElement,
+  RefObject,
+  SyntheticEvent,
+  useCallback,
+  useState,
+} from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { DragStartAction } from "../layout-reducer";
+import { ViewDispatch } from "./ViewContext";
+import { ViewAction } from "./viewTypes";
+import { usePersistentState } from "../use-persistent-state";
+import { DataSource } from "@vuu-ui/vuu-data";
+
+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(() => {
+    // TODO this requires a bit more thought. I works BECAUSE filteredGrid has
+    // stored its datasource in sessionState. It is highly pretty much a
+    // requirement for features to do so - how do we enforce it.
+    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) => {
+        // TODO should we check if we are allowed to drag ?
+        dispatchLayoutAction({
+          type: "drag-start",
+          evt,
+          path: index === undefined ? viewPath : `${viewPath}.${index}`,
+          dragRect,
+          preDragActivity,
+          dropTargets,
+          resolveDragStart: resolve,
+          rejectDragStart: reject,
+        } as DragStartAction);
+      });
+    },
+    [root, dispatchLayoutAction, viewPath, dropTargets]
+  );
+
+  // TODO should be event, action, then this method can bea assigned directly to a html element
+  // as an event hander
+  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":
+          // case Action.TEAR_OUT:
+          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: {
+          // if (Object.values(Action).includes(type)) {
+          //   dispatch(action);
+          // }
+          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/uitk-core";
+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;
+  }, []);
+
+  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,37 @@
+import { HTMLAttributes } from "react";
+import { HeaderProps } from "../layout-header";
+import {
+  MaximizeAction,
+  MinimizeAction,
+  MousedownViewAction,
+  RemoveAction,
+  RestoreAction,
+  TearoutAction,
+  AddToolbarContributionViewAction,
+  RemoveToolbarContributionViewAction,
+} 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;
+  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,37 @@
+.vuuPalette {
+}
+
+.vuuPalette-horizontal {
+  align-items: center;
+  display: flex;
+}
+
+.vuuPalette .vuuComponentIcon {
+}
+
+.vuuPaletteItem {
+  --vuu-icon-color: var(--uitk-separable-primary-background);
+  --vuu-icon-inset: calc(50% - 12px) auto auto -3px;
+  --vuu-icon-svg: var(--svg-grab-handle);
+  --vuu-icon-height: 24px;
+  --vuu-icon-width: 24px;
+  padding-left: 20px;
+}
+
+.vuuPaletteItem[data-icon]:after {
+  --height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+  --width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
+
+  content: "";
+  background-color: var(--vuu-icon-color, black);
+  height: var(--height);
+  inset: var(--vuu-icon-inset,0 auto 0 0);
+  mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;
+  -webkit-mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;
+  position: absolute;
+  width: var(--width);
+}
+
+.vuuSimpleDraggableWrapper > .vuuPaletteItem {
+  --vuu-icon-color: var(--uitk-selectable-foreground);
+}

package/src/palette/Palette.tsx

@@ -0,0 +1,140 @@
+import { List, ListItem, ListItemProps } from "@heswell/uitk-lab";
+import { uuid } from "@vuu-ui/vuu-utils";
+import cx from "classnames";
+import {
+  cloneElement,
+  HTMLAttributes,
+  memo,
+  MouseEvent,
+  ReactElement,
+} from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { View } from "../layout-view";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./Palette.css";
+
+const clonePaletteItem = (paletteItem: HTMLElement) => {
+  const dolly = paletteItem.cloneNode(true) as HTMLElement;
+  dolly.id = "";
+  delete dolly.dataset.idx;
+  return dolly;
+};
+
+export interface PaletteItemProps extends ListItemProps {
+  children: ReactElement;
+  closeable?: boolean;
+  header?: boolean;
+  idx?: number;
+  resize?: "defer";
+  resizeable?: boolean;
+}
+
+export const PaletteItem = memo(
+  ({
+    className,
+    children: component,
+    idx,
+    resizeable,
+    header,
+    closeable,
+    ...props
+  }: PaletteItemProps) => {
+    return (
+      <ListItem
+        className={cx("vuuPaletteItem", className)}
+        data-icon="grab-handle"
+        {...props}
+      />
+    );
+  }
+);
+
+PaletteItem.displayName = "PaletteItem";
+
+export interface PaletteProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  children: ReactElement[];
+  orientation: "horizontal" | "vertical";
+  selection?: string;
+}
+
+export const Palette = ({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}: PaletteProps) => {
+  const dispatch = useLayoutProviderDispatch();
+  const classBase = "vuuPalette";
+
+  function handleMouseDown(evt: MouseEvent) {
+    const target = evt.target as HTMLElement;
+    const listItemElement = target.closest(".vuuPaletteItem") as HTMLElement;
+    const idx = parseInt(listItemElement.dataset.idx ?? "-1");
+    if (idx !== -1) {
+      console.log({
+        children,
+        idx,
+        listItemElement,
+      });
+    }
+    const {
+      props: { caption, children: payload, template, ...props },
+    } = children[idx];
+    const { height, left, top, width } =
+      listItemElement.getBoundingClientRect();
+    const id = uuid();
+    const identifiers = { id, key: id };
+    const component = template ? (
+      payload
+    ) : (
+      <View {...identifiers} {...props} title={props.label}>
+        {payload}
+      </View>
+    );
+
+    dispatch({
+      dragRect: {
+        left,
+        top,
+        right: left + width,
+        bottom: top + 150,
+        width,
+        height,
+      },
+      dragElement: clonePaletteItem(listItemElement),
+      evt: evt.nativeEvent,
+      instructions: {
+        DoNotRemove: true,
+        DoNotTransform: true,
+        RemoveDraggableOnDragEnd: true,
+        dragThreshold: 10,
+      },
+      path: "*",
+      payload: component,
+      type: "drag-start",
+    });
+  }
+
+  return (
+    <List
+      {...props}
+      borderless
+      className={cx(classBase, className, `${classBase}-${orientation}`)}
+      maxHeight={800}
+      selected={null}
+    >
+      {children.map((child, idx) =>
+        child.type === PaletteItem
+          ? cloneElement(child, {
+              key: idx,
+              onMouseDown: handleMouseDown,
+            })
+          : child
+      )}
+    </List>
+  );
+};
+
+registerComponent("Palette", Palette, "view");

package/src/palette/PaletteUitk.css

@@ -0,0 +1,9 @@
+.vuuPalette {
+  --list-item-header-bg: inherit;
+  --list-item-header-color: inherit;
+  --list-item-padding: 0 6px 0 24px;
+  --list-item-header-twisty-color: black;
+  --list-item-header-twisty-left: 3px;
+  --list-item-header-twisty-right: auto;
+}
+

package/src/palette/PaletteUitk.tsx

@@ -0,0 +1,79 @@
+import { List, ListItem, ListItemProps, ListProps } from "@heswell/uitk-lab";
+import { uuid } from "@vuu-ui/vuu-utils";
+import cx from "classnames";
+import { MouseEvent, ReactElement } from "react";
+import { useLayoutProviderDispatch } from "../layout-provider";
+import { View } from "../layout-view";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./PaletteUitk.css";
+
+const classBase = "vuuPalette";
+
+export interface PaletteListItemProps extends ListItemProps {
+  children: ReactElement;
+  ViewProps: {
+    header?: boolean;
+    closeable?: boolean;
+    resizeable?: boolean;
+  };
+  template: boolean;
+}
+
+export const PaletteListItem = (props: PaletteListItemProps) => {
+  const { children, ViewProps, label, onMouseDown, template, ...restProps } =
+    props;
+  const dispatch = useLayoutProviderDispatch();
+
+  const handleMouseDown = (evt: MouseEvent<HTMLDivElement>) => {
+    const { left, top, width } = evt.currentTarget.getBoundingClientRect();
+    const id = uuid();
+    const identifiers = { id, key: id };
+    const component = template ? (
+      children
+    ) : (
+      <View {...identifiers} {...ViewProps} title={props.label}>
+        {children}
+      </View>
+    );
+
+    dispatch({
+      type: "drag-start",
+      evt: evt.nativeEvent,
+      path: "*",
+      payload: component,
+      instructions: {
+        DoNotRemove: true,
+        DoNotTransform: true,
+        RemoveDraggableOnDragEnd: true,
+        dragThreshold: 10,
+      },
+      dragRect: {
+        left,
+        top,
+        right: left + width,
+        bottom: top + 150,
+        width,
+        height: 100,
+      },
+    });
+  };
+  return (
+    <ListItem onMouseDown={handleMouseDown} {...restProps}>
+      {label}
+    </ListItem>
+  );
+};
+
+export const PaletteUitk = ({ className, ...props }: ListProps) => {
+  return (
+    <List
+      {...props}
+      className={cx(classBase, className)}
+      height="100%"
+      selectionStrategy="none"
+    />
+  );
+};
+
+registerComponent("PaletteUitk", PaletteUitk, "view");

package/src/palette/index.ts

@@ -0,0 +1,2 @@
+export * from "./Palette";
+export * from "./PaletteUitk";

package/src/placeholder/Placeholder.css

@@ -0,0 +1,10 @@
+.vuuPlaceholder {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.vuuPlaceholder-shim {
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/src/placeholder/Placeholder.tsx

@@ -0,0 +1,39 @@
+import React, { HTMLAttributes } from "react";
+import cx from "classnames";
+import { registerComponent } from "../registry/ComponentRegistry";
+
+import "./Placeholder.css";
+
+const classBase = "vuuPlaceholder";
+
+export interface PlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+  closeable?: boolean;
+  flexFill?: boolean;
+  resizeable?: boolean;
+  shim?: boolean;
+}
+
+export const Placeholder = ({
+  className,
+  closeable,
+  flexFill,
+  resizeable,
+  shim,
+  ...props
+}: PlaceholderProps) => {
+  return (
+    <div
+      className={cx(classBase, className, {
+        [`${classBase}-shim`]: shim,
+      })}
+      {...props}
+      data-placeholder
+      data-resizeable
+    >
+      {/* <LayoutProviderVersion /> */}
+    </div>
+  );
+};
+
+Placeholder.displayName = "Placeholder";
+registerComponent("Placeholder", Placeholder);

package/src/placeholder/index.ts

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

package/src/registry/ComponentRegistry.ts

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from 'react';
+
+const _containers: { [key: string]: boolean } = {};
+const _views: { [key: string]: boolean } = {};
+
+export type layoutComponentType = 'component' | 'container' | 'view';
+
+export const ComponentRegistry: { [key: string]: FunctionComponent } = {};
+
+export function isContainer(componentType: string) {
+  return _containers[componentType] === true;
+}
+
+export function isView(componentType: string) {
+  return _views[componentType] === true;
+}
+
+export const isLayoutComponent = (type: string) => isContainer(type) || isView(type);
+
+export const isRegistered = (className: string) => !!ComponentRegistry[className];
+
+// We could check and set displayName in here
+export function registerComponent(
+  componentName: string,
+  component: FunctionComponent<any>,
+  type: layoutComponentType = 'component'
+) {
+  ComponentRegistry[componentName] = component;
+
+  if (type === 'container') {
+    _containers[componentName] = true;
+  } else if (type === 'view') {
+    _views[componentName] = true;
+  }
+}

package/src/registry/index.ts

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

package/src/responsive/OverflowMenu.css

@@ -0,0 +1,31 @@
+.OverflowMenu {
+  /* width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 6px 0px 6px 0;
+  align-self: flex-end;
+  border: none;
+  border-radius: 0;
+  background-color: inherit;
+  padding: 0; */
+}
+
+/* .OverflowMenu-open {
+  backgroundcolor: active.overflow.background;
+} */
+
+/* .OverflowMenu-open .OverflowMenu-icon {
+  color: active.overflow.color;
+} */
+
+/* .Toolbar .Toolbar-overflow:hover {
+  background-color: lightgrey;
+} */
+
+[data-overflowed] {
+  order: 99;
+  /* visibility: hidden; */
+}

package/src/responsive/OverflowMenu.jsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import { MoreSmallListVertButton } from '../action-buttons';
+
+import './OverflowMenu.css';
+
+const OverflowMenu = forwardRef(function OverflowMenu(
+  // eslint-disable-next-line no-unused-vars
+  { iconName = 'more', overflowOffsetLeft: left, source = [], ...rest },
+  // eslint-disable-next-line no-unused-vars
+  ref
+) {
+  return source.length > 0 ? (
+    <MoreSmallListVertButton />
+  ) : // <Dropdown
+  //   ListProps={{
+  //     width: 200,
+  //   }}
+  //   ref={ref}
+  //   source={source}
+  //   {...rest}
+  // >
+  //   {({ DropdownButtonProps, isOpen }) => {
+  //     const { style, ...restButtonProps } = DropdownButtonProps;
+
+  //     const {
+  //       onClick,
+  //       onKeyDown,
+  //       onFocus,
+  //       onBlur,
+  //       'aria-expanded': menuOpen, // do we use this or isOpen ?
+  //     } = DropdownButtonProps;
+  //     const defaultProps = {
+  //       'data-jpmui-test': 'dropdown-button',
+  //       'aria-label': 'toggle overflow',
+  //       'aria-haspopup': true,
+  //       className: cx('OverflowMenu-dropdown', {
+  //         'OverflowMenu-open': isOpen,
+  //       }),
+  //       onBlur,
+  //       onPress: onClick,
+  //       onFocus,
+  //       onKeyDown,
+  //       title: 'Overflow Menu',
+  //       type: 'button',
+  //       variant: 'secondary',
+  //     };
+
+  //     return (
+  //       <MoreSmallListVertButton {...defaultProps}/>
+  //     );
+  //   }}
+  // </Dropdown>
+  null;
+});
+
+export default OverflowMenu;