react-simple-game-engine 0.2.65 → 0.2.67

package/lib/ui-components/modal.d.ts

@@ -1,11 +1,11 @@
-import { ReactElement, ReactNode, CSSProperties } from "react";
+import { ReactElement, CSSProperties } from "react";
 declare type ModalProps = {
     children?: ReactElement;
-    content: ReactNode;
+    content: ReactElement;
+    backgroundStyle?: CSSProperties;
     defaultOpen?: boolean;
     event?: string;
     onClose?: () => void;
-    backgroundStyle?: CSSProperties;
 };
 export declare type RefModalFunctions = {
     open: () => void;

package/lib/ui-components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/ui-components/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EACZ,SAAS,EAKT,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,aAAa,CAAC;CACjC,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,KAAK,0GA0HhB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/ui-components/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EAKZ,aAAa,EAEd,MAAM,OAAO,CAAC;AAGf,aAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,KAAK,0GA8FhB,CAAC"}

package/lib/ui-components/modal.js

@@ -9,8 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useEffect, useState, useCallback, forwardRef, cloneElement, useImperativeHandle, useRef, } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useEffect, useState, useCallback, forwardRef, cloneElement, useImperativeHandle, useRef, memo, } from "react";
 import * as ReactDOM from "react-dom";
 export var Modal = forwardRef(function (_a, ref) {
     var _b;
@@ -22,8 +22,6 @@ export var Modal = forwardRef(function (_a, ref) {
         c.style.position = "fixed";
         c.style.top = "0";
         c.style.left = "0";
-        c.style.bottom = "0";
-        c.style.right = "0";
         return c;
     }, []);
     useEffect(function () {
@@ -68,19 +66,34 @@ export var Modal = forwardRef(function (_a, ref) {
                 ? cloneElement(trigger, (_b = {},
                     _b[event] = handleOpen,
                     _b), trigger.props.children)
-                : null, isOpen
-                ? ReactDOM.createPortal(_jsxs("div", __assign({ style: {
-                        width: "100%",
-                        height: "100%",
-                        position: "relative",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, ref: refModal }, { children: [_jsx("div", { style: __assign({ width: "100%", height: "100%", position: "absolute", zIndex: 0 }, backgroundStyle), onClick: handleClose }), _jsx("main", __assign({ style: {
-                                position: "relative",
-                                zIndex: 1,
-                                minWidth: "200px",
-                                minHeight: "200px",
-                            } }, { children: content }))] })), container)
-                : null] }));
+                : null, ReactDOM.createPortal(isOpen ? (_jsx(ModalWrap, { content: content, backgroundStyle: backgroundStyle, handleClose: handleClose })) : null, container)] }));
 });
+var ModalWrap = forwardRef(memo(function (_a, ref) {
+    var content = _a.content, backgroundStyle = _a.backgroundStyle, handleClose = _a.handleClose;
+    var el = useMemo(function () {
+        return cloneElement(content, {
+            close: handleClose,
+        }, content.props.children);
+    }, [content]);
+    return (_jsx("div", __assign({ style: {
+            width: "100%",
+            height: "100%",
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+        } }, { children: _jsxs("div", __assign({ style: {
+                width: "100%",
+                height: "100%",
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, ref: ref }, { children: [_jsx("div", { style: __assign({ width: "100%", height: "100%", position: "absolute", zIndex: 0 }, backgroundStyle), onClick: handleClose }), _jsx("main", __assign({ style: {
+                        position: "relative",
+                        zIndex: 1,
+                        minWidth: "200px",
+                        minHeight: "200px",
+                    } }, { children: el }))] })) })));
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.2.65",
+  "version": "0.2.67",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",