refactor(snackbar)!: use duration map instead of open value

abelflopes · Jan 21, 2025 · 82ebe37 · 82ebe37
1 parent 38db001
commit 82ebe37
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/components/_provisional/src/snackbar/Snackbar.tsx b/packages/components/_provisional/src/snackbar/Snackbar.tsx
@@ -2,11 +2,22 @@ import React, { useCallback, useMemo, useRef, useState } from "react";
 import { SnackbarContext } from "./context";
 import { generateId } from "./utils";
 import { Layer } from "@react-ck/layers";
-import { type SnackbarContextProps, type ElementCreator, type Item } from "./types";
+import {
+  type SnackbarContextProps,
+  type ElementCreator,
+  type Item,
+  type AddOptions,
+} from "./types";
 import { SnackbarItem } from "./SnackbarItem";
 import styles from "./styles/index.module.scss";
 import classNames from "classnames";
 
+const durationMap = new Map<NonNullable<AddOptions["duration"]>, number>([
+  ["short", 3000],
+  ["medium", 6000],
+  ["long", 12000],
+]);
+
 export interface SnackbarProps extends React.HTMLAttributes<HTMLDivElement> {
   initialItems?: ElementCreator[];
 }
@@ -60,7 +71,7 @@ export const Snackbar = ({
       if (options?.duration) {
         timeoutMap.current[id] = setTimeout(() => {
           remove(id);
-        }, options.duration);
+        }, durationMap.get(options.duration));
       }
 
       return id;

diff --git a/packages/components/_provisional/src/snackbar/types.ts b/packages/components/_provisional/src/snackbar/types.ts
@@ -10,7 +10,7 @@ export type ElementCreator = (id: Item["id"]) => Item["element"];
 
 export interface AddOptions extends Pick<Item, "onRemove"> {
   /** Duration time for the item to be displayed */
-  duration?: number;
+  duration?: "short" | "medium" | "long";
 }
 
 export interface SnackbarContextProps {

diff --git a/packages/docs/stories/src/layout-snackbar.stories.tsx b/packages/docs/stories/src/layout-snackbar.stories.tsx
@@ -28,7 +28,7 @@ const MyComponent = (): React.ReactElement => {
             </Button>
           </Card>
         ),
-        { duration: 1000 },
+        { duration: "short" },
       ),
     [snackbar],
   );