1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import { Colors } from "@dash/components/src";
import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
import { Template } from "../Template";
import { reaction, runInAction } from "mobx";
import React from "react";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import { DocCreatorMenu } from "../DocCreatorMenu";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { DocumentView } from "../../../DocumentView";
import { emptyFunction } from "../../../../../../Utils";
import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils";
import { Transform } from "../../../../../util/Transform";
import { DefaultStyleProvider } from "../../../../StyleProvider";
import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
import { IDisposer } from "mobx-utils";
import { ImageField } from "../../../../../../fields/URLField";
import { ImageCast } from "../../../../../../fields/Types";
export interface TemplatePreviewBoxProps {
template: Template;
menu: DocCreatorMenu;
leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
}
export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
private previewWindow: HTMLDivElement | null = null;
// private icon: ImageField | undefined = undefined;
setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
this.previewWindow = node;
this.forceUpdate();
}
// componentDidMount(): void {
// console.log('mounted')
// setTimeout(() => {
// const docView = DocumentView.getDocumentView(this.doc);
// if (docView) {
// console.log('docview found')
// docView.ComponentView?.updateIcon?.();
// setTimeout(() => {
// console.log('componentview found: ', docView.ComponentView)
// this.icon = ImageCast(docView.Document.icon);
// console.log('icon is:', this.icon, ' from: ', docView.Document.icon);
// this.forceUpdate();
// }, 5000);
// }
// }, 1000);
// }
get doc() {
return this.props.template.getRenderedDoc() as Doc;
}
render() {
const template = this.props.template;
return (
<div
key={template.title}
className="docCreatorMenu-preview-window"
ref={this.setContainerRef}
style={{
border: this.props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
boxShadow: this.props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
}}
onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}
>
{ this.props.leftButtonOpts ?
<button
className="option-button left"
onPointerDown={e =>
this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts)
}>
<FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" />
</button> : null
}
{ this.props.rightButtonOpts ?
<button className="option-button right" onPointerDown={e => this.props.menu.setUpButtonClick(e, () => this.props.rightButtonOpts)}>
<FontAwesomeIcon icon={this.props.rightButtonOpts![0]} color="white" />
</button> : null }
{/* { this.icon ?
<img className="docCreatorMenu-preview-image" src={this.icon.url.href.replace('.png', '_o.png')} /> */}
<DocumentView
Document={this.doc}
isContentActive={emptyFunction} // !!! should be return false
addDocument={returnFalse}
moveDocument={returnFalse}
removeDocument={returnFalse}
PanelWidth={() => this.previewWindow?.clientWidth ?? this.props.menu._menuDimensions.height * .3}
PanelHeight={() => this.previewWindow?.clientHeight ?? this.props.menu._menuDimensions.height * .3}
ScreenToLocalTransform={() => new Transform(-this.props.menu._pageX - 5, -this.props.menu._pageY - 35, 1)}
renderDepth={1}
whenChildContentsActiveChanged={emptyFunction}
focus={emptyFunction}
styleProvider={DefaultStyleProvider}
addDocTab={this.props.menu._props.addDocTab}
pinToPres={() => undefined}
childFilters={returnEmptyFilter}
childFiltersByRanges={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
fitContentsToBox={returnFalse}
fitWidth={returnFalse}
hideDecorations={true}
/>
</div>
)
}
}
|
