diff options
Diffstat (limited to 'src/client/views/nodes/FieldView.tsx')
| -rw-r--r-- | src/client/views/nodes/FieldView.tsx | 127 |
1 files changed, 85 insertions, 42 deletions
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 49f4cefce..b5dfd18eb 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -1,21 +1,24 @@ -import React = require("react") +import React = require("react"); import { observer } from "mobx-react"; -import { computed } from "mobx"; -import { Field, FieldWaiting, FieldValue } from "../../../fields/Field"; -import { Document } from "../../../fields/Document"; -import { TextField } from "../../../fields/TextField"; -import { NumberField } from "../../../fields/NumberField"; -import { RichTextField } from "../../../fields/RichTextField"; -import { ImageField } from "../../../fields/ImageField"; -import { WebField } from "../../../fields/WebField"; -import { VideoField } from "../../../fields/VideoField" -import { Key } from "../../../fields/Key"; +import { computed, observable } from "mobx"; import { FormattedTextBox } from "./FormattedTextBox"; import { ImageBox } from "./ImageBox"; -import { WebBox } from "./WebBox"; import { VideoBox } from "./VideoBox"; import { AudioBox } from "./AudioBox"; -import { AudioField } from "../../../fields/AudioField"; +import { DocumentContentsView } from "./DocumentContentsView"; +import { Transform } from "../../util/Transform"; +import { returnFalse, emptyFunction, returnOne } from "../../../Utils"; +import { CollectionView } from "../collections/CollectionView"; +import { CollectionPDFView } from "../collections/CollectionPDFView"; +import { CollectionVideoView } from "../collections/CollectionVideoView"; +import { IconBox } from "./IconBox"; +import { Opt, Doc, FieldResult } from "../../../new_fields/Doc"; +import { List } from "../../../new_fields/List"; +import { ImageField, VideoField, AudioField } from "../../../new_fields/URLField"; +import { IconField } from "../../../new_fields/IconField"; +import { RichTextField } from "../../../new_fields/RichTextField"; +import { DateField } from "../../../new_fields/DateField"; +import { NumCast } from "../../../new_fields/Types"; // @@ -24,61 +27,101 @@ import { AudioField } from "../../../fields/AudioField"; // See the LayoutString method on each field view : ImageBox, FormattedTextBox, etc. // export interface FieldViewProps { - fieldKey: Key; - doc: Document; + fieldKey: string; + ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>; + Document: Doc; isSelected: () => boolean; - select: () => void; + select: (isCtrlPressed: boolean) => void; isTopMost: boolean; selectOnLoad: boolean; - bindings: any; + addDocument?: (document: Doc, allowDuplicates?: boolean) => boolean; + addDocTab: (document: Doc) => boolean; + removeDocument?: (document: Doc) => boolean; + moveDocument?: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean; + ScreenToLocalTransform: () => Transform; + active: () => boolean; + whenActiveChanged: (isActive: boolean) => void; + focus: (doc: Doc) => void; + PanelWidth: () => number; + PanelHeight: () => number; + setVideoBox?: (player: VideoBox) => void; } @observer export class FieldView extends React.Component<FieldViewProps> { - public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") { - return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost} />`; + public static LayoutString(fieldType: { name: string }, fieldStr: string = "data") { + return `<${fieldType.name} {...props} fieldKey={"${fieldStr}"} />`; } @computed - get field(): FieldValue<Field> { - const { doc, fieldKey } = this.props; - return doc.Get(fieldKey); + get field(): FieldResult { + const { Document, fieldKey } = this.props; + return Document[fieldKey]; } render() { const field = this.field; - if (!field) { - return <p>{'<null>'}</p> - } - if (field instanceof TextField) { - return <p>{field.Data}</p> + if (field === undefined) { + return <p>{'<null>'}</p>; } + // if (typeof field === "string") { + // return <p>{field}</p>; + // } else if (field instanceof RichTextField) { - return <FormattedTextBox {...this.props} /> + return <FormattedTextBox {...this.props} />; } else if (field instanceof ImageField) { - return <ImageBox {...this.props} /> + return <ImageBox {...this.props} />; + } + else if (field instanceof IconField) { + return <IconBox {...this.props} />; + } + else if (field instanceof VideoField) { + return <VideoBox {...this.props} />; + } + else if (field instanceof AudioField) { + return <AudioBox {...this.props} />; + } else if (field instanceof DateField) { + return <p>{field.date.toLocaleString()}</p>; } - else if (field instanceof WebField) { - return <WebBox {...this.props} /> - } - else if (field instanceof VideoField){ - return <VideoBox {...this.props}/> + else if (field instanceof Doc) { + let returnHundred = () => 100; + return ( + <DocumentContentsView Document={field} + addDocument={undefined} + addDocTab={this.props.addDocTab} + removeDocument={undefined} + ScreenToLocalTransform={Transform.Identity} + ContentScaling={returnOne} + PanelWidth={returnHundred} + PanelHeight={returnHundred} + isTopMost={true} //TODO Why is this top most? + selectOnLoad={false} + focus={emptyFunction} + isSelected={this.props.isSelected} + select={returnFalse} + layoutKey={"layout"} + ContainingCollectionView={this.props.ContainingCollectionView} + parentActive={this.props.active} + toggleMinimized={emptyFunction} + whenActiveChanged={this.props.whenActiveChanged} + bringToFront={emptyFunction} /> + ); } - else if (field instanceof AudioField){ - return <AudioBox {...this.props}/> + else if (field instanceof List) { + return (<div> + {field.map(f => f instanceof Doc ? f.title : f.toString()).join(", ")} + </div>); } // bcz: this belongs here, but it doesn't render well so taking it out for now // else if (field instanceof HtmlField) { // return <WebBox {...this.props} /> // } - else if (field instanceof NumberField) { - return <p>{field.Data}</p> + else if (!(field instanceof Promise)) { + return <p>{JSON.stringify(field)}</p>; } - else if (field != FieldWaiting) { - return <p>{JSON.stringify(field.GetValue())}</p> + else { + return <p> {"Waiting for server..."} </p>; } - else - return <p> {"Waiting for server..."} </p> } }
\ No newline at end of file |