blob: d53853c52c9ea7f6d9f66bf0ff6dde4c0e529750 (
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
56
57
58
59
60
61
|
import { Colors } from "@dash/components/src";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, makeObservable, 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";
import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
export interface SuggestedTemplatesProps {
menu: DocCreatorMenu;
loading?: boolean;
templates: Template[];
title: string;
styles?: string;
optionsButtonOpts?: [IconProp, (...args: any) => any];
previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
}
@observer
export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTemplatesProps> {
constructor(props: SuggestedTemplatesProps) {
super(props);
makeObservable(this);
}
render() {
return (
<div className="docCreatorMenu-section">
<div className="docCreatorMenu-section-topbar">
<div className="docCreatorMenu-section-title">{this.props.title}</div>
{this._props.optionsButtonOpts ?
<DocCreatorMenuButton icon={this._props.optionsButtonOpts[0] as IconProp} styles={'float-right'} function={() => runInAction(this._props.optionsButtonOpts![1])}/>
: null}
</div>
<div className={"docCreatorMenu-templates-preview-window " + this._props.styles}>
{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>
);
}
}
|
