v1.2.0

신용준 · 신용준 · commit ea3699278279 · 2024-02-02T14:34:27.000+09:00
- 포탈 추가 (react-dialog가 body 밑에 렌더링 된다.)
- confirmText, cancelText 옵션 추가
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-dialog",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",
diff --git a/package/src/components/DialogProvider.tsx b/package/src/components/DialogProvider.tsx
@@ -8,13 +8,21 @@ import PromptDialog from './dialog/PromptDialog';
 
 interface IProps {
   children: ReactNode;
+  confirmText?: string;
+  cancelText?: string;
 }
 
-function DialogProvider({ children }: IProps) {
+function DialogProvider({
+  children,
+  confirmText = 'ok',
+  cancelText = 'cancel',
+}: IProps) {
   return (
-    <PromptDialog>
-      <AlertDialog>
-        <ConfirmDialog>{children}</ConfirmDialog>
+    <PromptDialog confirmText={confirmText} cancelText={cancelText}>
+      <AlertDialog confirmText={confirmText} cancelText={cancelText}>
+        <ConfirmDialog confirmText={confirmText} cancelText={cancelText}>
+          {children}
+        </ConfirmDialog>
       </AlertDialog>
     </PromptDialog>
   );
diff --git a/package/src/components/UI/Alert.tsx b/package/src/components/UI/Alert.tsx
@@ -4,10 +4,12 @@ import DialogWrapper from './Wrapper';
 
 interface IProps {
   message: string;
+  confirmText: string;
+  cancelText: string;
   onClose: () => void;
 }
 
-const Alert = ({ message, onClose }: IProps) => {
+const Alert = ({ message, confirmText, cancelText, onClose }: IProps) => {
   const okRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -41,7 +43,7 @@ const Alert = ({ message, onClose }: IProps) => {
           className="react-dialog__button-ok"
           onClick={onClose}
         >
-          ok
+          {confirmText}
         </button>
       </div>
     </DialogWrapper>
diff --git a/package/src/components/UI/Confirm.tsx b/package/src/components/UI/Confirm.tsx
@@ -5,11 +5,19 @@ import DialogWrapper from './Wrapper';
 
 interface IProps {
   message: string;
+  confirmText: string;
+  cancelText: string;
   onClickOK: () => void;
   onClickCancel: () => void;
 }
 
-const Confirm = ({ message, onClickOK, onClickCancel }: IProps) => {
+const Confirm = ({
+  message,
+  confirmText,
+  cancelText,
+  onClickOK,
+  onClickCancel,
+}: IProps) => {
   const okRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -44,14 +52,14 @@ const Confirm = ({ message, onClickOK, onClickCancel }: IProps) => {
           onClick={onClickOK}
           autoFocus
         >
-          ok
+          {confirmText}
         </button>
         <button
           type="button"
           className="react-dialog__button-cancel"
           onClick={onClickCancel}
         >
-          cancel
+          {cancelText}
         </button>
       </div>
     </DialogWrapper>
diff --git a/package/src/components/UI/Portal.tsx b/package/src/components/UI/Portal.tsx
@@ -0,0 +1,14 @@
+import { createPortal } from 'react-dom';
+
+interface IProps {
+  children: React.ReactNode;
+  selector: string;
+}
+
+const Portal = ({ children, selector }: IProps) => {
+  const element =
+    typeof window !== 'undefined' && document.querySelector(selector);
+  return element && children ? createPortal(children, element) : null;
+};
+
+export default Portal;
diff --git a/package/src/components/UI/Prompt.tsx b/package/src/components/UI/Prompt.tsx
@@ -5,12 +5,14 @@ import DialogWrapper from './Wrapper';
 
 interface IProps {
   message: string;
+  confirmText: string;
+  cancelText: string;
   _default: string;
   onClickOK: (result: string) => void;
   onClickCancel: () => void;
 }
 
-const Prompt = ({ message, _default, onClickOK, onClickCancel }: IProps) => {
+const Prompt = ({ message, confirmText, cancelText, _default, onClickOK, onClickCancel }: IProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -56,14 +58,14 @@ const Prompt = ({ message, _default, onClickOK, onClickCancel }: IProps) => {
         />
         <div className="react-dialog__button-wrapper">
           <button type="submit" className="react-dialog__button-ok">
-            ok
+            {confirmText}
           </button>
           <button
             type="reset"
             className="react-dialog__button-cancel"
             onClick={onClickCancel}
           >
-            cancel
+            {cancelText}
           </button>
         </div>
       </form>
diff --git a/package/src/components/UI/Wrapper.tsx b/package/src/components/UI/Wrapper.tsx
@@ -1,16 +1,19 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import * as React from 'react';
 import { ReactNode } from 'react';
+import Portal from './Portal';
 
 interface IProps {
   children: ReactNode;
 }
 
 const DialogWrapper = ({ children }: IProps) => {
   return (
-    <div className="react-dialog__wrapper">
-      <div className="react-dialog__dialog">{children}</div>
-    </div>
+    <Portal selector="body">
+      <div className="react-dialog__wrapper">
+        <div className="react-dialog__dialog">{children}</div>
+      </div>
+    </Portal>
   );
 };
 
diff --git a/package/src/components/dialog/AlertDialog.tsx b/package/src/components/dialog/AlertDialog.tsx
@@ -9,10 +9,12 @@ type AlertState = {
 };
 
 interface IProps {
+  confirmText: string;
+  cancelText: string;
   children: ReactNode;
 }
 
-function AlertDialog({ children }: IProps) {
+function AlertDialog({ children, confirmText, cancelText }: IProps) {
   const [state, setState] = useState<AlertState>();
 
   const alert = (message?: any): Promise<undefined> => {
@@ -30,7 +32,14 @@ function AlertDialog({ children }: IProps) {
   return (
     <AlertContext.Provider value={{ alert }}>
       {children}
-      {state && <Alert message={state.message} onClose={state.onClose} />}
+      {state && (
+        <Alert
+          confirmText={confirmText}
+          cancelText={cancelText}
+          message={state.message}
+          onClose={state.onClose}
+        />
+      )}
     </AlertContext.Provider>
   );
 }
diff --git a/package/src/components/dialog/ConfirmDialog.tsx b/package/src/components/dialog/ConfirmDialog.tsx
@@ -10,10 +10,12 @@ type ConfirmState = {
 };
 
 interface IProps {
+  confirmText: string;
+  cancelText: string;
   children: ReactNode;
 }
 
-function ConfirmDialog({ children }: IProps) {
+function ConfirmDialog({ children, confirmText, cancelText }: IProps) {
   const [state, setState] = useState<ConfirmState>();
 
   const confirm = (message?: string): Promise<boolean> => {
@@ -41,6 +43,8 @@ function ConfirmDialog({ children }: IProps) {
       {/* state 여부에 따라 Confirm 다이얼로그 띄우기 */}
       {state && (
         <Confirm
+          confirmText={confirmText}
+          cancelText={cancelText}
           message={state.message}
           onClickOK={state.onClickOK}
           onClickCancel={state.onClickCancel}
diff --git a/package/src/components/dialog/PromptDialog.tsx b/package/src/components/dialog/PromptDialog.tsx
@@ -11,10 +11,12 @@ type PromptState = {
 };
 
 interface IProps {
+  confirmText: string;
+  cancelText: string;
   children: ReactNode;
 }
 
-function PromptDialog({ children }: IProps) {
+function PromptDialog({ children, confirmText, cancelText }: IProps) {
   const [state, setState] = useState<PromptState>();
 
   const prompt = (
@@ -42,6 +44,8 @@ function PromptDialog({ children }: IProps) {
       {children}
       {state && (
         <Prompt
+          confirmText={confirmText}
+          cancelText={cancelText}
           message={state.message}
           _default={state._default}
           onClickOK={state.onClickOK}
diff --git a/test/src/index.js b/test/src/index.js
@@ -6,7 +6,7 @@ import { DialogProvider } from '@shinyongjun/react-dialog';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <DialogProvider>
+    <DialogProvider confirmText="test">
       <App />
     </DialogProvider>
   </React.StrictMode>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@shinyongjun/react-dialog",`
`3`		`- "version": "1.1.0",`
	`3`	`+ "version": "1.2.0",`
`4`	`4`	`"main": "./dist/cjs/index.js",`
`5`	`5`	`"module": "./dist/esm/index.js",`
`6`	`6`	`"source": "./src/index.tsx",`