@vuu-ui/vuu-layout 0.0.27 → 0.5.5

package/src/layout-view/useViewActionDispatcher.ts

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

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

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

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

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

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

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

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

package/src/placeholder/Placeholder.css

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

package/src/placeholder/Placeholder.tsx

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

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

package/src/registry/ComponentRegistry.ts

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

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

package/src/responsive/OverflowMenu.css

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

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