Merge branch 'feat/toast-limit' into next-release

src/core/utils/array/arrayUtils.ts

@@ -1,3 +1,5 @@
+import {isNonNegativeInteger} from "../number/numberUtils";
+
 function filterOutItemsByKey<T extends {[x: string]: any}>(
   array: T[],
   key: keyof T,
@@ -22,4 +24,24 @@ function updateAtIndex<Item>(items: Item[], index: number, newItem: Item): Item[
   return newItems;
 }
 
-export {filterOutItemsByKey, updateAtIndex};
+/**
+ * Slices an array at an offset from the end so that the new array's length would be `limit` at most.
+ *
+ * @param limit - Limit for the length of that array
+ * @param array - List of items
+ * @returns The same array if array.length <=limit, otherwise returns a new array.
+ */
+function limitArrayLengthFromTheEnd<Item extends any>(
+  limit: undefined | number,
+  array: Item[]
+): Item[] {
+  let slicedArray = array;
+
+  if (isNonNegativeInteger(limit) && array.length > limit) {
+    slicedArray = array.slice(array.length - limit);
+  }
+
+  return slicedArray;
+}
+
+export {filterOutItemsByKey, updateAtIndex, limitArrayLengthFromTheEnd};

src/core/utils/number/numberUtils.ts

@@ -178,6 +178,10 @@ function getThousandthSeparatorCount(value: string) {
   return formatNumber({locale: "en"})(parseFloat(value)).match(/,/g)?.length || 0;
 }
 
+function isNonNegativeInteger(x: unknown): x is number {
+  return typeof x === "number" && Number.isFinite(x) && x >= 0;
+}
+
 export {
   formatNumber,
   parseNumber,
@@ -186,5 +190,6 @@ export {
   getNegativeZero,
   mapDigitsToLocalVersion,
   removeLeadingZeros,
-  getThousandthSeparatorCount
+  getThousandthSeparatorCount,
+  isNonNegativeInteger
 };

src/toast/ToastProvider.tsx

@@ -1,9 +1,10 @@
-import React, {createContext, useReducer} from "react";
+import React, {createContext, useReducer, useEffect} from "react";
 
 import ToastStack from "./stack/ToastStack";
 import {initialToastState} from "./util/toastConstants";
 import toastReducer from "./util/toastReducer";
 import {ToastAction, ToastContextState} from "./util/toastTypes";
+import {isNonNegativeInteger} from "../core/utils/number/numberUtils";
 
 const ToastContext = createContext<[ToastContextState, React.Dispatch<ToastAction>]>([
   initialToastState,
@@ -16,6 +17,7 @@ interface ToastContextProviderProps {
   children: React.ReactNode;
   customRootId?: string;
   autoCloseToasts?: boolean;
+  limit?: number;
 }
 
 /**
@@ -26,13 +28,25 @@ interface ToastContextProviderProps {
 function ToastContextProvider({
   children,
   customRootId,
-  autoCloseToasts = true
+  autoCloseToasts = true,
+  limit
 }: ToastContextProviderProps) {
   const [state, dispatch] = useReducer(toastReducer, {
     ...initialToastState,
-    autoCloseToasts
+    autoCloseToasts,
+    limit
   });
 
+  useEffect(() => {
+    if (isNonNegativeInteger(limit)) {
+      dispatch({type: "SET_LIMIT", limit});
+    }
+  }, [limit]);
+
+  useEffect(() => {
+    dispatch({type: "SET_AUTO_CLOSE", autoCloseToasts});
+  }, [autoCloseToasts]);
+
   return (
     <ToastContext.Provider value={[state, dispatch]}>
       {children}

src/toast/util/toastReducer.ts

@@ -1,4 +1,7 @@
-import {updateAtIndex} from "../../core/utils/array/arrayUtils";
+import {
+  limitArrayLengthFromTheEnd,
+  updateAtIndex
+} from "../../core/utils/array/arrayUtils";
 import {not} from "../../core/utils/function/functionUtils";
 import {initialToastState} from "./toastConstants";
 import {ToastAction} from "./toastTypes";
@@ -12,13 +15,14 @@ function toastReducer(state: ToastState, action: ToastAction): ToastState {
   switch (action.type) {
     case "DISPLAY": {
       const {toastData} = action;
+      const newToastStack = [
+        ...state.toastStack.filter(not(isSameToast(toastData.id))),
+        toastData
+      ];
 
       newState = {
         ...state,
-        toastStack: [
-          ...state.toastStack.filter(not(isSameToast(toastData.id))),
-          toastData
-        ]
+        toastStack: limitArrayLengthFromTheEnd(state.limit, newToastStack)
       };
       break;
     }
@@ -57,6 +61,25 @@ function toastReducer(state: ToastState, action: ToastAction): ToastState {
       break;
     }
 
+    case "SET_LIMIT": {
+      const {limit} = action;
+
+      newState = {
+        ...state,
+        limit,
+        toastStack: limitArrayLengthFromTheEnd(limit, state.toastStack)
+      };
+      break;
+    }
+
+    case "SET_AUTO_CLOSE": {
+      newState = {
+        ...state,
+        autoCloseToasts: action.autoCloseToasts
+      };
+      break;
+    }
+
     default:
       break;
   }

src/toast/util/toastTypes.ts

@@ -17,9 +17,18 @@ export type ToastAction =
       type: "UPDATE";
       toastId: string;
       toastData: Partial<Omit<ToastData, "id">>;
+    }
+  | {
+      type: "SET_LIMIT";
+      limit: number;
+    }
+  | {
+      type: "SET_AUTO_CLOSE";
+      autoCloseToasts: boolean;
     };
 
 export interface ToastContextState {
   toastStack: (Omit<ToastData, "id"> & {id: string})[];
   autoCloseToasts: boolean;
+  limit?: number;
 }

stories/13-Toast.stories.tsx

@@ -3,6 +3,11 @@ import "./utils/constants/toast/_toast.scss";
 import {storiesOf} from "@storybook/react";
 import React from "react";
 
+import StateProvider from "./utils/StateProvider";
+
+import FormField from "../src/form/field/FormField";
+import CheckboxInput from "../src/form/input/checkbox/CheckboxInput";
+import Input from "../src/form/input/Input";
 import Button from "../src/button/Button";
 import {useToaster} from "../src/toast/util/toastHooks";
 import StoryFragment from "./utils/StoryFragment";
@@ -23,6 +28,12 @@ function ToastComponent() {
       <ToastContextProvider autoCloseToasts={false}>
         <ToastExamples />
       </ToastContextProvider>
+
+      <p>{"ToastProvider with limit={3}"}</p>
+
+      <ToastContextProvider limit={3}>
+        <ToastExamples />
+      </ToastContextProvider>
     </StoryFragment>
   );
 }
@@ -173,4 +184,42 @@ function ToastExamples() {
   );
 }
 
-storiesOf("Toast", module).add("Toast Message", () => <ToastComponent />);
+storiesOf("Toast", module)
+  .add("Toast Message", () => <ToastComponent />)
+  .add("Toast with dynamic props", () => (
+    <StateProvider initialState={{limit: "3", autoCloseToasts: false}}>
+      {(state, setState) => (
+        <StoryFragment>
+          <FormField label={"Toast limit"}>
+            <Input
+              localizationOptions={{maximumFractionDigits: 0}}
+              name={"price"}
+              type={"number"}
+              onChange={(e) => setState({...state, limit: e.currentTarget.value})}
+              value={state.limit}
+              placeholder={"3"}
+            />
+          </FormField>
+
+          <CheckboxInput
+            onSelect={() => setState({...state, autoCloseToasts: !state.autoCloseToasts})}
+            isSelected={state.autoCloseToasts}
+            item={{
+              id: "autoCloseToasts",
+              content: "autoCloseToasts",
+              inputProps: {
+                name: "termsAndConditions",
+                htmlFor: "termsAndConditions",
+                value: "yes"
+              }
+            }}
+          />
+          <ToastContextProvider
+            limit={Boolean(state.limit) && parseInt(state.limit)}
+            autoCloseToasts={state.autoCloseToasts}>
+            <ToastExamples />
+          </ToastContextProvider>
+        </StoryFragment>
+      )}
+    </StateProvider>
+  ));

stories/utils/StateProvider.tsx

@@ -1,6 +1,17 @@
 import React, {Fragment, useState} from "react";
 
-function StateProvider({children, initialState}) {
+interface StateProviderProps<State> {
+  children: (
+    state: State,
+    dispatch: React.Dispatch<React.SetStateAction<State>>
+  ) => React.ReactNode;
+  initialState: State;
+}
+
+function StateProvider<State extends Record<string, any>>({
+  children,
+  initialState
+}: StateProviderProps<State>) {
   const [state, setState] = useState(initialState);
 
   return <Fragment>{children(state, setState)}</Fragment>;