1 files changed, 30 insertions, 43 deletions

diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 5df0bea1a..5a7c2ef5b 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -1,13 +1,15 @@
-import { computed, observable, ObservableSet, runInAction } from 'mobx';
+import { computed, ObservableSet, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../ClientUtils';
 import { Doc, DocListCast } from '../../fields/Doc';
 import { DocData } from '../../fields/DocSymbols';
 import { ScriptField } from '../../fields/ScriptField';
 import { Cast, DocCast, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
-import { Docs, DocUtils } from '../documents/Documents';
+import { emptyFunction } from '../../Utils';
+import { Docs } from '../documents/Documents';
+import { DocUtils } from '../documents/DocUtils';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { Transform } from '../util/Transform';
 import { CollectionTreeView } from './collections/CollectionTreeView';
@@ -16,21 +18,6 @@ import { DefaultStyleProvider } from './StyleProvider';
 import './TemplateMenu.scss';
 
 @observer
-class TemplateToggle extends React.Component<{ template: string; checked: boolean; toggle: (event: React.ChangeEvent<HTMLInputElement>, template: string) => void }> {
-    render() {
-        if (this.props.template) {
-            return (
-                <li className="templateToggle">
-                    <input type="checkbox" checked={this.props.checked} onChange={event => this.props.toggle(event, this.props.template)} />
-                    {this.props.template}
-                </li>
-            );
-        } else {
-            return null;
-        }
-    }
-}
-@observer
 class OtherToggle extends React.Component<{ checked: boolean; name: string; toggle: (event: React.ChangeEvent<HTMLInputElement>) => void }> {
     render() {
         return (
@@ -50,12 +37,25 @@ export interface TemplateMenuProps {
 export class TemplateMenu extends React.Component<TemplateMenuProps> {
     _addedKeys = new ObservableSet();
     _customRef = React.createRef<HTMLInputElement>();
-    @observable private _hidden: boolean = true;
+
+    componentDidMount() {
+        !this._addedKeys && (this._addedKeys = new ObservableSet());
+        [...Array.from(Object.keys(this.props.docViews[0].Document[DocData])), ...Array.from(Object.keys(this.props.docViews[0].Document))]
+            .filter(key => key.startsWith('layout_') && (
+                StrCast(this.props.docViews[0].Document[key]).startsWith("<") ||
+                DocCast(this.props.docViews[0].Document[key])?.isTemplateDoc
+            ))
+            .forEach(key => runInAction(() => this._addedKeys.add(key.replace('layout_', '')))); // prettier-ignore
+    }
+    @computed get scriptField() {
+        const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.Document) as any });
+        return script ? () => script : undefined;
+    }
 
     toggleLayout = (e: React.ChangeEvent<HTMLInputElement>, layout: string): void => {
         this.props.docViews.map(dv => dv.switchViews(e.target.checked, layout, undefined, true));
     };
-    toggleDefault = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    toggleDefault = (): void => {
         this.props.docViews.map(dv => dv.switchViews(false, 'layout'));
     };
 
@@ -65,21 +65,8 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
             runInAction(() => this._addedKeys.add(this._customRef.current!.value));
         }
     };
-    componentDidMount() {
-        !this._addedKeys && (this._addedKeys = new ObservableSet());
-        [...Array.from(Object.keys(this.props.docViews[0].Document[DocData])), ...Array.from(Object.keys(this.props.docViews[0].Document))]
-            .filter(key => key.startsWith('layout_') && (
-                StrCast(this.props.docViews[0].Document[key]).startsWith("<") ||
-                DocCast(this.props.docViews[0].Document[key])?.isTemplateDoc
-            ))
-            .map(key => runInAction(() => this._addedKeys.add(key.replace('layout_', '')))); // prettier-ignore
-    }
 
     return100 = () => 300;
-    @computed get scriptField() {
-        const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.Document) as any });
-        return script ? () => script : undefined;
-    }
     templateIsUsed = (selDoc: Doc, templateDoc: Doc) => {
         const template = StrCast(templateDoc.dragFactory ? Cast(templateDoc.dragFactory, Doc, null)?.title : templateDoc.title);
         return StrCast(selDoc.layout_fieldKey) === 'layout_' + template ? 'check' : 'unchecked';
@@ -88,10 +75,11 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
         TraceMobx();
         const firstDoc = this.props.docViews[0].Document;
         const templateName = StrCast(firstDoc.layout_fieldKey, 'layout').replace('layout_', '');
-        const noteTypes = DocListCast(Cast(Doc.UserDoc()['template_notes'], Doc, null)?.data);
-        const addedTypes = DocListCast(Cast(Doc.UserDoc()['template_clickFuncs'], Doc, null)?.data);
+        const noteTypes = DocListCast(Cast(Doc.UserDoc().template_notes, Doc, null)?.data);
+        const addedTypes = DocListCast(Cast(Doc.UserDoc().template_clickFuncs, Doc, null)?.data);
         const templateMenu: Array<JSX.Element> = [];
         templateMenu.push(<OtherToggle key="default" name={firstDoc.layout instanceof Doc ? StrCast(firstDoc.layout.title) : 'Default'} checked={templateName === 'layout'} toggle={this.toggleDefault} />);
+        // eslint-disable-next-line no-return-assign
         addedTypes.concat(noteTypes).map(template => (template.treeView_Checked = this.templateIsUsed(firstDoc, template)));
         this._addedKeys &&
             Array.from(this._addedKeys)
@@ -122,10 +110,10 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
                     addDocTab={returnFalse}
                     PanelWidth={this.return100}
                     PanelHeight={this.return100}
-                    treeViewHideHeaderFields={true}
-                    treeViewHideTitle={true}
-                    dontRegisterView={true}
-                    fieldKey={'data'}
+                    treeViewHideHeaderFields
+                    treeViewHideTitle
+                    dontRegisterView
+                    fieldKey="data"
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
                     addDocument={returnFalse}
@@ -135,10 +123,9 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
     }
 }
 
-ScriptingGlobals.add(function switchView(doc: Doc, template: Doc | undefined) {
-    if (template?.dragFactory) {
-        template = Cast(template.dragFactory, Doc, null);
-    }
+// eslint-disable-next-line prefer-arrow-callback
+ScriptingGlobals.add(function switchView(doc: Doc, templateIn: Doc | undefined) {
+    const template = templateIn?.dragFactory ? Cast(templateIn.dragFactory, Doc, null) : templateIn;
     const templateTitle = StrCast(template?.title);
     return templateTitle && DocUtils.makeCustomViewClicked(doc, Docs.Create.FreeformDocument, templateTitle, template);
 });