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
|
import { Colors } from '@dash/components/src';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Template } from '../Template';
import { action, makeObservable, observable } 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 { observer } from 'mobx-react';
export interface TemplatePreviewBoxProps {
template: Template;
menu: DocCreatorMenu; // eslint-disable-next-line
leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]; // eslint-disable-next-line
rightButtonOpts?: [icon: IconProp, func: (...args: any) => void];
}
@observer
export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
@observable private previewWindow: HTMLDivElement | null = null;
constructor(props: TemplatePreviewBoxProps) {
super(props);
makeObservable(this);
}
get doc() {
return this._props.template.getRenderedDoc() as Doc;
}
docPanelWidth = () => this.previewWindow?.clientWidth ?? this._props.menu._menuDimensions.height * 0.3;
docPanelHeight = () => this.previewWindow?.clientHeight ?? this._props.menu._menuDimensions.height * 0.3;
docScreenToLocalXf = () => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1);
render() {
const template = this._props.template;
return (
<div
key={template.title}
className="docCreatorMenu-preview-window"
ref={action((node: HTMLDivElement | null) => (this.previewWindow = node))}
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.docPanelWidth}
PanelHeight={this.docPanelHeight}
ScreenToLocalTransform={this.docScreenToLocalXf}
renderDepth={1}
whenChildContentsActiveChanged={emptyFunction}
focus={emptyFunction}
styleProvider={DefaultStyleProvider}
addDocTab={this._props.menu._props.addDocTab}
pinToPres={emptyFunction}
childFilters={returnEmptyFilter}
childFiltersByRanges={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
// fitContentsToBox={returnFalse}
// fitWidth={returnFalse}
hideDecorations={true}
/>
</div>
);
}
}
|
