diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaCells.tsx | 64 |
1 files changed, 59 insertions, 5 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 2aed880ec..cbee848e6 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, observable, trace } from "mobx"; +import { action, observable, trace, computed } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; @@ -10,7 +10,7 @@ import { KeyCodes } from "../../util/KeyCodes"; import { SetupDrag, DragManager } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; -import { MAX_ROW_HEIGHT } from '../globalCssVariables.scss'; +import { MAX_ROW_HEIGHT, COLLECTION_BORDER_WIDTH } from '../globalCssVariables.scss'; import '../DocumentDecorations.scss'; import { EditableView } from "../EditableView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; @@ -30,6 +30,7 @@ import { LinkBox } from "../nodes/LinkBox"; import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; const path = require('path'); library.add(faExpand); @@ -342,12 +343,16 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { NativeWidth: returnZero, addDocTab: this.props.addDocTab, pinToPres: this.props.pinToPres, - ContentScaling: returnOne + ContentScaling: returnOne, + docFilters: [] }; @observable private _field = this.prop.Document[this.prop.fieldKey]; @observable private _doc = FieldValue(Cast(this._field, Doc)); @observable private _docTitle = this._doc?.title; - + @observable private _preview = false; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } + @computed get tableWidth() { return this.prop.PanelWidth() - 2 * this.borderWidth - 4 - this.previewWidth(); } @action onSetValue = (value: string) => { @@ -366,6 +371,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { console.log(results.result); this._doc = results.result; this.prop.Document[this.prop.fieldKey] = results.result; + this.prop.Document[this.prop.fieldKey] = results.result; this._docTitle = this._doc?.title; return true; @@ -380,6 +386,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); } + @action onOpenClick = () => { if (this._doc) { this.prop.addDocTab(this._doc, "onRight"); @@ -388,6 +395,16 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return false; } + @action + showPreview = (bool: boolean) => { + console.log("show preview"); + this._preview = bool; + } + + getPreviewTransform = (): Transform => { + return this.prop.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + } + render() { @@ -399,10 +416,42 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return ( <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> + {this._preview ? <ContentFittingDocumentView + Document={this._doc} + DataDoc={this.prop.DataDoc} + NativeHeight={returnZero} + NativeWidth={returnZero} + fitToBox={true} + FreezeDimensions={true} + focus={emptyFunction} + LibraryPath={this.prop.LibraryPath} + renderDepth={this.props.renderDepth} + rootSelected={() => { return false; }} + PanelWidth={() => { return 200 }} + PanelHeight={() => { return 200 }} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={this.docFilters} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + //addDocument={this.props.addDocument} + //removeDocument={this.props.removeDocument} + parentActive={this.prop.active} + whenActiveChanged={this.prop.whenActiveChanged} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne} + + > + </ContentFittingDocumentView> : null} + <div className="collectionSchemaView-cellContents-document" style={{ padding: "5.9px" }} onFocus={this.onFocus} onBlur={() => this._overlayDisposer?.()} - ref={this.dropRef}> + ref={this.dropRef} + onClick={() => { this.showPreview(!this._preview) }}> + <EditableView editing={this._isEditing} isEditingCallback={this.isEditingCallback} @@ -575,10 +624,15 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { @action onSetValue = (value: string) => { + + this._text = value; // change if its a document this._optionsList[this._selectedNum] = this._text; + + (this.prop.Document[this.prop.fieldKey] as List<any>).splice(this._selectedNum, 1, value); + } @action |