Update AlertDialog component to manage open state

Author: kotAPI

src/components/ui/AlertDialog/AlertDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import AlertDialogRoot from './shards/AlertDialogRoot';
 import AlertDialogContent from './shards/AlertDialogContent';
 import AlertDialogTrigger from './shards/AlertDialogTrigger';
@@ -10,9 +10,10 @@ export type AlertDialogProps = {
  content: React.ReactNode;
 }
 
-const AlertDialog = ({ children, content } : AlertDialogProps) => {
+const AlertDialog = ({ children, open, onOpenChange, content } : AlertDialogProps) => {
+ const [isOpen, setIsOpen] = useState(open);
  return (
- <AlertDialogRoot>
+ <AlertDialogRoot open={isOpen} onOpenChange={onOpenChange}>
  <AlertDialogTrigger>
  {children}
  </AlertDialogTrigger>

src/components/ui/AlertDialog/contexts/AlertDialogContext.tsx

@@ -1,3 +1,5 @@
 import { createContext } from 'react';
 
-export const AlertDialogContext = createContext({});
+export const AlertDialogContext = createContext({
+
+});

src/components/ui/AlertDialog/shards/AlertDialogCancel.tsx

@@ -7,9 +7,9 @@ export type AlertDialogCancelProps = {
 }
 
 const AlertDialogCancel = ({ children } : AlertDialogCancelProps) => {
- const { setOpen } = useContext(AlertDialogContext);
+ const { handleOpenChange } = useContext(AlertDialogContext);
  return (
- <ButtonPrimitive onClick={() => setOpen(false)}>
+ <ButtonPrimitive onClick={() => handleOpenChange(false)}>
  {children}
  </ButtonPrimitive>
  );

src/components/ui/AlertDialog/shards/AlertDialogContent.tsx

@@ -6,11 +6,11 @@ export type AlertDialogContentProps = {
 }
 
 const AlertDialogContent = ({ children } : AlertDialogContentProps) => {
- const { open } = useContext(AlertDialogContext);
+ const { isOpen } = useContext(AlertDialogContext);
 
  return (
  <>
- {open && (
+ {isOpen && (
  <div className="alert-content fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-gray-900/50">
  {children}
  </div>

src/components/ui/AlertDialog/shards/AlertDialogOverlay.tsx

@@ -3,10 +3,10 @@ import Floater from '~/core/primitives/Floater';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
 
 const AlertDialogOverlay = () => {
- const { open } = useContext(AlertDialogContext);
+ const { isOpen } = useContext(AlertDialogContext);
  return (
  <>
- {open && (
+ {isOpen && (
  <Floater.Overlay className="bg-black/50 relative z-50">
 
  </Floater.Overlay>

src/components/ui/AlertDialog/shards/AlertDialogRoot.tsx

@@ -7,16 +7,23 @@ import Floater from '~/core/primitives/Floater';
 export type AlertDialogRootProps = {
  children: React.ReactNode;
  customRootClass?: string;
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
 }
 
 const COMPONENT_NAME = 'AlertDialog';
 
-const AlertDialogRoot = ({ children, customRootClass = '' } : AlertDialogRootProps) => {
+const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange } : AlertDialogRootProps) => {
  const { context: floaterContext } = Floater.useFloating();
  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
- const [open, setOpen] = useState(false);
+ const [isOpen, setIsOpen] = useState(open);
 
- const props = { open, setOpen, floaterContext };
+ const handleOpenChange = (open: boolean) => {
+ setIsOpen(open);
+ onOpenChange(open);
+ };
+
+ const props = { isOpen, handleOpenChange, floaterContext };
  return (
  <AlertDialogContext.Provider value={props}>
  <div className={rootClass}>

src/components/ui/AlertDialog/shards/AlertDialogTrigger.tsx

@@ -8,11 +8,10 @@ export type AlertDialogTriggerProps = {
 }
 
 const AlertDialogTrigger = ({ children, ...props } : AlertDialogTriggerProps) => {
- const { floaterContext } = useContext(AlertDialogContext);
- const { open, setOpen } = useContext(AlertDialogContext);
+ const { isOpen, handleOpenChange, floaterContext } = useContext(AlertDialogContext);
 
  return (
- <ButtonPrimitive onClick={() => setOpen(true)} {...props}>
+ <ButtonPrimitive onClick={() => handleOpenChange(true)} {...props}>
  {children}
  </ButtonPrimitive>
  );

src/components/ui/AlertDialog/stories/AlertDialog.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import AlertDialog from '../AlertDialog';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
@@ -7,14 +7,27 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 export default {
  title: 'UI/Data-Display/AlertDialog',
  component: AlertDialog,
- render: (args:any) => <SandboxEditor>
- <AlertDialog
- {...args} content={
- <div className="flex flex-col gap-4 text-gray-100">
- <h1>This is content</h1>
- </div>
- } />
- </SandboxEditor>
+ render: (args:any) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const handleOpenChange = (open: boolean) => {
+ console.log('open', open);
+ setIsOpen(open);
+ };
+
+ return (
+ <SandboxEditor>
+ <AlertDialog
+ open={isOpen}
+ onOpenChange={handleOpenChange}
+ {...args} content={
+ <div className="flex flex-col gap-4 text-gray-100">
+ <h1>This is content</h1>
+ </div>
+ } />
+ </SandboxEditor>
+ );
+ }
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args