Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-28 20:40:39 +00:00
Code Issues Projects Releases Wiki Activity

Make Desktop a functional component with hooks

Browse source
This commit is contained in:
Jordan Eldredge 2019-08-20 07:42:54 -07:00
parent e3b3eab63e
commit 0472033fba
1 changed files with 12 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

38
js/components/MilkdropWindow/Desktop.tsx
View file

@ -1,32 +1,18 @@
import React from "react";
import ReactDOM from "react-dom";
interface Props {}
const Desktop = React.memo(({ children }) => {
const [desktopNode] = React.useState(() => document.createElement("div"));
export default class Desktop extends React.Component<Props> {
_desktopNode: HTMLElement | null;
constructor(props: Props) {
super(props);
this._desktopNode = null;
}
React.useEffect(() => {
desktopNode.classList.add("webamp-desktop");
document.body.appendChild(desktopNode);
return () => {
document.body.removeChild(desktopNode);
};
}, [desktopNode]);
componentWillUnmount() {
if (this._desktopNode != null) {
document.body.removeChild(this._desktopNode);
this._desktopNode = null;
}
}
return ReactDOM.createPortal(children, desktopNode);
});
_getNode() {
if (this._desktopNode == null) {
this._desktopNode = document.createElement("div");
this._desktopNode.classList.add("webamp-desktop");
document.body.appendChild(this._desktopNode);
}
return this._desktopNode;
}
render() {
return ReactDOM.createPortal(this.props.children, this._getNode());
}
}
export default Desktop;