feat: className props 추가

Author: flamecommit

package/CHANGE.md

@@ -2,4 +2,4 @@
 
 ### What's New?
 
-- 
+-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-dialog",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/components/DialogProvider.tsx

@@ -2,25 +2,35 @@
 
 import * as React from 'react';
 import { ReactNode } from 'react';
-import ConfirmDialog from './dialog/ConfirmDialog';
 import AlertDialog from './dialog/AlertDialog';
+import ConfirmDialog from './dialog/ConfirmDialog';
 import PromptDialog from './dialog/PromptDialog';
 
 interface IProps {
   children: ReactNode;
   confirmText?: string;
   cancelText?: string;
+  className?: string;
 }
 
 function DialogProvider({
   children,
   confirmText = 'ok',
   cancelText = 'cancel',
+  className = '',
 }: IProps) {
   return (
-    <PromptDialog confirmText={confirmText} cancelText={cancelText}>
-      <AlertDialog confirmText={confirmText} cancelText={cancelText}>
-        <ConfirmDialog confirmText={confirmText} cancelText={cancelText}>
+    <PromptDialog
+      confirmText={confirmText}
+      cancelText={cancelText}
+      className={className}
+    >
+      <AlertDialog confirmText={confirmText} className={className}>
+        <ConfirmDialog
+          confirmText={confirmText}
+          cancelText={cancelText}
+          className={className}
+        >
           {children}
         </ConfirmDialog>
       </AlertDialog>

package/src/components/UI/Alert.tsx

@@ -3,13 +3,13 @@ import { useEffect, useRef } from 'react';
 import DialogWrapper from './Wrapper';
 
 interface IProps {
+  className: string;
   message: string;
   confirmText: string;
-  cancelText: string;
   onClose: () => void;
 }
 
-const Alert = ({ message, confirmText, cancelText, onClose }: IProps) => {
+const Alert = ({ className, message, confirmText, onClose }: IProps) => {
   const okRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -31,7 +31,7 @@ const Alert = ({ message, confirmText, cancelText, onClose }: IProps) => {
   }, []);
 
   return (
-    <DialogWrapper>
+    <DialogWrapper className={className}>
       <div
         className="react-dialog__message"
         dangerouslySetInnerHTML={{ __html: message }}

package/src/components/UI/Confirm.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import * as React from 'react';
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import DialogWrapper from './Wrapper';
 
 interface IProps {
+  className: string;
   message: string;
   confirmText: string;
   cancelText: string;
@@ -12,6 +13,7 @@ interface IProps {
 }
 
 const Confirm = ({
+  className,
   message,
   confirmText,
   cancelText,
@@ -39,7 +41,7 @@ const Confirm = ({
   }, []);
 
   return (
-    <DialogWrapper>
+    <DialogWrapper className={className}>
       <div
         className="react-dialog__message"
         dangerouslySetInnerHTML={{ __html: message }}

package/src/components/UI/Prompt.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
 import DialogWrapper from './Wrapper';
 
 interface IProps {
+  className: string;
   message: string;
   confirmText: string;
   cancelText: string;
@@ -12,7 +13,15 @@ interface IProps {
   onClickCancel: () => void;
 }
 
-const Prompt = ({ message, confirmText, cancelText, _default, onClickOK, onClickCancel }: IProps) => {
+const Prompt = ({
+  className,
+  message,
+  confirmText,
+  cancelText,
+  _default,
+  onClickOK,
+  onClickCancel,
+}: IProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -42,7 +51,7 @@ const Prompt = ({ message, confirmText, cancelText, _default, onClickOK, onClick
   }, []);
 
   return (
-    <DialogWrapper>
+    <DialogWrapper className={className}>
       <form onSubmit={handleSubmit}>
         <div
           className="react-dialog__message"

package/src/components/UI/Wrapper.tsx

@@ -4,13 +4,14 @@ import { ReactNode } from 'react';
 import Portal from './Portal';
 
 interface IProps {
+  className: string;
   children: ReactNode;
 }
 
-const DialogWrapper = ({ children }: IProps) => {
+const DialogWrapper = ({ className, children }: IProps) => {
   return (
     <Portal selector="body">
-      <div className="react-dialog__wrapper">
+      <div className={`react-dialog__wrapper${className && ` ${className}`}`}>
         <div className="react-dialog__dialog">{children}</div>
       </div>
     </Portal>

package/src/components/dialog/AlertDialog.tsx

@@ -3,19 +3,19 @@ import { ReactNode, useState } from 'react';
 import AlertContext from '../../context/AlertContext';
 import Alert from '../UI/Alert';
 
-type AlertState = {
+type TAlertState = {
   message: string;
   onClose: () => void;
 };
 
 interface IProps {
+  className: string;
   confirmText: string;
-  cancelText: string;
   children: ReactNode;
 }
 
-function AlertDialog({ children, confirmText, cancelText }: IProps) {
-  const [state, setState] = useState<AlertState>();
+function AlertDialog({ children, confirmText, className }: IProps) {
+  const [state, setState] = useState<TAlertState>();
 
   const alert = (message?: any): Promise<undefined> => {
     return new Promise((resolve) => {
@@ -34,8 +34,8 @@ function AlertDialog({ children, confirmText, cancelText }: IProps) {
       {children}
       {state && (
         <Alert
+          className={className}
           confirmText={confirmText}
-          cancelText={cancelText}
           message={state.message}
           onClose={state.onClose}
         />

package/src/components/dialog/ConfirmDialog.tsx

@@ -3,20 +3,26 @@ import { ReactNode, useState } from 'react';
 import ConfirmContext from '../../context/ConfirmContext';
 import Confirm from '../UI/Confirm';
 
-type ConfirmState = {
+type TConfirmState = {
   message: string;
   onClickOK: () => void;
   onClickCancel: () => void;
 };
 
 interface IProps {
+  className: string;
   confirmText: string;
   cancelText: string;
   children: ReactNode;
 }
 
-function ConfirmDialog({ children, confirmText, cancelText }: IProps) {
-  const [state, setState] = useState<ConfirmState>();
+function ConfirmDialog({
+  className,
+  children,
+  confirmText,
+  cancelText,
+}: IProps) {
+  const [state, setState] = useState<TConfirmState>();
 
   const confirm = (message?: string): Promise<boolean> => {
     return new Promise((resolve) => {
@@ -43,6 +49,7 @@ function ConfirmDialog({ children, confirmText, cancelText }: IProps) {
       {/* state 여부에 따라 Confirm 다이얼로그 띄우기 */}
       {state && (
         <Confirm
+          className={className}
           confirmText={confirmText}
           cancelText={cancelText}
           message={state.message}

package/src/components/dialog/PromptDialog.tsx

@@ -3,21 +3,27 @@ import { ReactNode, useState } from 'react';
 import PromptContext from '../../context/PromptContext';
 import Prompt from '../UI/Prompt';
 
-type PromptState = {
+type TPromptState = {
   message: string;
   _default: string;
   onClickOK: (result: string) => void;
   onClickCancel: () => void;
 };
 
 interface IProps {
+  className: string;
   confirmText: string;
   cancelText: string;
   children: ReactNode;
 }
 
-function PromptDialog({ children, confirmText, cancelText }: IProps) {
-  const [state, setState] = useState<PromptState>();
+function PromptDialog({
+  className,
+  children,
+  confirmText,
+  cancelText,
+}: IProps) {
+  const [state, setState] = useState<TPromptState>();
 
   const prompt = (
     message?: string,
@@ -44,6 +50,7 @@ function PromptDialog({ children, confirmText, cancelText }: IProps) {
       {children}
       {state && (
         <Prompt
+          className={className}
           confirmText={confirmText}
           cancelText={cancelText}
           message={state.message}

test/src/index.js

@@ -1,7 +1,7 @@
+import { DialogProvider } from '@shinyongjun/react-dialog';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import App from './App';
-import { DialogProvider } from '@shinyongjun/react-dialog';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(