checkpoint: schemarow as documentview functioning

1 files changed, 694 insertions, 694 deletions

diff --git a/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx b/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx
index 1b4fcf0a4..bc33f3be5 100644
--- a/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx
+++ b/src/client/views/collections/old_collectionSchema/OldSchemaTable.tsx
@@ -1,694 +1,694 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from 'react-table';
-import { DateField } from '../../../../fields/DateField';
-import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
-import { Id } from '../../../../fields/FieldSymbols';
-import { List } from '../../../../fields/List';
-import { listSpec } from '../../../../fields/Schema';
-import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
-import { ComputedField } from '../../../../fields/ScriptField';
-import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
-import { ImageField } from '../../../../fields/URLField';
-import { GetEffectiveAcl } from '../../../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../../Utils';
-import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents';
-import { DocumentType } from '../../../documents/DocumentTypes';
-import { CompileScript, Transformer, ts } from '../../../util/Scripting';
-import { Transform } from '../../../util/Transform';
-import { undoBatch } from '../../../util/UndoManager';
-import '../../../views/DocumentDecorations.scss';
-import { ContextMenu } from '../../ContextMenu';
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
-import { DocumentView, OpenWhere } from '../../nodes/DocumentView';
-import { PinProps } from '../../nodes/trails';
-import { DefaultStyleProvider } from '../../StyleProvider';
-import { CollectionView } from '../CollectionView';
-import {
-    CellProps,
-    CollectionSchemaButtons,
-    CollectionSchemaCell,
-    CollectionSchemaCheckboxCell,
-    CollectionSchemaDateCell,
-    CollectionSchemaDocCell,
-    CollectionSchemaImageCell,
-    CollectionSchemaListCell,
-    CollectionSchemaNumberCell,
-    CollectionSchemaStringCell,
-} from './CollectionSchemaCells';
-import { CollectionSchemaAddColumnHeader, KeysDropdown } from './CollectionSchemaHeaders';
-import { MovableColumn } from './OldCollectionSchemaMovableColumn';
-import { MovableRow } from './CollectionSchemaMovableRow';
-import './CollectionSchemaView.scss';
-
-enum ColumnType {
-    Any,
-    Number,
-    String,
-    Boolean,
-    Doc,
-    Image,
-    List,
-    Date,
-}
-
-// this map should be used for keys that should have a const type of value
-const columnTypes: Map<string, ColumnType> = new Map([
-    ['title', ColumnType.String],
-    ['x', ColumnType.Number],
-    ['y', ColumnType.Number],
-    ['_width', ColumnType.Number],
-    ['_height', ColumnType.Number],
-    ['_nativeWidth', ColumnType.Number],
-    ['_nativeHeight', ColumnType.Number],
-    ['isPrototype', ColumnType.Boolean],
-    ['_curPage', ColumnType.Number],
-    ['_currentTimecode', ColumnType.Number],
-    ['zIndex', ColumnType.Number],
-]);
-
-export interface SchemaTableProps {
-    Document: Doc; // child doc
-    dataDoc?: Doc;
-    PanelHeight: () => number;
-    PanelWidth: () => number;
-    childDocs?: Doc[];
-    CollectionView: Opt<CollectionView>;
-    ContainingCollectionView: Opt<CollectionView>;
-    ContainingCollectionDoc: Opt<Doc>;
-    fieldKey: string;
-    renderDepth: number;
-    deleteDocument?: (document: Doc | Doc[]) => boolean;
-    addDocument?: (document: Doc | Doc[]) => boolean;
-    moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
-    ScreenToLocalTransform: () => Transform;
-    active: (outsideReaction: boolean | undefined) => boolean | undefined;
-    onDrop: (e: React.DragEvent<Element>, options: DocumentOptions, completed?: (() => void) | undefined) => void;
-    addDocTab: (document: Doc, where: OpenWhere) => boolean;
-    pinToPres: (document: Doc, pinProps: PinProps) => void;
-    isSelected: (outsideReaction?: boolean) => boolean;
-    isFocused: (document: Doc, outsideReaction: boolean) => boolean;
-    setFocused: (document: Doc) => void;
-    setPreviewDoc: (document: Opt<Doc>) => void;
-    columns: SchemaHeaderField[];
-    documentKeys: any[];
-    headerIsEditing: boolean;
-    openHeader: (column: any, screenx: number, screeny: number) => void;
-    onClick: (e: React.MouseEvent) => void;
-    onPointerDown: (e: React.PointerEvent) => void;
-    onResizedChange: (newResized: Resize[], event: any) => void;
-    setColumns: (columns: SchemaHeaderField[]) => void;
-    reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void;
-    changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void;
-    setHeaderIsEditing: (isEditing: boolean) => void;
-    changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void;
-}
-
-@observer
-export class SchemaTable extends React.Component<SchemaTableProps> {
-    @observable _cellIsEditing: boolean = false;
-    @observable _focusedCell: { row: number; col: number } = { row: 0, col: 0 };
-    @observable _openCollections: Set<number> = new Set();
-
-    @observable _showDoc: Doc | undefined;
-    @observable _showDataDoc: any = '';
-    @observable _showDocPos: number[] = [];
-
-    @observable _showTitleDropdown: boolean = false;
-
-    @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 - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth();
-    }
-
-    @computed get childDocs() {
-        if (this.props.childDocs) return this.props.childDocs;
-
-        const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
-        return DocListCast(doc[this.props.fieldKey]);
-    }
-    set childDocs(docs: Doc[]) {
-        const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
-        doc[this.props.fieldKey] = new List<Doc>(docs);
-    }
-
-    @computed get textWrappedRows() {
-        return Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []);
-    }
-    set textWrappedRows(textWrappedRows: string[]) {
-        this.props.Document.textwrappedSchemaRows = new List<string>(textWrappedRows);
-    }
-
-    @computed get resized(): { id: string; value: number }[] {
-        return this.props.columns.reduce((resized, shf) => {
-            shf.width > -1 && resized.push({ id: shf.heading, value: shf.width });
-            return resized;
-        }, [] as { id: string; value: number }[]);
-    }
-    @computed get sorted(): SortingRule[] {
-        return this.props.columns.reduce((sorted, shf) => {
-            shf.desc !== undefined && sorted.push({ id: shf.heading, desc: shf.desc });
-            return sorted;
-        }, [] as SortingRule[]);
-    }
-
-    @action
-    changeSorting = (col: any) => {
-        this.props.changeColumnSort(col, col.desc === true ? false : col.desc === false ? undefined : true);
-    };
-
-    @action
-    changeTitleMode = () => (this._showTitleDropdown = !this._showTitleDropdown);
-
-    @computed get borderWidth() {
-        return Number(COLLECTION_BORDER_WIDTH);
-    }
-    @computed get tableColumns(): Column<Doc>[] {
-        const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1);
-        const columns: Column<Doc>[] = [];
-        const tableIsFocused = this.props.isFocused(this.props.Document, false);
-        const focusedRow = this._focusedCell.row;
-        const focusedCol = this._focusedCell.col;
-        const isEditable = !this.props.headerIsEditing;
-
-        columns.push({
-            expander: true,
-            Header: '',
-            width: 58,
-            Expander: rowInfo => {
-                return rowInfo.original.type !== DocumentType.COL ? null : (
-                    <div className="collectionSchemaView-expander" onClick={action(() => this._openCollections[rowInfo.isExpanded ? 'delete' : 'add'](rowInfo.viewIndex))}>
-                        <FontAwesomeIcon icon={rowInfo.isExpanded ? 'caret-down' : 'caret-right'} size="lg" />
-                    </div>
-                );
-            },
-        });
-        columns.push(
-            ...this.props.columns.map(col => {
-                const icon: IconProp =
-                    this.getColumnType(col) === ColumnType.Number
-                        ? 'hashtag'
-                        : this.getColumnType(col) === ColumnType.String
-                        ? 'font'
-                        : this.getColumnType(col) === ColumnType.Boolean
-                        ? 'check-square'
-                        : this.getColumnType(col) === ColumnType.Doc
-                        ? 'file'
-                        : this.getColumnType(col) === ColumnType.Image
-                        ? 'image'
-                        : this.getColumnType(col) === ColumnType.List
-                        ? 'list-ul'
-                        : this.getColumnType(col) === ColumnType.Date
-                        ? 'calendar'
-                        : 'align-justify';
-
-                const keysDropdown = (
-                    <KeysDropdown
-                        keyValue={col.heading}
-                        possibleKeys={possibleKeys}
-                        existingKeys={this.props.columns.map(c => c.heading)}
-                        canAddNew={true}
-                        addNew={false}
-                        onSelect={this.props.changeColumns}
-                        setIsEditing={this.props.setHeaderIsEditing}
-                        docs={this.props.childDocs}
-                        Document={this.props.Document}
-                        dataDoc={this.props.dataDoc}
-                        fieldKey={this.props.fieldKey}
-                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}
-                        ContainingCollectionView={this.props.ContainingCollectionView}
-                        active={this.props.active}
-                        openHeader={this.props.openHeader}
-                        icon={icon}
-                        col={col}
-                        // try commenting this out
-                        width={'100%'}
-                    />
-                );
-
-                const sortIcon = col.desc === undefined ? 'caret-right' : col.desc === true ? 'caret-down' : 'caret-up';
-                const header = (
-                    <div className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: '2px', display: 'flex', cursor: 'default', height: '100%' }}>
-                        {keysDropdown}
-                        <div onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: 'inline', zIndex: 1, background: 'inherit', cursor: 'pointer' }}>
-                            <FontAwesomeIcon icon={sortIcon} size="lg" />
-                        </div>
-                        {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>} */}
-                    </div>
-                );
-
-                return {
-                    Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.props.columns} reorderColumns={this.props.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
-                    accessor: (doc: Doc) => (doc ? Field.toString(doc[col.heading] as Field) : 0),
-                    id: col.heading,
-                    Cell: (rowProps: CellInfo) => {
-                        const rowIndex = rowProps.index;
-                        const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
-                        const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
-
-                        const props: CellProps = {
-                            row: rowIndex,
-                            col: columnIndex,
-                            rowProps: rowProps,
-                            isFocused: isFocused,
-                            changeFocusedCellByIndex: this.changeFocusedCellByIndex,
-                            CollectionView: this.props.CollectionView,
-                            ContainingCollection: this.props.ContainingCollectionView,
-                            Document: this.props.Document,
-                            fieldKey: this.props.fieldKey,
-                            renderDepth: this.props.renderDepth,
-                            addDocTab: this.props.addDocTab,
-                            pinToPres: this.props.pinToPres,
-                            moveDocument: this.props.moveDocument,
-                            setIsEditing: this.setCellIsEditing,
-                            isEditable: isEditable,
-                            setPreviewDoc: this.props.setPreviewDoc,
-                            setComputed: this.setComputed,
-                            getField: this.getField,
-                            showDoc: this.showDoc,
-                        };
-
-                        switch (this.getColumnType(col, rowProps.original, rowProps.column.id)) {
-                            case ColumnType.Number:
-                                return <CollectionSchemaNumberCell {...props} />;
-                            case ColumnType.String:
-                                return <CollectionSchemaStringCell {...props} />;
-                            case ColumnType.Boolean:
-                                return <CollectionSchemaCheckboxCell {...props} />;
-                            case ColumnType.Doc:
-                                return <CollectionSchemaDocCell {...props} />;
-                            case ColumnType.Image:
-                                return <CollectionSchemaImageCell {...props} />;
-                            case ColumnType.List:
-                                return <CollectionSchemaListCell {...props} />;
-                            case ColumnType.Date:
-                                return <CollectionSchemaDateCell {...props} />;
-                            default:
-                                return <CollectionSchemaCell {...props} />;
-                        }
-                    },
-                    minWidth: 200,
-                };
-            })
-        );
-        columns.push({
-            Header: <CollectionSchemaAddColumnHeader createColumn={this.createColumn} />,
-            accessor: (doc: Doc) => 0,
-            id: 'add',
-            Cell: (rowProps: CellInfo) => {
-                const rowIndex = rowProps.index;
-                const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
-                const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
-                return (
-                    <CollectionSchemaButtons
-                        {...{
-                            row: rowProps.index,
-                            col: columnIndex,
-                            rowProps: rowProps,
-                            isFocused: isFocused,
-                            changeFocusedCellByIndex: this.changeFocusedCellByIndex,
-                            CollectionView: this.props.CollectionView,
-                            ContainingCollection: this.props.ContainingCollectionView,
-                            Document: this.props.Document,
-                            fieldKey: this.props.fieldKey,
-                            renderDepth: this.props.renderDepth,
-                            addDocTab: this.props.addDocTab,
-                            pinToPres: this.props.pinToPres,
-                            moveDocument: this.props.moveDocument,
-                            setIsEditing: this.setCellIsEditing,
-                            isEditable: isEditable,
-                            setPreviewDoc: this.props.setPreviewDoc,
-                            setComputed: this.setComputed,
-                            getField: this.getField,
-                            showDoc: this.showDoc,
-                        }}
-                    />
-                );
-            },
-            width: 28,
-            resizable: false,
-        });
-        return columns;
-    }
-
-    constructor(props: SchemaTableProps) {
-        super(props);
-        if (this.props.Document._schemaHeaders === undefined) {
-            this.props.Document._schemaHeaders = new List<SchemaHeaderField>([
-                new SchemaHeaderField('title', '#f1efeb'),
-                new SchemaHeaderField('author', '#f1efeb'),
-                new SchemaHeaderField('*lastModified', '#f1efeb', ColumnType.Date),
-                new SchemaHeaderField('text', '#f1efeb', ColumnType.String),
-                new SchemaHeaderField('type', '#f1efeb'),
-                new SchemaHeaderField('context', '#f1efeb', ColumnType.Doc),
-            ]);
-        }
-    }
-
-    componentDidMount() {
-        document.addEventListener('keydown', this.onKeyDown);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.onKeyDown);
-    }
-
-    tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => {
-        const tableDoc = this.props.Document[DataSym];
-        const effectiveAcl = GetEffectiveAcl(tableDoc);
-
-        if (effectiveAcl !== AclPrivate && effectiveAcl !== AclReadonly) {
-            doc.context = this.props.Document;
-            tableDoc[this.props.fieldKey + '-lastModified'] = new DateField(new Date(Date.now()));
-            return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before);
-        }
-        return false;
-    };
-
-    private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
-        return !rowInfo
-            ? {}
-            : {
-                  ScreenToLocalTransform: this.props.ScreenToLocalTransform,
-                  addDoc: this.tableAddDoc,
-                  removeDoc: this.props.deleteDocument,
-                  rowInfo,
-                  rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true),
-                  textWrapRow: this.toggleTextWrapRow,
-                  rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
-                  dropAction: StrCast(this.props.Document.childDropAction),
-                  addDocTab: this.props.addDocTab,
-              };
-    };
-
-    private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => {
-        if (!rowInfo || column) return {};
-
-        const row = rowInfo.index;
-        //@ts-ignore
-        const col = this.columns.map(c => c.heading).indexOf(column!.id);
-        const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document, true);
-        // TODO: editing border doesn't work :(
-        return {
-            style: { border: !this.props.headerIsEditing && isFocused ? '2px solid rgb(255, 160, 160)' : '1px solid #f1efeb' },
-        };
-    };
-
-    @action setCellIsEditing = (isEditing: boolean) => (this._cellIsEditing = isEditing);
-
-    @action
-    onKeyDown = (e: KeyboardEvent): void => {
-        if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) {
-            // && this.props.isSelected(true)) {
-            const direction = e.key === 'Tab' ? 'tab' : e.which === 39 ? 'right' : e.which === 37 ? 'left' : e.which === 38 ? 'up' : e.which === 40 ? 'down' : '';
-            this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col);
-
-            if (direction) {
-                const pdoc = FieldValue(this.childDocs[this._focusedCell.row]);
-                pdoc && this.props.setPreviewDoc(pdoc);
-                e.stopPropagation();
-            }
-        } else if (e.keyCode === 27) {
-            this.props.setPreviewDoc(undefined);
-            e.stopPropagation(); // stopPropagation for left/right arrows
-        }
-    };
-
-    changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => {
-        switch (direction) {
-            case 'tab':
-                return { row: curRow + 1 === this.childDocs.length ? 0 : curRow + 1, col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 };
-            case 'right':
-                return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 };
-            case 'left':
-                return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 };
-            case 'up':
-                return { row: curRow === 0 ? curRow : curRow - 1, col: curCol };
-            case 'down':
-                return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol };
-        }
-        return this._focusedCell;
-    };
-
-    @action
-    changeFocusedCellByIndex = (row: number, col: number): void => {
-        if (this._focusedCell.row !== row || this._focusedCell.col !== col) {
-            this._focusedCell = { row: row, col: col };
-        }
-        this.props.setFocused(this.props.Document);
-    };
-
-    @undoBatch
-    createRow = action(() => {
-        this.props.addDocument?.(Docs.Create.TextDocument('', { title: '', _width: 100, _height: 30 }));
-        this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col };
-    });
-
-    @undoBatch
-    @action
-    createColumn = () => {
-        const newFieldName = (index: number) => `New field${index ? ` (${index})` : ''}`;
-        for (let index = 0; index < 100; index++) {
-            if (this.props.columns.findIndex(col => col.heading === newFieldName(index)) === -1) {
-                this.props.columns.push(new SchemaHeaderField(newFieldName(index), '#f1efeb'));
-                break;
-            }
-        }
-    };
-
-    @action
-    getColumnType = (column: SchemaHeaderField, doc?: Doc, field?: string): ColumnType => {
-        if (doc && field && column.type === ColumnType.Any) {
-            const val = doc[CollectionSchemaCell.resolvedFieldKey(field, doc)];
-            if (val instanceof ImageField) return ColumnType.Image;
-            if (val instanceof Doc) return ColumnType.Doc;
-            if (val instanceof DateField) return ColumnType.Date;
-            if (val instanceof List) return ColumnType.List;
-        }
-        if (column.type && column.type !== 0) {
-            return column.type;
-        }
-        if (columnTypes.get(column.heading)) {
-            return (column.type = columnTypes.get(column.heading)!);
-        }
-        return (column.type = ColumnType.Any);
-    };
-
-    @undoBatch
-    @action
-    toggleTextwrap = async () => {
-        const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []);
-        if (textwrappedRows.length) {
-            this.props.Document.textwrappedSchemaRows = new List<string>([]);
-        } else {
-            const docs = DocListCast(this.props.Document[this.props.fieldKey]);
-            const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]);
-            this.props.Document.textwrappedSchemaRows = new List<string>(allRows);
-        }
-    };
-
-    @action
-    toggleTextWrapRow = (doc: Doc): void => {
-        const textWrapped = this.textWrappedRows;
-        const index = textWrapped.findIndex(id => doc[Id] === id);
-
-        index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]);
-
-        this.textWrappedRows = textWrapped;
-    };
-
-    @computed
-    get reactTable() {
-        const children = this.childDocs;
-        const hasCollectionChild = children.reduce((found, doc) => found || doc.type === DocumentType.COL, false);
-        const expanded: { [name: string]: any } = {};
-        Array.from(this._openCollections.keys()).map(col => (expanded[col.toString()] = true));
-        const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
-
-        return (
-            <ReactTable
-                style={{ position: 'relative' }}
-                data={children}
-                page={0}
-                pageSize={children.length}
-                showPagination={false}
-                columns={this.tableColumns}
-                getTrProps={this.getTrProps}
-                getTdProps={this.getTdProps}
-                sortable={false}
-                TrComponent={MovableRow}
-                sorted={this.sorted}
-                expanded={expanded}
-                resized={this.resized}
-                onResizedChange={this.props.onResizedChange}
-                // if it has a child, render another table with the children
-                SubComponent={
-                    !hasCollectionChild
-                        ? undefined
-                        : row =>
-                              row.original.type !== DocumentType.COL ? null : (
-                                  <div style={{ paddingLeft: 57 + 'px' }} className="reactTable-sub">
-                                      <SchemaTable {...this.props} Document={row.original} dataDoc={undefined} childDocs={undefined} />
-                                  </div>
-                              )
-                }
-            />
-        );
-    }
-
-    onContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: 'Toggle text wrapping', event: this.toggleTextwrap, icon: 'table' });
-    };
-
-    getField = (row: number, col?: number) => {
-        const docs = this.childDocs;
-
-        row = row % docs.length;
-        while (row < 0) row += docs.length;
-        const columns = this.props.columns;
-        const doc = docs[row];
-        if (col === undefined) {
-            return doc;
-        }
-        if (col >= 0 && col < columns.length) {
-            const column = this.props.columns[col].heading;
-            return doc[column];
-        }
-        return undefined;
-    };
-
-    createTransformer = (row: number, col: number): Transformer => {
-        const self = this;
-        const captures: { [name: string]: Field } = {};
-
-        const transformer: ts.TransformerFactory<ts.SourceFile> = context => {
-            return root => {
-                function visit(node: ts.Node) {
-                    node = ts.visitEachChild(node, visit, context);
-                    if (ts.isIdentifier(node)) {
-                        const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
-                        const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
-                        if (isntPropAccess && isntPropAssign) {
-                            if (node.text === '$r') {
-                                return ts.createNumericLiteral(row.toString());
-                            } else if (node.text === '$c') {
-                                return ts.createNumericLiteral(col.toString());
-                            } else if (node.text === '$') {
-                                if (ts.isCallExpression(node.parent)) {
-                                    // captures.doc = self.props.Document;
-                                    // captures.key = self.props.fieldKey;
-                                }
-                            }
-                        }
-                    }
-
-                    return node;
-                }
-                return ts.visitNode(root, visit);
-            };
-        };
-
-        // const getVars = () => {
-        //     return { capturedVariables: captures };
-        // };
-
-        return { transformer /*getVars*/ };
-    };
-
-    setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => {
-        script = `const $ = (row:number, col?:number) => {
-                const rval = (doc as any)[key][row + ${row}];
-                return col === undefined ? rval : rval[(doc as any)._schemaHeaders[col + ${col}].heading];
-            }
-            return ${script}`;
-        const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) });
-        if (compiled.compiled) {
-            doc[field] = new ComputedField(compiled);
-            return true;
-        }
-        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 = () => {
-        this._showDoc && this.props.addDocTab(this._showDoc, OpenWhere.addRight);
-    };
-
-    getPreviewTransform = (): Transform => {
-        return this.props.ScreenToLocalTransform().translate(-this.borderWidth - 4 - this.tableWidth, -this.borderWidth);
-    };
-
-    render() {
-        const preview = '';
-        return (
-            <div
-                className="collectionSchemaView-table"
-                onPointerDown={this.props.onPointerDown}
-                onClick={this.props.onClick}
-                onWheel={e => this.props.active(true) && e.stopPropagation()}
-                onDrop={e => this.props.onDrop(e, {})}
-                onContextMenu={this.onContextMenu}>
-                {this.reactTable}
-                {this.props.Document._chromeHidden || this.props.addDocument === returnFalse ? undefined : (
-                    <div className="collectionSchemaView-addRow" onClick={this.createRow}>
-                        + new
-                    </div>
-                )}
-                {!this._showDoc ? null : (
-                    <div
-                        className="collectionSchemaView-documentPreview"
-                        ref="overlay"
-                        style={{
-                            position: 'absolute',
-                            width: 150,
-                            height: 150,
-                            background: 'dimgray',
-                            display: 'block',
-                            top: 0,
-                            left: 0,
-                            transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`,
-                        }}>
-                        <DocumentView
-                            Document={this._showDoc}
-                            DataDoc={this._showDataDoc}
-                            styleProvider={DefaultStyleProvider}
-                            docViewPath={returnEmptyDoclist}
-                            focus={DocUtils.DefaultFocus}
-                            renderDepth={this.props.renderDepth}
-                            rootSelected={returnFalse}
-                            isContentActive={returnTrue}
-                            isDocumentActive={returnFalse}
-                            PanelWidth={() => 150}
-                            PanelHeight={() => 150}
-                            ScreenToLocalTransform={this.getPreviewTransform}
-                            docFilters={returnEmptyFilter}
-                            docRangeFilters={returnEmptyFilter}
-                            searchFilterDocs={returnEmptyDoclist}
-                            ContainingCollectionDoc={this.props.CollectionView?.props.Document}
-                            ContainingCollectionView={this.props.CollectionView}
-                            moveDocument={this.props.moveDocument}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            addDocTab={this.props.addDocTab}
-                            pinToPres={this.props.pinToPres}
-                            bringToFront={returnFalse}></DocumentView>
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
+// import { IconProp } from '@fortawesome/fontawesome-svg-core';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { action, computed, observable } from 'mobx';
+// import { observer } from 'mobx-react';
+// import * as React from 'react';
+// import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from 'react-table';
+// import { DateField } from '../../../../fields/DateField';
+// import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
+// import { Id } from '../../../../fields/FieldSymbols';
+// import { List } from '../../../../fields/List';
+// import { listSpec } from '../../../../fields/Schema';
+// import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
+// import { ComputedField } from '../../../../fields/ScriptField';
+// import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
+// import { ImageField } from '../../../../fields/URLField';
+// import { GetEffectiveAcl } from '../../../../fields/util';
+// import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../../Utils';
+// import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents';
+// import { DocumentType } from '../../../documents/DocumentTypes';
+// import { CompileScript, Transformer, ts } from '../../../util/Scripting';
+// import { Transform } from '../../../util/Transform';
+// import { undoBatch } from '../../../util/UndoManager';
+// import '../../../views/DocumentDecorations.scss';
+// import { ContextMenu } from '../../ContextMenu';
+// import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
+// import { DocumentView, OpenWhere } from '../../nodes/DocumentView';
+// import { PinProps } from '../../nodes/trails';
+// import { DefaultStyleProvider } from '../../StyleProvider';
+// import { CollectionView } from '../CollectionView';
+// import {
+//     CellProps,
+//     CollectionSchemaButtons,
+//     CollectionSchemaCell,
+//     CollectionSchemaCheckboxCell,
+//     CollectionSchemaDateCell,
+//     CollectionSchemaDocCell,
+//     CollectionSchemaImageCell,
+//     CollectionSchemaListCell,
+//     CollectionSchemaNumberCell,
+//     CollectionSchemaStringCell,
+// } from './CollectionSchemaCells';
+// import { CollectionSchemaAddColumnHeader, KeysDropdown } from './CollectionSchemaHeaders';
+// import { MovableColumn } from './OldCollectionSchemaMovableColumn';
+// import { MovableRow } from './CollectionSchemaMovableRow';
+// import './CollectionSchemaView.scss';
+
+// enum ColumnType {
+//     Any,
+//     Number,
+//     String,
+//     Boolean,
+//     Doc,
+//     Image,
+//     List,
+//     Date,
+// }
+
+// // this map should be used for keys that should have a const type of value
+// const columnTypes: Map<string, ColumnType> = new Map([
+//     ['title', ColumnType.String],
+//     ['x', ColumnType.Number],
+//     ['y', ColumnType.Number],
+//     ['_width', ColumnType.Number],
+//     ['_height', ColumnType.Number],
+//     ['_nativeWidth', ColumnType.Number],
+//     ['_nativeHeight', ColumnType.Number],
+//     ['isPrototype', ColumnType.Boolean],
+//     ['_curPage', ColumnType.Number],
+//     ['_currentTimecode', ColumnType.Number],
+//     ['zIndex', ColumnType.Number],
+// ]);
+
+// export interface SchemaTableProps {
+//     Document: Doc; // child doc
+//     dataDoc?: Doc;
+//     PanelHeight: () => number;
+//     PanelWidth: () => number;
+//     childDocs?: Doc[];
+//     CollectionView: Opt<CollectionView>;
+//     ContainingCollectionView: Opt<CollectionView>;
+//     ContainingCollectionDoc: Opt<Doc>;
+//     fieldKey: string;
+//     renderDepth: number;
+//     deleteDocument?: (document: Doc | Doc[]) => boolean;
+//     addDocument?: (document: Doc | Doc[]) => boolean;
+//     moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
+//     ScreenToLocalTransform: () => Transform;
+//     active: (outsideReaction: boolean | undefined) => boolean | undefined;
+//     onDrop: (e: React.DragEvent<Element>, options: DocumentOptions, completed?: (() => void) | undefined) => void;
+//     addDocTab: (document: Doc, where: OpenWhere) => boolean;
+//     pinToPres: (document: Doc, pinProps: PinProps) => void;
+//     isSelected: (outsideReaction?: boolean) => boolean;
+//     isFocused: (document: Doc, outsideReaction: boolean) => boolean;
+//     setFocused: (document: Doc) => void;
+//     setPreviewDoc: (document: Opt<Doc>) => void;
+//     columns: SchemaHeaderField[];
+//     documentKeys: any[];
+//     headerIsEditing: boolean;
+//     openHeader: (column: any, screenx: number, screeny: number) => void;
+//     onClick: (e: React.MouseEvent) => void;
+//     onPointerDown: (e: React.PointerEvent) => void;
+//     onResizedChange: (newResized: Resize[], event: any) => void;
+//     setColumns: (columns: SchemaHeaderField[]) => void;
+//     reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void;
+//     changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void;
+//     setHeaderIsEditing: (isEditing: boolean) => void;
+//     changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void;
+// }
+
+// @observer
+// export class SchemaTable extends React.Component<SchemaTableProps> {
+//     @observable _cellIsEditing: boolean = false;
+//     @observable _focusedCell: { row: number; col: number } = { row: 0, col: 0 };
+//     @observable _openCollections: Set<number> = new Set();
+
+//     @observable _showDoc: Doc | undefined;
+//     @observable _showDataDoc: any = '';
+//     @observable _showDocPos: number[] = [];
+
+//     @observable _showTitleDropdown: boolean = false;
+
+//     @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 - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth();
+//     }
+
+//     @computed get childDocs() {
+//         if (this.props.childDocs) return this.props.childDocs;
+
+//         const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
+//         return DocListCast(doc[this.props.fieldKey]);
+//     }
+//     set childDocs(docs: Doc[]) {
+//         const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
+//         doc[this.props.fieldKey] = new List<Doc>(docs);
+//     }
+
+//     @computed get textWrappedRows() {
+//         return Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []);
+//     }
+//     set textWrappedRows(textWrappedRows: string[]) {
+//         this.props.Document.textwrappedSchemaRows = new List<string>(textWrappedRows);
+//     }
+
+//     @computed get resized(): { id: string; value: number }[] {
+//         return this.props.columns.reduce((resized, shf) => {
+//             shf.width > -1 && resized.push({ id: shf.heading, value: shf.width });
+//             return resized;
+//         }, [] as { id: string; value: number }[]);
+//     }
+//     @computed get sorted(): SortingRule[] {
+//         return this.props.columns.reduce((sorted, shf) => {
+//             shf.desc !== undefined && sorted.push({ id: shf.heading, desc: shf.desc });
+//             return sorted;
+//         }, [] as SortingRule[]);
+//     }
+
+//     @action
+//     changeSorting = (col: any) => {
+//         this.props.changeColumnSort(col, col.desc === true ? false : col.desc === false ? undefined : true);
+//     };
+
+//     @action
+//     changeTitleMode = () => (this._showTitleDropdown = !this._showTitleDropdown);
+
+//     @computed get borderWidth() {
+//         return Number(COLLECTION_BORDER_WIDTH);
+//     }
+//     @computed get tableColumns(): Column<Doc>[] {
+//         const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1);
+//         const columns: Column<Doc>[] = [];
+//         const tableIsFocused = this.props.isFocused(this.props.Document, false);
+//         const focusedRow = this._focusedCell.row;
+//         const focusedCol = this._focusedCell.col;
+//         const isEditable = !this.props.headerIsEditing;
+
+//         columns.push({
+//             expander: true,
+//             Header: '',
+//             width: 58,
+//             Expander: rowInfo => {
+//                 return rowInfo.original.type !== DocumentType.COL ? null : (
+//                     <div className="collectionSchemaView-expander" onClick={action(() => this._openCollections[rowInfo.isExpanded ? 'delete' : 'add'](rowInfo.viewIndex))}>
+//                         <FontAwesomeIcon icon={rowInfo.isExpanded ? 'caret-down' : 'caret-right'} size="lg" />
+//                     </div>
+//                 );
+//             },
+//         });
+//         columns.push(
+//             ...this.props.columns.map(col => {
+//                 const icon: IconProp =
+//                     this.getColumnType(col) === ColumnType.Number
+//                         ? 'hashtag'
+//                         : this.getColumnType(col) === ColumnType.String
+//                         ? 'font'
+//                         : this.getColumnType(col) === ColumnType.Boolean
+//                         ? 'check-square'
+//                         : this.getColumnType(col) === ColumnType.Doc
+//                         ? 'file'
+//                         : this.getColumnType(col) === ColumnType.Image
+//                         ? 'image'
+//                         : this.getColumnType(col) === ColumnType.List
+//                         ? 'list-ul'
+//                         : this.getColumnType(col) === ColumnType.Date
+//                         ? 'calendar'
+//                         : 'align-justify';
+
+//                 const keysDropdown = (
+//                     <KeysDropdown
+//                         keyValue={col.heading}
+//                         possibleKeys={possibleKeys}
+//                         existingKeys={this.props.columns.map(c => c.heading)}
+//                         canAddNew={true}
+//                         addNew={false}
+//                         onSelect={this.props.changeColumns}
+//                         setIsEditing={this.props.setHeaderIsEditing}
+//                         docs={this.props.childDocs}
+//                         Document={this.props.Document}
+//                         dataDoc={this.props.dataDoc}
+//                         fieldKey={this.props.fieldKey}
+//                         ContainingCollectionDoc={this.props.ContainingCollectionDoc}
+//                         ContainingCollectionView={this.props.ContainingCollectionView}
+//                         active={this.props.active}
+//                         openHeader={this.props.openHeader}
+//                         icon={icon}
+//                         col={col}
+//                         // try commenting this out
+//                         width={'100%'}
+//                     />
+//                 );
+
+//                 const sortIcon = col.desc === undefined ? 'caret-right' : col.desc === true ? 'caret-down' : 'caret-up';
+//                 const header = (
+//                     <div className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: '2px', display: 'flex', cursor: 'default', height: '100%' }}>
+//                         {keysDropdown}
+//                         <div onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: 'inline', zIndex: 1, background: 'inherit', cursor: 'pointer' }}>
+//                             <FontAwesomeIcon icon={sortIcon} size="lg" />
+//                         </div>
+//                         {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>} */}
+//                     </div>
+//                 );
+
+//                 return {
+//                     Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.props.columns} reorderColumns={this.props.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
+//                     accessor: (doc: Doc) => (doc ? Field.toString(doc[col.heading] as Field) : 0),
+//                     id: col.heading,
+//                     Cell: (rowProps: CellInfo) => {
+//                         const rowIndex = rowProps.index;
+//                         const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
+//                         const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
+
+//                         const props: CellProps = {
+//                             row: rowIndex,
+//                             col: columnIndex,
+//                             rowProps: rowProps,
+//                             isFocused: isFocused,
+//                             changeFocusedCellByIndex: this.changeFocusedCellByIndex,
+//                             CollectionView: this.props.CollectionView,
+//                             ContainingCollection: this.props.ContainingCollectionView,
+//                             Document: this.props.Document,
+//                             fieldKey: this.props.fieldKey,
+//                             renderDepth: this.props.renderDepth,
+//                             addDocTab: this.props.addDocTab,
+//                             pinToPres: this.props.pinToPres,
+//                             moveDocument: this.props.moveDocument,
+//                             setIsEditing: this.setCellIsEditing,
+//                             isEditable: isEditable,
+//                             setPreviewDoc: this.props.setPreviewDoc,
+//                             setComputed: this.setComputed,
+//                             getField: this.getField,
+//                             showDoc: this.showDoc,
+//                         };
+
+//                         switch (this.getColumnType(col, rowProps.original, rowProps.column.id)) {
+//                             case ColumnType.Number:
+//                                 return <CollectionSchemaNumberCell {...props} />;
+//                             case ColumnType.String:
+//                                 return <CollectionSchemaStringCell {...props} />;
+//                             case ColumnType.Boolean:
+//                                 return <CollectionSchemaCheckboxCell {...props} />;
+//                             case ColumnType.Doc:
+//                                 return <CollectionSchemaDocCell {...props} />;
+//                             case ColumnType.Image:
+//                                 return <CollectionSchemaImageCell {...props} />;
+//                             case ColumnType.List:
+//                                 return <CollectionSchemaListCell {...props} />;
+//                             case ColumnType.Date:
+//                                 return <CollectionSchemaDateCell {...props} />;
+//                             default:
+//                                 return <CollectionSchemaCell {...props} />;
+//                         }
+//                     },
+//                     minWidth: 200,
+//                 };
+//             })
+//         );
+//         columns.push({
+//             Header: <CollectionSchemaAddColumnHeader createColumn={this.createColumn} />,
+//             accessor: (doc: Doc) => 0,
+//             id: 'add',
+//             Cell: (rowProps: CellInfo) => {
+//                 const rowIndex = rowProps.index;
+//                 const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
+//                 const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
+//                 return (
+//                     <CollectionSchemaButtons
+//                         {...{
+//                             row: rowProps.index,
+//                             col: columnIndex,
+//                             rowProps: rowProps,
+//                             isFocused: isFocused,
+//                             changeFocusedCellByIndex: this.changeFocusedCellByIndex,
+//                             CollectionView: this.props.CollectionView,
+//                             ContainingCollection: this.props.ContainingCollectionView,
+//                             Document: this.props.Document,
+//                             fieldKey: this.props.fieldKey,
+//                             renderDepth: this.props.renderDepth,
+//                             addDocTab: this.props.addDocTab,
+//                             pinToPres: this.props.pinToPres,
+//                             moveDocument: this.props.moveDocument,
+//                             setIsEditing: this.setCellIsEditing,
+//                             isEditable: isEditable,
+//                             setPreviewDoc: this.props.setPreviewDoc,
+//                             setComputed: this.setComputed,
+//                             getField: this.getField,
+//                             showDoc: this.showDoc,
+//                         }}
+//                     />
+//                 );
+//             },
+//             width: 28,
+//             resizable: false,
+//         });
+//         return columns;
+//     }
+
+//     constructor(props: SchemaTableProps) {
+//         super(props);
+//         if (this.props.Document._schemaHeaders === undefined) {
+//             this.props.Document._schemaHeaders = new List<SchemaHeaderField>([
+//                 new SchemaHeaderField('title', '#f1efeb'),
+//                 new SchemaHeaderField('author', '#f1efeb'),
+//                 new SchemaHeaderField('*lastModified', '#f1efeb', ColumnType.Date),
+//                 new SchemaHeaderField('text', '#f1efeb', ColumnType.String),
+//                 new SchemaHeaderField('type', '#f1efeb'),
+//                 new SchemaHeaderField('context', '#f1efeb', ColumnType.Doc),
+//             ]);
+//         }
+//     }
+
+//     componentDidMount() {
+//         document.addEventListener('keydown', this.onKeyDown);
+//     }
+
+//     componentWillUnmount() {
+//         document.removeEventListener('keydown', this.onKeyDown);
+//     }
+
+//     tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => {
+//         const tableDoc = this.props.Document[DataSym];
+//         const effectiveAcl = GetEffectiveAcl(tableDoc);
+
+//         if (effectiveAcl !== AclPrivate && effectiveAcl !== AclReadonly) {
+//             doc.context = this.props.Document;
+//             tableDoc[this.props.fieldKey + '-lastModified'] = new DateField(new Date(Date.now()));
+//             return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before);
+//         }
+//         return false;
+//     };
+
+//     private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
+//         return !rowInfo
+//             ? {}
+//             : {
+//                   ScreenToLocalTransform: this.props.ScreenToLocalTransform,
+//                   addDoc: this.tableAddDoc,
+//                   removeDoc: this.props.deleteDocument,
+//                   rowInfo,
+//                   rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true),
+//                   textWrapRow: this.toggleTextWrapRow,
+//                   rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
+//                   dropAction: StrCast(this.props.Document.childDropAction),
+//                   addDocTab: this.props.addDocTab,
+//               };
+//     };
+
+//     private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => {
+//         if (!rowInfo || column) return {};
+
+//         const row = rowInfo.index;
+//         //@ts-ignore
+//         const col = this.columns.map(c => c.heading).indexOf(column!.id);
+//         const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document, true);
+//         // TODO: editing border doesn't work :(
+//         return {
+//             style: { border: !this.props.headerIsEditing && isFocused ? '2px solid rgb(255, 160, 160)' : '1px solid #f1efeb' },
+//         };
+//     };
+
+//     @action setCellIsEditing = (isEditing: boolean) => (this._cellIsEditing = isEditing);
+
+//     @action
+//     onKeyDown = (e: KeyboardEvent): void => {
+//         if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) {
+//             // && this.props.isSelected(true)) {
+//             const direction = e.key === 'Tab' ? 'tab' : e.which === 39 ? 'right' : e.which === 37 ? 'left' : e.which === 38 ? 'up' : e.which === 40 ? 'down' : '';
+//             this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col);
+
+//             if (direction) {
+//                 const pdoc = FieldValue(this.childDocs[this._focusedCell.row]);
+//                 pdoc && this.props.setPreviewDoc(pdoc);
+//                 e.stopPropagation();
+//             }
+//         } else if (e.keyCode === 27) {
+//             this.props.setPreviewDoc(undefined);
+//             e.stopPropagation(); // stopPropagation for left/right arrows
+//         }
+//     };
+
+//     changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => {
+//         switch (direction) {
+//             case 'tab':
+//                 return { row: curRow + 1 === this.childDocs.length ? 0 : curRow + 1, col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 };
+//             case 'right':
+//                 return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 };
+//             case 'left':
+//                 return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 };
+//             case 'up':
+//                 return { row: curRow === 0 ? curRow : curRow - 1, col: curCol };
+//             case 'down':
+//                 return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol };
+//         }
+//         return this._focusedCell;
+//     };
+
+//     @action
+//     changeFocusedCellByIndex = (row: number, col: number): void => {
+//         if (this._focusedCell.row !== row || this._focusedCell.col !== col) {
+//             this._focusedCell = { row: row, col: col };
+//         }
+//         this.props.setFocused(this.props.Document);
+//     };
+
+//     @undoBatch
+//     createRow = action(() => {
+//         this.props.addDocument?.(Docs.Create.TextDocument('', { title: '', _width: 100, _height: 30 }));
+//         this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col };
+//     });
+
+//     @undoBatch
+//     @action
+//     createColumn = () => {
+//         const newFieldName = (index: number) => `New field${index ? ` (${index})` : ''}`;
+//         for (let index = 0; index < 100; index++) {
+//             if (this.props.columns.findIndex(col => col.heading === newFieldName(index)) === -1) {
+//                 this.props.columns.push(new SchemaHeaderField(newFieldName(index), '#f1efeb'));
+//                 break;
+//             }
+//         }
+//     };
+
+//     @action
+//     getColumnType = (column: SchemaHeaderField, doc?: Doc, field?: string): ColumnType => {
+//         if (doc && field && column.type === ColumnType.Any) {
+//             const val = doc[CollectionSchemaCell.resolvedFieldKey(field, doc)];
+//             if (val instanceof ImageField) return ColumnType.Image;
+//             if (val instanceof Doc) return ColumnType.Doc;
+//             if (val instanceof DateField) return ColumnType.Date;
+//             if (val instanceof List) return ColumnType.List;
+//         }
+//         if (column.type && column.type !== 0) {
+//             return column.type;
+//         }
+//         if (columnTypes.get(column.heading)) {
+//             return (column.type = columnTypes.get(column.heading)!);
+//         }
+//         return (column.type = ColumnType.Any);
+//     };
+
+//     @undoBatch
+//     @action
+//     toggleTextwrap = async () => {
+//         const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec('string'), []);
+//         if (textwrappedRows.length) {
+//             this.props.Document.textwrappedSchemaRows = new List<string>([]);
+//         } else {
+//             const docs = DocListCast(this.props.Document[this.props.fieldKey]);
+//             const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]);
+//             this.props.Document.textwrappedSchemaRows = new List<string>(allRows);
+//         }
+//     };
+
+//     @action
+//     toggleTextWrapRow = (doc: Doc): void => {
+//         const textWrapped = this.textWrappedRows;
+//         const index = textWrapped.findIndex(id => doc[Id] === id);
+
+//         index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]);
+
+//         this.textWrappedRows = textWrapped;
+//     };
+
+//     @computed
+//     get reactTable() {
+//         const children = this.childDocs;
+//         const hasCollectionChild = children.reduce((found, doc) => found || doc.type === DocumentType.COL, false);
+//         const expanded: { [name: string]: any } = {};
+//         Array.from(this._openCollections.keys()).map(col => (expanded[col.toString()] = true));
+//         const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
+
+//         return (
+//             <ReactTable
+//                 style={{ position: 'relative' }}
+//                 data={children}
+//                 page={0}
+//                 pageSize={children.length}
+//                 showPagination={false}
+//                 columns={this.tableColumns}
+//                 getTrProps={this.getTrProps}
+//                 getTdProps={this.getTdProps}
+//                 sortable={false}
+//                 TrComponent={MovableRow}
+//                 sorted={this.sorted}
+//                 expanded={expanded}
+//                 resized={this.resized}
+//                 onResizedChange={this.props.onResizedChange}
+//                 // if it has a child, render another table with the children
+//                 SubComponent={
+//                     !hasCollectionChild
+//                         ? undefined
+//                         : row =>
+//                               row.original.type !== DocumentType.COL ? null : (
+//                                   <div style={{ paddingLeft: 57 + 'px' }} className="reactTable-sub">
+//                                       <SchemaTable {...this.props} Document={row.original} dataDoc={undefined} childDocs={undefined} />
+//                                   </div>
+//                               )
+//                 }
+//             />
+//         );
+//     }
+
+//     onContextMenu = (e: React.MouseEvent): void => {
+//         ContextMenu.Instance.addItem({ description: 'Toggle text wrapping', event: this.toggleTextwrap, icon: 'table' });
+//     };
+
+//     getField = (row: number, col?: number) => {
+//         const docs = this.childDocs;
+
+//         row = row % docs.length;
+//         while (row < 0) row += docs.length;
+//         const columns = this.props.columns;
+//         const doc = docs[row];
+//         if (col === undefined) {
+//             return doc;
+//         }
+//         if (col >= 0 && col < columns.length) {
+//             const column = this.props.columns[col].heading;
+//             return doc[column];
+//         }
+//         return undefined;
+//     };
+
+//     createTransformer = (row: number, col: number): Transformer => {
+//         const self = this;
+//         const captures: { [name: string]: Field } = {};
+
+//         const transformer: ts.TransformerFactory<ts.SourceFile> = context => {
+//             return root => {
+//                 function visit(node: ts.Node) {
+//                     node = ts.visitEachChild(node, visit, context);
+//                     if (ts.isIdentifier(node)) {
+//                         const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
+//                         const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
+//                         if (isntPropAccess && isntPropAssign) {
+//                             if (node.text === '$r') {
+//                                 return ts.createNumericLiteral(row.toString());
+//                             } else if (node.text === '$c') {
+//                                 return ts.createNumericLiteral(col.toString());
+//                             } else if (node.text === '$') {
+//                                 if (ts.isCallExpression(node.parent)) {
+//                                     // captures.doc = self.props.Document;
+//                                     // captures.key = self.props.fieldKey;
+//                                 }
+//                             }
+//                         }
+//                     }
+
+//                     return node;
+//                 }
+//                 return ts.visitNode(root, visit);
+//             };
+//         };
+
+//         // const getVars = () => {
+//         //     return { capturedVariables: captures };
+//         // };
+
+//         return { transformer /*getVars*/ };
+//     };
+
+//     setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => {
+//         script = `const $ = (row:number, col?:number) => {
+//                 const rval = (doc as any)[key][row + ${row}];
+//                 return col === undefined ? rval : rval[(doc as any)._schemaHeaders[col + ${col}].heading];
+//             }
+//             return ${script}`;
+//         const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) });
+//         if (compiled.compiled) {
+//             doc[field] = new ComputedField(compiled);
+//             return true;
+//         }
+//         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 = () => {
+//         this._showDoc && this.props.addDocTab(this._showDoc, OpenWhere.addRight);
+//     };
+
+//     getPreviewTransform = (): Transform => {
+//         return this.props.ScreenToLocalTransform().translate(-this.borderWidth - 4 - this.tableWidth, -this.borderWidth);
+//     };
+
+//     render() {
+//         const preview = '';
+//         return (
+//             <div
+//                 className="collectionSchemaView-table"
+//                 onPointerDown={this.props.onPointerDown}
+//                 onClick={this.props.onClick}
+//                 onWheel={e => this.props.active(true) && e.stopPropagation()}
+//                 onDrop={e => this.props.onDrop(e, {})}
+//                 onContextMenu={this.onContextMenu}>
+//                 {this.reactTable}
+//                 {this.props.Document._chromeHidden || this.props.addDocument === returnFalse ? undefined : (
+//                     <div className="collectionSchemaView-addRow" onClick={this.createRow}>
+//                         + new
+//                     </div>
+//                 )}
+//                 {!this._showDoc ? null : (
+//                     <div
+//                         className="collectionSchemaView-documentPreview"
+//                         ref="overlay"
+//                         style={{
+//                             position: 'absolute',
+//                             width: 150,
+//                             height: 150,
+//                             background: 'dimgray',
+//                             display: 'block',
+//                             top: 0,
+//                             left: 0,
+//                             transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`,
+//                         }}>
+//                         <DocumentView
+//                             Document={this._showDoc}
+//                             DataDoc={this._showDataDoc}
+//                             styleProvider={DefaultStyleProvider}
+//                             docViewPath={returnEmptyDoclist}
+//                             focus={DocUtils.DefaultFocus}
+//                             renderDepth={this.props.renderDepth}
+//                             rootSelected={returnFalse}
+//                             isContentActive={returnTrue}
+//                             isDocumentActive={returnFalse}
+//                             PanelWidth={() => 150}
+//                             PanelHeight={() => 150}
+//                             ScreenToLocalTransform={this.getPreviewTransform}
+//                             docFilters={returnEmptyFilter}
+//                             docRangeFilters={returnEmptyFilter}
+//                             searchFilterDocs={returnEmptyDoclist}
+//                             ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+//                             ContainingCollectionView={this.props.CollectionView}
+//                             moveDocument={this.props.moveDocument}
+//                             whenChildContentsActiveChanged={emptyFunction}
+//                             addDocTab={this.props.addDocTab}
+//                             pinToPres={this.props.pinToPres}
+//                             bringToFront={returnFalse}></DocumentView>
+//                     </div>
+//                 )}
+//             </div>
+//         );
+//     }
+// }