@vuu-ui/vuu-layout 0.0.27

package/src/layout-reducer/remove-layout-element.ts

@@ -0,0 +1,240 @@
+import React, { ReactElement } from 'react';
+import { createPlaceHolder } from './flexUtils';
+import { swapChild } from './replace-layout-element';
+
+import {
+  followPath,
+  followPathToParent,
+  getProp,
+  getProps,
+  nextStep,
+  resetPath,
+  typeOf
+} from '../utils';
+import { RemoveAction } from './layoutTypes';
+
+export function removeChild(layoutRoot: ReactElement, { path }: RemoveAction) {
+  const target = followPath(layoutRoot, path!) as ReactElement;
+  let targetParent = followPathToParent(layoutRoot, path!);
+  if (targetParent === null) {
+    return layoutRoot;
+  }
+  const { children } = getProps(targetParent);
+  if (children.length > 1 && allOtherChildrenArePlaceholders(children, path)) {
+    // eslint-disable-next-line no-unused-vars
+    const {
+      style: { flexBasis, display, flexDirection, ...style }
+    } = getProps(targetParent);
+    let containerPath = getProp(targetParent, 'path');
+    let newLayout = swapChild(
+      layoutRoot,
+      targetParent,
+      createPlaceHolder(containerPath, flexBasis, style)
+    );
+    // eslint-disable-next-line no-cond-assign
+    while ((targetParent = followPathToParent(newLayout, containerPath))) {
+      if (getProp(targetParent, 'path') === '0') {
+        break;
+      }
+      const { children } = getProps(targetParent);
+      if (allOtherChildrenArePlaceholders(children)) {
+        containerPath = getProp(targetParent, 'path');
+        // eslint-disable-next-line no-unused-vars
+        const {
+          style: { flexBasis, display, flexDirection, ...style }
+        } = getProps(targetParent);
+        newLayout = swapChild(
+          layoutRoot,
+          targetParent,
+          createPlaceHolder(containerPath, flexBasis, style)
+        );
+      } else if (hasAdjacentPlaceholders(children)) {
+        newLayout = collapsePlaceholders(layoutRoot, targetParent as ReactElement);
+        // } else if (hasRedundantPlaceholders(children)){
+        /*
+        We may have redundany placeholders for example where we have a tower  containing a Terrace and a placeholder
+        If all the components bordering on the lower placeholder are themselves placeholders, the lower placeholder
+        is redundant
+      */
+      } else {
+        break;
+      }
+    }
+    return newLayout;
+    // return removeChild(rootProps, {path: targetParent.props.path});
+    // return removeChildAndPlaceholder(rootProps, {path: targetParent.props.path});
+  } else {
+    return _removeChild(layoutRoot, target);
+  }
+}
+
+function _removeChild(container: ReactElement, child: ReactElement): ReactElement {
+  let { active, children: componentChildren, path, preserve } = getProps(container);
+  const { idx, finalStep } = nextStep(path, getProp(child, 'path'));
+  const type = typeOf(container) as string;
+  let children = componentChildren.slice() as ReactElement[];
+  if (finalStep) {
+    children.splice(idx, 1);
+    if (active !== undefined && active >= idx) {
+      active = Math.max(0, active - 1);
+    }
+
+    if (children.length === 1 && !preserve && path !== '0' && type.match(/Flexbox|Stack/)) {
+      return unwrap(container, children[0]);
+    }
+
+    // Not 100% sure we should do this, unless configured to
+    if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) {
+      children = makeFlexible(children);
+    }
+  } else {
+    children[idx] = _removeChild(children[idx], child) as ReactElement;
+  }
+
+  children = children.map((child, i) => resetPath(child, `${path}.${i}`));
+  return React.cloneElement(container, { active }, children);
+}
+
+function unwrap(container: ReactElement, child: ReactElement) {
+  const type = typeOf(container);
+  const {
+    path,
+    style: { flexBasis, flexGrow, flexShrink, width, height }
+  } = getProps(container);
+
+  let unwrappedChild = resetPath(child, path);
+  if (path === '0') {
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      style: {
+        ...child.props.style,
+        width,
+        height
+      }
+    });
+  } else if (type === 'Flexbox') {
+    const dim = container.props.style.flexDirection === 'column' ? 'height' : 'width';
+    const {
+      // eslint-disable-next-line no-unused-vars
+      style: { [dim]: size, ...style }
+    } = unwrappedChild.props;
+    // Need to overwrite key
+    unwrappedChild = React.cloneElement(unwrappedChild, {
+      // Need to assign key
+      flexFill: undefined,
+      style: {
+        ...style,
+        // flexFill, if present described the childs relationship to the doomed flexbox,
+        // must not be applied to new parent
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        width,
+        height
+      }
+    });
+  }
+  return unwrappedChild;
+}
+
+function isFlexible(element: ReactElement) {
+  return element.props.style.flexGrow > 0;
+}
+
+function canBeMadeFlexible(element: ReactElement) {
+  const { width, height, flexGrow } = element.props.style;
+  return flexGrow === 0 && typeof width !== 'number' && typeof height !== 'number';
+}
+
+function makeFlexible(children: ReactElement[]) {
+  return children.map((child) =>
+    canBeMadeFlexible(child)
+      ? React.cloneElement(child, {
+          style: {
+            ...child.props.style,
+            flexGrow: 1
+          }
+        })
+      : child
+  );
+}
+
+const hasAdjacentPlaceholders = (children: ReactElement[]) => {
+  if (children && children.length > 0) {
+    let wasPlaceholder = getProp(children[0], 'placeholder');
+    let isPlaceholder = false;
+    for (let i = 1; i < children.length; i++) {
+      isPlaceholder = getProp(children[i], 'placeholder');
+      if (wasPlaceholder && isPlaceholder) {
+        return true;
+      }
+      wasPlaceholder = isPlaceholder;
+    }
+  }
+};
+
+const collapsePlaceholders = (container: ReactElement, target: ReactElement) => {
+  let { children: componentChildren, path } = getProps(container);
+  const { idx, finalStep } = nextStep(path, getProp(target, 'path'));
+  let children = componentChildren.slice() as ReactElement[];
+  if (finalStep) {
+    children[idx] = _collapsePlaceHolders(target);
+  } else {
+    children[idx] = collapsePlaceholders(children[idx], target) as ReactElement;
+  }
+
+  children = children.map((child, i) => resetPath(child, `${path}.${i}`));
+  return React.cloneElement(container, undefined, children);
+};
+
+const _collapsePlaceHolders = (container: ReactElement) => {
+  const { children } = getProps(container);
+  const newChildren = [];
+  const placeholders: ReactElement[] = [];
+
+  for (let i = 0; i < children.length; i++) {
+    if (getProp(children[i], 'placeholder')) {
+      placeholders.push(children[i]);
+    } else {
+      if (placeholders.length === 1) {
+        newChildren.push(placeholders.pop());
+      } else if (placeholders.length > 0) {
+        newChildren.push(mergePlaceholders(placeholders));
+        placeholders.length = 0;
+      }
+      newChildren.push(children[i]);
+    }
+  }
+
+  if (placeholders.length === 1) {
+    newChildren.push(placeholders.pop());
+  } else if (placeholders.length > 0) {
+    newChildren.push(mergePlaceholders(placeholders));
+  }
+
+  const containerPath = getProp(container, 'path');
+  return React.cloneElement(
+    container,
+    undefined,
+    newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`))
+  );
+};
+
+const mergePlaceholders = ([placeholder, ...placeholders]: ReactElement[]) => {
+  const targetStyle = getProp(placeholder, 'style');
+  let { flexBasis, flexGrow, flexShrink } = targetStyle;
+  for (let {
+    props: { style }
+  } of placeholders) {
+    flexBasis += style.flexBasis;
+    flexGrow = Math.max(flexGrow, style.flexGrow);
+    flexShrink = Math.max(flexShrink, style.flexShrink);
+  }
+  return React.cloneElement(placeholder, {
+    style: { ...targetStyle, flexBasis, flexGrow, flexShrink }
+  });
+};
+
+const allOtherChildrenArePlaceholders = (children: ReactElement[], path?: string) =>
+  children.every(
+    (child) => getProp(child, 'placeholder') || (path && getProp(child, 'path') === path)
+  );

package/src/layout-reducer/replace-layout-element.ts

@@ -0,0 +1,118 @@
+import React, { ReactElement } from 'react';
+import { getProp, getProps, nextStep } from '../utils';
+import { Action } from '../layout-action';
+import { applyLayoutProps, LayoutProps } from './layoutUtils';
+import { ReplaceAction } from './layoutTypes';
+
+export function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction) {
+  return _replaceChild(model, target, replacement);
+}
+
+export function _replaceChild(
+  model: ReactElement,
+  child: ReactElement,
+  replacement: ReactElement<LayoutProps>
+) {
+  const path = getProp(child, 'path');
+  const resizeable = getProp(child, 'resizeable');
+  const { style } = getProps(child);
+  const newChild =
+    // applyLayoutProps is a bit heavy here - it supports the scenario
+    // where we drop/replace a template. Might want to make it somehow
+    // an opt-in option
+    applyLayoutProps(
+      React.cloneElement(replacement, {
+        resizeable,
+        style: {
+          ...style,
+          ...replacement.props.style
+        }
+      }),
+      path
+    );
+
+  return swapChild(model, child, newChild);
+}
+
+export function swapChild(
+  model: ReactElement,
+  child: ReactElement,
+  replacement: ReactElement,
+  op?: 'maximize' | 'minimize' | 'restore'
+): ReactElement {
+  if (model === child) {
+    return replacement as any;
+  } else {
+    const { idx, finalStep } = nextStep(getProp(model, 'path'), getProp(child, 'path'));
+    const children = model.props.children.slice();
+    if (finalStep) {
+      if (!op) {
+        children[idx] = replacement;
+      } else if (op === Action.MINIMIZE) {
+        children[idx] = minimize(model, children[idx]);
+      } else if (op === Action.RESTORE) {
+        children[idx] = restore(children[idx]);
+      }
+    } else {
+      children[idx] = swapChild(children[idx], child, replacement, op);
+    }
+    return React.cloneElement(model, undefined, children);
+  }
+}
+
+function minimize(parent: ReactElement, child: ReactElement) {
+  // Right now, parent is always going to be a FLexbox, but might not always be the case
+  const { style: parentStyle } = getProps(parent);
+  const { style: childStyle } = getProps(child);
+
+  const { width, height, flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+
+  const restoreStyle = {
+    width,
+    height,
+    flexBasis,
+    flexShrink,
+    flexGrow
+  };
+
+  const style = {
+    ...rest,
+    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0
+  };
+  const collapsed =
+    parentStyle.flexDirection === 'row'
+      ? 'vertical'
+      : parentStyle.flexDirection === 'column'
+      ? 'horizontal'
+      : false;
+
+  if (collapsed) {
+    return React.cloneElement(child, {
+      collapsed,
+      restoreStyle,
+      style
+    });
+  } else {
+    return child;
+  }
+}
+
+function restore(child: ReactElement) {
+  // Right now, parent is always going to be a FLexbox, but might not always be the case
+  const { style: childStyle, restoreStyle } = getProps(child);
+
+  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
+
+  const style = {
+    ...rest,
+    ...restoreStyle
+  };
+
+  return React.cloneElement(child, {
+    collapsed: false,
+    style,
+    restoreStyle: undefined
+  });
+}

package/src/layout-reducer/resize-flex-children.ts

@@ -0,0 +1,56 @@
+import React, { CSSProperties, ReactElement } from 'react';
+import { followPath, getProps } from '../utils';
+import { swapChild } from './replace-layout-element';
+import { SplitterResizeAction } from './layoutTypes';
+import { dimension } from '../common-types';
+
+export function resizeFlexChildren(
+  layoutRoot: ReactElement,
+  { path, sizes }: SplitterResizeAction
+) {
+  const target = followPath(layoutRoot, path, true);
+  const { children, style } = getProps(target);
+
+  const dimension = style.flexDirection === 'column' ? 'height' : 'width';
+  const replacementChildren = applySizesToChildren(children, sizes, dimension);
+
+  const replacement = React.cloneElement(target, undefined, replacementChildren);
+
+  return swapChild(layoutRoot, target, replacement);
+}
+
+function applySizesToChildren(
+  children: ReactElement[],
+  sizes: { currentSize: number; flexBasis: number }[],
+  dimension: dimension
+) {
+  return children.map((child, i) => {
+    const {
+      style: { [dimension]: size, flexBasis: actualFlexBasis }
+    } = getProps(child);
+    const meta = sizes[i];
+    let { currentSize, flexBasis } = meta;
+    const hasCurrentSize = currentSize !== undefined;
+    const newSize = hasCurrentSize ? meta.currentSize : flexBasis;
+
+    if (newSize === undefined || size === newSize || actualFlexBasis === newSize) {
+      return child;
+    } else {
+      return React.cloneElement(child, {
+        style: applySizeToChild(child.props.style, dimension, newSize)
+      });
+    }
+  });
+}
+
+function applySizeToChild(style: CSSProperties, dimension: dimension, newSize: number) {
+  const hasSize = typeof style[dimension] === 'number';
+  const { flexShrink = 1, flexGrow = 1 } = style;
+  return {
+    ...style,
+    [dimension]: hasSize ? newSize : 'auto',
+    flexBasis: hasSize ? 'auto' : newSize,
+    flexShrink,
+    flexGrow
+  };
+}