diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx | 38 |
1 files changed, 20 insertions, 18 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx index e94ddfc15..c9f817d2f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx @@ -1,5 +1,5 @@ import { Colors } from "@dash/components/src"; -import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; +import { FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { Template } from "../Template"; import { reaction, runInAction } from "mobx"; import React from "react"; @@ -15,15 +15,17 @@ 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 { +export interface TemplatePreviewBox_props { template: Template; menu: DocCreatorMenu; leftButtonOpts?: [icon: IconProp, func: (...args: any) => void] rightButtonOpts?: [icon: IconProp, func: (...args: any) => void] } -export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> { +@observer +export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBox_props> { private previewWindow: HTMLDivElement | null = null; // private icon: ImageField | undefined = undefined; @@ -51,11 +53,11 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview // } get doc() { - return this.props.template.getRenderedDoc() as Doc; + return this._props.template.getRenderedDoc() as Doc; } render() { - const template = this.props.template; + const template = this._props.template; return ( <div @@ -63,23 +65,23 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview 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)` : '', + 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}))} + onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.menu.updateSelectedTemplate(template))} > - { this.props.leftButtonOpts ? + { this._props.leftButtonOpts ? <button className="option-button left" onPointerDown={e => - this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts) + this._props.menu.setUpButtonClick(e, () => this._props.leftButtonOpts) }> - <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" /> + <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" /> + { 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')} /> */} @@ -89,14 +91,14 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview 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)} + 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} + addDocTab={this._props.menu._props.addDocTab} pinToPres={() => undefined} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} |