diff options
Diffstat (limited to 'src/client/views/LightboxView.tsx')
| -rw-r--r-- | src/client/views/LightboxView.tsx | 35 |
1 files changed, 17 insertions, 18 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 98d30b625..7577f2935 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -1,7 +1,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Toggle, ToggleType, Type } from 'browndash-components'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc'; @@ -21,6 +21,7 @@ import { GestureOverlay } from './GestureOverlay'; import './LightboxView.scss'; import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider'; +import { ObservableReactComponent } from './ObservableReactComponent'; interface LightboxViewProps { PanelWidth: number; @@ -31,7 +32,7 @@ interface LightboxViewProps { const savedKeys = ['freeform_panX', 'freeform_panY', 'freeform_scale', 'layout_scrollTop', 'layout_fieldKey']; type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore @observer -export class LightboxView extends React.Component<LightboxViewProps> { +export class LightboxView extends ObservableReactComponent<LightboxViewProps> { public static IsLightboxDocView(path: DocumentView[]) { return (path ?? []).includes(LightboxView.Instance?._docView!); } // prettier-ignore public static get LightboxDoc() { return LightboxView.Instance?._doc; } // prettier-ignore static Instance: LightboxView; @@ -45,18 +46,18 @@ export class LightboxView extends React.Component<LightboxViewProps> { private _savedState: LightboxSavedState = {}; private _history: { doc: Doc; target?: Doc }[] = []; @observable private _future: Doc[] = []; - @observable private _layoutTemplate: Opt<Doc>; - @observable private _layoutTemplateString: Opt<string>; - @observable private _doc: Opt<Doc>; - @observable private _docTarget: Opt<Doc>; - @observable private _docView: Opt<DocumentView>; + @observable private _layoutTemplate: Opt<Doc> = undefined; + @observable private _layoutTemplateString: Opt<string> = undefined; + @observable private _doc: Opt<Doc> = undefined; + @observable private _docTarget: Opt<Doc> = undefined; + @observable private _docView: Opt<DocumentView> = undefined; - @computed get leftBorder() { return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); } // prettier-ignore - @computed get topBorder() { return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); } // prettier-ignore + @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore + @computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore constructor(props: any) { super(props); - if (LightboxView.Instance) console.log('SDFSFASFASFSALFKJD:SLFJS:LDFJKS:LFJS:LDJFL:SDFJL:SDJF:LSJ'); + makeObservable(this); LightboxView.Instance = this; } @@ -174,8 +175,8 @@ export class LightboxView extends React.Component<LightboxViewProps> { toggleExplore = () => (DocumentView.ExploreMode = !DocumentView.ExploreMode); lightboxDoc = () => this._doc; - lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2; - lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2; + lightboxWidth = () => this._props.PanelWidth - this.leftBorder * 2; + lightboxHeight = () => this._props.PanelHeight - this.topBorder * 2; lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); lightboxDocTemplate = () => this._layoutTemplate; future = () => this._future; @@ -187,7 +188,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { style={{ display: display ? '' : 'none', left, - width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + width: bottom !== undefined ? undefined : Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), bottom, }}> <div @@ -247,7 +248,6 @@ export class LightboxView extends React.Component<LightboxViewProps> { <DocumentView ref={action((r: DocumentView | null) => (this._docView = r !== null ? r : undefined))} Document={this._doc} - DataDoc={undefined} PanelWidth={this.lightboxWidth} PanelHeight={this.lightboxHeight} LayoutTemplate={this.lightboxDocTemplate} @@ -256,7 +256,6 @@ export class LightboxView extends React.Component<LightboxViewProps> { styleProvider={DefaultStyleProvider} ScreenToLocalTransform={this.lightboxScreenToLocal} renderDepth={0} - rootSelected={returnFalse} docViewPath={returnEmptyDoclist} childFilters={returnEmptyFilter} childFiltersByRanges={returnEmptyFilter} @@ -273,11 +272,11 @@ export class LightboxView extends React.Component<LightboxViewProps> { </GestureOverlay> </div> - {this.renderNavBtn(0, undefined, this.props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} + {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} {this.renderNavBtn( - this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), undefined, - this.props.PanelHeight / 2 - 12.5, + this._props.PanelHeight / 2 - 12.5, 'chevron-right', this._doc && this._future.length, this.next, |