@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/InfiniteTable/utils/getContextMenuForColumn.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Menu } from '../../Menu';
+import { MenuState } from '../../Menu/MenuState';
+import { InfiniteTableContextValue } from '../types';
+import { defaultGetColumContextMenuItems } from './defaultGetColumContextMenuItems';
+
+export function getContextMenuForColumn<T>(
+  columnId: string | null,
+  context: InfiniteTableContextValue<T>,
+  onHideIntent?: VoidFunction,
+) {
+  if (columnId == null) {
+    return null;
+  }
+  const {
+    getComputed,
+    getState,
+    imperativeApi,
+    componentActions: actions,
+  } = context;
+
+  const { components, getColumContextMenuItems } = getState();
+
+  const MenuCmp = components?.Menu ?? Menu;
+
+  const column = getComputed().computedColumnsMap.get(columnId);
+
+  if (!column) {
+    return null;
+  }
+
+  const getItems = getColumContextMenuItems || defaultGetColumContextMenuItems;
+
+  const items = getItems({
+    column,
+    api: imperativeApi,
+    getState,
+    getComputed,
+    actions,
+  });
+
+  const onRootMouseDown: EventListener = React.useCallback((event: Event) => {
+    //@ts-ignore
+    event.__insideMenu = true;
+  }, []);
+
+  const onHide = (state: MenuState) => {
+    state.domRef.current?.parentNode?.removeEventListener(
+      'mousedown',
+      onRootMouseDown,
+    );
+  };
+
+  return (
+    <MenuCmp
+      autoFocus
+      items={items}
+      onShow={(state) => {
+        state.domRef.current?.parentNode?.addEventListener(
+          'mousedown',
+          onRootMouseDown,
+        );
+      }}
+      onHide={onHide}
+      onHideIntent={useCallback((state: MenuState) => {
+        onHide(state);
+        onHideIntent?.();
+      }, [])}
+    />
+  );
+}

package/src/components/InfiniteTable/utils/infiniteDOMUtils.ts

@@ -0,0 +1,189 @@
+import { selectParent } from '../../../utils/selectParent';
+import { stripVar } from '../../../utils/stripVar';
+import { ScrollPosition } from '../../types/ScrollPosition';
+import { internalProps } from '../internalProps';
+import { InternalVars, ThemeVars } from '../theme.css';
+import { InfiniteTableComputedColumn } from '../types';
+
+const InfiniteSelector = `.${internalProps.rootClassName}`;
+export function getParentInfiniteNode(node: HTMLElement) {
+  return selectParent(node, InfiniteSelector);
+}
+
+const scrollLeft = stripVar(InternalVars.scrollLeft);
+const scrollTop = stripVar(InternalVars.scrollTop);
+
+const columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
+const columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+const columnReorderEffectDurationAtIndex = stripVar(
+  InternalVars.columnReorderEffectDurationAtIndex,
+);
+const columnOffsetAtIndexWhileReordering = stripVar(
+  InternalVars.columnOffsetAtIndexWhileReordering,
+);
+const columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
+
+export function setInfiniteVarOnRoot(
+  varName: keyof typeof InternalVars | string,
+  varValue: string | number,
+  node: HTMLElement | null,
+) {
+  const infinite = node
+    ? getParentInfiniteNode(node)
+    : (document.querySelector(InfiniteSelector) as HTMLElement);
+
+  setInfiniteVarOnNode(varName, varValue, infinite);
+}
+
+export function setInfiniteVarOnNode(
+  varName: keyof typeof InternalVars | string,
+  varValue: string | number,
+  node: HTMLElement | null,
+) {
+  if (node) {
+    const prop = InternalVars[varName as keyof typeof InternalVars]
+      ? stripVar(InternalVars[varName as keyof typeof InternalVars])
+      : varName;
+
+    node.style.setProperty(prop, `${varValue}`);
+  }
+}
+
+export function setInfiniteVarsOnRoot(
+  vars: Partial<Record<keyof typeof InternalVars | string, string | number>>,
+  node: HTMLElement | null,
+) {
+  const infinite = node
+    ? getParentInfiniteNode(node)
+    : (document.querySelector(InfiniteSelector) as HTMLElement);
+
+  setInfiniteVarsOnNode(vars, infinite);
+}
+
+export function setInfiniteVarsOnNode(
+  vars: Partial<Record<keyof typeof InternalVars, string | number>>,
+  node: HTMLElement | null,
+) {
+  if (node) {
+    for (var varName in vars) {
+      node.style.setProperty(
+        InternalVars[varName as keyof typeof InternalVars]
+          ? stripVar(InternalVars[varName as keyof typeof InternalVars])
+          : varName,
+        `${vars[varName as keyof typeof InternalVars]}`,
+      );
+    }
+  }
+}
+
+export function setInfiniteColumnWidth(
+  colIndex: number,
+  colWidth: number | string,
+  node: HTMLElement | null,
+) {
+  setInfiniteVarOnRoot(
+    `${columnWidthAtIndex}-${colIndex}`,
+    typeof colWidth === 'number' ? colWidth + 'px' : colWidth,
+    node,
+  );
+}
+
+export function setInfiniteColumnOffset(
+  colIndex: number,
+  colOffset: number | string,
+  node: HTMLElement | null,
+) {
+  setInfiniteVarOnRoot(
+    `${columnOffsetAtIndex}-${colIndex}`,
+    typeof colOffset === 'number' ? colOffset + 'px' : colOffset,
+    node,
+  );
+}
+
+export function addToInfiniteColumnOffset<T>(
+  column: InfiniteTableComputedColumn<T>,
+  amountToAdd: number,
+  node: HTMLElement | null,
+) {
+  setInfiniteVarOnRoot(
+    `${columnOffsetAtIndex}-${column.computedVisibleIndex}`,
+    !column.computedPinned
+      ? `${column.computedAbsoluteOffset + amountToAdd}px`
+      : `calc( ${
+          column.computedAbsoluteOffset + amountToAdd
+        }px + var(${scrollLeft}))`,
+
+    node,
+  );
+}
+
+export function setInfiniteColumnZIndex(
+  colIndex: number,
+  colZIndex: number | string,
+  node: HTMLElement | null,
+) {
+  setInfiniteVarOnRoot(
+    `${columnZIndexAtIndex}-${colIndex}`,
+    `${colZIndex}`,
+    node,
+  );
+}
+
+export function setInfiniteColumnOffsetWhileReordering(
+  colIndex: number,
+  offset: string | number,
+  node: HTMLElement | null,
+) {
+  setInfiniteVarOnRoot(
+    `${columnOffsetAtIndexWhileReordering}-${colIndex}`,
+    typeof offset === 'number'
+      ? `calc( var(${columnOffsetAtIndex}-${colIndex}) + ${offset}px )`
+      : offset,
+    node,
+  );
+}
+
+export function clearInfiniteColumnReorderDuration(
+  colIndex: number,
+  node: HTMLElement | null,
+  defaultValue?: string,
+) {
+  setInfiniteVarOnRoot(
+    `${columnReorderEffectDurationAtIndex}-${colIndex}`,
+    defaultValue ?? '',
+    node,
+  );
+}
+
+export function restoreInfiniteColumnReorderDuration(
+  colIndex: number,
+  node: HTMLElement | null,
+) {
+  const varName = `${columnReorderEffectDurationAtIndex}-${colIndex}`;
+
+  setInfiniteVarOnRoot(
+    varName,
+    ThemeVars.components.Cell.reorderEffectDuration,
+    node,
+  );
+}
+
+export function getCSSVarNameForColWidth(colIndex: number) {
+  return `${columnWidthAtIndex}-${colIndex}`;
+}
+export function getCSSVarNameForColOffset(colIndex: number) {
+  return `${columnOffsetAtIndex}-${colIndex}`;
+}
+
+export function setInfiniteScrollPosition(
+  scrollPosition: ScrollPosition,
+  node: HTMLElement | null,
+) {
+  setInfiniteVarsOnNode(
+    {
+      [scrollLeft]: `${scrollPosition.scrollLeft}px`,
+      [scrollTop]: `${scrollPosition.scrollTop}px`,
+    },
+    node,
+  );
+}

package/src/components/InfiniteTable/utils/mapToObject.ts

@@ -0,0 +1,20 @@
+export function mapToObject<K extends string, V>(
+  mapOrObject?: Map<K, V> | Record<K, V>,
+): Record<K, V> {
+  if (!mapOrObject) {
+    return {} as Record<K, V>;
+  }
+
+  if (mapOrObject instanceof Map) {
+    const result = {} as Record<K, V>;
+    const entries = [...mapOrObject.entries()] as [K, V][];
+
+    entries.forEach(([key, value]) => {
+      result[key] = value;
+    });
+
+    return result;
+  }
+
+  return mapOrObject;
+}

package/src/components/InfiniteTable/utils/moveXatY.ts

@@ -0,0 +1,25 @@
+export const moveXatY = <T>(
+  arr: T[],
+  dragIndex: number,
+  dropIndex: number,
+): T[] => {
+  arr = [...arr];
+  if (
+    dragIndex === dropIndex ||
+    arr[dragIndex] === undefined ||
+    arr[dropIndex] === undefined
+  ) {
+    return arr;
+  }
+  const dragItem = arr[dragIndex];
+
+  if (dropIndex < dragIndex) {
+    arr.splice(dragIndex, 1);
+    arr.splice(dropIndex, 0, dragItem);
+  } else {
+    arr.splice(dragIndex, 1);
+    arr.splice(dropIndex, 0, dragItem);
+  }
+
+  return arr;
+};

package/src/components/InfiniteTable/utils/objectValuesExcept.ts

@@ -0,0 +1,9 @@
+export function objectValuesExcept(obj: any, exceptList: Record<string, true>) {
+  const result: any[] = [];
+  for (const k in obj)
+    if (obj.hasOwnProperty(k) && !exceptList.hasOwnProperty(k)) {
+      result.push(obj[k]);
+    }
+
+  return result;
+}

package/src/components/InfiniteTable/utils/progressiveSpeedScroller.ts

@@ -0,0 +1,158 @@
+import { cancelRaf, raf } from '../../../utils/raf';
+import { NonUndefined } from '../../types/NonUndefined';
+
+type ProgressiveSpeedScrollerDynamicOptions = {
+  mousePosition: { clientX: number; clientY: number };
+
+  set scrollLeft(value: number);
+  get scrollLeft();
+};
+
+type ProgressiveSpeedScrollerStaticOptions = {
+  scrollOffsetEnd: number;
+  scrollOffsetStart: number;
+  offset?: number;
+  scrollAmountsPerRaf?: number[];
+};
+
+type ProgressiveSpeedScrollerOptions = ProgressiveSpeedScrollerStaticOptions &
+  ProgressiveSpeedScrollerDynamicOptions & {
+    offset: NonUndefined<ProgressiveSpeedScrollerStaticOptions['offset']>;
+  } & {
+    scrollAmountsPerRaf: NonUndefined<
+      ProgressiveSpeedScrollerStaticOptions['scrollAmountsPerRaf']
+    >;
+  };
+
+export const progressiveSpeedScroller = (
+  staticOptions: ProgressiveSpeedScrollerStaticOptions,
+) => {
+  let scrollLeftRafId: number | null = null;
+  let scrollRightRafId: number | null = null;
+
+  return {
+    stop() {
+      if (scrollLeftRafId !== null) {
+        cancelRaf(scrollLeftRafId);
+      }
+      if (scrollRightRafId != null) {
+        cancelRaf(scrollRightRafId);
+      }
+    },
+    scroll(dynamicOptions: ProgressiveSpeedScrollerDynamicOptions) {
+      if (scrollLeftRafId !== null) {
+        cancelRaf(scrollLeftRafId);
+      }
+      if (scrollRightRafId != null) {
+        cancelRaf(scrollRightRafId);
+      }
+
+      const opts: ProgressiveSpeedScrollerOptions = {
+        offset: 100,
+        scrollAmountsPerRaf: [1, 1, 2, 4, 6, 8, 11, 15],
+        ...staticOptions,
+        ...dynamicOptions,
+      };
+
+      const self = this;
+
+      function scrollLeft() {
+        /**
+         * 0 - viewport    scrollOffsetStart
+         *      left
+         * .----------------.----------------. scrollOffsetStart + offset
+         * |                |                |
+         * |                |                |
+         * |                |                |     <- the user goes in this direction with the arrow
+         * |                |                |
+         * |                |     x mouse    |
+         * |                |                |
+         *                        | -------  |  - this is margin distance - the distance the user entered the offset
+         *
+         */
+
+        const marginDistance =
+          opts.scrollOffsetStart + opts.offset - opts.mousePosition.clientX;
+
+        const shouldScrollLeft =
+          marginDistance > 0 && marginDistance <= opts.offset;
+
+        if (!shouldScrollLeft) {
+          return false;
+        }
+
+        const segmentCount = opts.scrollAmountsPerRaf.length;
+        const segmentDistance = Math.round(opts.offset / segmentCount);
+
+        let speed: number = 0;
+        for (let i = 0; i < segmentCount; i++) {
+          if (marginDistance > (i + 1) * segmentDistance) {
+            speed = opts.scrollAmountsPerRaf[i];
+          }
+        }
+
+        dynamicOptions.scrollLeft = dynamicOptions.scrollLeft - speed;
+
+        scrollLeftRafId = raf(() => {
+          self.scroll(dynamicOptions);
+        });
+
+        return true;
+      }
+
+      /**
+       * 0 - viewport    scrollOffsetEnd - offset
+       *      left
+       * .----------------.----------------. scrollOffsetEnd
+       * |                |                |
+       * |                |                |
+       * |                |                |
+       * |                |                |
+       * |                |     x mouse    |
+       * |                |                |
+       *                  |  -----|        |  - this is margin distance - the distance the user entered the offset
+       *
+       * the user goes in this    ->
+       *    direction with the arrow
+       *
+       */
+      function scrollRight() {
+        const marginDistance =
+          opts.mousePosition.clientX - (opts.scrollOffsetEnd - opts.offset);
+
+        const shouldScrollRight =
+          marginDistance > 0 && marginDistance <= opts.offset;
+
+        if (!shouldScrollRight) {
+          return false;
+        }
+
+        const segmentCount = opts.scrollAmountsPerRaf.length;
+        const segmentDistance = Math.round(opts.offset / segmentCount);
+
+        let speed: number = 0;
+        for (let i = 0; i < segmentCount; i++) {
+          if (marginDistance > (i + 1) * segmentDistance) {
+            speed = opts.scrollAmountsPerRaf[i];
+          }
+        }
+
+        dynamicOptions.scrollLeft = dynamicOptions.scrollLeft + speed;
+
+        scrollRightRafId = raf(() => {
+          self.scroll(dynamicOptions);
+        });
+
+        return true;
+      }
+
+      if (scrollLeft()) {
+        return true;
+      }
+      if (scrollRight()) {
+        return true;
+      }
+      return false;
+    },
+  };
+};

package/src/components/InfiniteTable/utils/rafFn.ts

@@ -0,0 +1,13 @@
+export const rafFn = (fn: (...args: any[]) => void) => {
+  let rafId: number = 0;
+
+  return (...args: any[]) => {
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      fn(...args);
+    });
+  };
+};

package/src/components/InfiniteTable/utils/toCSSVarName.ts

@@ -0,0 +1 @@
+export const toCSSVarName = (value: string | null) => `--infinite-${value}`;

package/src/components/InfiniteTable/utils/toMap.ts

@@ -0,0 +1,24 @@
+export function toMap<K extends string, V>(
+  mapOrObject?: Map<K, V> | Record<K, V>,
+  weakMapCache?: WeakMap<any, any>,
+): Map<K, V> {
+  if (!mapOrObject) {
+    return new Map<K, V>();
+  }
+
+  if (mapOrObject instanceof Map) {
+    return mapOrObject;
+  }
+
+  if (weakMapCache && weakMapCache.has(mapOrObject)) {
+    return weakMapCache.get(mapOrObject) as Map<K, V>;
+  }
+
+  const result = new Map<K, V>(Object.entries(mapOrObject) as [K, V][]);
+
+  if (weakMapCache) {
+    weakMapCache.set(mapOrObject, result);
+  }
+
+  return result;
+}