// import React = require('react');
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { action, computed, observable, untracked } from 'mobx';
// import { observer } from 'mobx-react';
// import Measure from 'react-measure';
// // import { Resize } from 'react-table';
// import { Doc, Opt } from '../../../../fields/Doc';
// import { List } from '../../../../fields/List';
// import { listSpec } from '../../../../fields/Schema';
// import { PastelSchemaPalette, SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
// import { Cast, NumCast } from '../../../../fields/Types';
// import { TraceMobx } from '../../../../fields/util';
// import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
// import { DocUtils } from '../../../documents/Documents';
// import { SelectionManager } from '../../../util/SelectionManager';
// import { SnappingManager } from '../../../util/SnappingManager';
// import { Transform } from '../../../util/Transform';
// import { undoBatch } from '../../../util/UndoManager';
// import { ContextMenu } from '../../ContextMenu';
// import { ContextMenuProps } from '../../ContextMenuItem';
// import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss';
// import { DocumentView } from '../../nodes/DocumentView';
// import { DefaultStyleProvider } from '../../StyleProvider';
// import { CollectionSubView } from '../CollectionSubView';
// import './CollectionSchemaView.scss';
// // import { SchemaTable } from './SchemaTable';
// // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657

// export 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],
// ]);

// @observer
// export class CollectionSchemaView extends CollectionSubView() {
//     private _previewCont?: HTMLDivElement;

//     @observable _previewDoc: Doc | undefined = undefined;
//     @observable _focusedTable: Doc = this.props.Document;
//     @observable _col: any = '';
//     @observable _menuWidth = 0;
//     @observable _headerOpen = false;
//     @observable _headerIsEditing = false;
//     @observable _menuHeight = 0;
//     @observable _pointerX = 0;
//     @observable _pointerY = 0;
//     @observable _openTypes: 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 borderWidth() {
//         return Number(COLLECTION_BORDER_WIDTH);
//     }
//     @computed get scale() {
//         return this.props.ScreenToLocalTransform().Scale;
//     }
//     @computed get columns() {
//         return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []);
//     }
//     set columns(columns: SchemaHeaderField[]) {
//         this.props.Document._schemaHeaders = new List<SchemaHeaderField>(columns);
//     }

//     @computed get menuCoordinates() {
//         let searchx = 0;
//         let searchy = 0;
//         if (this.props.Document._searchDoc) {
//             const el = document.getElementsByClassName('collectionSchemaView-searchContainer')[0];
//             if (el !== undefined) {
//                 const rect = el.getBoundingClientRect();
//                 searchx = rect.x;
//                 searchy = rect.y;
//             }
//         }
//         const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)) - searchx;
//         const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)) - searchy;
//         return this.props.ScreenToLocalTransform().transformPoint(x, y);
//     }

//     get documentKeys() {
//         const docs = this.childDocs;
//         const keys: { [key: string]: boolean } = {};
//         // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
//         //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
//         //  invalidated and re-rendered.   This workaround will inquire all of the document fields before the options button is clicked.
//         //  then by the time the options button is clicked, all of the fields should be in place.  If a new field is added while this menu
//         //  is displayed (unlikely) it won't show up until something else changes.
//         //TODO Types
//         untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false)))));

//         this.columns.forEach(key => (keys[key.heading] = true));
//         return Array.from(Object.keys(keys));
//     }

//     @action setHeaderIsEditing = (isEditing: boolean) => (this._headerIsEditing = isEditing);

//     @undoBatch
//     setColumnType = action((columnField: SchemaHeaderField, type: ColumnType): void => {
//         this._openTypes = false;
//         if (columnTypes.get(columnField.heading)) return;

//         const columns = this.columns;
//         const index = columns.indexOf(columnField);
//         if (index > -1) {
//             columnField.setType(NumCast(type));
//             columns[index] = columnField;
//             this.columns = columns;
//         }
//     });

//     @undoBatch
//     setColumnColor = (columnField: SchemaHeaderField, color: string): void => {
//         const columns = this.columns;
//         const index = columns.indexOf(columnField);
//         if (index > -1) {
//             columnField.setColor(color);
//             columns[index] = columnField;
//             this.columns = columns; // need to set the columns to trigger rerender
//         }
//     };

//     @undoBatch
//     @action
//     setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
//         const columns = this.columns;
//         columns.forEach(col => col.setDesc(undefined));

//         const index = columns.findIndex(c => c.heading === columnField.heading);
//         const column = columns[index];
//         column.setDesc(descending);
//         columns[index] = column;
//         this.columns = columns;
//     };

//     renderTypes = (col: any) => {
//         if (columnTypes.get(col.heading)) return null;

//         const type = col.type;

//         const anyType = (
//             <div className={'columnMenu-option' + (type === ColumnType.Any ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.Any)}>
//                 <FontAwesomeIcon icon={'align-justify'} size="sm" />
//                 Any
//             </div>
//         );

//         const numType = (
//             <div className={'columnMenu-option' + (type === ColumnType.Number ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.Number)}>
//                 <FontAwesomeIcon icon={'hashtag'} size="sm" />
//                 Number
//             </div>
//         );

//         const textType = (
//             <div className={'columnMenu-option' + (type === ColumnType.String ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.String)}>
//                 <FontAwesomeIcon icon={'font'} size="sm" />
//                 Text
//             </div>
//         );

//         const boolType = (
//             <div className={'columnMenu-option' + (type === ColumnType.Boolean ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.Boolean)}>
//                 <FontAwesomeIcon icon={'check-square'} size="sm" />
//                 Checkbox
//             </div>
//         );

//         const listType = (
//             <div className={'columnMenu-option' + (type === ColumnType.List ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.List)}>
//                 <FontAwesomeIcon icon={'list-ul'} size="sm" />
//                 List
//             </div>
//         );

//         const docType = (
//             <div className={'columnMenu-option' + (type === ColumnType.Doc ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.Doc)}>
//                 <FontAwesomeIcon icon={'file'} size="sm" />
//                 Document
//             </div>
//         );

//         const imageType = (
//             <div className={'columnMenu-option' + (type === ColumnType.Image ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.Image)}>
//                 <FontAwesomeIcon icon={'image'} size="sm" />
//                 Image
//             </div>
//         );

//         const dateType = (
//             <div className={'columnMenu-option' + (type === ColumnType.Date ? ' active' : '')} onClick={() => this.setColumnType(col, ColumnType.Date)}>
//                 <FontAwesomeIcon icon={'calendar'} size="sm" />
//                 Date
//             </div>
//         );

//         const allColumnTypes = (
//             <div className="columnMenu-types">
//                 {anyType}
//                 {numType}
//                 {textType}
//                 {boolType}
//                 {listType}
//                 {docType}
//                 {imageType}
//                 {dateType}
//             </div>
//         );

//         const justColType =
//             type === ColumnType.Any
//                 ? anyType
//                 : type === ColumnType.Number
//                 ? numType
//                 : type === ColumnType.String
//                 ? textType
//                 : type === ColumnType.Boolean
//                 ? boolType
//                 : type === ColumnType.List
//                 ? listType
//                 : type === ColumnType.Doc
//                 ? docType
//                 : type === ColumnType.Date
//                 ? dateType
//                 : imageType;

//         return (
//             <div className="collectionSchema-headerMenu-group" onClick={action(() => (this._openTypes = !this._openTypes))}>
//                 <div>
//                     <label style={{ cursor: 'pointer' }}>Column type:</label>
//                     <FontAwesomeIcon icon={'caret-down'} size="lg" style={{ float: 'right', transform: `rotate(${this._openTypes ? '180deg' : 0})`, transition: '0.2s all ease' }} />
//                 </div>
//                 {this._openTypes ? allColumnTypes : justColType}
//             </div>
//         );
//     };

//     renderSorting = (col: any) => {
//         const sort = col.desc;
//         return (
//             <div className="collectionSchema-headerMenu-group">
//                 <label>Sort by:</label>
//                 <div className="columnMenu-sort">
//                     <div className={'columnMenu-option' + (sort === true ? ' active' : '')} onClick={() => this.setColumnSort(col, true)}>
//                         <FontAwesomeIcon icon="sort-amount-down" size="sm" />
//                         Sort descending
//                     </div>
//                     <div className={'columnMenu-option' + (sort === false ? ' active' : '')} onClick={() => this.setColumnSort(col, false)}>
//                         <FontAwesomeIcon icon="sort-amount-up" size="sm" />
//                         Sort ascending
//                     </div>
//                     <div className="columnMenu-option" onClick={() => this.setColumnSort(col, undefined)}>
//                         <FontAwesomeIcon icon="times" size="sm" />
//                         Clear sorting
//                     </div>
//                 </div>
//             </div>
//         );
//     };

//     renderColors = (col: any) => {
//         const selected = col.color;

//         const pink = PastelSchemaPalette.get('pink2');
//         const purple = PastelSchemaPalette.get('purple2');
//         const blue = PastelSchemaPalette.get('bluegreen1');
//         const yellow = PastelSchemaPalette.get('yellow4');
//         const red = PastelSchemaPalette.get('red2');
//         const gray = '#f1efeb';

//         return (
//             <div className="collectionSchema-headerMenu-group">
//                 <label>Color:</label>
//                 <div className="columnMenu-colors">
//                     <div className={'columnMenu-colorPicker' + (selected === pink ? ' active' : '')} style={{ backgroundColor: pink }} onClick={() => this.setColumnColor(col, pink!)}></div>
//                     <div className={'columnMenu-colorPicker' + (selected === purple ? ' active' : '')} style={{ backgroundColor: purple }} onClick={() => this.setColumnColor(col, purple!)}></div>
//                     <div className={'columnMenu-colorPicker' + (selected === blue ? ' active' : '')} style={{ backgroundColor: blue }} onClick={() => this.setColumnColor(col, blue!)}></div>
//                     <div className={'columnMenu-colorPicker' + (selected === yellow ? ' active' : '')} style={{ backgroundColor: yellow }} onClick={() => this.setColumnColor(col, yellow!)}></div>
//                     <div className={'columnMenu-colorPicker' + (selected === red ? ' active' : '')} style={{ backgroundColor: red }} onClick={() => this.setColumnColor(col, red!)}></div>
//                     <div className={'columnMenu-colorPicker' + (selected === gray ? ' active' : '')} style={{ backgroundColor: gray }} onClick={() => this.setColumnColor(col, gray)}></div>
//                 </div>
//             </div>
//         );
//     };

//     @undoBatch
//     @action
//     changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => {
//         const columns = this.columns;
//         if (columns === undefined) {
//             this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, 'f1efeb')]);
//         } else {
//             if (addNew) {
//                 columns.push(new SchemaHeaderField(newKey, 'f1efeb'));
//                 this.columns = columns;
//             } else {
//                 const index = columns.map(c => c.heading).indexOf(oldKey);
//                 if (index > -1) {
//                     const column = columns[index];
//                     column.setHeading(newKey);
//                     columns[index] = column;
//                     this.columns = columns;
//                     if (filter) {
//                         Doc.setDocFilter(this.props.Document, newKey, filter, 'match');
//                     } else {
//                         this.props.Document._docFilters = undefined;
//                     }
//                 }
//             }
//         }
//     };

//     @action
//     openHeader = (col: any, screenx: number, screeny: number) => {
//         this._col = col;
//         this._headerOpen = true;
//         this._pointerX = screenx;
//         this._pointerY = screeny;
//     };

//     @action
//     closeHeader = () => {
//         this._headerOpen = false;
//     };

//     @undoBatch
//     @action
//     deleteColumn = (key: string) => {
//         const columns = this.columns;
//         if (columns === undefined) {
//             this.columns = new List<SchemaHeaderField>([]);
//         } else {
//             const index = columns.map(c => c.heading).indexOf(key);
//             if (index > -1) {
//                 columns.splice(index, 1);
//                 this.columns = columns;
//             }
//         }
//         this.closeHeader();
//     };

//     getPreviewTransform = (): Transform => {
//         return this.props.ScreenToLocalTransform().translate(-this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, -this.borderWidth);
//     };

//     @action
//     onHeaderClick = (e: React.PointerEvent) => {
//         e.stopPropagation();
//     };

//     @action
//     onWheel(e: React.WheelEvent) {
//         const scale = this.props.ScreenToLocalTransform().Scale;
//         this.props.isContentActive(true) && e.stopPropagation();
//     }

//     @computed get renderMenuContent() {
//         TraceMobx();
//         return (
//             <div className="collectionSchema-header-menuOptions">
//                 {this.renderTypes(this._col)}
//                 {this.renderColors(this._col)}
//                 <div className="collectionSchema-headerMenu-group">
//                     <button
//                         onClick={() => {
//                             this.deleteColumn(this._col.heading);
//                         }}>
//                         Hide Column
//                     </button>
//                 </div>
//             </div>
//         );
//     }

//     private createTarget = (ele: HTMLDivElement) => {
//         this._previewCont = ele;
//         super.CreateDropTarget(ele);
//     };

//     isFocused = (doc: Doc, outsideReaction: boolean): boolean => this.props.isSelected(outsideReaction) && doc === this._focusedTable;

//     @action setFocused = (doc: Doc) => (this._focusedTable = doc);

//     @action setPreviewDoc = (doc: Opt<Doc>) => {
//         SelectionManager.SelectSchemaViewDoc(doc);
//         this._previewDoc = doc;
//     };

//     //toggles preview side-panel of schema
//     @action
//     toggleExpander = () => {
//         this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0;
//     };

//     onDividerDown = (e: React.PointerEvent) => {
//         setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, this.toggleExpander);
//     };
//     @action
//     onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
//         const nativeWidth = this._previewCont!.getBoundingClientRect();
//         const minWidth = 40;
//         const maxWidth = 1000;
//         const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0];
//         const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth;
//         this.props.Document.schemaPreviewWidth = width;
//         return false;
//     };

//     onPointerDown = (e: React.PointerEvent): void => {
//         if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) {
//             if (this.props.isSelected(true)) e.stopPropagation();
//             else this.props.select(false);
//         }
//     };

//     @computed
//     get previewDocument(): Doc | undefined {
//         return this._previewDoc;
//     }

//     @computed
//     get dividerDragger() {
//         return this.previewWidth() === 0 ? null : (
//             <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown}>
//                 <div className="collectionSchemaView-dividerDragger" />
//             </div>
//         );
//     }

//     @computed
//     get previewPanel() {
//         return (
//             <div ref={this.createTarget} style={{ width: `${this.previewWidth()}px` }}>
//                 {!this.previewDocument ? null : (
//                     <DocumentView
//                         Document={this.previewDocument}
//                         DataDoc={undefined}
//                         fitContentsToBox={returnTrue}
//                         dontCenter={'y'}
//                         focus={DocUtils.DefaultFocus}
//                         renderDepth={this.props.renderDepth}
//                         rootSelected={this.rootSelected}
//                         PanelWidth={this.previewWidth}
//                         PanelHeight={this.previewHeight}
//                         isContentActive={returnTrue}
//                         isDocumentActive={returnFalse}
//                         ScreenToLocalTransform={this.getPreviewTransform}
//                         docFilters={this.childDocFilters}
//                         docRangeFilters={this.childDocRangeFilters}
//                         searchFilterDocs={this.searchFilterDocs}
//                         styleProvider={DefaultStyleProvider}
//                         docViewPath={returnEmptyDoclist}
//                         ContainingCollectionDoc={this.props.CollectionView?.props.Document}
//                         ContainingCollectionView={this.props.CollectionView}
//                         moveDocument={this.props.moveDocument}
//                         addDocument={this.props.addDocument}
//                         removeDocument={this.props.removeDocument}
//                         whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
//                         addDocTab={this.props.addDocTab}
//                         pinToPres={this.props.pinToPres}
//                         bringToFront={returnFalse}
//                     />
//                 )}
//             </div>
//         );
//     }

//     @computed
//     get schemaTable() {
//         return (
//             <SchemaTable
//                 Document={this.props.Document}
//                 PanelHeight={this.props.PanelHeight}
//                 PanelWidth={this.props.PanelWidth}
//                 childDocs={this.childDocs}
//                 CollectionView={this.props.CollectionView}
//                 ContainingCollectionView={this.props.ContainingCollectionView}
//                 ContainingCollectionDoc={this.props.ContainingCollectionDoc}
//                 fieldKey={this.props.fieldKey}
//                 renderDepth={this.props.renderDepth}
//                 moveDocument={this.props.moveDocument}
//                 ScreenToLocalTransform={this.props.ScreenToLocalTransform}
//                 active={this.props.isContentActive}
//                 onDrop={this.onExternalDrop}
//                 addDocTab={this.props.addDocTab}
//                 pinToPres={this.props.pinToPres}
//                 isSelected={this.props.isSelected}
//                 isFocused={this.isFocused}
//                 setFocused={this.setFocused}
//                 setPreviewDoc={this.setPreviewDoc}
//                 deleteDocument={this.props.removeDocument}
//                 addDocument={this.props.addDocument}
//                 dataDoc={this.props.DataDoc}
//                 columns={this.columns}
//                 documentKeys={this.documentKeys}
//                 headerIsEditing={this._headerIsEditing}
//                 openHeader={this.openHeader}
//                 onClick={this.onTableClick}
//                 onPointerDown={emptyFunction}
//                 onResizedChange={this.onResizedChange}
//                 setColumns={this.setColumns}
//                 reorderColumns={this.reorderColumns}
//                 changeColumns={this.changeColumns}
//                 setHeaderIsEditing={this.setHeaderIsEditing}
//                 changeColumnSort={this.setColumnSort}
//             />
//         );
//     }

//     @computed
//     public get schemaToolbar() {
//         return (
//             <div className="collectionSchemaView-toolbar">
//                 <div className="collectionSchemaView-toolbar-item">
//                     <div id="preview-schema-checkbox-div">
//                         <input type="checkbox" key={'Show Preview'} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />
//                         Show Preview
//                     </div>
//                 </div>
//             </div>
//         );
//     }

//     onSpecificMenu = (e: React.MouseEvent) => {
//         if ((e.target as any)?.className?.includes?.('collectionSchemaView-cell') || e.target instanceof HTMLSpanElement) {
//             const cm = ContextMenu.Instance;
//             const options = cm.findByDescription('Options...');
//             const optionItems: ContextMenuProps[] = options && 'subitems' in options ? options.subitems : [];
//             optionItems.push({ description: 'remove', event: () => this._previewDoc && this.props.removeDocument?.(this._previewDoc), icon: 'trash' });
//             !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' });
//             cm.displayMenu(e.clientX, e.clientY);
//             (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this.
//             e.stopPropagation();
//         }
//     };

//     @action
//     onTableClick = (e: React.MouseEvent): void => {
//         if (!(e.target as any)?.className?.includes?.('collectionSchemaView-cell') && !(e.target instanceof HTMLSpanElement)) {
//             this.setPreviewDoc(undefined);
//         } else {
//             e.stopPropagation();
//         }
//         this.setFocused(this.props.Document);
//         this.closeHeader();
//     };

//     onResizedChange = (newResized: Resize[], event: any) => {
//         const columns = this.columns;
//         newResized.forEach(resized => {
//             const index = columns.findIndex(c => c.heading === resized.id);
//             const column = columns[index];
//             column.setWidth(resized.value);
//             columns[index] = column;
//         });
//         this.columns = columns;
//     };

//     @action
//     setColumns = (columns: SchemaHeaderField[]) => (this.columns = columns);

//     @undoBatch
//     reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => {
//         const columns = [...columnsValues];
//         const oldIndex = columns.indexOf(toMove);
//         const relIndex = columns.indexOf(relativeTo);
//         const newIndex = oldIndex > relIndex && !before ? relIndex + 1 : oldIndex < relIndex && before ? relIndex - 1 : relIndex;

//         if (oldIndex === newIndex) return;

//         columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
//         this.columns = columns;
//     };

//     onZoomMenu = (e: React.WheelEvent) => this.props.isContentActive(true) && e.stopPropagation();

//     render() {
//         TraceMobx();
//         if (!this.props.isContentActive()) setTimeout(() => this.closeHeader(), 0);
//         const menuContent = this.renderMenuContent;
//         const menu = (
//             <div className="collectionSchema-header-menu" onWheel={e => this.onZoomMenu(e)} onPointerDown={e => this.onHeaderClick(e)} style={{ transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1]}px)` }}>
//                 <Measure
//                     offset
//                     onResize={action((r: any) => {
//                         const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
//                         this._menuWidth = dim[0];
//                         this._menuHeight = dim[1];
//                     })}>
//                     {({ measureRef }) => <div ref={measureRef}> {menuContent} </div>}
//                 </Measure>
//             </div>
//         );
//         return (
//             <div
//                 className={'collectionSchemaView' + (this.props.Document._searchDoc ? '-searchContainer' : '-container')}
//                 style={{
//                     overflow: this.props.scrollOverflow === true ? 'scroll' : undefined,
//                     backgroundColor: 'white',
//                     pointerEvents: this.props.Document._searchDoc !== undefined && !this.props.isContentActive() && !SnappingManager.GetIsDragging() ? 'none' : undefined,
//                     width: this.props.PanelWidth() || '100%',
//                     height: this.props.PanelHeight() || '100%',
//                     position: 'relative',
//                 }}>
//                 <div
//                     className="collectionSchemaView-tableContainer"
//                     style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
//                     onContextMenu={this.onSpecificMenu}
//                     onPointerDown={this.onPointerDown}
//                     onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}
//                     onDrop={e => this.onExternalDrop(e, {})}
//                     ref={this.createTarget}>
//                     {this.schemaTable}
//                 </div>
//                 {this.dividerDragger}
//                 {!this.previewWidth() ? null : this.previewPanel}
//                 {this._headerOpen && this.props.isContentActive() ? menu : null}
//             </div>
//         );
//         TraceMobx();
//         return <div>HELLO</div>;
//     }
// }