@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/Menu/childrenToRuntimeItems.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { MenuSeparatorCls } from './MenuCls.css';
+import {
+  MenuDecoration,
+  MenuItemDefinition,
+  MenuItemObject,
+  MenuRuntimeItem,
+} from './MenuProps';
+import { MenuRuntimeItemContext } from './MenuState';
+
+const SEPARATOR: MenuItemDefinition = '-';
+
+function MenuSeparator() {
+  return <hr className={MenuSeparatorCls} />;
+}
+
+export const toRuntimeItem = (
+  {
+    columns,
+    keyboardActiveItemKey,
+    activeItemKey,
+    menuId,
+  }: MenuRuntimeItemContext,
+  item: MenuItemDefinition,
+) => {
+  const menuItem =
+    item &&
+    ((item as MenuItemObject).key != null ||
+      (item as MenuItemObject).label != null)
+      ? (item as MenuItemObject)
+      : null;
+
+  const menuDecoration =
+    menuItem === null ? (
+      item === SEPARATOR ? (
+        <MenuSeparator />
+      ) : (
+        (item as MenuDecoration)
+      )
+    ) : null;
+
+  const runtimeItem: MenuRuntimeItem =
+    menuItem != null
+      ? {
+          type: 'item',
+          parentMenuId: menuId,
+          disabled: !!menuItem.disabled,
+          keyboardActive: menuItem.key === keyboardActiveItemKey,
+          active: menuItem.key === activeItemKey,
+          value: menuItem,
+          span: menuItem.span || 1,
+          key: menuItem.key,
+          menu: menuItem.menu || null,
+          style: menuItem.style,
+          className: menuItem.className,
+          originalMenuItem: menuItem,
+        }
+      : {
+          type: 'decoration',
+          value: menuDecoration,
+          span: columns.length,
+          style: {
+            gridColumnStart: 1,
+            gridColumnEnd: columns.length + 10, // it should have been +1, but we might introduce an additional col for submenu icons
+            // so we make this bigger
+          },
+        };
+
+  return runtimeItem;
+};
+
+export function childrenToRuntimeItems(
+  context: MenuRuntimeItemContext,
+  children: React.ReactNode,
+) {
+  // items are passed as children
+  // so we iterate over all children
+  return (
+    React.Children.map(children, (child) => {
+      // to find <MenuItem /> components
+      //@ts-ignore
+      if (child?.props.__is_menu_item) {
+        //@ts-ignore
+        const itemProps = { ...child.props };
+        if (!itemProps.key) {
+          //@ts-ignore
+          itemProps.key = child.key as string;
+        }
+        if (!itemProps.description) {
+          //@ts-ignore
+          itemProps.description = child.props.children;
+        }
+
+        if (!itemProps.label) {
+          itemProps.label = itemProps.children;
+        }
+        return toRuntimeItem(context, itemProps);
+      }
+      // and other decorative elements
+      return toRuntimeItem(context, child as MenuItemDefinition);
+    }) || []
+  );
+}

package/src/components/Menu/getMenuState.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { getChangeDetect } from '../DataSource/privateHooks/getChangeDetect';
+import { ForwardPropsToStateFnResult } from '../hooks/useComponentState';
+import { ExpanderIcon } from '../InfiniteTable/components/icons/ExpanderIcon';
+import {
+  childrenToRuntimeItems,
+  toRuntimeItem,
+} from './childrenToRuntimeItems';
+import {
+  MenuColumn,
+  MenuProps,
+  MenuRuntimeItem,
+  MenuRuntimeItemSelectable,
+} from './MenuProps';
+import {
+  MenuDerivedState,
+  MenuMappedState,
+  MenuSetupState,
+  MenuState,
+} from './MenuState';
+
+const SUBMENU_COL_NAME = 'submenu';
+
+export function getInitialMenuState(): MenuSetupState {
+  const domRef = React.createRef<HTMLDivElement | null>();
+  return {
+    keyboardActiveItemKey: null,
+    activeItemKey: null,
+    generatedId: getChangeDetect(),
+    focused: false,
+    destroyed: false,
+    domRef,
+  };
+}
+
+export const forwardProps = (): ForwardPropsToStateFnResult<
+  MenuProps,
+  MenuMappedState
+> => {
+  return {
+    parentMenuId: 1,
+    parentMenuItemKey: 1,
+    onHideIntent: 1,
+    constrainTo: 1,
+    onAction: 1,
+    onShow: 1,
+    onHide: 1,
+    autoFocus: 1,
+    wrapLabels: 1,
+  };
+};
+
+const defaultColumns: MenuColumn[] = [
+  {
+    name: 'label',
+  },
+];
+
+export const deriveStateFromProps = (params: {
+  props: MenuProps;
+  state: MenuState;
+}): MenuDerivedState => {
+  const { props, state } = params;
+  const { activeItemKey, keyboardActiveItemKey } = state;
+  const { items, children, addSubmenuColumnIfNeeded, parentMenuId } = props;
+
+  let menuId = props.id || state.generatedId;
+
+  if (parentMenuId) {
+    menuId = `${parentMenuId}-${menuId}`;
+  }
+
+  const columns: MenuColumn[] = [...(props.columns || defaultColumns)];
+  const context = {
+    columns,
+    keyboardActiveItemKey,
+    activeItemKey,
+    menuId,
+  };
+
+  let runtimeItems: MenuRuntimeItem[] = [];
+  if (items) {
+    runtimeItems = items.map(toRuntimeItem.bind(null, context));
+  } else if (!items && typeof children !== 'function') {
+    runtimeItems = childrenToRuntimeItems(context, children);
+  }
+
+  if (addSubmenuColumnIfNeeded) {
+    const hasSubmenus =
+      runtimeItems.filter((item) => item.type === 'item' && item.menu != null)
+        .length > 0;
+
+    if (hasSubmenus && !columns.find((col) => col.name == SUBMENU_COL_NAME)) {
+      columns.push({
+        name: SUBMENU_COL_NAME,
+        render: ({ domProps, item }) => {
+          return item.menu ? (
+            <div {...domProps}>
+              <ExpanderIcon expanded={false} />
+            </div>
+          ) : (
+            <div {...domProps} />
+          );
+        },
+      });
+    }
+  }
+
+  const runtimeSelectableItems = runtimeItems.filter(
+    (item) => item.type === 'item' && !item.disabled,
+  ) as MenuRuntimeItemSelectable[];
+
+  return {
+    runtimeItems,
+    runtimeSelectableItems,
+    columns,
+    menuId,
+  };
+};

package/src/components/Menu/index.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+
+import {
+  getComponentStateRoot,
+  useComponentState,
+} from '../hooks/useComponentState';
+import { useLatest } from '../hooks/useLatest';
+import {
+  forwardProps,
+  getInitialMenuState,
+  deriveStateFromProps,
+} from './getMenuState';
+import { MenuComponent } from './Menu';
+import { MenuContext } from './MenuContext';
+import { MenuProps } from './MenuProps';
+import { MenuState } from './MenuState';
+import { propToIdentifyMenu } from './propToIdentifyMenu';
+
+const MenuRoot = getComponentStateRoot({
+  initSetupState: getInitialMenuState,
+  forwardProps,
+  // @ts-ignore
+  mapPropsToState: deriveStateFromProps,
+  layoutEffect: true,
+});
+
+function MenuContextProvider(props: { domProps: HTMLProps<HTMLDivElement> }) {
+  const { componentActions, componentState } = useComponentState<MenuState>();
+
+  const getState = useLatest(componentState);
+
+  return (
+    <MenuContext.Provider
+      value={{ componentActions, componentState, getState }}
+    >
+      <MenuComponent domProps={props.domProps} />
+    </MenuContext.Provider>
+  );
+}
+
+export function Menu(props: MenuProps & HTMLProps<HTMLDivElement>) {
+  const {
+    children,
+    portalContainer,
+    items,
+    parentMenuId,
+
+    addSubmenuColumnIfNeeded,
+    bubbleActionsFromSubmenus,
+    onShow,
+    onHide,
+    wrapLabels,
+    onAction,
+    constrainTo,
+    columns,
+    parentMenuItemKey,
+    autoFocus,
+    id,
+    onHideIntent,
+    //@ts-ignore
+    __is_infinite_menu_component,
+    ...domProps
+  } = props;
+
+  const menu = (
+    <MenuRoot {...props}>
+      <MenuContextProvider domProps={domProps} />
+    </MenuRoot>
+  );
+
+  if (__DEV__) {
+    return <React.StrictMode>{menu}</React.StrictMode>;
+  }
+  return menu;
+}
+
+const menuDefaultProps: MenuProps & { [propToIdentifyMenu]?: boolean } = {
+  addSubmenuColumnIfNeeded: true,
+  bubbleActionsFromSubmenus: true,
+  wrapLabels: false,
+  /**
+   * this is here because we want a simple way for `showOverlay` (which is returned by useOverlay hook)
+   * to inject the portal container into the menu
+   */
+  [propToIdentifyMenu]: true,
+};
+Menu.defaultProps = menuDefaultProps;

package/src/components/Menu/propToIdentifyMenu.ts

@@ -0,0 +1 @@
+export const propToIdentifyMenu = '__is_infinite_menu_component';

package/src/components/RawList/AvoidReactDiff.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import type { Renderable } from '../types/Renderable';
+import type { SubscriptionCallback } from '../types/SubscriptionCallback';
+
+export type AvoidReactDiffProps = {
+  name?: string;
+  useraf?: boolean;
+  updater: SubscriptionCallback<Renderable>;
+};
+
+function AvoidReactDiffFn(props: AvoidReactDiffProps) {
+  const [children, setChildren] = useState<Renderable>(props.updater.get);
+
+  const rafId = useRef<any>(null);
+
+  useEffect(() => {
+    function onChange(children: Renderable) {
+      // so when updater triggers a change
+      // we can re-render and set the children
+
+      if (props.useraf) {
+        if (rafId.current != null) {
+          cancelAnimationFrame(rafId.current);
+        }
+        rafId.current = requestAnimationFrame(() => {
+          setChildren(children);
+        });
+      } else {
+        setChildren(children);
+      }
+    }
+    const remove = props.updater.onChange(onChange);
+
+    return () => {
+      if (rafId.current != null) {
+        cancelAnimationFrame(rafId.current);
+      }
+      remove();
+    };
+  }, [props.updater, props.useraf]);
+
+  return (children as React.ReactNode) ?? null;
+}
+
+//@ts-ignore
+export const AvoidReactDiff = React.memo(AvoidReactDiffFn);

package/src/components/RawList/MappedItems.ts

@@ -0,0 +1,143 @@
+import { Logger } from '../../utils/debug';
+import { Renderable } from '../types/Renderable';
+
+export class MappedItems extends Logger {
+  private elementIndexToItemIndex!: Record<number, number>;
+  private itemIndexToElementIndex!: Record<number, number>;
+  private renderedElements!: Record<number, Renderable>;
+
+  constructor(axis: string) {
+    super(`MappedItems:${axis}`);
+    this.init();
+  }
+
+  init() {
+    this.elementIndexToItemIndex = {};
+    this.itemIndexToElementIndex = {};
+    this.renderedElements = {};
+  }
+
+  reset() {
+    this.init();
+  }
+
+  destroy() {
+    this.init();
+  }
+
+  getUnrenderedItems = (startIndex: number, endIndex: number) => {
+    const result: number[] = [];
+    for (let i = startIndex; i <= endIndex; i++) {
+      if (!this.isRenderedItem(i)) {
+        result.push(i);
+      }
+    }
+
+    return result;
+  };
+
+  getElementsOutsideItemRange = (startIndex: number, endIndex: number) => {
+    const map = this.elementIndexToItemIndex;
+    const result: number[] = [];
+    for (const elementIndex in map) {
+      const itemIndex = map[elementIndex];
+
+      if (itemIndex < startIndex || itemIndex > endIndex) {
+        result.push((elementIndex as any as number) >> 0);
+      }
+    }
+
+    return result;
+  };
+
+  getElementIndexForItem = (itemIndex: number): number | null => {
+    return this.itemIndexToElementIndex[itemIndex] ?? null;
+  };
+
+  isRenderedItem = (itemIndex: number): boolean => {
+    return this.itemIndexToElementIndex[itemIndex] != null;
+  };
+
+  isElementRendered = (elementIndex: number): boolean => {
+    return this.getItemRenderedAtElementIndex(elementIndex) != null;
+  };
+
+  getItemRenderedAtElementIndex = (elementIndex: number): number | null => {
+    const itemIndex = this.elementIndexToItemIndex[elementIndex];
+
+    return itemIndex == null ? null : itemIndex;
+  };
+
+  getRenderedElement = (elementIndex: number): Renderable => {
+    return this.renderedElements[elementIndex];
+  };
+
+  getRenderedElementAtItemIndex = (itemIndex: number): Renderable => {
+    const elementIndex = this.itemIndexToElementIndex[itemIndex];
+    return this.renderedElements[elementIndex];
+  };
+
+  renderItemAtElement(
+    itemIndex: number,
+    elementIndex: number,
+    renderNode?: Renderable,
+  ) {
+    if (__DEV__) {
+      this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
+    }
+    const currentItemIndex: null | number =
+      this.elementIndexToItemIndex[elementIndex];
+
+    if (currentItemIndex != null) {
+      delete this.itemIndexToElementIndex[currentItemIndex];
+    }
+
+    if (renderNode) {
+      this.renderedElements[elementIndex] = renderNode;
+    }
+    this.elementIndexToItemIndex[elementIndex] = itemIndex;
+    this.itemIndexToElementIndex[itemIndex] = elementIndex;
+  }
+
+  discardItem = (itemIndex: number) => {
+    const elementIndex = this.itemIndexToElementIndex[itemIndex];
+    if (elementIndex != null) {
+      delete this.renderedElements[elementIndex];
+      delete this.elementIndexToItemIndex[elementIndex];
+      delete this.itemIndexToElementIndex[itemIndex];
+    }
+  };
+
+  discardElement = (elementIndex: number): boolean => {
+    const itemIndex = this.elementIndexToItemIndex[elementIndex];
+    if (itemIndex != null) {
+      delete this.renderedElements[elementIndex];
+      delete this.elementIndexToItemIndex[elementIndex];
+      delete this.itemIndexToElementIndex[itemIndex];
+
+      return true;
+    }
+    return false;
+  };
+
+  discardElementsStartingWith = (
+    elementIndex: number,
+    callback?: (index: number) => void,
+  ) => {
+    let discarded: boolean;
+    let oneDiscarded: boolean = false;
+    do {
+      discarded = this.discardElement(elementIndex);
+      if (discarded) {
+        oneDiscarded = true;
+        if (callback) {
+          callback(elementIndex);
+        }
+      }
+
+      elementIndex++;
+    } while (discarded);
+
+    return oneDiscarded;
+  };
+}