Skip to content

Commit

Permalink
Fix toasts not being removed after hiding #100 from prismaneui/fix-to…
Browse files Browse the repository at this point in the history
…ster-top-positions-issue

Fix toasts not removed after hiding
  • Loading branch information
spleafy authored Jan 8, 2024
2 parents b76d8cb + 2fd553f commit b3955f4
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 8 deletions.
4 changes: 2 additions & 2 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import "@fontsource/poppins/900.css";
// Prismane
import PrismaneProvider from "../src/components/PrismaneProvider/PrismaneProvider";
import Flex from "../src/components/Flex/Flex";
import Toaster from "../src/components/Toaster/Toaster";
import { PRISMANE_COLORS } from "../src/constants";
import Toaster from "../src/components/Toaster";

const preview: Preview = {
decorators: [
Expand All @@ -36,7 +36,7 @@ const preview: Preview = {
};

return (
<Toaster>
<Toaster position="top-right">
<PrismaneProvider theme={theme}>
<Flex
w="100vw"
Expand Down
12 changes: 6 additions & 6 deletions src/components/Toaster/Toast/Toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,22 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>(
},
ref
) => {
const [shown, setShown] = useState(false);
const [shown, setShown] = useState(true);

const { setToasts } = useToasterContext();

useEffect(() => {
setShown(true);

const toastTimeout = setTimeout(() => {
setShown(false);
}, timeout);
}, timeout + duration);

return () => clearTimeout(toastTimeout);
}, []);

const presence = usePresence(true, timeout + duration, () => {
setToasts((pt: any) => pt.filter((toast: any) => toast.id !== id));
const presence = usePresence(shown, duration, () => {
setTimeout(() => {
setToasts((pt: any) => pt.filter((toast: any) => toast.id !== id));
}, duration);
});

return presence ? (
Expand Down
36 changes: 36 additions & 0 deletions src/components/Toaster/Toaster.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import Toaster from "./Toaster";
import Button from "../Button/Button";
import Alert from "../Alert/Alert";
import Flex from "../Flex/Flex";
import Radio from "../Radio";
// Hooks
import useToast from "./useToast";
import useForm from "../../hooks/useForm";

export default {
title: "Toaster",
Expand All @@ -29,3 +31,37 @@ export const Default = () => {
</Toaster>
);
};

export const Positions = () => {
const toast = useToast();

const { register, formState } = useForm({
fields: {
position: {
value: "bottom-right",
},
},
});

return (
<Toaster position={formState.fields.position.value}>
<Flex direction="column" gap={12}>
<Radio.Group {...register("position")}>
<Radio value="top-left" label="Top Left" />
<Radio value="top-right" label="Top Right" />
<Radio value="bottom-left" label="Bottom Left" />
<Radio value="bottom-right" label="Bottom Right" />
</Radio.Group>
<Button
onClick={() => {
toast({
element: <Alert>Hello, World!</Alert>,
});
}}
>
Click to show toast
</Button>
</Flex>
</Toaster>
);
};

0 comments on commit b3955f4

Please sign in to comment.