@vuu-ui/vuu-layout 0.5.4 → 0.5.6

package/src/palette/Palette.tsx

@@ -1,140 +0,0 @@
-import { List, ListItem, ListItemProps } from "@heswell/salt-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/PaletteSalt.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/PaletteSalt.tsx

@@ -1,79 +0,0 @@
-import { List, ListItem, ListItemProps, ListProps } from "@heswell/salt-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 "./PaletteSalt.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 PaletteSalt = ({ className, ...props }: ListProps) => {
-  return (
-    <List
-      {...props}
-      className={cx(classBase, className)}
-      height="100%"
-      selectionStrategy="none"
-    />
-  );
-};
-
-registerComponent("PaletteSalt", PaletteSalt, "view");

package/src/palette/index.ts

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

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/popup/index.js

@@ -1,2 +0,0 @@
-export * from './popup-provider';
-export * from './popup-service';

package/src/popup/popup-service.css

@@ -1,15 +0,0 @@
-.hwReactDialog,
-.hwReactPopup {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  overflow: visible;
-  z-index: 1000;
-}
-
-.hwPopup {
-  position: absolute;
-}

package/src/popup/popup-service.js

@@ -1,281 +0,0 @@
-import React, { createElement, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
-import { renderPortal } from "../portal";
-import cx from "classnames";
-
-import "./popup-service.css";
-window.popupReact = React;
-
-let _dialogOpen = false;
-const _popups = [];
-
-function specialKeyHandler(e) {
-  if (e.keyCode === 27 /* ESC */) {
-    if (_popups.length) {
-      closeAllPopups();
-    } else if (_dialogOpen) {
-      ReactDOM.unmountComponentAtNode(
-        document.body.querySelector(".hwReactDialog")
-      );
-    }
-  }
-}
-
-function outsideClickHandler(e) {
-  if (_popups.length) {
-    // onsole.log(`Popup.outsideClickHandler`);
-    const popupContainers = document.body.querySelectorAll(".hwReactPopup");
-    for (let i = 0; i < popupContainers.length; i++) {
-      if (popupContainers[i].contains(e.target)) {
-        return;
-      }
-    }
-    closeAllPopups();
-  }
-}
-
-function closeAllPopups() {
-  if (_popups.length) {
-    // onsole.log(`closeAllPopups`);
-    const popupContainers = document.body.querySelectorAll(".hwReactPopup");
-    for (let i = 0; i < popupContainers.length; i++) {
-      ReactDOM.unmountComponentAtNode(popupContainers[i]);
-    }
-    popupClosed("*");
-  }
-}
-
-function dialogOpened() {
-  if (_dialogOpen === false) {
-    _dialogOpen = true;
-    window.addEventListener("keydown", specialKeyHandler, true);
-  }
-}
-
-function dialogClosed() {
-  if (_dialogOpen) {
-    _dialogOpen = false;
-    window.removeEventListener("keydown", specialKeyHandler, true);
-  }
-}
-
-function popupOpened(name /*, group*/) {
-  if (_popups.indexOf(name) === -1) {
-    _popups.push(name);
-    //onsole.log('PopupService, popup opened ' + name + '  popups : ' + _popups);
-    if (_dialogOpen === false) {
-      window.addEventListener("keydown", specialKeyHandler, true);
-      window.addEventListener("click", outsideClickHandler, true);
-    }
-  }
-}
-
-function popupClosed(name /*, group=null*/) {
-  if (_popups.length) {
-    if (name === "*") {
-      _popups.length = 0;
-    } else {
-      const pos = _popups.indexOf(name);
-      if (pos !== -1) {
-        _popups.splice(pos, 1);
-      }
-    }
-    //onsole.log('PopupService, popup closed ' + name + '  popups : ' + _popups);
-    if (_popups.length === 0 && _dialogOpen === false) {
-      window.removeEventListener("keydown", specialKeyHandler, true);
-      window.removeEventListener("click", outsideClickHandler, true);
-    }
-  }
-}
-
-const PopupComponent = ({ children, position, style }) => {
-  const className = cx("hwPopup", "hwPopupContainer", position);
-  return createElement("div", { className, style }, children);
-};
-
-let incrementingKey = 1;
-
-export class PopupService {
-  static showPopup({
-    name = "anon",
-    group = "all",
-    position = "",
-    left = 0,
-    right = "auto",
-    top = 0,
-    width = "auto",
-    component,
-  }) {
-    if (!component) {
-      throw Error(`PopupService showPopup, no component supplied`);
-    }
-    popupOpened(name, group);
-    let el = document.body.querySelector(".hwReactPopup." + group);
-    if (el === null) {
-      el = document.createElement("div");
-      el.className = "hwReactPopup " + group;
-      document.body.appendChild(el);
-    }
-
-    const style = { width };
-
-    renderPortal(
-      createElement(
-        PopupComponent,
-        { key: incrementingKey++, position, style },
-        component
-      ),
-      el,
-      left,
-      top,
-      () => {
-        PopupService.keepWithinThePage(el, right);
-      }
-    );
-  }
-
-  static hidePopup(name = "anon", group = "all") {
-    //onsole.log('PopupService.hidePopup name=' + name + ', group=' + group)
-
-    if (_popups.indexOf(name) !== -1) {
-      popupClosed(name, group);
-      ReactDOM.unmountComponentAtNode(
-        document.body.querySelector(`.hwReactPopup.${group}`)
-      );
-    }
-  }
-
-  static keepWithinThePage(el, right = "auto") {
-    const target = el.querySelector(".hwPopupContainer > *");
-    if (target) {
-      const {
-        top,
-        left,
-        width,
-        height,
-        right: currentRight,
-      } = target.getBoundingClientRect();
-
-      const w = window.innerWidth;
-      const h = window.innerHeight;
-
-      const overflowH = h - (top + height);
-      if (overflowH < 0) {
-        target.style.top = parseInt(top, 10) + overflowH + "px";
-      }
-
-      const overflowW = w - (left + width);
-      if (overflowW < 0) {
-        target.style.left = parseInt(left, 10) + overflowW + "px";
-      }
-
-      if (typeof right === "number" && right !== currentRight) {
-        const adjustment = right - currentRight;
-        target.style.left = left + adjustment + "px";
-      }
-    }
-  }
-}
-
-export class DialogService {
-  static showDialog(dialog) {
-    const containerEl = ".hwReactDialog";
-    const onClose = dialog.props.onClose;
-
-    dialogOpened();
-
-    ReactDOM.render(
-      React.cloneElement(dialog, {
-        container: containerEl,
-        onClose: () => {
-          DialogService.closeDialog();
-          if (onClose) {
-            onClose();
-          }
-        },
-      }),
-      document.body.querySelector(containerEl)
-    );
-  }
-
-  static closeDialog() {
-    dialogClosed();
-    ReactDOM.unmountComponentAtNode(
-      document.body.querySelector(".hwReactDialog")
-    );
-  }
-}
-
-export const Popup = (props) => {
-  const pendingTask = useRef(null);
-  const ref = useRef(null);
-
-  const show = (props, boundingClientRect) => {
-    const { name, group, depth, width } = props;
-    let left, top;
-
-    if (pendingTask.current) {
-      clearTimeout(pendingTask.current);
-      pendingTask.current = null;
-    }
-
-    if (props.close === true) {
-      PopupService.hidePopup(name, group);
-    } else {
-      const { position, children: component } = props;
-      const {
-        left: targetLeft,
-        top: targetTop,
-        width: clientWidth,
-        bottom: targetBottom,
-      } = boundingClientRect;
-
-      if (position === "below") {
-        left = targetLeft;
-        top = targetBottom;
-      } else if (position === "above") {
-        left = targetLeft;
-        top = targetTop;
-      }
-
-      pendingTask.current = setTimeout(() => {
-        PopupService.showPopup({
-          name,
-          group,
-          depth,
-          position,
-          left,
-          top,
-          width: width || clientWidth,
-          component,
-        });
-      }, 10);
-    }
-  };
-
-  useEffect(() => {
-    if (ref.current) {
-      const el = ref.current.parentElement;
-      const boundingClientRect = el.getBoundingClientRect();
-      //onsole.log(`%cPopup.componentDidMount about to call show`,'color:green');
-      show(props, boundingClientRect);
-    }
-
-    return () => {
-      PopupService.hidePopup(props.name, props.group);
-    };
-  }, [props]);
-
-  return React.createElement("div", { className: "popup-proxy", ref });
-
-  // componentWillReceiveProps(nextProps) {
-
-  //     const domNode = ReactDOM.findDOMNode(this);
-  //     if (domNode) {
-  //         const el = domNode.parentElement;
-  //         const boundingClientRect = el.getBoundingClientRect();
-  //         //onsole.log(`%cPopup.componentWillReceiveProps about to call show`,'color:green');
-  //         this.show(nextProps, boundingClientRect);
-  //     }
-  // }
-};

package/src/portal/Portal.jsx

@@ -1,50 +0,0 @@
-import { useLayoutEffect, useMemo } from 'react';
-import * as ReactDOM from 'react-dom';
-import { createContainer, renderPortal } from './render-portal';
-
-export const Portal = function Portal(props) {
-  // Do we need to accept container here as a prop ?
-  const { children, x, y, onRender } = props;
-  let renderContainer = useMemo(() => {
-    return createContainer();
-  }, []);
-
-  // console.log(`Portal render x ${x} y ${y}`);
-
-  // useEffect(() => {
-  //   console.log(`Portal mounted`);
-  //   return () => {
-  //     console.log('Portal unmounted');
-  //   };
-  // }, []);
-
-  useLayoutEffect(() => {
-    renderPortal(children, renderContainer, x, y, onRender);
-  }, [children, onRender, renderContainer, x, y]);
-
-  useLayoutEffect(() => {
-    return () => {
-      if (renderContainer) {
-        ReactDOM.unmountComponentAtNode(renderContainer);
-        if (renderContainer.classList.contains('hwReactPopup')) {
-          renderContainer.parentElement.removeChild(renderContainer);
-        }
-      }
-    };
-  }, [renderContainer]);
-
-  // useLayoutEffect(() => {
-  //   renderContainer.current = renderPortal(children, x, y, container)
-  //   return () => {
-  //     if (renderContainer.current){
-  //       console.log('EXPLICIT UNMOUNT')
-  //       ReactDOM.unmountComponentAtNode(renderContainer.current);
-  //       if (renderContainer.current.classList.contains('hwReactPopup')){
-  //         renderContainer.current.parentElement.removeChild(renderContainer.current);
-  //         renderContainer.current = null;
-  //       }
-  //     }
-  //   }
-  // },[])
-  return null;
-};

package/src/portal/index.ts

@@ -1,3 +0,0 @@
-export * from "./Portal";
-export * from "./render-portal";
-export * from "./utils";