// 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>
//         );
//     }
// }