1 files changed, 73 insertions, 3 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 56a2a517c..574884e86 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -20,15 +20,16 @@ import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
-import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell } from "./CollectionSchemaCells";
+import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells";
 import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader } from "./CollectionSchemaHeaders";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionView } from "./CollectionView";
 import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils";
+import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils";
 import { SnappingManager } from "../../util/SnappingManager";
+import ReactDOM from "react-dom";
 
 library.add(faCog, faPlus, faSortUp, faSortDown);
 library.add(faTable);
@@ -40,6 +41,8 @@ export enum ColumnType {
     String,
     Boolean,
     Doc,
+    Image,
+    List
 }
 // this map should be used for keys that should have a const type of value
 const columnTypes: Map<string, ColumnType> = new Map([
@@ -226,6 +229,14 @@ export interface SchemaTableProps {
     setPreviewDoc: (document: Doc) => void;
 }
 
+
+
+
+
+
+
+
+
 @observer
 export class SchemaTable extends React.Component<SchemaTableProps> {
     private DIVIDER_WIDTH = 4;
@@ -235,6 +246,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
     @observable _openCollections: Array<string> = [];
 
+    @observable _showDoc: Doc | undefined;
+    @observable _showDataDoc: any = "";
+    @observable _showDocPos: number[] = [];
+
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
     @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
     @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
@@ -347,6 +362,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         setPreviewDoc: this.props.setPreviewDoc,
                         setComputed: this.setComputed,
                         getField: this.getField,
+                        showDoc: this.showDoc,
                     };
 
                     const colType = this.getColumnType(col);
@@ -354,6 +370,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props} />;
                     if (colType === ColumnType.Boolean) return <CollectionSchemaCheckboxCell {...props} />;
                     if (colType === ColumnType.Doc) return <CollectionSchemaDocCell {...props} />;
+                    if (colType === ColumnType.Image) return <CollectionSchemaImageCell {...props} />;
+                    if (colType === ColumnType.List) return <CollectionSchemaListCell {...props} />;
                     return <CollectionSchemaCell {...props} />;
                 },
                 minWidth: 200,
@@ -403,7 +421,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document),
             textWrapRow: this.toggleTextWrapRow,
             rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
-            dropAction: StrCast(this.props.Document.childDropAction)
+            dropAction: StrCast(this.props.Document.childDropAction),
+            addDocTab: this.props.addDocTab
         };
     }
 
@@ -751,10 +770,61 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         return false;
     }
 
+    @action
+    showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => {
+        this._showDoc = doc;
+        if (dataDoc && screenX && screenY) {
+            this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY);
+        }
+    }
+
+    onOpenClick = () => {
+        if (this._showDoc) {
+            this.props.addDocTab(this._showDoc, "onRight");
+        }
+    }
+
+    getPreviewTransform = (): Transform => {
+        return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth);
+    }
+
     render() {
+        const preview = "";
         return <div className="collectionSchemaView-table" onPointerDown={this.onPointerDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
             {this.reactTable}
             <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
+            {!this._showDoc ? (null) :
+                <div className="collectionSchemaView-documentPreview" //onClick={() => { this.onOpenClick(); }}
+                    style={{
+                        position: "absolute", width: 400, height: 300,
+                        transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)`
+                    }}
+                    ref="overlay"><ContentFittingDocumentView
+                        Document={this._showDoc}
+                        DataDoc={this._showDataDoc}
+                        NativeHeight={returnZero}
+                        NativeWidth={returnZero}
+                        fitToBox={true}
+                        FreezeDimensions={true}
+                        focus={emptyFunction}
+                        LibraryPath={emptyPath}
+                        renderDepth={this.props.renderDepth}
+                        rootSelected={() => false}
+                        PanelWidth={() => 150}
+                        PanelHeight={() => 150}
+                        ScreenToLocalTransform={this.getPreviewTransform}
+                        docFilters={returnEmptyFilter}
+                        ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+                        ContainingCollectionView={this.props.CollectionView}
+                        moveDocument={this.props.moveDocument}
+                        parentActive={this.props.active}
+                        whenActiveChanged={emptyFunction}
+                        addDocTab={this.props.addDocTab}
+                        pinToPres={this.props.pinToPres}
+                        bringToFront={returnFalse}
+                        ContentScaling={returnOne}>
+                    </ContentFittingDocumentView>
+                </div>}
         </div>;
     }
 }
\ No newline at end of file