diff options
Diffstat (limited to 'src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx')
| -rw-r--r-- | src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx | 649 |
1 files changed, 649 insertions, 0 deletions
diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx new file mode 100644 index 000000000..f3f09cbf0 --- /dev/null +++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.tsx @@ -0,0 +1,649 @@ +// 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>; +// } +// } |