RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

support attach renders

Browse Source
This commit is contained in:
SrGooglo 2023-08-24 13:02:09 +00:00
parent 8c74a78b56
commit c828e7a744
2 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/app/src/components/Layout/toolsBar/index.jsx
View File

@ -13,6 +13,7 @@ import "./index.less"
export default class ToolsBar extends React.Component {
state = {
visible: false,
renders: [],
}
componentDidMount() {
@ -35,6 +36,24 @@ export default class ToolsBar extends React.Component {
visible: to ?? !this.state.visible,
})
},
attachRender: (id, component, props) => {
this.setState({
renders: [...this.state.renders, {
id: id,
component: component,
props: props,
}],
})
return component
},
detachRender: (id) => {
this.setState({
renders: this.state.renders.filter((render) => render.id !== id),
})
return true
}
}
render() {
@ -59,8 +78,6 @@ export default class ToolsBar extends React.Component {
}
)}
>
<FeaturedEventsAnnouncements />
<div className="card" id="trendings">
<div className="header">
<h2>
@ -83,7 +100,17 @@ export default class ToolsBar extends React.Component {
<ConnectedFriends />
</div>
<FeaturedEventsAnnouncements />
<WidgetsWrapper />
<div className="attached_renders">
{
this.state.renders.map((render) => {
return React.createElement(render.component, render.props)
})
}
</div>
</div>
</div>
}}

20
packages/app/src/components/Layout/toolsBar/index.less
View File

@ -7,6 +7,7 @@
right: 0;
max-width: 20vw;
min-width: 320px;
height: 100vh;
height: 100dvh;
@ -80,4 +81,23 @@
z-index: 45;
}
}
.attached_renders {
position: sticky;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100%;
gap: 10px;
}
}