@pushwoosh/kit-helpers 4.6.3 → 4.7.0

package/grid.d.ts

@@ -2,6 +2,10 @@ export declare const toCssValue: (value: number | string) => string;
 export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | undefined;
+    $borderRadius?: string | number | undefined;
+    $boxShadow?: string | undefined;
     $gap?: string | number | undefined;
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
@@ -13,6 +17,10 @@ export declare const GridContainer: import("styled-components").StyledComponent<
 export declare const Columns: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | undefined;
+    $borderRadius?: string | number | undefined;
+    $boxShadow?: string | undefined;
     $gap?: string | number | undefined;
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
@@ -26,6 +34,10 @@ export declare const Columns: import("styled-components").StyledComponent<"div",
 export declare const Rows: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | undefined;
+    $borderRadius?: string | number | undefined;
+    $boxShadow?: string | undefined;
     $gap?: string | number | undefined;
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
@@ -39,6 +51,10 @@ export declare const Rows: import("styled-components").StyledComponent<"div", an
 export declare const Horizontal: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | undefined;
+    $borderRadius?: string | number | undefined;
+    $boxShadow?: string | undefined;
     $gap?: string | number | undefined;
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
@@ -52,6 +68,10 @@ export declare const Horizontal: import("styled-components").StyledComponent<"di
 export declare const Vertical: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | undefined;
+    $borderRadius?: string | number | undefined;
+    $boxShadow?: string | undefined;
     $gap?: string | number | undefined;
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;

package/grid.js

@@ -11,7 +11,7 @@ const createCssDeclaration = (property, value, valueConvert) => {
 export const GridContainer = styled.div.withConfig({
   displayName: "GridContainer",
   componentId: "sc-1mpmh7u-0"
-})(["display:grid;", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('grid-auto-flow', props.$gridAutoFlow), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssDeclaration('margin', props.$margin, toCssValue), props => createCssDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
+})(["display:grid;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('background-color', props.$bgColor), props => createCssDeclaration('border', props.$border), props => createCssDeclaration('border-radius', props.$borderRadius, toCssValue), props => createCssDeclaration('box-shadow', props.$boxShadow), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('grid-auto-flow', props.$gridAutoFlow), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssDeclaration('margin', props.$margin, toCssValue), props => createCssDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
 export const Columns = styled(GridContainer).withConfig({
   displayName: "Columns",
   componentId: "sc-1mpmh7u-1"

package/hooks/useAsyncFunction.d.ts

@@ -0,0 +1,29 @@
+import type { FunctionReturningPromise, PromiseType } from './types';
+export type AsyncFunctionState<T> = {
+    loading: boolean;
+    count: number;
+    error?: undefined;
+    value?: undefined;
+} | {
+    loading: true;
+    count: number;
+    error?: Error | undefined;
+    value?: T;
+} | {
+    loading: false;
+    count: number;
+    error: Error;
+    value?: undefined;
+} | {
+    loading: false;
+    count: number;
+    error?: undefined;
+    value: T;
+};
+type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = AsyncFunctionState<PromiseType<ReturnType<T>>>;
+export type AsyncFunctionReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [
+    StateFromFunctionReturningPromise<T>,
+    T
+];
+export default function useAsyncFunction<T extends FunctionReturningPromise>(fn: T): AsyncFunctionReturn<T>;
+export {};

package/hooks/useAsyncFunction.js

@@ -0,0 +1,44 @@
+import { useRef, useState } from 'react';
+import useMountedState from './useMountedState';
+import usePersistentFunction from './usePersistentFunction';
+const getDefaultState = () => ({
+  loading: false,
+  count: 0
+});
+export default function useAsyncFunction(fn) {
+  const countRef = useRef(0);
+  const isMounted = useMountedState();
+  const [state, setState] = useState(getDefaultState);
+  const execute = usePersistentFunction((...args) => {
+    // eslint-disable-next-line no-plusplus
+    const count = ++countRef.current;
+    const canSet = () => isMounted() && count === countRef.current;
+    if (canSet()) {
+      setState(prevState => ({
+        ...prevState,
+        count,
+        loading: true
+      }));
+    }
+    return fn(...args).then(value => {
+      if (canSet()) {
+        setState(prevState => ({
+          ...prevState,
+          value,
+          loading: false
+        }));
+      }
+      return value;
+    }, error => {
+      if (canSet()) {
+        setState(prevState => ({
+          ...prevState,
+          error,
+          loading: false
+        }));
+      }
+      throw error;
+    });
+  });
+  return [state, execute];
+}

package/index.d.ts

@@ -10,3 +10,4 @@ export { default as useAsync } from './hooks/useAsync';
 export { default as useAsyncFn } from './hooks/useAsyncFn';
 export { default as useDelayedValue } from './hooks/useDelayedValue';
 export { default as useDelayedEffect } from './hooks/useDelayedEffect';
+export { default as useAsyncFunction } from './hooks/useAsyncFunction';

package/index.js

@@ -9,4 +9,5 @@ export { default as useUnmount } from './hooks/useUnmount';
 export { default as useAsync } from './hooks/useAsync';
 export { default as useAsyncFn } from './hooks/useAsyncFn';
 export { default as useDelayedValue } from './hooks/useDelayedValue';
-export { default as useDelayedEffect } from './hooks/useDelayedEffect';
+export { default as useDelayedEffect } from './hooks/useDelayedEffect';
+export { default as useAsyncFunction } from './hooks/useAsyncFunction';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-helpers",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",