blob: da4851f84bc432c9835a2913f12c1a1561e11f20 (
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
|
import { makeObservable, 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; // eslint-disable-next-line
optionsButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
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, i) => (
<TemplatePreviewBox
key={i}
template={template}
menu={this.props.menu}
leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
rightButtonOpts={this._props.previewBoxRightButtonOpts}
/>
))}
</div>
</div>
);
}
}
|
