From e79e53d78546501fc855b76a84f000289ed7433a Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 4 Feb 2019 10:44:30 -0500 Subject: split out common code into CollectionViewBase. organized a few other things, too. --- src/views/nodes/DocumentView.tsx | 31 +++---------------------------- src/views/nodes/FieldTextBox.tsx | 10 +++++----- src/views/nodes/FieldView.tsx | 17 +++++++++++++++-- src/views/nodes/ImageBox.tsx | 13 ++++++------- 4 files changed, 29 insertions(+), 42 deletions(-) (limited to 'src/views/nodes') diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 9e8df0d79..dd47d4455 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -11,6 +11,7 @@ import "./NodeView.scss" import { DragManager } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; import { Utils } from "../../Utils"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; @@ -22,35 +23,9 @@ const JsxParser = require('react-jsx-parser').default;//TODO Why does this need interface DocumentViewProps { Document: Document; - ContainingCollectionView: Opt; + ContainingCollectionView: Opt; ContainingDocumentView: Opt; } - -export interface CollectionViewProps { - fieldKey: Key; - Document: Document; - ContainingDocumentView: Opt; -} - -// -// these properties get assigned through the render() method of the DocumentView when it creates this node. -// However, that only happens because the properties are "defined" in FieldTextBox's LayoutString() method -// -export interface DocumentFieldViewProps { - fieldKey: Key; - doc: Document; - containingDocumentView: DocumentView -} - -export const COLLECTION_BORDER_WIDTH = 2; - -interface CollectionView { - addDocument: (doc: Document) => void; - removeDocument: (doc: Document) => void; - active: boolean; - props: CollectionViewProps; -} - @observer export class DocumentContents extends React.Component { @@ -325,7 +300,7 @@ export class DocumentView extends React.Component { } @action fullScreenClicked = (e: React.MouseEvent): void => { - CollectionDockingView.OpenFullScreen(this); + CollectionDockingView.OpenFullScreen(this.props.Document); ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked }); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx index 1e03bf0f9..188b39a17 100644 --- a/src/views/nodes/FieldTextBox.tsx +++ b/src/views/nodes/FieldTextBox.tsx @@ -9,10 +9,10 @@ import { Document } from "../../fields/Document"; import { Opt } from "../../fields/Field"; import { Key } from "../../fields/Key"; import { SelectionManager } from "../../util/SelectionManager"; -import { DocumentView, DocumentFieldViewProps } from "./DocumentView"; import "./FieldTextBox.scss"; import React = require("react") import { RichTextField } from "../../fields/RichTextField"; +import { FieldViewProps } from "./FieldView"; // FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document @@ -31,14 +31,14 @@ import { RichTextField } from "../../fields/RichTextField"; // specified Key and assigns it to an HTML input node. When changes are made tot his node, // this will edit the document and assign the new value to that field. // -export class FieldTextBox extends React.Component { +export class FieldTextBox extends React.Component { - public static LayoutString() { return ""; } + public static LayoutString() { return ""; } private _ref: React.RefObject; private _editorView: Opt; private _reactionDisposer: Opt; - constructor(props: DocumentFieldViewProps) { + constructor(props: FieldViewProps) { super(props); this._ref = React.createRef(); @@ -110,7 +110,7 @@ export class FieldTextBox extends React.Component { } onPointerDown = (e: React.PointerEvent): void => { let me = this; - if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) { + if (e.buttons === 1 && SelectionManager.IsSelected(me.props.documentViewContainer)) { e.stopPropagation(); } } diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx index eec63256d..6c1cd956b 100644 --- a/src/views/nodes/FieldView.tsx +++ b/src/views/nodes/FieldView.tsx @@ -1,5 +1,6 @@ import React = require("react") -import { DocumentFieldViewProps } from "./DocumentView"; +import { DocumentView } from "./DocumentView"; +import { Document } from "../../fields/Document"; import { observer } from "mobx-react"; import { computed } from "mobx"; import { Field, Opt } from "../../fields/Field"; @@ -9,9 +10,21 @@ import { RichTextField } from "../../fields/RichTextField"; import { FieldTextBox } from "./FieldTextBox"; import { ImageField } from "../../fields/ImageField"; import { ImageBox } from "./ImageBox"; +import { Key } from "../../fields/Key"; + +// +// these properties get assigned through the render() method of the DocumentView when it creates this node. +// However, that only happens because the properties are "defined" in the markup for the field view. +// See the LayoutString method on each field view : ImageBox, FieldTextBox, etc. +// +export interface FieldViewProps { + fieldKey: Key; + doc: Document; + documentViewContainer: DocumentView +} @observer -export class FieldView extends React.Component { +export class FieldView extends React.Component { @computed get field(): Opt { const { doc, fieldKey } = this.props; diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx index 7577627e8..5137dbf38 100644 --- a/src/views/nodes/ImageBox.tsx +++ b/src/views/nodes/ImageBox.tsx @@ -2,26 +2,25 @@ import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { SelectionManager } from "../../util/SelectionManager"; -import { DocumentFieldViewProps } from "./DocumentView"; import "./ImageBox.scss"; import React = require("react") import { ImageField } from '../../fields/ImageField'; -import { NumberField } from '../../fields/NumberField'; +import { FieldViewProps } from './FieldView'; interface ImageBoxState { photoIndex: number, isOpen: boolean, }; -export class ImageBox extends React.Component { +export class ImageBox extends React.Component { - public static LayoutString() { return ""; } + public static LayoutString() { return ""; } private _ref: React.RefObject; private _downX: number = 0; private _downY: number = 0; private _lastTap: number = 0; - constructor(props: DocumentFieldViewProps) { + constructor(props: FieldViewProps) { super(props); this._ref = React.createRef(); @@ -39,7 +38,7 @@ export class ImageBox extends React.Component { if (Date.now() - this._lastTap < 300) { - if (e.buttons === 1 && SelectionManager.IsSelected(this.props.containingDocumentView)) { + if (e.buttons === 1 && SelectionManager.IsSelected(this.props.documentViewContainer)) { e.stopPropagation(); this._downX = e.clientX; this._downY = e.clientY; @@ -67,7 +66,7 @@ export class ImageBox extends React.Component { const { photoIndex } = this.state; - if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) { + if (this.state.isOpen && SelectionManager.IsSelected(this.props.documentViewContainer)) { return (