@infinite-table/infinite-react 0.5.0 → 0.5.2

package/src/components/Menu/childrenToRuntimeItems.tsx

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

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

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

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

package/src/components/RawList/AvoidReactDiff.tsx

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

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