@xyo-network/react-shared 2.40.1 → 2.40.3

package/dist/esm/hooks/index.d.ts

@@ -2,5 +2,6 @@ export * from './GradientStyles';
 export * from './useDataState';
 export * from './useIsMobile';
 export * from './useMediaQuery';
+export * from './usePromise';
 export * from './useShareForwardRef';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA"}

package/dist/esm/hooks/index.js

@@ -2,5 +2,6 @@ export * from './GradientStyles';
 export * from './useDataState';
 export * from './useIsMobile';
 export * from './useMediaQuery';
+export * from './usePromise';
 export * from './useShareForwardRef';
 //# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA"}

package/dist/esm/hooks/usePromise.d.ts

@@ -0,0 +1,4 @@
+declare type PromiseOrFunction<T> = Promise<T> | (() => Promise<T>);
+export declare const usePromise: <T>(promiseArg: PromiseOrFunction<T>, inputs?: unknown[]) => any[];
+export {};
+//# sourceMappingURL=usePromise.d.ts.map

package/dist/esm/hooks/usePromise.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePromise.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePromise.tsx"],"names":[],"mappings":"AAIA,aAAK,iBAAiB,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;AAwD3D,eAAO,MAAM,UAAU,iDAAkD,OAAO,EAAE,UAuCjF,CAAA"}

package/dist/esm/hooks/usePromise.js

@@ -0,0 +1,67 @@
+// Inspired from https://github.com/bsonntag/react-use-promise
+import { useEffect, useMemo, useReducer } from 'react';
+const resolvePromise = (promise) => {
+    if (typeof promise === 'function') {
+        return promise();
+    }
+    return promise;
+};
+var State;
+(function (State) {
+    State["pending"] = "pending";
+    State["rejected"] = "rejected";
+    State["resolved"] = "resolved";
+})(State || (State = {}));
+const defaultState = {
+    error: undefined,
+    result: undefined,
+    state: State.pending,
+};
+const reducer = (_state, action) => {
+    switch (action.type) {
+        case State.pending:
+            return defaultState;
+        case State.resolved:
+            return {
+                error: undefined,
+                result: action.payload,
+                state: State.resolved,
+            };
+        case State.rejected:
+            return {
+                error: action.payload,
+                result: undefined,
+                state: State.rejected,
+            };
+        default:
+            throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`);
+    }
+};
+export const usePromise = (promiseArg, inputs = []) => {
+    const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState);
+    const dependencies = useMemo(() => [promiseArg, ...inputs], [inputs, promiseArg]);
+    useEffect(() => {
+        const promise = resolvePromise(promiseArg);
+        if (!promise) {
+            return;
+        }
+        let canceled = false;
+        dispatch({ type: State.pending });
+        promise.then((result) => !canceled &&
+            dispatch({
+                payload: result,
+                type: State.resolved,
+            }), (error) => !canceled &&
+            dispatch({
+                payload: error,
+                type: State.rejected,
+            }));
+        return () => {
+            canceled = true;
+        };
+        // eslint can't inspect the array to verify dependencies are missing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+    return [result, error, state];
+};
+//# sourceMappingURL=usePromise.js.map

package/dist/esm/hooks/usePromise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePromise.js","sourceRoot":"","sources":["../../../src/hooks/usePromise.tsx"],"names":[],"mappings":"AAAA,8DAA8D;AAE9D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAItD,MAAM,cAAc,GAAG,CAAK,OAA6B,EAAE,EAAE;IAC3D,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;QACjC,OAAO,OAAO,EAAE,CAAA;KACjB;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,IAAK,KAIJ;AAJD,WAAK,KAAK;IACR,4BAAmB,CAAA;IACnB,8BAAqB,CAAA;IACrB,8BAAqB,CAAA;AACvB,CAAC,EAJI,KAAK,KAAL,KAAK,QAIT;AAQD,MAAM,YAAY,GAAiB;IACjC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,KAAK,CAAC,OAAO;CACrB,CAAA;AAMD,MAAM,OAAO,GAAG,CAAC,MAAoB,EAAE,MAAc,EAAE,EAAE;IACvD,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,KAAK,CAAC,OAAO;YAChB,OAAO,YAAY,CAAA;QAErB,KAAK,KAAK,CAAC,QAAQ;YACjB,OAAO;gBACL,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,MAAM,CAAC,OAAO;gBACtB,KAAK,EAAE,KAAK,CAAC,QAAQ;aACtB,CAAA;QAEH,KAAK,KAAK,CAAC,QAAQ;YACjB,OAAO;gBACL,KAAK,EAAE,MAAM,CAAC,OAAO;gBACrB,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,KAAK,CAAC,QAAQ;aACtB,CAAA;QAEH;YACE,MAAM,KAAK,CAAC,wBAAwB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;KACzE;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAK,UAAgC,EAAE,SAAoB,EAAE,EAAE,EAAE;IACzF,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IAE9E,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,cAAc,CAAI,UAAU,CAAC,CAAA;QAE7C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,IAAI,QAAQ,GAAG,KAAK,CAAA;QAEpB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAA;QAEjC,OAAO,CAAC,IAAI,CACV,CAAC,MAAM,EAAE,EAAE,CACT,CAAC,QAAQ;YACT,QAAQ,CAAC;gBACP,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,KAAK,CAAC,QAAQ;aACrB,CAAC,EACJ,CAAC,KAAK,EAAE,EAAE,CACR,CAAC,QAAQ;YACT,QAAQ,CAAC;gBACP,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,KAAK,CAAC,QAAQ;aACrB,CAAC,CACL,CAAA;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,GAAG,IAAI,CAAA;QACjB,CAAC,CAAA;QACD,oEAAoE;QACpE,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAA;IAEhB,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAC/B,CAAC,CAAA"}

package/package.json

@@ -16,7 +16,7 @@
     "@xylabs/react-flexbox": "^2.15.1",
     "@xylabs/react-link": "^2.15.1",
     "@xylabs/react-shared": "^2.15.1",
-    "@xyo-network/react-event": "^2.40.1",
+    "@xyo-network/react-event": "^2.40.3",
     "tslib": "^2.4.1"
   },
   "peerDependencies": {
@@ -70,5 +70,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.40.1"
+  "version": "2.40.3"
 }

package/src/hooks/index.ts

@@ -2,4 +2,5 @@ export * from './GradientStyles'
 export * from './useDataState'
 export * from './useIsMobile'
 export * from './useMediaQuery'
+export * from './usePromise'
 export * from './useShareForwardRef'

package/src/hooks/usePromise.tsx

@@ -0,0 +1,100 @@
+// Inspired from https://github.com/bsonntag/react-use-promise
+
+import { useEffect, useMemo, useReducer } from 'react'
+
+type PromiseOrFunction<T> = Promise<T> | (() => Promise<T>)
+
+const resolvePromise = <T,>(promise: PromiseOrFunction<T>) => {
+  if (typeof promise === 'function') {
+    return promise()
+  }
+
+  return promise
+}
+
+enum State {
+  pending = 'pending',
+  rejected = 'rejected',
+  resolved = 'resolved',
+}
+
+interface PromiseState<T = void> {
+  error?: Error
+  result?: T
+  state?: State
+}
+
+const defaultState: PromiseState = {
+  error: undefined,
+  result: undefined,
+  state: State.pending,
+}
+
+// Since the resolved promise value can be anything, any seems appropriate
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Action = { type: State; payload?: any }
+
+const reducer = (_state: PromiseState, action: Action) => {
+  switch (action.type) {
+    case State.pending:
+      return defaultState
+
+    case State.resolved:
+      return {
+        error: undefined,
+        result: action.payload,
+        state: State.resolved,
+      }
+
+    case State.rejected:
+      return {
+        error: action.payload,
+        result: undefined,
+        state: State.rejected,
+      }
+
+    default:
+      throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`)
+  }
+}
+
+export const usePromise = <T,>(promiseArg: PromiseOrFunction<T>, inputs: unknown[] = []) => {
+  const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState)
+
+  const dependencies = useMemo(() => [promiseArg, ...inputs], [inputs, promiseArg])
+
+  useEffect(() => {
+    const promise = resolvePromise<T>(promiseArg)
+
+    if (!promise) {
+      return
+    }
+
+    let canceled = false
+
+    dispatch({ type: State.pending })
+
+    promise.then(
+      (result) =>
+        !canceled &&
+        dispatch({
+          payload: result,
+          type: State.resolved,
+        }),
+      (error) =>
+        !canceled &&
+        dispatch({
+          payload: error,
+          type: State.rejected,
+        }),
+    )
+
+    return () => {
+      canceled = true
+    }
+    // eslint can't inspect the array to verify dependencies are missing
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies)
+
+  return [result, error, state]
+}