diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.scss | 12 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 53 |
2 files changed, 51 insertions, 14 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 633e3ca1b..1e6a6a279 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -5,6 +5,15 @@ position: absolute; width: 100%; height: 100%; + ::-webkit-scrollbar { + -webkit-appearance: none; + width: 10px; + } + ::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: rgba(0,0,0,.5); + } + .collectionfreeformview-container { border-width: 0px; .collectionfreeformview > .jsx-parser{ @@ -24,6 +33,9 @@ background: white; box-sizing: border-box; } + .ReactTable .rt-table { + overflow: unset + } .ReactTable .rt-thead.-header { background:grey; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 532ae1994..597a97222 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -15,14 +15,20 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { relative } from "path"; @observer export class CollectionSchemaView extends CollectionViewBase { public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionSchemaView", fieldKey); } + private _mainCont = React.createRef<HTMLDivElement>(); + @observable selectedIndex = 0; + @observable + _splitPercentage: number = 50; + renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -83,11 +89,24 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + @action + onDividerMove = (e: PointerEvent): void => { + let nativeWidth = this._mainCont.current!.getBoundingClientRect(); + this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100); + } + + onDividerUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onDividerMove); + document.removeEventListener('pointerup', this.onDividerUp); + } + onDividerDown = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onDividerMove); + document.addEventListener('pointerup', this.onDividerUp); + } + onPointerDown = (e: React.PointerEvent) => { - let target = e.target as HTMLElement; - if (target.tagName == "SPAN" && target.className.includes("Resizer")) { - e.stopPropagation(); - } // if (e.button === 2 && this.active) { // e.stopPropagation(); // e.preventDefault(); @@ -107,8 +126,8 @@ export class CollectionSchemaView extends CollectionViewBase { const children = Document.GetList<Document>(fieldKey, []); const columns = Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) - let content; - var me = this; + let content = <div></div> + let me = this; if (this.selectedIndex != -1) { content = ( <Measure onResize={action((r: any) => { @@ -130,13 +149,12 @@ export class CollectionSchemaView extends CollectionViewBase { } </Measure> ) - } else { - content = <div /> } + let nativeWidth = Document.GetNumber(KeyStore.NativeWidth, 0); return ( - <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container" - style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} > - <SplitPane split={"vertical"} defaultSize="60%" style={{ height: "100%", position: "relative", overflow: "none" }}> + <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" + style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} > + <div className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}> <ReactTable data={children} pageSize={children.length} @@ -156,9 +174,16 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} /> - {content} - </SplitPane> - </div> + </div> + <div onPointerDown={this.onDividerDown} style={{ position: "relative", background: "black", float: "left", width: "5px", height: "100%" }}> + + </div> + <div style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - 5px)`, height: "100%" }}> + <Measure onResize={action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}> + {({ measureRef }) => <div ref={measureRef}> {content} </div>} + </Measure> + </div> + </div > ) } }
\ No newline at end of file |