diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaCells.tsx | 118 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaHeaders.tsx | 4 |
2 files changed, 103 insertions, 19 deletions
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 8164e37e3..e34a9e450 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -3,7 +3,7 @@ import { action, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; -import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils"; +import { emptyFunction, returnFalse, returnZero, returnOne, Utils } from "../../../Utils"; import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { KeyCodes } from "../../util/KeyCodes"; @@ -25,6 +25,8 @@ import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; +import { KeysDropdown } from "./CollectionSchemaHeaders"; +const path = require('path'); library.add(faExpand); @@ -322,6 +324,21 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { // render() { // return this.renderCellWithType("image"); // } + + choosePath(url: URL, dataDoc: any) { + const lower = url.href.toLowerCase(); + if (url.protocol === "data") { + return url.href; + } else if (url.href.indexOf(window.location.origin) === -1) { + return Utils.CorsProxy(url.href); + } else if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) { + return url.href;//Why is this here + } + const ext = path.extname(url.href); + const _curSuffix = "_o"; + return url.href.replace(ext, _curSuffix + ext); + } + render() { const props: FieldViewProps = { Document: this.props.rowProps.original, @@ -349,21 +366,40 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { ContentScaling: returnOne }; - const data = Cast(props.DataDoc?.data, ImageField); - const url = data ? data.url.href : undefined; - console.log(url); + let image = true; + let url = []; + if (props.DataDoc) { + const field = Cast(props.DataDoc[props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc + const alts = DocListCast(props.DataDoc[props.fieldKey + "-alternates"]); // retrieve alternate documents that may be rendered as alternate images + const altpaths = alts.map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url).filter(url => url).map(url => this.choosePath(url, props.DataDoc)); // access the primary layout data of the alternate documents + const paths = field ? [this.choosePath(field.url, props.DataDoc), ...altpaths] : altpaths; + if (paths.length) { + url = paths; + } else { + url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + image = false; + } + //url = paths.length ? paths : [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + } else { + url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + image = false; + } + const heightToWidth = NumCast(props.DataDoc?._nativeHeight) / NumCast(props.DataDoc?._nativeWidth); + const height = this.props.rowProps.width * heightToWidth; if (props.fieldKey === "data") { - if (url) { + if (url !== []) { const reference = React.createRef<HTMLDivElement>(); return ( <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}> - <img src={url} width={"30px"} height={"30px"} style={{ resize: "both" }} /> + <img src={url[0]} width={image ? this.props.rowProps.width : "30px"} + height={image ? height : "30px"} /> </div > </div> ); + } else { return this.renderCellWithType("image"); } @@ -375,20 +411,68 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { @observer export class CollectionSchemaListCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType("list"); - } // render() { - // const reference = React.createRef<HTMLDivElement>(); - // return ( - // <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> - // <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={this._document[Id]} ref={reference}> - // <input type="checkbox" checked={this._isChecked} onChange={this.toggleChecked} /> - // </div > - // </div> - // ); + // return this.renderCellWithType("list"); // } + + emptyFunc() { + + } + render() { + const props: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne + }; + + let value = ""; + const reference = React.createRef<HTMLDivElement>(); + const data = props.DataDoc?.fieldKey; + + if (Array.isArray(data)) { + + + + return ( + <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}> + <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}> + <KeysDropdown + keyValue={value} + possibleKeys={data} + existingKeys={data} + canAddNew={true} + addNew={false} + onSelect={this.emptyFunc} + setIsEditing={this.props.setIsEditing} + /> + </div > + </div> + ); + } else { + return this.renderCellWithType("list"); + } + } } @observer diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 85908c0ca..0d6cf4474 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -267,7 +267,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> } -interface KeysDropdownProps { +export interface KeysDropdownProps { keyValue: string; possibleKeys: string[]; existingKeys: string[]; @@ -277,7 +277,7 @@ interface KeysDropdownProps { setIsEditing: (isEditing: boolean) => void; } @observer -class KeysDropdown extends React.Component<KeysDropdownProps> { +export class KeysDropdown extends React.Component<KeysDropdownProps> { @observable private _key: string = this.props.keyValue; @observable private _searchTerm: string = this.props.keyValue; @observable private _isOpen: boolean = false; |