@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/hooks/usePropertyOld.ts

@@ -0,0 +1,168 @@
+import {
+  useState,
+  useRef,
+  useLayoutEffect,
+  useEffect,
+  useCallback,
+} from 'react';
+import { toUpperFirst } from '../../utils/toUpperFirst';
+import { AllPropertiesOrNone } from '../InfiniteTable/types/Utility';
+import { Setter } from '../types/Setter';
+import { isControlled } from '../utils/isControlled';
+import { isControlledValue } from '../utils/isControlledValue';
+import { useLatest } from './useLatest';
+
+import { usePrevious } from './usePrevious';
+
+const DEFAULT_CONFIG = {
+  controlledToState: true,
+  defaultValue: undefined,
+};
+
+function useProperty<V extends keyof T_PROPS, T_PROPS, NORMALIZED>(
+  propName: V,
+  props: T_PROPS,
+  config: AllPropertiesOrNone<{
+    fromState?: () => NORMALIZED;
+    setState?: (v: NORMALIZED) => void;
+  }> & {
+    defaultValue?: T_PROPS[V];
+
+    normalize?: (v?: NORMALIZED | T_PROPS[V]) => NORMALIZED;
+    onControlledChange?: (n: NORMALIZED, v: NORMALIZED | T_PROPS[V]) => void;
+    controlledToState?: boolean;
+  } = {
+    normalize: (v?: NORMALIZED | T_PROPS[V]): NORMALIZED => {
+      return v as any as NORMALIZED;
+    },
+    controlledToState: DEFAULT_CONFIG.controlledToState,
+  },
+): [NORMALIZED, Setter<NORMALIZED | T_PROPS[V]>] {
+  config = config ?? DEFAULT_CONFIG;
+  const propsRef = useRef<T_PROPS>(props);
+
+  const getConfig = useLatest(config);
+
+  const getNormalized = (v?: NORMALIZED | T_PROPS[V]): NORMALIZED => {
+    const fn =
+      getConfig().normalize ??
+      ((v?: NORMALIZED | T_PROPS[V]): NORMALIZED => {
+        return v as any as NORMALIZED;
+      });
+
+    return fn(v);
+  };
+
+  const controlledToState =
+    config.controlledToState ?? DEFAULT_CONFIG.controlledToState;
+
+  const upperPropName = toUpperFirst(propName as string);
+  const defaultPropName = `default${upperPropName}` as V;
+
+  const defaultValue =
+    props[defaultPropName] !== undefined
+      ? props[defaultPropName]
+      : config.defaultValue;
+
+  let [stateValue, setStateValue] = useState<NORMALIZED>(() => {
+    let val = getNormalized(defaultValue);
+    const config = getConfig();
+
+    if (val === undefined && config && config.fromState) {
+      val = config.fromState();
+    }
+    return val;
+  });
+
+  if (config && config.fromState) {
+    stateValue = config.fromState();
+  }
+
+  const propValue = props[propName];
+
+  const controlled: boolean = isControlled(propName, props);
+  const storeInState = !controlled || controlledToState;
+
+  const value: NORMALIZED = !controlled ? stateValue : getNormalized(propValue);
+
+  const setState = useCallback(
+    (
+      value: NORMALIZED | T_PROPS[V],
+      beforeSetState?: (
+        normalizedValue: NORMALIZED,
+        value: NORMALIZED | T_PROPS[V],
+      ) => void,
+    ) => {
+      const config = getConfig();
+      const normalizedValue: NORMALIZED = getNormalized(value);
+
+      if (beforeSetState) {
+        beforeSetState(normalizedValue, value);
+      }
+      if (config && config.setState) {
+        config.setState(normalizedValue);
+      } else {
+        setStateValue(normalizedValue);
+      }
+    },
+    [setStateValue],
+  );
+
+  const setValue = useCallback(
+    (
+      val:
+        | (NORMALIZED | T_PROPS[V])
+        | ((prevVal: NORMALIZED | T_PROPS[V]) => NORMALIZED | T_PROPS[V]),
+    ): void => {
+      // const latestProps: T_PROPS = propsRef.current;
+      const latestValue: NORMALIZED = valueRef.current;
+      // const currentProps: T_PROPS = latestProps;
+
+      const newValue: T_PROPS[V] | NORMALIZED =
+        val instanceof Function ? val(latestValue) : val;
+
+      if (storeInState) {
+        setState(newValue);
+      }
+
+      // const callbackPropName = `on${upperPropName}Change` as string;
+      // const callbackProp = (currentProps as any)[callbackPropName] as Function;
+
+      // if (typeof callbackProp === 'function') {
+      //   callbackProp(newValue);
+      // }
+    },
+    [setState, storeInState],
+  );
+
+  const valueRef = useRef<NORMALIZED>(value);
+
+  useLayoutEffect(() => {
+    propsRef.current = props;
+    valueRef.current = value;
+  });
+
+  useEffect(() => {
+    const latestProps = propsRef.current;
+    const propValue = latestProps[propName];
+    if (isControlledValue(propValue) && config?.controlledToState) {
+      setState(propValue, config.onControlledChange);
+    }
+  }, [propValue, setState]);
+
+  const prevStateValue = usePrevious(stateValue);
+
+  useEffect(() => {
+    const currentProps = propsRef.current;
+    const callbackPropName = `on${upperPropName}Change` as string;
+    const callbackProp = (currentProps as any)[callbackPropName] as Function;
+
+    if (typeof callbackProp === 'function' && stateValue !== prevStateValue) {
+      callbackProp(stateValue);
+    }
+  }, [stateValue, prevStateValue]);
+
+  return [value, setValue];
+}
+
+export default useProperty;

package/src/components/hooks/useRerender.ts

@@ -0,0 +1,12 @@
+import { useCallback, useState } from 'react';
+
+export const useRerender = (): [number, () => void] => {
+  const [state, setState] = useState(0);
+
+  return [
+    state,
+    useCallback(() => {
+      setState((state) => state + 1);
+    }, [setState]),
+  ];
+};

package/src/components/hooks/xuseProperty.ts

@@ -0,0 +1,165 @@
+/*eslint-disable */
+import { useEffect, useCallback, useRef } from 'react';
+
+import { toUpperFirst } from '../../utils/toUpperFirst';
+// import { AllPropertiesOrNone } from '../InfiniteTable/types/Utility';
+import { Setter } from '../types/Setter';
+import { isControlled } from '../utils/isControlled';
+import { isControlledValue } from '../utils/isControlledValue';
+import { useLatest } from './useLatest';
+import { usePrevious } from './usePrevious';
+
+export const notifyChange = (props: any, propName: string, newValue: any) => {
+  const upperPropName = toUpperFirst(propName);
+  const callbackPropName = `on${upperPropName}Change` as string;
+  const callbackProp = props[callbackPropName] as Function;
+
+  if (typeof callbackProp === 'function') {
+    callbackProp(newValue);
+  }
+};
+
+function useProperty<V extends keyof T_PROPS, T_PROPS, NORMALIZED>(
+  propName: V,
+  props: T_PROPS,
+  config: {
+    fromState: (defaultValue?: NORMALIZED) => NORMALIZED;
+    setState: (v: NORMALIZED) => void;
+  } & {
+    defaultValue?: T_PROPS[V];
+
+    normalize?: (v?: NORMALIZED | T_PROPS[V]) => NORMALIZED;
+    onControlledChange?: (n: NORMALIZED, v: NORMALIZED | T_PROPS[V]) => void;
+  },
+): [NORMALIZED, Setter<NORMALIZED | T_PROPS[V]>] {
+  const getConfig = useLatest(config);
+  const getProps = useLatest(props);
+
+  // eslint-disable-next-line
+  if (__DEV__) {
+    const prevName = usePrevious(propName);
+    if (prevName !== propName) {
+      throw `useProperty hook: Cannot change managed property! Changed from "${prevName}" to "${propName}".`;
+    }
+  }
+
+  const getNormalized = (v?: NORMALIZED | T_PROPS[V]): NORMALIZED => {
+    const fn =
+      getConfig().normalize ??
+      ((v?: NORMALIZED | T_PROPS[V]): NORMALIZED => {
+        return v as any as NORMALIZED;
+      });
+
+    return fn(v);
+  };
+
+  const stateValue = config.fromState();
+  const propValue = props[propName];
+  const controlled: boolean = isControlled(propName, props);
+
+  const value: NORMALIZED = !controlled ? stateValue : getNormalized(propValue);
+
+  const getValue = useLatest(value);
+
+  const notify = (newValue: any) => {
+    notifyChange(getProps(), propName as string, newValue);
+  };
+
+  const setValue = useCallback(
+    (
+      val:
+        | (NORMALIZED | T_PROPS[V])
+        | ((prevVal: NORMALIZED | T_PROPS[V]) => NORMALIZED | T_PROPS[V]),
+    ): void => {
+      const latestValue: NORMALIZED = getValue();
+      const config = getConfig();
+
+      let newValue: T_PROPS[V] | NORMALIZED =
+        val instanceof Function ? val(latestValue) : val;
+
+      newValue = getNormalized(newValue);
+
+      if (isControlled(propName, getProps())) {
+        // internalCacheRef.current = newValue; // this line is to avoid another notification later when state changes
+        // config.setState(newValue);
+        // CASE 2
+        notify(newValue);
+      } else {
+        // CASE 3
+        skipNotifyRef.current = newValue; // this line is to avoid another notification later when state changes
+        config.setState(newValue);
+        notify(newValue);
+      }
+    },
+    [],
+  );
+
+  /***
+CONTROLLED:
+   1 - controlled change = config.setState + SKIP notify!!!
+   2 - controlled prop + setValue = DO notify + step 1
+   3 - controlled prop is same + internal state change (from config.fromState) = DO notify
+
+UNCONTROLLED:
+  - uncontrolled is same + config.fromState() value changes = DO notify
+  - uncontrolled + setValue = config.setState  + DO NOTIFY
+
+SUMMARY:
+   CASE 1 - controlled change = config.setState + SKIP notify
+   CASE 2 - controlled prop + setValue = DO notify  + step 1
+   CASE 3 - uncontrolled prop + setValue = config.setState + DO notify = config.setState + step 4
+   CASE 4 - controlled/uncontrolled prop is same + config.fromState changes = DO NOTIFY
+
+ALSO, there is another case we need to be aware of, but maybe we don't have to handle it here:
+
+controlled prop that doesn't update, but we call actions.setColumnOrder([...]), which should theoretically modify the internal state
+but actually it shouldn't, as it should be aware that it's a controlled prop, so should just notify
+*/
+
+  const initialRenderRef = useRef(true);
+  const skipNotifyRef = useRef<NORMALIZED>();
+
+  useEffect(() => {
+    // CASE 1
+    // const initialRender = initialRenderRef.current;
+    // if (initialRender) {
+    //   return;
+    // }
+
+    const props = getProps();
+    const propValue = props[propName];
+    const isControlled = isControlledValue(propValue);
+    if (isControlled) {
+      const normalizedValue = getNormalized(propValue);
+      skipNotifyRef.current = normalizedValue;
+      getConfig().setState(normalizedValue);
+    }
+  }, [propValue]);
+
+  useEffect(() => {
+    const initialRender = initialRenderRef.current;
+    if (initialRender) {
+      return;
+    }
+    if (stateValue === skipNotifyRef.current) {
+      // we had a change triggered by controlled change so we skip notify
+      // part of CASE 1
+      skipNotifyRef.current = undefined;
+      return;
+    }
+    skipNotifyRef.current = undefined;
+    // CASE 4
+    notify(stateValue);
+  }, [stateValue]);
+
+  useEffect(() => {
+    initialRenderRef.current = false;
+  }, []);
+
+  /**
+   * WE NEED TO ALWAYS RETURN the value from STATE!!!
+   */
+  return [stateValue, setValue];
+}
+
+export { useProperty };

package/src/components/types/CellPosition.ts

@@ -0,0 +1,4 @@
+export type CellPosition = {
+  rowIndex: number;
+  colIndex: number;
+};

package/src/components/types/NonUndefined.ts

@@ -0,0 +1 @@
+export type NonUndefined<T> = T extends undefined ? never : T;

package/src/components/types/RemoveObject.ts

@@ -0,0 +1,22 @@
+/**
+
+We have this utility - it's used in Menu Renderable declaration
+because:
+
+type Renderable = React.ReactNode;
+
+const x: Renderable = <div />;
+const y: Renderable = {};
+
+we don't want to allow the above `y` as a valid declaration
+
+it breaks some types in the Menu component as well
+
+ */
+export type RemoveObject<T> = T extends null | undefined
+  ? T
+  : T extends unknown
+  ? keyof T extends never
+    ? never
+    : T
+  : never;

package/src/components/types/Renderable.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export type Renderable = React.ReactNode | JSX.Element;

package/src/components/types/ScrollPosition.ts

@@ -0,0 +1,7 @@
+export interface ScrollPosition {
+  scrollTop: number;
+  scrollLeft: number;
+}
+
+export type OnScrollFn = (scrollPosition: ScrollPosition) => void;
+export type SetScrollPosition = OnScrollFn;

package/src/components/types/Setter.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export interface Setter<T> extends React.Dispatch<React.SetStateAction<T>> {}

package/src/components/types/Size.ts

@@ -0,0 +1,6 @@
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export type OnResizeFn = (size: { width: number; height: number }) => void;

package/src/components/types/SubscriptionCallback.ts

@@ -0,0 +1,10 @@
+import { VoidFn } from './VoidFn';
+
+export type SubscriptionCallbackOnChangeFn<T> = (node: T | null) => void;
+
+export interface SubscriptionCallback<T> {
+  (node: T, callback?: () => void): void;
+  get: () => T | null;
+  destroy: VoidFn;
+  onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
+}

package/src/components/types/VoidFn.ts

@@ -0,0 +1 @@
+export type VoidFn = () => void;

package/src/components/utils/buildSubscriptionCallback.tsx

@@ -0,0 +1,60 @@
+import {
+  SubscriptionCallbackOnChangeFn,
+  SubscriptionCallback,
+} from '../types/SubscriptionCallback';
+
+export function buildSubscriptionCallback<T>(
+  withRaf = false,
+): SubscriptionCallback<T> {
+  let lastCallValue: T | null = null;
+  let fns: SubscriptionCallbackOnChangeFn<T>[] = [];
+
+  let rafId: number | null = null;
+
+  const updater = (items: T, callback?: (results: any[]) => void) => {
+    const results: any[] = [];
+    if (withRaf) {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      requestAnimationFrame(() => {
+        lastCallValue = items;
+        rafId = null;
+
+        // change happens here
+        for (let i = 0, len = fns.length; i < len; i++) {
+          results.push(fns[i](items));
+        }
+        callback?.(results);
+      });
+    } else {
+      lastCallValue = items;
+
+      // change happens here
+      for (let i = 0, len = fns.length; i < len; i++) {
+        results.push(fns[i](items));
+      }
+      callback?.(results);
+    }
+  };
+
+  updater.get = () => lastCallValue;
+
+  // this attaches a new listener to changes
+  updater.onChange = (fn: SubscriptionCallbackOnChangeFn<T>) => {
+    fns.push(fn);
+    return () => {
+      fns = fns.filter((f) => f !== fn);
+    };
+  };
+
+  updater.destroy = () => {
+    updater(null as any as T);
+    fns.length = 0;
+  };
+
+  updater.getListenersCount = () => fns.length;
+
+  return updater;
+}

package/src/components/utils/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/components/utils/debounce.ts

@@ -0,0 +1,16 @@
+export function debounce(fn: Function, { wait }: { wait: number }) {
+  let timeout: number | null = null;
+
+  return function (...args: any[]) {
+    //@ts-ignore
+    const context = this;
+
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(() => {
+      fn.apply(context, args);
+    }, wait) as any as number;
+  };
+}

package/src/components/utils/decamelize.ts

@@ -0,0 +1,11 @@
+export function decamelize(str: string, options?: { separator: string }) {
+  const { separator } = options ?? { separator: '-' };
+
+  return str
+    .replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2')
+    .replace(
+      new RegExp('(' + separator + '[A-Z])([A-Z])', 'g'),
+      '$1' + separator + '$2',
+    )
+    .toLowerCase();
+}

package/src/components/utils/discardCallsWithEqualArg.ts

@@ -0,0 +1,42 @@
+import { shallowEqualObjects } from '../../utils/shallowEqualObjects';
+
+const map = new WeakMap<Function, { lastCallTime: number; lastCallArg: any }>();
+
+const getCompareDefault = (a: any) => a;
+
+export function discardCallsWithEqualArg<T = any>(
+  fn: (arg: T) => void,
+  timeframe = 50,
+  getCompareObject?: (arg: T) => any,
+): (arg: T) => void {
+  map.set(fn, {
+    lastCallTime: 0,
+    lastCallArg: null,
+  });
+
+  const getCompare = getCompareObject ?? getCompareDefault;
+
+  return (arg: T) => {
+    const { lastCallTime, lastCallArg } = map.get(fn) || {
+      lastCallTime: 0,
+      lastCallArg: null,
+    };
+    const now = Date.now();
+    const diff = now - lastCallTime;
+    const objectsEqual = shallowEqualObjects(
+      getCompare(lastCallArg),
+      getCompare(arg),
+    );
+
+    if (diff < timeframe && objectsEqual) {
+      return;
+    }
+
+    map.set(fn, {
+      lastCallTime: now,
+      lastCallArg: arg,
+    });
+
+    fn(arg);
+  };
+}

package/src/components/utils/getRenderIndexes.ts

@@ -0,0 +1,33 @@
+export const getRenderIndexes = (info: {
+  count: number;
+  renderStartIndex: number;
+  renderCount: number;
+}) => {
+  let { count, renderStartIndex, renderCount } = info;
+
+  renderCount = Math.min(renderCount, count);
+
+  const renderEndIndex = Math.max(
+    -1,
+    Math.min(renderStartIndex + renderCount - 1, count - 1),
+  );
+
+  if (renderStartIndex >= renderEndIndex) {
+    if (renderEndIndex + 1 - renderCount >= 0) {
+      renderStartIndex = renderEndIndex + 1 - renderCount;
+    }
+  }
+
+  if (renderEndIndex < 0 || renderStartIndex < 0) {
+    return null;
+  }
+
+  const result = {
+    renderStartIndex,
+    renderEndIndex,
+    renderCount,
+    count,
+  };
+
+  return result;
+};

package/src/components/utils/getScrollbarWidth.ts

@@ -0,0 +1,31 @@
+import { getGlobal } from '../../utils/getGlobal';
+
+let scrollbarWidth: number;
+
+export function getScrollbarWidth(): number {
+  if (scrollbarWidth != null) {
+    return scrollbarWidth;
+  }
+
+  const doc = getGlobal().document ?? null;
+
+  if (!doc) {
+    return 0;
+  }
+
+  const outer = doc.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll';
+  doc.body.appendChild(outer);
+
+  // Creating inner element and placing it in the container
+  const inner = doc.createElement('div');
+  outer.appendChild(inner);
+
+  // Calculating difference between container's full width and the child width
+  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+}

package/src/components/utils/getVirtualRenderCount.ts

@@ -0,0 +1,21 @@
+type Options = {
+  size: { width: number; height: number };
+  mainAxis: 'horizontal' | 'vertical';
+  itemMainAxisSize: number | ((itemIndex: number) => number);
+  itemMainAxisMinSize: number;
+};
+export const getVirtualRenderCount = (options: Options) => {
+  const { size, mainAxis, itemMainAxisSize, itemMainAxisMinSize } = options;
+
+  const renderSize = Math.round(
+    mainAxis === 'vertical' ? size.height : size.width,
+  );
+  let itemSize =
+    typeof itemMainAxisSize !== 'function'
+      ? itemMainAxisSize
+      : itemMainAxisMinSize;
+
+  const renderCount = Math.ceil(renderSize / itemSize) + 1;
+
+  return renderCount;
+};

package/src/components/utils/isControlled.ts

@@ -0,0 +1,12 @@
+import { isControlledValue } from './isControlledValue';
+
+export function isControlled<V extends keyof T, T>(
+  propName: V,
+  props: T,
+): boolean {
+  const propValue = props[propName];
+
+  const controlled: boolean = isControlledValue(propValue);
+
+  return controlled;
+}

package/src/components/utils/isControlledValue.ts

@@ -0,0 +1,5 @@
+export function isControlledValue(value: any): boolean {
+  const controlled: boolean = value !== undefined;
+
+  return controlled;
+}