Merge pull request #2 from RickoNoNo3/dev

Dev updated to 1.3.7

README.md

@@ -3,11 +3,8 @@
 <a target="_blank" href="https://www.npmjs.com/package/react-winbox"><img src="https://img.shields.io/npm/v/react-winbox?style=flat-square"></a>
 ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/rickonono3/react-winbox/Node.js%20CI/main?style=flat-square)
 
-
 A React controlled component for [WinBox.js](https://github.com/nextapps-de/winbox), with full Reactful props and state. Includes all configuration of WinBox.js by using React component props.
 
-## Use it just like other native components of you! Whatever the float window does.
-
 **Full type declaration for both JavaScript and TypeScript.**
 
 ![demo screenshot](https://github.com/RickoNoNo3/react-winbox/blob/main/demo.jpg)
@@ -22,7 +19,7 @@ yarn add react-winbox
 
 ## Usage
 
-To use WinBox, ensure the body has a non-zero height, e.g. `100vh`.
+To use WinBox, ensure the document body has a initial non-zero height, e.g. `100vh`.
 
 ```jsx
 import WinBox from 'react-winbox';

dist/index.d.ts

@@ -4,7 +4,7 @@ import 'winbox/dist/css/winbox.min.css';
 declare type WinBoxPropType = {
     title: string;
     id?: string;
-    children?: ReactElement | null;
+    children?: ReactElement | ReactElement[] | null;
     /**
      * When you use this, the children elements will be ignored.
      */

dist/index.js

@@ -56,11 +56,20 @@ var WinBox = /** @class */ (function (_super) {
                 return; // because of twice calling in the strictMode, there can't be a `!this.state.closed`
             if (Object.keys(_this.props).indexOf('url') !== -1 && _this.props.url)
                 return; // do nothing if url is set.
-            if (!_this.reactRoot || _this.reactRootTarget !== _this.winBoxObj.body) {
-                // this.reactRoot = hydrateRoot(this.winBoxObj.body, this.props.children);
+            if ( /*!this.reactRoot ||*/_this.reactRootTarget !== _this.winBoxObj.body) {
+                // this.reactRoot = hydrateRoot(this.winBoxObj.body, this.props.children); // downgraded
                 _this.reactRootTarget = _this.winBoxObj.body;
             }
-            react_dom_1.default.render((_a = _this.props.children) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (_b = _this.reactRootTarget) !== null && _b !== void 0 ? _b : null);
+            if (_this.props.children) {
+                if (Array.isArray(_this.props.children)) {
+                    var children = _this.props.children;
+                    react_dom_1.default.render(children !== null && children !== void 0 ? children : [], (_a = _this.reactRootTarget) !== null && _a !== void 0 ? _a : null);
+                }
+                else {
+                    var children = _this.props.children;
+                    react_dom_1.default.render(children, (_b = _this.reactRootTarget) !== null && _b !== void 0 ? _b : null);
+                }
+            }
         };
         _this.maintainStyle = function () {
             if (!_this.winBoxObj)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-winbox",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "The React component for WinBox.js. Full Reactful props and state. A window manager for React",
   "private": false,
   "homepage": "https://github.com/rickonono3/react-winbox",
@@ -19,8 +19,8 @@
     "react-dom": "^16.14.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^16.0.41",
+    "@types/react-dom": "^16.0.11",
     "@types/winbox": "^0.2.1",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",

src/index.tsx

@@ -6,7 +6,7 @@ import ReactDOM, {Container, render, Renderer} from 'react-dom';
 type WinBoxPropType = {
   title: string
   id?: string
-  children?: ReactElement | null
+  children?: ReactElement | ReactElement[] | null
   /**
    * When you use this, the children elements will be ignored.
    */
@@ -153,7 +153,15 @@ class WinBox extends Component<WinBoxPropType, WinBoxState> {
       // this.reactRoot = hydrateRoot(this.winBoxObj.body, this.props.children); // downgraded
       this.reactRootTarget = this.winBoxObj.body;
     }
-    ReactDOM.render(this.props.children ?? <></>, this.reactRootTarget ?? null);
+    if (this.props.children) {
+      if (Array.isArray(this.props.children)) {
+        const children = this.props.children as ReactElement[];
+        ReactDOM.render(children ?? [], this.reactRootTarget ?? null);
+      } else {
+        const children = this.props.children as ReactElement;
+        ReactDOM.render(children, this.reactRootTarget ?? null);
+      }
+    }
   };
 
   maintainStyle = () => {

yarn.lock

@@ -62,17 +62,17 @@
   "resolved" "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz"
   "version" "15.7.5"
 
-"@types/react-dom@^17.0.11":
-  "integrity" "sha512-Tr9VU9DvNoHDWlmecmcsE5ZZiUkYx+nKBzum4Oxe1K0yJVyBlfbq7H3eXjxXqJczBKqPGq3EgfTru4MgKb9+Yw=="
-  "resolved" "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.15.tgz"
-  "version" "17.0.15"
+"@types/react-dom@^16.0.11":
+  "integrity" "sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A=="
+  "resolved" "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.14.tgz"
+  "version" "16.9.14"
   dependencies:
-    "@types/react" "^17"
+    "@types/react" "^16"
 
-"@types/react@^17", "@types/react@^17.0.39":
-  "integrity" "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g=="
-  "resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz"
-  "version" "17.0.44"
+"@types/react@^16", "@types/react@^16.0.41":
+  "integrity" "sha512-cXRVHd7vBT5v1is72mmvmsg9stZrbJO04DJqFeh3Yj2tVKO6vmxg5BI+ybI6Ls7ROXRG3aFbZj9x0WA3ZAoDQw=="
+  "resolved" "https://registry.npmjs.org/@types/react/-/react-16.14.25.tgz"
+  "version" "16.14.25"
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"