@infinite-table/infinite-react 0.5.0 → 0.5.2

package/src/components/hooks/usePropertyOld.ts

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

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

@@ -1,165 +0,0 @@
-/*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

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

package/src/components/types/NonUndefined.ts

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

package/src/components/types/RemoveObject.ts

@@ -1,22 +0,0 @@
-/**
-
-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

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

package/src/components/types/ScrollPosition.ts

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

package/src/components/types/Setter.ts

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

package/src/components/types/Size.ts

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

package/src/components/types/SubscriptionCallback.ts

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

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

package/src/components/utils/buildSubscriptionCallback.tsx

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

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

package/src/components/utils/debounce.ts

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

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

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

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

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

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

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

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