@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/hooks/usePagination.ts

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

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

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

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

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

package/src/hooks/useShortIntl.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+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]);
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./hooks/useAsyncControl";
+export * from "./components/UncontrolledTransition"

package/src/models/DebugLogger.ts

@@ -0,0 +1,7 @@
+const rand = require("color-seed");
+const win = window as any;
+
+export default function log(filter: string, obj: any) {
+  if (win.DEBUG === "*" || filter.includes(win.DEBUG))
+    console.log(`%c ${filter}`, `color: ${rand.getColor(filter)}`, obj);
+}