From 8207a9d40e3e48f1bbcd145dd579e9108cef0042 Mon Sep 17 00:00:00 2001
From: Sujon Hossain <sujon.hossain758@gmail.com>
Date: Sun, 23 Jan 2022 00:57:29 +0600
Subject: [PATCH] jsx style component

---
 package.json                 |  2 +-
 src/components/Draggable.tsx | 16 ++++++++++++----
 src/index.tsx                | 21 ++++++++++++---------
 src/style/style.module.css   | 23 -----------------------
 src/style/styles.ts          | 25 +++++++++++++++++++++++++
 5 files changed, 50 insertions(+), 37 deletions(-)
 delete mode 100644 src/style/style.module.css
 create mode 100644 src/style/styles.ts

diff --git a/package.json b/package.json
index 279c3b1..83062c6 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.7.6",
+  "version": "1.7.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
diff --git a/src/components/Draggable.tsx b/src/components/Draggable.tsx
index cef6f5f..47f46ca 100644
--- a/src/components/Draggable.tsx
+++ b/src/components/Draggable.tsx
@@ -1,7 +1,11 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import styles from '../style/style.module.css';
+import * as styles from '../style/styles';
 
-export const Draggable: FC = ({ children }) => {
+interface IProps {
+    bodyStyle: React.CSSProperties;
+}
+
+export const Draggable: FC<IProps> = ({ children, bodyStyle }) => {
     const boxRef = useRef<HTMLDivElement>(null);
     const dragRef = useRef<HTMLDivElement>(null);
     const [isDragActive, setIsDragActive] = useState<boolean>(false);
@@ -47,8 +51,12 @@ export const Draggable: FC = ({ children }) => {
     }, [dragEndHandler, dragStartHandler, draggingHandler]);
 
     return (
-        <div ref={boxRef} className={styles.ReactPortalDialog__Body}>
-            <div ref={dragRef} className={styles.ReactPortalDialog__Move}>
+        <div ref={boxRef} style={bodyStyle} className="ReactPortalDialog__Body">
+            <div
+                ref={dragRef}
+                style={styles.ReactPortalDialog__Move}
+                className="ReactPortalDialog__Move"
+            >
                 Move Here
             </div>
             {children}
diff --git a/src/index.tsx b/src/index.tsx
index 574a838..0e50cb2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Draggable } from './components/Draggable';
-import styles from './style/style.module.css';
+import * as styles from './style/styles';
 
 interface Props {
     isOpen: boolean;
@@ -23,10 +23,6 @@ const Modal: FC<Props> = ({
     const divRef = useRef<HTMLElement | null>(null);
     const [divCreated, setDivCreated] = useState<Boolean>(false);
 
-    const overlayStyle = {
-        backgroundColor: isOverlay ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
-    };
-
     useEffect(() => {
         if (isOpen) {
             bodyRef.current = document.querySelector('body');
@@ -47,21 +43,28 @@ const Modal: FC<Props> = ({
         divRef.current?.remove();
     };
 
+    const overlayStyle = {
+        ...styles.ReactPortalDialog__Overlay,
+        backgroundColor: isOverlay ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
+    };
+
+    const bodyStyle = customStyles || styles.ReactPortalDialog__Body;
+
     return divCreated && divRef.current
         ? ReactDOM.createPortal(
               <>
                   <div
                       style={overlayStyle}
-                      className={styles.ReactPortalDialog__Overlay}
+                      className="ReactPortalDialog__Overlay"
                       onClick={closeHandler}
                   />
 
                   {isDraggable ? (
-                      <Draggable>{children}</Draggable>
+                      <Draggable bodyStyle={bodyStyle}>{children}</Draggable>
                   ) : (
                       <div
-                          style={customStyles}
-                          className={styles.ReactPortalDialog__Body}
+                          style={bodyStyle}
+                          className="ReactPortalDialog__Body"
                       >
                           {children}
                       </div>
diff --git a/src/style/style.module.css b/src/style/style.module.css
deleted file mode 100644
index b0d9c52..0000000
--- a/src/style/style.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.ReactPortalDialog__Overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-}
-
-.ReactPortalDialog__Body {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    max-height: 200px;
-    width: 400px;
-    background-color: rgb(223, 221, 221);
-    z-index: 1000;
-    transform: translate(-50%, -50%);
-}
-
-.ReactPortalDialog__Move {
-    background-color: salmon;
-    text-align: center;
-    padding: 5px;
-    cursor: move;
-}
\ No newline at end of file
diff --git a/src/style/styles.ts b/src/style/styles.ts
new file mode 100644
index 0000000..7821603
--- /dev/null
+++ b/src/style/styles.ts
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const ReactPortalDialog__Overlay: React.CSSProperties = {
+    position: 'fixed',
+    inset: '0',
+    zIndex: '1000',
+};
+
+export const ReactPortalDialog__Body: React.CSSProperties = {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    maxHeight: '200px',
+    width: '400px',
+    backgroundColor: 'rgb(223, 221, 221)',
+    zIndex: '1000',
+    transform: 'translate(-50%, -50%)',
+};
+
+export const ReactPortalDialog__Move: React.CSSProperties = {
+    backgroundColor: 'salmon',
+    textAlign: 'center',
+    padding: '5px',
+    cursor: 'move',
+};