blob: e78109b624e4bb59ed2e6bade4ece6bb72f17bdb (
plain)
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
|
import { Colors } from "@dash/components/src";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, observable, runInAction } from "mobx";
import React from "react";
import ReactLoading from "react-loading";
import { Doc } from "../../../../../../fields/Doc";
import { StrCast } from "../../../../../../fields/Types";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import { Template } from "../Template";
import { observer } from "mobx-react";
import { DocCreatorMenu } from "../DocCreatorMenu";
import { TemplatePreviewBox } from "./TemplatePreviewBox";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
export interface SuggestedTemplatesProps {
menu: DocCreatorMenu;
loading?: boolean;
templates: Template[];
title: string;
optionsButtonOpts?: [IconProp, (...args: any) => any];
previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
}
@observer
export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTemplatesProps> {
render() {
return (
<div className="docCreatorMenu-section">
<div className="docCreatorMenu-section-topbar">
<div className="docCreatorMenu-section-title">{this.props.title}</div>
{this._props.optionsButtonOpts ? (<button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(this._props.optionsButtonOpts![1]))}>
<FontAwesomeIcon icon={this._props.optionsButtonOpts[0] as IconProp} />
</button>) : null}
</div>
<div className="docCreatorMenu-templates-preview-window">
{this._props.loading ?
(<div className="loading-spinner">
<ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
</div>)
: this.props.templates.map(template => (
<TemplatePreviewBox
template={template}
menu={this.props.menu}
leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
rightButtonOpts={this._props.previewBoxRightButtonOpts}
/>
))}
</div>
</div>
);
}
}
|
