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 | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx new file mode 100644 index 000000000..e40192fa8 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx @@ -0,0 +1,48 @@ +import { Colors } from "@dash/components/src"; +import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; +import { Template } from "../Template"; +import { runInAction } from "mobx"; +import React from "react"; +import { ObservableReactComponent } from "../../../../ObservableReactComponent"; +import { DocCreatorMenu } from "../DocCreatorMenu"; +import { IconProp } from "@fortawesome/fontawesome-svg-core"; + +export interface TemplatePreviewBoxProps { + template: Template; + menu: DocCreatorMenu; + leftButtonOpts?: [icon: IconProp, func: (template: Template) => void] + rightButtonOpts?: [icon: IconProp, func: (template: Template) => void] +} + +export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> { + + render() { + const template = this.props.template; + + return ( + <div + key={template.title} + className="docCreatorMenu-preview-window" + 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(() => 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.props.menu.docPreview(template.getRenderedDoc())} + </div> + ) + } +}
\ No newline at end of file |