added floatingStack component for layouts

packages/app/src/layouts/components/floatingStack/index.jsx

@@ -0,0 +1,113 @@
+import React from "react"
+import { DOMWindow } from "components/RenderWindow"
+
+import "./index.less"
+
+class FloatingStackItem extends React.PureComponent {
+    state = {
+        renderError: null
+    }
+
+    componentDidCatch(error, info) {
+        console.log(error, info)
+
+        this.setState({
+            renderError: error,
+        })
+    }
+
+    render() {
+        if (this.state.renderError) {
+            return <div className="floating_stack_item">
+                <h1>Render Error</h1>
+            </div>
+        }
+
+        return <div className="floating_stack_item" key={this.props.id} id={this.props.id}>
+            <React.Fragment>
+                {this.props.children}
+            </React.Fragment>
+        </div>
+    }
+}
+
+export default class FloatingStack extends React.Component {
+    state = {
+        renders: [],
+    }
+
+    public = {
+        add: (id, render) => {
+            try {
+                if (!id) {
+                    console.error(`FloatingStack: id is required`)
+                    return false
+                }
+                if (!render) {
+                    console.error(`FloatingStack: render is required`)
+                    return false
+                }
+
+                if (this.state.renders.find((item) => item.id === id)) {
+                    console.error(`FloatingStack: id ${id} already exists`)
+                    return false
+                }
+
+                this.setState({
+                    renders: [
+                        ...this.state.renders,
+                        {
+                            id,
+                            render: React.createElement(render),
+                        },
+                    ]
+                })
+
+                return render
+            } catch (error) {
+                console.log(error)
+                return null
+            }
+        },
+        remove: (id) => {
+            this.setState({
+                renders: this.state.renders.filter((item) => {
+                    return item.id !== id
+                })
+            })
+
+            return true
+        }
+    }
+
+    componentDidMount() {
+        window.app.layout.floatingStack = this.public
+    }
+
+    componentWillUnmount() {
+        window.app.layout.floatingStack = null
+        delete window.app.layout.floatingStack
+    }
+
+    render() {
+        return <div className="floating_stack">
+            {
+                this.state.renders.map((item) => {
+                    return <FloatingStackItem id={item.id}>
+                        {item.render}
+                    </FloatingStackItem>
+                })
+            }
+        </div>
+    }
+}
+
+export const createWithDom = () => {
+    const dom = new DOMWindow({
+        id: "FloatingStack",
+    })
+
+    dom.render(<FloatingStack />)
+
+    return dom
+}

packages/app/src/layouts/components/floatingStack/index.less

@@ -0,0 +1,25 @@
+.floating_stack {
+    position: absolute;
+    z-index: 300;
+
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    max-width: 270px;
+
+    gap: 20px;
+
+    margin: 20px;
+
+    transition: all 0.3s ease-in-out;
+}
+
+.floating_stack_item {
+    width: 100%;
+}