From c5c7fa9c0b17bbcee582d4fd788d378a2f7cd243 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 14 Jun 2020 12:54:38 -0500 Subject: adding list and image types --- .../views/collections/CollectionSchemaCells.tsx | 78 ++++++++++++++++++++++ .../views/collections/CollectionSchemaHeaders.tsx | 15 ++++- .../views/collections/CollectionSchemaView.tsx | 6 +- 3 files changed, 95 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index baf9d4156..4f2bfac08 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -24,6 +24,7 @@ import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; +import { ImageField } from "../../../fields/URLField"; library.add(faExpand); @@ -205,6 +206,18 @@ export class CollectionSchemaCell extends React.Component { const doc = FieldValue(Cast(field, Doc)); contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`; } + if (type === "image") { + // fix this + + const image = FieldValue(Cast(field, ImageField)); + const doc = FieldValue(Cast(field, Doc)); + contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`; + } + if (type === "list") { + // fix this + contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`; + } + let className = "collectionSchemaView-cellWrapper"; if (this._isEditing) className += " editing"; @@ -304,6 +317,71 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } } +@observer +export class CollectionSchemaImageCell extends CollectionSchemaCell { + render() { + return this.renderCellWithType("image"); + } + // 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 + // }; + + // if (props.fieldKey === "data") { + // const reference = React.createRef(); + // return ( + //
+ //
+ // {props.DataDoc?.data} + //
+ //
+ // ); + // } else { + // return this.renderCellWithType("image"); + // } + // } +} + +@observer +export class CollectionSchemaListCell extends CollectionSchemaCell { + render() { + return this.renderCellWithType("list"); + } + + // render() { + // const reference = React.createRef(); + // return ( + //
+ //
+ // + //
+ //
+ // ); + // } +} + @observer export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false; diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 2ad8e5bfa..85908c0ca 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { action, observable } from "mobx"; import { observer } from "mobx-react"; import "./CollectionSchemaView.scss"; -import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl } from '@fortawesome/free-solid-svg-icons'; import { library, IconProp } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ColumnType } from "./CollectionSchemaView"; @@ -13,7 +13,7 @@ const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes); +library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl); export interface HeaderProps { keyValue: SchemaHeaderField; @@ -33,7 +33,8 @@ export interface HeaderProps { export class CollectionSchemaHeader extends React.Component { render() { const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" : - this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : "align-justify"; + this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : + this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : "align-justify"; return (
Checkbox
+
this.changeColumnType(ColumnType.List)}> + + List +
this.changeColumnType(ColumnType.Doc)}> Document
+
this.changeColumnType(ColumnType.Image)}> + + Image +
); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 35f892d65..74f31b428 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -20,7 +20,7 @@ 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"; @@ -40,6 +40,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 = new Map([ @@ -349,6 +351,8 @@ export class SchemaTable extends React.Component { if (colType === ColumnType.String) return ; if (colType === ColumnType.Boolean) return ; if (colType === ColumnType.Doc) return ; + if (colType === ColumnType.Image) return ; + if (colType === ColumnType.List) return ; return ; }, minWidth: 200, -- cgit v1.2.3-70-g09d2