some improvements on component renders

packages/app/src/cores/windows/components/defaultWindow/index.jsx

@@ -56,20 +56,24 @@ export default class DefaultWindowRender extends React.Component {
 		this.setState({ title })
 	}
 
-    updateDimensions = (dimensions = {
+	updateDimensions = (
+		dimensions = {
 			width: 0,
 			height: 0,
-    }) => {
+		},
+	) => {
 		this.ref.current?.updateSize({
 			width: dimensions.width,
 			height: dimensions.height,
 		})
 	}
 
-    updatePosition = (position = {
+	updatePosition = (
+		position = {
 			x: 0,
 			y: 0,
-    }) => {
+		},
+	) => {
 		this.ref.current?.updatePosition({
 			x: position.x,
 			y: position.y,
@@ -86,9 +90,12 @@ export default class DefaultWindowRender extends React.Component {
 		const windowHeight = dimensions.height ?? 600
 		const windowWidth = dimensions.width ?? 400
 
+		const y = window.innerHeight / 2 - windowHeight / 2
+		const x = window.innerWidth / 2 - windowWidth / 2
+
 		return {
-            x: window.innerWidth / 2 - windowWidth / 2,
+			x: x,
-            y: window.innerHeight / 2 - windowHeight / 2,
+			y: y,
 		}
 	}
 
@@ -112,8 +119,14 @@ export default class DefaultWindowRender extends React.Component {
 		if (Array.isArray(actions)) {
 			return actions.map((action) => {
 				return (
-                    <div key={action.key} onClick={action.onClick} {...action.props}>
+					<div
-                        {React.isValidElement(action.render) ? action.render : React.createElement(action.render)}
+						key={action.key}
+						onClick={action.onClick}
+						{...action.props}
+					>
+						{React.isValidElement(action.render)
+							? action.render
+							: React.createElement(action.render)}
 					</div>
 				)
 			})
@@ -133,13 +146,13 @@ export default class DefaultWindowRender extends React.Component {
 			dimensions: this.state.dimensions,
 		}
 
-        return <WindowContext.Provider value={ctx}>
+		return (
-            {
+			<WindowContext.Provider value={ctx}>
-                React.isValidElement(this.props.children)
+				{React.isValidElement(this.props.children)
 					? React.cloneElement(this.props.children, ctx)
-                    : React.createElement(this.props.children, ctx)
+					: React.createElement(this.props.children, ctx)}
-            }
 			</WindowContext.Provider>
+		)
 	}
 
 	render() {
@@ -149,30 +162,21 @@ export default class DefaultWindowRender extends React.Component {
 			return null
 		}
 
-        return <Rnd
+		return (
+			<Rnd
 				ref={this.ref}
 				default={{
 					...position,
 					...dimensions,
 				}}
-            minWidth={
+				minWidth={this.props.minWidth}
-                this.props.minWidth
+				minHeight={this.props.minHeight}
-            }
+				enableResizing={this.props.enableResizing ?? true}
-            minHeight={
+				disableDragging={this.props.disableDragging ?? false}
-                this.props.minHeight
-            }
-            enableResizing={
-                this.props.enableResizing ?? true
-            }
-            disableDragging={
-                this.props.disableDragging ?? false
-            }
 				dragHandleClassName={
 					this.props.dragHandleClassName ?? "window_topbar"
 				}
-            bounds={
+				//bounds={this.props.bounds ?? "#root"}
-                this.props.bounds ?? "#root"
-            }
 				className="window_wrapper"
 			>
 				<div className="window_topbar">
@@ -181,16 +185,15 @@ export default class DefaultWindowRender extends React.Component {
 				</div>
 
 				<div className="window_body">
-                {
+					{this.state.renderError && (
-                    this.state.renderError && <div className="render_error">
+						<div className="render_error">
 							<h1>Render Error</h1>
 							<code>{this.state.renderError.message}</code>
 						</div>
-                }
+					)}
-                {
+					{!this.state.renderError && this.getComponentRender()}
-                    !this.state.renderError && this.getComponentRender()
-                }
 				</div>
 			</Rnd>
+		)
 	}
 }

packages/app/src/cores/windows/windows.core.jsx

@@ -59,7 +59,7 @@ export default class WindowManager extends Core {
 			onClose = null,
 			createOrUpdate = false,
 			closeOnClickOutside = false,
-        } = {}
+		} = {},
 	) {
 		let element = document.createElement("div")
 		let node = null
@@ -70,7 +70,9 @@ export default class WindowManager extends Core {
 		if (this.root.querySelector(`#${id}`) && !createOrUpdate) {
 			const newId = `${id}_${Date.now()}`
 
-            this.console.warn(`Window ${id} already exist, overwritting id to ${newId}.\nYou can use {createOrUpdate = true} option to force refresh render of window`)
+			this.console.warn(
+				`Window ${id} already exist, overwritting id to ${newId}.\nYou can use {createOrUpdate = true} option to force refresh render of window`,
+			)
 
 			id = newId
 		}
@@ -115,16 +117,26 @@ export default class WindowManager extends Core {
 
 		// if useFrame is true, wrap the fragment with a DefaultWindow component
 		if (useFrame) {
-            fragment = <DefaultWindow>
+			fragment = <DefaultWindow>{fragment}</DefaultWindow>
-                {fragment}
-            </DefaultWindow>
 		}
 
-        node.render(React.cloneElement(fragment, {
+		if (React.isValidElement(fragment)) {
+			node.render(
+				React.cloneElement(fragment, {
 					close: () => {
 						this.close(id, onClose)
+					},
+				}),
+			)
+		} else {
+			node.render(
+				React.createElement(fragment, {
+					close: () => {
+						this.close(id, onClose)
+					},
+				}),
+			)
 		}
-        }))
 
 		return {
 			element,