@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/hooks/usePagination.ts

@@ -1,228 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import useAsyncControl from "./useAsyncControl";
-import throttle from "lodash/throttle";
-
-type UpdateEvent<I extends any> = {
-  finished: boolean;
-  items: I[];
-  totalItems: number;
-};
-
-export default function usePagination<I extends any>(
-  request: (
-    page: number,
-    pageSize: number | "all",
-    currItems?: I[]
-  ) => Promise<UpdateEvent<I>>,
-  paginationId: object | any[] | (() => string) = () => "default",
-  startingItems?: I[]
-): Paginable<I> {
-  const paginationDataRef = useRef<{
-    [d: string]:
-      | {
-          finished: boolean;
-          totalItems: number;
-        }
-      | undefined;
-  }>({});
-  const { current: paginationData } = paginationDataRef;
-  const paginationIdFactory = useMemo(
-    () => {
-      if (typeof paginationId === "object") {
-        const randId = Math.random();
-        return () => randId.toString();
-      } else return paginationId;
-    },
-    Array.isArray(paginationId) ? paginationId : [paginationId]
-  );
-
-  const [items, setItems] =
-    useState<[paginationId: string, items: I[]] | undefined>();
-
-  const [id, setId] = useState(() => paginationIdFactory());
-
-  useEffect(() => {
-    setId(paginationIdFactory());
-    if (startingItems) setItems([paginationIdFactory(), startingItems]);
-    else setItems(undefined);
-  }, [paginationIdFactory()]);
-
-  const { process, ...control } = useAsyncControl();
-
-  function updateItems(cb: (prevItems?: I) => UpdateEvent<I>["items"]) {
-    setItems((prev) => [prev![0], cb()]);
-  }
-
-  const derivateCurrentPage = (pageSize: number) => {
-    if (items === undefined) return 0;
-    const currentPage = Math.floor((items?.[1].length ?? 0) / pageSize) - 1;
-    return currentPage;
-  };
-
-  const _requestPage = useCallback(
-    function (page: number, pageSize: number | "all") {
-      const id = paginationIdFactory();
-      if (paginationData[id]?.finished) return;
-      process(async () => {
-        const result = await request(
-          page,
-          pageSize,
-          items?.[0] === id && page !== 0
-            ? pageSize === "all"
-              ? undefined
-              : items?.[1].slice(0, page * pageSize)
-            : undefined
-        );
-        paginationData[id] = {
-          finished: result.finished,
-          totalItems: result.totalItems,
-        };
-        setItems((prev) => {
-          if (page === 0) return [id, result.items];
-          else if (!prev || id === prev[0]) return [id, result.items];
-          return prev;
-        });
-      });
-    },
-    [items, request]
-  );
-
-  return {
-    updateItems,
-    getNextPage: (pageSize: number) => {
-      _requestPage(derivateCurrentPage(pageSize) + 1, pageSize);
-    },
-    getPage: _requestPage,
-    getAll: () => {
-      _requestPage(0, "all");
-    },
-    refreshCurrentPage: (pageSize: number) => {
-      _requestPage(derivateCurrentPage(pageSize), pageSize);
-    },
-    totalItems: () => paginationData[paginationIdFactory()]?.totalItems,
-    id: () => id,
-    loading: control.loading,
-    error: control.error,
-    items: items?.[1],
-    setError: control.setError,
-  };
-}
-
-export type Paginable<I extends any, E extends any = any> = {
-  updateItems: (cb: (prevItems?: I) => UpdateEvent<I>["items"]) => void;
-  getNextPage: (pageSize: number) => void;
-  refreshCurrentPage: (pageSize: number) => void;
-  getPage: (page: number, pageSize: number) => void;
-  getAll: () => void;
-  totalItems: () => number | undefined;
-  loading: boolean;
-  error: E | Error | undefined;
-  items: I[] | undefined;
-  setError: ReturnType<typeof useAsyncControl>["setError"];
-  id: () => string;
-};
-
-export type LocalPaginable<I extends any, E extends any = any> = Paginable<
-  I,
-  E
-> & {
-  src: I;
-};
-
-/**
- * This returns a ref to be bound to an elements so it can be able to detect when a pagination whould occur
- */
-export function useContainerPagination(
-  cb: (pageSize: number) => void,
-  pageSize: number,
-  direction: "h" | "v" = "v"
-) {
-  const scrollableRef = useRef<HTMLDivElement>(undefined);
-  const customOptionsRef =
-    useRef<() => { offsetBottom?: number; offsetLeft?: number }>(undefined);
-
-  useEffect(() => {
-    const el = scrollableRef.current!;
-    const scrollElement =
-      (el as unknown as typeof window.document).scrollingElement || el;
-    const calculateIfReachedLimit = throttle(
-      (e: Event) => {
-        if (e.target !== el) return;
-        const { offsetBottom = 0, offsetLeft = 0 } =
-          customOptionsRef.current?.() || {};
-        const offsetLimit =
-          direction === "v"
-            ? scrollElement.scrollHeight -
-              offsetBottom -
-              scrollElement.clientHeight * 0.6
-            : scrollElement.scrollWidth -
-              offsetLeft -
-              scrollElement.clientWidth * 0.6;
-        const offset =
-          direction === "v"
-            ? scrollElement.clientHeight + scrollElement.scrollTop
-            : scrollElement.clientWidth + scrollElement.scrollLeft;
-        if (offset >= offsetLimit) {
-          cb(pageSize);
-        }
-      },
-      250,
-      {
-        leading: false,
-        trailing: true,
-      }
-    );
-
-    el.addEventListener("scroll", calculateIfReachedLimit, {
-      passive: true,
-    });
-    return () => el.removeEventListener("scroll", calculateIfReachedLimit);
-  }, [cb, pageSize]);
-
-  return {
-    scrollableRef,
-    customOptionsRef,
-  };
-}
-
-/**
- * This function receives an amount of local instances and paginates it
- */
-export function useLocalPagination<L>(items: L[] | undefined) {
-  const instanceID = useMemo(() => Date.now(), [items]);
-  const cb = useCallback(
-    (page: number, pageSize: number | "all", currItems: L[] = []) => {
-      if (!items)
-        return Promise.resolve({
-          finished: false,
-          totalItems: 0,
-          items: [],
-        });
-      if (pageSize === "all") pageSize = items.length;
-      const from = pageSize * page;
-      const newArray = [...currItems, ...items.slice(from, from + pageSize)];
-
-      return Promise.resolve({
-        finished: newArray.length === items.length,
-        totalItems: items.length,
-        items: newArray,
-      });
-    },
-    [items]
-  );
-  const pagination = usePagination<L>(cb, () => `${instanceID}`);
-  const pagSrc = useMemo(() => items, [pagination.items]);
-
-  return {
-    ...pagination,
-    loading: items === undefined,
-    src: pagSrc,
-  };
-}

package/src/hooks/usePooledOperation.ts

@@ -1,54 +0,0 @@
-import { createRef, useRef } from "react";
-import useAsyncControl from "./useAsyncControl";
-import usePooling from "./usePooling";
-
-/**
- * A toolkit hook to trigger an request to start a process and execute a pooling operation to validate when the operation is finished
- */
-export default function usePooledOperation() {
-  const requestOperation = useRef<() => Promise<void>>(undefined);
-  const poolingOperation = useRef<() => Promise<boolean>>(undefined);
-  const requestControl = useAsyncControl();
-  const pollingControl = usePooling();
-
-  function triggerRequest() {
-    requestControl.process(async () => {
-      await requestOperation.current!();
-      triggerPooling();
-    });
-  }
-
-  function triggerPooling() {
-    pollingControl.startPolling(poolingOperation.current!);
-  }
-
-  return {
-    /** Indicates when it's loading */
-    loading: requestControl.loading || pollingControl.isPooling,
-    /** Indicates error of pooling or request */
-    error: !!requestControl.error || !!pollingControl.failed,
-    /** Retries the operation based on the current failed step */
-    retry: requestControl.error
-      ? triggerRequest
-      : pollingControl.failed
-      ? triggerPooling
-      : undefined,
-    /** Initiates the request followed by the pooling operation */
-    start: (
-      /** An arbitrary request */
-      _requestOperation: () => Promise<void>,
-      /** Resolves to a boolean that indicated if is finished (true) or not (false) */
-      _poolingOperation: () => Promise<boolean>
-    ) => {
-      requestOperation.current = _requestOperation;
-      poolingOperation.current = _poolingOperation;
-
-      triggerRequest();
-    },
-    /** Clear any error that is registered */
-    clearError: () => {
-      requestControl.setError(undefined);
-      pollingControl.setFailed(false);
-    },
-  };
-}

package/src/hooks/usePooling.ts

@@ -1,46 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * This callback should return a boolean that indicates if the pooling has finished (true) or it should continue (false)
- */
-type PoolingAction = () => Promise<boolean>;
-
-export default function usePooling(intervalMs = 1000, maxPoolingTime: number | null = 60000) {
-  const [intervalId, setIntervalId] = useState<NodeJS.Timer>();
-  const [failed, setFailed] = useState<boolean>(false);
-
-  const cancelPooling = () => {
-    if (intervalId) clearInterval(intervalId);
-  }
-  useEffect(
-    () => cancelPooling,
-    [intervalId]
-  );
-
-  return {
-    failed,
-    setFailed,
-    isPooling: !!intervalId,
-    /**
-     *
-     * @param cb {@link PoolingAction} - Executes and returns if has finished (true) or not (false)
-     */
-    startPolling: (cb: PoolingAction) => {
-      let poolingCount = 0;
-      const maxPoolings = (maxPoolingTime !== null) ? Math.ceil(maxPoolingTime / intervalMs) : undefined;
-      const intervalId = setInterval(async () => {
-        poolingCount++;
-        const finished = await cb();
-        if (finished) setIntervalId(undefined);
-        else if (poolingCount === maxPoolings) {
-          setIntervalId(undefined);
-          setFailed(true);
-        }
-      }, intervalMs);
-      setIntervalId(intervalId);
-      setFailed(false);
-      return () => clearInterval(intervalId)
-    },
-    stop: cancelPooling,
-  };
-}

package/src/hooks/useRebound.ts

@@ -1,23 +0,0 @@
-import { useEffect, useState } from "react"
-
-/**
- * This hook adds a prop that you can toggle and returns to initial 
- * state after a defined time (usefull for notification)
- */
-export default function useRebound<T extends any>(initialValue: T, timeoutSec: number = 1) {
-    const [state, setState] = useState<T>(initialValue)
-
-    useEffect(() => {
-        if (state !== initialValue) {
-            const timeout = setTimeout(() => {
-                setState(initialValue)
-            }, timeoutSec * 1000);
-
-            return () => clearTimeout(timeout);
-        }
-    }, [state]);
-    return {
-        current: state,
-        setState
-    }
-}

package/src/hooks/useShortIntl.ai.md

@@ -1,5 +0,0 @@
-# Referencing a text
-```tsx
-const { txt } = useShortIntl();
-const theText = txt("text.hierarchy.id");
-```

package/src/hooks/useShortIntl.ts

@@ -1,97 +0,0 @@
-import { IntlFormatters, IntlShape, useIntl } from "react-intl";
-import { BigNumber } from "bignumber.js";
-import { ReactElement, useEffect, useState } from "react";
-
-export default function useShortIntl(): IntlShape & {
-  txt: <R extends ReturnType<IntlFormatters["formatMessage"]> = string>(
-    id: OnepercentUtility.IntlIds,
-    params?: Record<string, string | ReactElement>
-  ) => R;
-  formatToDoubleDecimal(
-    number: number,
-    options?: Parameters<IntlFormatters["formatNumber"]>[1]
-  ): string;
-  formatBigNumber(
-    number: BigNumber,
-    options?: Parameters<IntlFormatters["formatNumber"]>[1]
-  ): string;
-} {
-  const intl = useIntl();
-  const { formatMessage, formatNumber } = intl;
-  const [devMode, setDevMode] = useState(false);
-
-  useEffect(() => {
-    if (process.env.NODE_ENV === "development") {
-      const keyDownDetect = (ev: KeyboardEvent) => {
-        if (ev.key === "i" && ev.ctrlKey) {
-          const keyUpDetect = (ev: KeyboardEvent) => {
-            if (ev.key === "i") {
-              setDevMode(false);
-            }
-          };
-          setDevMode(true);
-          window.addEventListener("keyup", keyUpDetect);
-        }
-      };
-      window.addEventListener("keydown", keyDownDetect);
-    }
-  });
-
-  return {
-    ...intl,
-    txt: (id, params) => {
-      return devMode ? id : formatMessage({ id }, params) as any;
-    },
-    formatToDoubleDecimal(val: number, options = {}) {
-      return formatNumber(val, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-        ...options,
-      });
-    },
-    formatBigNumber(bigNumber, options) {
-      const { decimalSeparator } = intl
-        .formatNumberToParts(1000.1)
-        .reduce((r, a) => {
-          if (a.type === "decimal") return { ...r, decimalSeparator: a.value };
-          if (a.type === "group") return { ...r, thousandSeparator: a.value };
-          return r;
-        }, {} as { decimalSeparator: string; thousandSeparator: string });
-
-      const integerPart = bigNumber.integerValue(1);
-      const integer = intl.formatNumber(integerPart.toNumber(), options);
-      const decimals = bigNumber
-        .minus(integerPart)
-        .decimalPlaces(
-          options?.maximumFractionDigits || bigNumber.decimalPlaces()!,
-          5
-        )
-        .toString()
-        .replace("0.", "");
-      return `${integer}${
-        decimals !== "0" ? `${decimalSeparator}${decimals}` : ""
-      }`;
-    },
-  };
-}
-
-type StrMap = {
-  [s: string]: string;
-};
-
-type IsolatedMessages<A extends string, M extends StrMap, P extends string> = {
-  [s1 in `${P}.${keyof M extends string ? keyof M : ""}`]: M[keyof M];
-};
-
-export function isolateMessages<A extends string, M extends StrMap>(
-  preffix: A,
-  strings: M
-) {
-  return Object.entries(strings).reduce(
-    (r, [k, v]) => ({
-      ...r,
-      [`${preffix}.${k}`]: v,
-    }),
-    {} as IsolatedMessages<A, M, typeof preffix>
-  );
-}

package/src/hooks/utility/useAsyncMemo.ts

@@ -1,43 +0,0 @@
-import { useEffect, useState } from "react";
-import useAsyncControl from "../useAsyncControl";
-
-/**
- * It can assume 3 states
- * [undefined] = The hook has just initialized, and will call the memoize function
- * [T] = The hook initialized the value
- * [null, error] = The hook failed to initialize and the error is available
- */
-export default function useAsyncMemo<T>(
-  funcToMemoize: () => Promise<T>,
-  depArr: any[]
-): [
-  value: T | undefined | null,
-  error: any,
-  loading: boolean,
-  retry: () => Promise<void>,
-  setValue: (value: T) => void
-] {
-  const { process, error, ...control } = useAsyncControl();
-  const [memo, setMemo] = useState<T | null>();
-
-  useEffect(() => {
-    let depBasedSet: typeof setMemo | undefined = setMemo;
-    process(funcToMemoize)
-      .then((whatToStore) => depBasedSet?.(() => whatToStore))
-      .catch(() => depBasedSet?.(null));
-    return () => {
-      depBasedSet = undefined;
-    };
-  }, depArr);
-
-  return [
-    memo,
-    error,
-    control.loading,
-    () =>
-      process(funcToMemoize)
-        .then((whatToStore) => setMemo(() => whatToStore))
-        .catch(() => setMemo(null)),
-    setMemo,
-  ];
-}

package/src/hooks/utility/useDepChange.ts

@@ -1,11 +0,0 @@
-import { useInsertionEffect, useRef } from "react";
-
-export default function useDepChange<T>(callback: (prevDep: T) => void, dep: T) {
-  const prevStep = useRef<T>(undefined);
-  useInsertionEffect(() => {
-    if (prevStep.current) callback(prevStep.current);
-    return () => {
-      prevStep.current = dep;
-    };
-  }, [dep]);
-}

package/src/hooks/utility/useEvents.ts

@@ -1,33 +0,0 @@
-import { useRef } from "react";
-
-/**
- * This hook allows for easier declaration of events and unsubscribers
- */
-export default function useEvents<
-  EN extends string,
-  E extends { [k in EN]: any[] }
->() {
-  const _eventSUbscriptionsMap = useRef<
-    {
-      [k in EN]?: ((...args: E[k]) => void)[];
-    }
-  >({});
-  const subscriber = <X extends EN>(e: X, cb: (...args: E[X]) => void) => {
-    if (!_eventSUbscriptionsMap.current[e])
-      _eventSUbscriptionsMap.current[e] = [];
-    _eventSUbscriptionsMap.current[e]!.push(cb);
-    return () => {
-      const arr = _eventSUbscriptionsMap.current[e]!;
-      arr.splice(arr.indexOf(cb), 1);
-    };
-  };
-  const dispatcher = <X extends EN>(eventName: X, ...args: E[X]) => {
-    const subscriptions = _eventSUbscriptionsMap.current[eventName] || [];
-
-    subscriptions.forEach((cb) => cb(...args));
-  };
-  return {
-    subscriber,
-    dispatcher,
-  };
-}

package/src/hooks/utility/useImmediate.ts

@@ -1,8 +0,0 @@
-import { useMemo } from "react";
-
-/**
- * Runs this function as soon as the hook is invoked
- */
-export default function useImmediate(execute: () => void, deps?: any[]) {
-  useMemo(execute, deps ?? []);
-}

package/src/hooks/utility/useManualInit.ts

@@ -1,24 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import useAsyncControl from "../useAsyncControl";
-
-/**
- * Provides a way to manually trigger a function and store it's result on a state
- */
-export default function useManualInit<T>(
-  funcToMemoize: () => Promise<T>,
-  depArr: any[]
-): [init: () => Promise<T>, memo: T | undefined | null, error: any] {
-  const { process, error } = useAsyncControl();
-  const [memo, setMemo] = useState<T | null>();
-  const initCb = useCallback(
-    () =>
-      process(funcToMemoize)
-        .then((result) => {
-          setMemo(result);
-          return result;
-        })
-        .catch(() => setMemo(null)),
-    depArr
-  );
-  return [initCb, memo, error];
-}

package/src/hooks/utility/useModule.ts

@@ -1,15 +0,0 @@
-import { useLayoutEffect, useState } from "react";
-
-/**
- * This provides an interface for async loading of modules
- */
-export default function useModule<T>(
-  moduleLoadPromiseFactory: () => Promise<T>
-): T | undefined {
-  const [moduleLoaded, setModuleLoaded] = useState<T>();
-  useLayoutEffect(() => {
-    moduleLoadPromiseFactory().then(setModuleLoaded);
-  }, []);
-
-  return moduleLoaded;
-}

package/src/hooks/utility/useQuery.ts

@@ -1,15 +0,0 @@
-/**
- *
- * @returns A hook to obtain the query params from a url
- */
-
-import { useMemo } from "react";
-import { useLocation } from "react-router-dom";
-
-export default function useQuery<E extends {}>() {
-  const { search } = useLocation();
-
-  return useMemo(() => new URLSearchParams(search), [search]) as unknown as {
-    get: (p: keyof E) => E[typeof p];
-  };
-}

package/src/hooks/utility/useUniqueEffect.ts

@@ -1,22 +0,0 @@
-import { useLayoutEffect, useMemo } from "react";
-import { useShareState } from "../../context/ContextAsyncControl";
-
-export default function useUniqueEffect(
-  id: string,
-  effect: () => void,
-  deps: any[]
-) {
-  const lockId = useMemo(() => Math.random(), []);
-  const [currLock, setCurrLock] = useShareState<number | undefined>(
-    "unique-effect",
-    id
-  );
-  useLayoutEffect(() => {
-    if (currLock === lockId) effect();
-  }, [...deps, currLock]);
-
-  useLayoutEffect(() => {
-    if (currLock === undefined) setCurrLock(lockId);
-    if (currLock === lockId) return () => setCurrLock(undefined);
-  }, [currLock]);
-}