@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/InfiniteTable/hooks/useEffectWithRaf.ts

@@ -0,0 +1,47 @@
+import { EffectCallback, DependencyList, useLayoutEffect } from 'react';
+import { useEffect, useRef } from 'react';
+
+export function useEffectWithRaf(fn: EffectCallback, deps: DependencyList) {
+  const rafId = useRef<number>(0);
+  const removeFnRaf = useRef<Function | void>();
+
+  useEffect(() => {
+    rafId.current = requestAnimationFrame(() => {
+      removeFnRaf.current = fn();
+    });
+
+    return () => {
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current);
+      }
+      if (typeof removeFnRaf.current === 'function') {
+        removeFnRaf.current();
+        removeFnRaf.current = undefined;
+      }
+    };
+  }, deps);
+}
+
+export function useLayoutEffectWithRaf(
+  fn: EffectCallback,
+  deps: DependencyList,
+) {
+  const rafId = useRef<number>(0);
+  const removeFnRaf = useRef<Function | void>();
+
+  useLayoutEffect(() => {
+    rafId.current = requestAnimationFrame(() => {
+      removeFnRaf.current = fn();
+    });
+
+    return () => {
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current);
+      }
+      if (typeof removeFnRaf.current === 'function') {
+        removeFnRaf.current();
+        removeFnRaf.current = undefined;
+      }
+    };
+  }, deps);
+}

package/src/components/InfiniteTable/hooks/useInfiniteTable.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import type { InfiniteTableContextValue } from '../types';
+
+import { getInfiniteTableContext } from '../InfiniteTableContext';
+
+export const useInfiniteTable = <T>(): InfiniteTableContextValue<T> => {
+  const TableContext = getInfiniteTableContext<T>();
+
+  return useContext(TableContext);
+};

package/src/components/InfiniteTable/hooks/useInfiniteTableState.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { InfiniteTableState } from '../types';
+
+import { getInfiniteTableContext } from '../InfiniteTableContext';
+
+export const useInfiniteTableState = <T>(): InfiniteTableState<T> => {
+  const TableContext = getInfiniteTableContext<T>();
+  const { componentState } = useContext(TableContext);
+
+  return componentState;
+};

package/src/components/InfiniteTable/hooks/useInternalProps.ts

@@ -0,0 +1,8 @@
+import { internalProps } from '../internalProps';
+
+export const useInternalProps = () => {
+  return internalProps;
+};
+export const getInternalProps = () => {
+  return internalProps;
+};

package/src/components/InfiniteTable/hooks/useLicense/LicenseDetails.ts

@@ -0,0 +1,13 @@
+export type LicenseDetails = {
+  start: Date;
+  end: Date;
+  owner: string;
+  distribution: boolean;
+  trial: boolean;
+  skipAirtable?: boolean;
+  type: string;
+  count?: number;
+  timestamp?: number;
+
+  ref: string;
+};

package/src/components/InfiniteTable/hooks/useLicense/crc32.ts

@@ -0,0 +1,56 @@
+const DEFAULT_ReversedPolynomial = 0xedb88320;
+
+/*
+ * CRC-32 implementation
+ */
+
+function crc32_generate(reversedPolynomial = DEFAULT_ReversedPolynomial) {
+  var table = new Array();
+  var i, j, n;
+
+  for (i = 0; i < 256; i++) {
+    n = i;
+    for (j = 8; j > 0; j--) {
+      if ((n & 1) == 1) {
+        n = (n >>> 1) ^ reversedPolynomial;
+      } else {
+        n = n >>> 1;
+      }
+    }
+    table[i] = n;
+  }
+
+  return table;
+}
+
+function crc32_initial() {
+  return 0xffffffff;
+}
+
+function crc32_add_byte(table: number[], crc: number, byte: number) {
+  crc = (crc >>> 8) ^ table[byte ^ (crc & 0x000000ff)];
+  return crc;
+}
+
+function crc32_final(crc: number) {
+  crc = ~crc;
+  crc = crc < 0 ? 0xffffffff + crc + 1 : crc;
+  return crc;
+}
+
+export function crc32_compute_string(
+  str: string,
+  reversedPolynomial = DEFAULT_ReversedPolynomial,
+): string {
+  var table = crc32_generate(reversedPolynomial);
+  var crc = 0;
+  var i;
+
+  crc = crc32_initial();
+
+  for (i = 0; i < str.length; i++)
+    crc = crc32_add_byte(table, crc, str.charCodeAt(i));
+
+  crc = crc32_final(crc);
+  return `${crc}`;
+}

package/src/components/InfiniteTable/hooks/useLicense/decode.ts

@@ -0,0 +1,147 @@
+import { crc32_compute_string } from './crc32';
+import { LicenseDetails } from './LicenseDetails';
+
+export const fieldsToLicenseDetails = (
+  fields: { name: string; value: string }[],
+): LicenseDetails => {
+  const fieldsMap = fields.reduce((acc, field) => {
+    acc.set(field.name, field.value);
+    return acc;
+  }, new Map<string, string>());
+
+  const details: LicenseDetails = {
+    distribution: fieldsMap.get('Type') === 'distribution',
+    count: fieldsMap.get('DevCount') ? Number(fieldsMap.get('DevCount')) : 0,
+    start: new Date(fieldsMap.get('StartDate')!),
+    end: new Date(fieldsMap.get('EndDate')!),
+    owner: fieldsMap.get('Owner')!,
+    type: fieldsMap.get('Type')!,
+    timestamp: fieldsMap.get('TS') ? Number(fieldsMap.get('TS')) : 0,
+    trial: fieldsMap.get('Trial') === 'true' ? true : false,
+    ref: fieldsMap.get('Ref') ?? '',
+  };
+
+  return details;
+};
+
+export const logLicenseError = (
+  lines: string[],
+  fn: (...line: string[]) => void = console.error.bind(console),
+) => {
+  lines = ['* * * infinite-table.com * * *', ...lines];
+  const max = Math.max(Math.max(...lines.map((l) => l.length)) + 4 * 2, 60); // 4 extra characters on each line, 3 stars and 1 space
+
+  lines.forEach((line) => {
+    let sideCount = (max - line.length) / 2 - 1; // there's 1 extra space on each side
+    let offset = 0;
+
+    if (sideCount !== Math.round(sideCount)) {
+      offset = -1;
+      sideCount = Math.round(sideCount);
+    }
+    const start = sideCount + offset;
+    const end = sideCount;
+
+    fn('*'.repeat(start) + ' ' + line + ' ' + '*'.repeat(end));
+  });
+
+  fn('*'.repeat(max));
+};
+
+export const isValidLicense = (
+  licenseKey: string = '',
+  packageInfo: { publishedAt: number; version: string },
+  fn?: (...args: string[]) => void,
+) => {
+  let details: LicenseDetails;
+
+  try {
+    details = decode(licenseKey);
+  } catch (ex) {
+    logLicenseError(
+      [
+        `You don't have a valid Infinite Table license`,
+        'Please visit infinite-table.com to purchase a license.',
+        'Thank you for playing fair!',
+      ],
+      fn,
+    );
+    return false;
+  }
+
+  const currentVersionReleaseDate = new Date(packageInfo.publishedAt);
+  const licenseEndDate = new Date(details.end);
+
+  if (licenseEndDate < currentVersionReleaseDate) {
+    logLicenseError(
+      [
+        `
+Your Infinite Table license has expired on ${licenseEndDate.toDateString()}.
+`,
+        `You are using version "${
+          packageInfo.version
+        }" of Infinite Table, which was published on ${currentVersionReleaseDate.toDateString()}.`,
+        `Please visit infinite-table.com to renew your license.`,
+        `Thank you for playing fair!`,
+      ],
+      fn,
+    );
+
+    return false;
+  }
+
+  return true;
+};
+
+export const decode = (licenseKey: string): LicenseDetails => {
+  let crc: string = '';
+  let fields = licenseKey.split('|').map((part) => {
+    let [name, value] = part.split('=');
+
+    if (name === 'C') {
+      crc = value;
+    }
+
+    return {
+      name,
+      value,
+    };
+  });
+
+  if (!crc) {
+    throw 'Invalid license';
+  }
+
+  const crcParts = crc.split(',').reverse();
+
+  const overallCrc = crcParts.pop();
+  crcParts.forEach((fieldCrc, index) => {
+    const field = fields[index];
+    if (crc32_compute_string(field.value) !== fieldCrc) {
+      throw 'Invalid license';
+    }
+  });
+
+  const fieldsWithoutC = [...fields];
+
+  fieldsWithoutC.pop();
+
+  const fieldsWithoutCString = fieldsWithoutC
+    .map((field) => {
+      return `${field.name}=${field.value}`;
+    })
+    .join('|');
+
+  if (crc32_compute_string(fieldsWithoutCString) !== overallCrc) {
+    throw 'Invalid license';
+  }
+
+  fields = fields.map((f) => {
+    return {
+      ...f,
+      value: decodeURI(f.value),
+    };
+  });
+
+  return fieldsToLicenseDetails(fields);
+};

package/src/components/InfiniteTable/hooks/useLicense/useLicense.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { isValidLicense } from './decode';
+
+const SANDPACK_REGEX =
+  /(https):\/\/\d+\-\d+\-\d+\-(sandpack\.codesandbox\.io)/g;
+const SANDBOX_REGEX = /(https):\/\/\S+(\.csb\.app)/g;
+
+const origin = typeof window !== 'undefined' ? window.location.origin : '';
+
+const isInsideSandpack = () => {
+  const [_fullUrl, protocol, sandpackUrl] = Array.from(
+    SANDPACK_REGEX.exec(origin) || [],
+  );
+  return protocol === 'https' && sandpackUrl === 'sandpack.codesandbox.io';
+};
+const isInsideSandbox = () => {
+  const [_fullUrl, protocol, sandboxUrl] = Array.from(
+    SANDBOX_REGEX.exec(origin) || [],
+  );
+  return protocol === 'https' && sandboxUrl === '.csb.app';
+};
+
+const isInsidePlayground = isInsideSandbox() || isInsideSandpack();
+
+export const useLicense = (licenseKey: string = '') => {
+  const valid = useMemo(() => {
+    let valid = isValidLicense(licenseKey, {
+      publishedAt: __VERSION_TIMESTAMP__,
+      version: __VERSION__,
+    });
+
+    if (!licenseKey && !valid && isInsidePlayground) {
+      return true;
+    }
+
+    return valid;
+  }, [licenseKey]);
+  return valid;
+};

package/src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useRerender } from '../../hooks/useRerender';
+import { interceptMap } from '../../hooks/useInterceptedMap';
+import { rafFn } from '../utils/rafFn';
+
+export const useRerenderOnKeyChange = <K extends unknown, V extends unknown>(
+  map: Map<K, V>,
+) => {
+  const [renderId, rerender] = useRerender();
+
+  useEffect(() => {
+    const update = rafFn(rerender);
+    return interceptMap(map, {
+      set: update,
+      clear: update,
+      delete: update,
+    });
+  }, [map]);
+
+  return renderId;
+};

package/src/components/InfiniteTable/hooks/useRowHover.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+export const useRowHover = (
+  ref: React.MutableRefObject<HTMLElement | null>,
+) => {
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+
+    // const onMouseEnter = (event) => {
+    //   console.log(event);
+    // };
+    // node.addEventListener('mouseover', onMouseEnter);
+    return () => {};
+  }, [ref.current]);
+};

package/src/components/InfiniteTable/hooks/useScrollToActiveCell.ts

@@ -0,0 +1,48 @@
+import { useRef, useEffect } from 'react';
+import { cancelRaf, raf } from '../../../utils/raf';
+
+import { InfiniteTableApi } from '../types';
+
+const RETRIES = 10;
+
+export function useScrollToActiveCell<T>(
+  activeCellIndex: [number, number] | null | undefined,
+  dataCount: number,
+  imperativeApi: InfiniteTableApi<T>,
+) {
+  const didScrollRef = useRef<boolean>(false);
+  const rafId = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (activeCellIndex != null) {
+      didScrollRef.current = false;
+      cancelRaf(rafId.current!);
+    }
+  }, [activeCellIndex]);
+  useEffect(() => {
+    if (activeCellIndex != null && !didScrollRef.current) {
+      function tryScroll(times = 0) {
+        times++;
+        cancelRaf(rafId.current!);
+        rafId.current = raf(() => {
+          didScrollRef.current = imperativeApi.scrollCellIntoView(
+            activeCellIndex![0],
+            activeCellIndex![1],
+            {
+              offset: 30,
+            },
+          );
+          if (!didScrollRef.current && times < RETRIES) {
+            tryScroll(times);
+          }
+        });
+      }
+
+      tryScroll();
+    }
+
+    return () => {
+      cancelRaf(rafId.current!);
+    };
+  }, [activeCellIndex, dataCount]);
+}

package/src/components/InfiniteTable/hooks/useScrollToActiveRow.ts

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from 'react';
+import { InfiniteTableApi } from '../types';
+
+const RETRIES = 10;
+
+export function useScrollToActiveRow<T>(
+  activeRowIndex: number | null | undefined,
+  dataCount: number,
+  imperativeApi: InfiniteTableApi<T>,
+) {
+  const didScrollRef = useRef<boolean>(false);
+  const rafId = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (activeRowIndex != null) {
+      didScrollRef.current = false;
+      cancelAnimationFrame(rafId.current!);
+    }
+  }, [activeRowIndex]);
+
+  useEffect(() => {
+    if (activeRowIndex != null && !didScrollRef.current) {
+      function tryScroll(times = 0) {
+        times++;
+        rafId.current = requestAnimationFrame(() => {
+          didScrollRef.current = imperativeApi.scrollRowIntoView(
+            activeRowIndex!,
+            {
+              offset: 0,
+            },
+          );
+          if (!didScrollRef.current && times < RETRIES) {
+            tryScroll(times);
+          }
+        });
+      }
+
+      tryScroll();
+    }
+    return () => {
+      cancelAnimationFrame(rafId.current!);
+    };
+  }, [activeRowIndex, dataCount]);
+}

package/src/components/InfiniteTable/hooks/useScrollbars.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect, useLayoutEffect } from 'react';
+
+import { useDataSourceContextValue } from '../../DataSource/publicHooks/useDataSource';
+import { useComponentState } from '../../hooks/useComponentState';
+import { MatrixBrain } from '../../VirtualBrain/MatrixBrain';
+import { InfiniteTableState, Scrollbars } from '../types';
+
+const INITIAL_SCROLLBARS: Scrollbars = {
+  vertical: false,
+  horizontal: false,
+};
+
+export function useScrollbars<T>(brain: MatrixBrain) {
+  const { getComponentState: getInfiniteTableState } =
+    useComponentState<InfiniteTableState<T>>();
+  const { getState: getDataSourceState } = useDataSourceContextValue<T>();
+
+  const [scrollbars, setScrollbars] = useState(INITIAL_SCROLLBARS);
+
+  useEffect(() => {
+    return brain.onRenderCountChange(() => {
+      const { scrollTopMax, scrollLeftMax } = brain;
+
+      setScrollbars({
+        vertical: scrollTopMax > 0,
+        horizontal: scrollLeftMax > 0,
+      });
+    });
+  }, [brain]);
+
+  useLayoutEffect(() => {
+    // this needs to be useLayoutEffect
+    // on live Pagination cursor change we need this - ref #lvpgn
+    const dataSourceState = getDataSourceState();
+    const { onScrollbarsChange } = getInfiniteTableState();
+    const { notifyScrollbarsChange } = dataSourceState;
+
+    if (
+      onScrollbarsChange &&
+      // we add extra conditions so as to fire this only after initial data load
+      dataSourceState.updatedAt &&
+      dataSourceState.dataArray.length
+    ) {
+      onScrollbarsChange(scrollbars);
+    }
+
+    notifyScrollbarsChange(scrollbars);
+  }, [scrollbars]);
+
+  return scrollbars;
+}

package/src/components/InfiniteTable/hooks/useToggleGroupRow.ts

@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+
+import { DeepMap } from '../../../utils/DeepMap';
+import { LAZY_ROOT_KEY_FOR_GROUPS } from '../../../utils/groupAndPivot';
+import { GroupRowsState } from '../../DataSource';
+import { getChangeDetect } from '../../DataSource/privateHooks/getChangeDetect';
+import { loadData } from '../../DataSource/privateHooks/useLoadData';
+import { useDataSourceContextValue } from '../../DataSource/publicHooks/useDataSource';
+
+export type ToggleGroupRowFn = (groupKeys: any[]) => void;
+
+export function useToggleGroupRow<T>() {
+  const { getState: getDataSourceState, componentActions: dataSourceActions } =
+    useDataSourceContextValue<T>();
+
+  const toggleGroupRow = useCallback<ToggleGroupRowFn>((groupKeys: any[]) => {
+    // todo this  is duplicated in imperative api
+
+    const state = getDataSourceState();
+    const newState = new GroupRowsState(state.groupRowsState);
+    newState.toggleGroupRow(groupKeys);
+
+    dataSourceActions.groupRowsState = newState;
+    if (state.lazyLoad) {
+      const dataKeys = [LAZY_ROOT_KEY_FOR_GROUPS, ...groupKeys];
+      const currentData = state.originalLazyGroupData.get(dataKeys);
+
+      if (newState.isGroupRowExpanded(groupKeys)) {
+        if (!currentData?.cache) {
+          loadData(state.data, state, dataSourceActions, {
+            groupKeys,
+          });
+        }
+      } else {
+        if (!currentData?.cache) {
+          const keysToDelete =
+            state.lazyLoadCacheOfLoadedBatches.getKeysStartingWith(groupKeys);
+          keysToDelete.forEach((keys) => {
+            state.lazyLoadCacheOfLoadedBatches.delete(keys);
+          });
+
+          dataSourceActions.lazyLoadCacheOfLoadedBatches = DeepMap.clone(
+            state.lazyLoadCacheOfLoadedBatches,
+          );
+
+          state.originalLazyGroupData.delete(dataKeys);
+
+          dataSourceActions.originalLazyGroupDataChangeDetect =
+            getChangeDetect();
+        }
+      }
+    }
+  }, []);
+
+  return toggleGroupRow;
+}