2021-03-13 04:21:13 +08:00
|
|
|
// @ts-nocheck
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
import React from 'react'
|
|
|
|
import ReactDOM, { render, unmountComponentAtNode } from 'react-dom'
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
import { Editor } from './Editor'
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
export interface VueRendererOptions {
|
|
|
|
as?: string;
|
|
|
|
editor: Editor;
|
|
|
|
props?: { [key: string]: any };
|
|
|
|
}
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
export class ReactRenderer {
|
|
|
|
id: string
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
editor: Editor
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
component: any
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
teleportElement: Element
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
element: Element
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
props: { [key: string]: any }
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
constructor(component: any, { props = {}, editor }: VueRendererOptions) {
|
|
|
|
this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
|
|
|
|
this.component = component
|
|
|
|
this.editor = editor
|
|
|
|
this.props = props
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
this.teleportElement = document.createElement('div')
|
|
|
|
this.teleportElement.classList.add('teleport-element')
|
|
|
|
this.element = this.teleportElement
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
// this.teleportElement.setAttribute('data-bla', '')
|
|
|
|
// render(React.createElement(component), this.teleportElement)
|
|
|
|
// render(React.createElement(component), this.teleportElement)
|
|
|
|
// this.render()
|
|
|
|
// // this.element = this.teleportElement.firstElementChild as Element
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
console.log({ props })
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
// this.bla = ReactDOM.createPortal(
|
|
|
|
// React.createElement(this.component, props),
|
|
|
|
// this.teleportElement,
|
|
|
|
// )
|
2021-03-08 20:19:05 +08:00
|
|
|
|
2021-03-13 04:21:13 +08:00
|
|
|
this.bla = React.createElement(this.component, props)
|
|
|
|
|
|
|
|
// console.log({ bla })
|
|
|
|
|
|
|
|
if (this.editor?.contentComponent) {
|
|
|
|
this.editor.contentComponent.setState({
|
|
|
|
renderers: this.editor.contentComponent.state.renderers.set(
|
|
|
|
this.id,
|
|
|
|
this,
|
|
|
|
),
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render(React.createElement(this.component), this.teleportElement)
|
|
|
|
}
|
|
|
|
|
|
|
|
updateProps(props: { [key: string]: any } = {}) {
|
|
|
|
// TODO
|
|
|
|
console.log('update props', { props })
|
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
|
|
|
// TODO
|
|
|
|
// console.log('DESTROY', { bla: this.teleportElement })
|
|
|
|
// console.log(document.querySelector('[data-bla]'))
|
|
|
|
// unmountComponentAtNode(this.teleportElement)
|
|
|
|
// unmountComponentAtNode(document.querySelector('[data-bla]'))
|
|
|
|
|
|
|
|
if (this.editor?.contentComponent) {
|
|
|
|
const { renderers } = this.editor.contentComponent.state
|
|
|
|
|
|
|
|
renderers.delete(this.id)
|
|
|
|
|
|
|
|
this.editor.contentComponent.setState({
|
|
|
|
renderers,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|