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
|
import { Colors } from "@dash/components/src";
import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import { Template } from "../Template";
import { makeObservable, observable, 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";
import { observer } from "mobx-react";
export interface TemplatePreviewBoxProps {
template: Template;
menu: DocCreatorMenu;
leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
}
@observer
export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
@observable private previewWindow: HTMLDivElement | null = null;
setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
this.previewWindow = node;
}
constructor(props: TemplatePreviewBoxProps) {
super(props);
makeObservable(this);
}
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, () => this._props.menu.updateSelectedTemplate(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 }
<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>
)
}
}
|
