From 78f70dbd2136aa8b7b05bacafc71a8a714462d29 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 4 Jun 2020 20:03:19 +0530 Subject: slider added + wheel propagation prevented + fixed bug in changeListenerDisposer --- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionGrid/CollectionGridView.tsx | 55 ++++++++++++++++++---- .../views/collections/collectionGrid/Grid.tsx | 18 ++++++- 3 files changed, 63 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index df84cab56..d6f729598 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -264,7 +264,7 @@ export class CollectionView extends Touchable this.props.Document._viewType = CollectionViewType.Carousel, icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => this.props.Document._viewType = CollectionViewType.Time, icon: "columns" }); subItems.push({ description: "Map", event: () => this.props.Document._viewType = CollectionViewType.Map, icon: "globe-americas" }); - subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "rainbow" }); + subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "th-list" }); switch (this.props.Document._viewType) { case CollectionViewType.Freeform: { subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 68612c9dc..dd4e28e33 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -28,6 +28,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private containerRef: React.RefObject; @observable private _scroll: number = 0; private changeListenerDisposer: Opt; + private rowHeight: number = 0; constructor(props: Readonly) { super(props); @@ -38,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.setLayout = this.setLayout.bind(this); this.onSliderChange = this.onSliderChange.bind(this); - + // this.deletePlaceholder = this.deletePlaceholder.bind(this); this.containerRef = React.createRef(); } @@ -49,7 +50,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // if grid view has been opened and then exited and a document has been deleted // this deletes the layout of that document from the layouts list - if (!oldValue) { + if (!oldValue && newValue.length) { layouts.forEach(({ i }, index) => { const targetId = i; if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { @@ -88,8 +89,28 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { componentWillUnmount() { this.changeListenerDisposer && this.changeListenerDisposer(); + console.log("unmounted") } + // deletePlaceholder(placeholder: Layout, e: MouseEvent) { + + // const { left, right, top, bottom } = this.containerRef.current!.getBoundingClientRect(); + // if (e.clientX > right || e.clientX < left || e.clientY < top || e.clientY > bottom) { + // const layouts: Layout[] = this.parsedLayoutList; + // const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === placeholder.i); + // index !== -1 && layouts.splice(index, 1); + + // const i = this.childLayoutPairs.findIndex(({ layout }) => placeholder.i === layout.i); + // i !== -1 && this.childLayoutPairs.splice(i, 1); + + // console.log("deleting"); + + // this.unStringifiedLayoutList = layouts; + // } + + // } + + /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by @@ -232,6 +253,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.rowHeight = event.currentTarget.valueAsNumber; } + onSliderDown = () => { + this.rowHeight = NumCast(this.props.Document.rowHeight); + } + + onSliderUp = () => { + const tempVal = this.props.Document.rowHeight; + this.props.Document.rowHeight = this.rowHeight; + undoBatch(() => this.props.Document.rowHeight = tempVal)(); + } + @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); /** @@ -243,7 +274,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents. */ render() { - const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, @@ -257,8 +287,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return (
{showChrome ? @@ -280,9 +313,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }
) => this._scroll = e.currentTarget.scrollTop)} + onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} + onWheel={e => e.stopPropagation()} > - e.currentTarget.focus()} /> + e.currentTarget.focus()} />
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 29bafda9b..df550e3c2 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -19,6 +19,7 @@ interface GridProps { setLayout: Function; transformScale: number; childrenDraggable: boolean; + // deletePlaceholder: Function; } /** @@ -27,9 +28,12 @@ interface GridProps { @observer export default class Grid extends React.Component { + // private dragging: boolean = false; + constructor(props: Readonly) { super(props); this.onLayoutChange = this.onLayoutChange.bind(this); + // this.onDrag = this.onDrag.bind(this); } /** * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. @@ -39,8 +43,20 @@ export default class Grid extends React.Component { this.props.setLayout(layout); } + // onDrag(layout: Layout[], + // oldItem: Layout, + // newItem: Layout, + // placeholder: Layout, + // event: MouseEvent, + // element: HTMLElement) { + // this.props.deletePlaceholder(placeholder, event); + // console.log("Grid -> event", event.clientX) + + // } + render() { console.log(this.props.transformScale); + return ( { useCSSTransforms={true} onLayoutChange={this.onLayoutChange} preventCollision={true} - transformScale={this.props.transformScale} + transformScale={this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2