From 7623b265cef2213792616943d76bccd149b6608a Mon Sep 17 00:00:00 2001 From: heswell Date: Wed, 10 Jan 2024 17:04:12 +0000 Subject: [PATCH] UI fixes drag drop (#1116) * ensure array data source sends client data aftyer resubscribe * ensure custom rows set aria-rowindex correctly * fix drag drop bug, seen in instrument picker --- .../array-data-source/array-data-source.ts | 24 ++++++++--- .../vuu-data-remote/src/vuu-data-source.ts | 1 - .../src/TickingArrayDataSource.ts | 13 +++--- .../vuu-data-test/src/basket/basket-module.ts | 14 ++++++- .../useOverflowContainer.ts | 2 +- vuu-ui/packages/vuu-table/src/Row.tsx | 1 - vuu-ui/packages/vuu-table/src/Table.tsx | 1 + .../src/table-header/useTableHeader.ts | 2 +- vuu-ui/packages/vuu-table/src/useTable.ts | 15 +------ .../src/drag-drop/DragDropState.ts | 13 +++--- .../src/drag-drop/DropIndicator.tsx | 2 +- ...{dragDropTypesNext.ts => dragDropTypes.ts} | 5 +++ .../src/drag-drop/drop-target-utils.ts | 4 +- .../vuu-ui-controls/src/drag-drop/index.ts | 4 +- .../src/drag-drop/useDragDisplacers.ts | 2 +- .../{useDragDropNext.tsx => useDragDrop.tsx} | 41 +++++++++++++------ .../src/drag-drop/useDragDropCopy.ts | 2 +- .../src/drag-drop/useDragDropIndicator.tsx | 2 +- ...ext.tsx => useDragDropNaturalMovement.tsx} | 3 +- .../src/drag-drop/useGlobalDragDrop.ts | 5 +-- .../vuu-ui-controls/src/list/useList.ts | 2 +- .../src/tabstrip/useTabstrip.ts | 2 +- .../src/basket-selector/BasketSelectorRow.tsx | 1 - 23 files changed, 96 insertions(+), 65 deletions(-) rename vuu-ui/packages/vuu-ui-controls/src/drag-drop/{dragDropTypesNext.ts => dragDropTypes.ts} (97%) rename vuu-ui/packages/vuu-ui-controls/src/drag-drop/{useDragDropNext.tsx => useDragDrop.tsx} (95%) rename vuu-ui/packages/vuu-ui-controls/src/drag-drop/{useDragDropNaturalMovementNext.tsx => useDragDropNaturalMovement.tsx} (99%) diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts index 31a742b9e..c39de166d 100644 --- a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts +++ b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts @@ -54,6 +54,8 @@ import { buildDataToClientMap, toClientRow } from "./array-data-utils"; import { collapseGroup, expandGroup, GroupMap, groupRows } from "./group-utils"; import { sortRows } from "./sort-utils"; +const { debug, info } = logger("ArrayDataSource"); + const { KEY } = metadataKeys; export interface ArrayDataSourceConstructorProps @@ -64,7 +66,6 @@ export interface ArrayDataSourceConstructorProps keyColumn?: string; rangeChangeRowset?: "delta" | "full"; } -const { debug } = logger("ArrayDataSource"); const toDataSourceRow = (key: number) => @@ -232,6 +233,7 @@ export class ArrayDataSource if (range) { // set range and trigger dispatch of initial rows this.range = range; + this.sendRowsToClient(); } else if (this.#range !== NULL_RANGE) { this.sendRowsToClient(); } @@ -239,26 +241,36 @@ export class ArrayDataSource } unsubscribe() { - console.log("unsubscribe noop"); + console.log(`unsubscribe noop`); } suspend() { - // console.log("noop"); + console.log(`suspend #${this.viewport}, current status ${this.#status}`); + info?.(`suspend #${this.viewport}, current status ${this.#status}`); + this.#status = "suspended"; + return this; } resume() { - // console.log("resume noop"); + console.log(`resume #${this.viewport}, current status ${this.#status}`); + // const isDisabled = this.#status.startsWith("disabl"); + const isSuspended = this.#status === "suspended"; + info?.(`resume #${this.viewport}, current status ${this.#status}`); + console.log(`resume noop`); + if (isSuspended) { + this.#status = "subscribed"; + } return this; } disable() { - // console.log("disable noop"); + console.log(`disable noop`); return this; } enable() { - // console.log("enable noop"); + console.log(`enable noop`); return this; } diff --git a/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts b/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts index 5f5558ea8..50c40c082 100644 --- a/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts +++ b/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts @@ -263,7 +263,6 @@ export class VuuDataSource resume() { console.log(`resume #${this.viewport}, current status ${this.#status}`); - const isDisabled = this.#status.startsWith("disabl"); const isSuspended = this.#status === "suspended"; info?.(`resume #${this.viewport}, current status ${this.#status}`); diff --git a/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts b/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts index 435bc6cd1..2e321a5cc 100644 --- a/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts +++ b/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts @@ -1,13 +1,16 @@ import { ArrayDataSource, - ArrayDataSourceConstructorProps + ArrayDataSourceConstructorProps, } from "@finos/vuu-data-local"; import { - DataSourceRow, MenuRpcResponse, RpcResponse, + DataSourceRow, + MenuRpcResponse, + RpcResponse, SelectionItem, SubscribeCallback, - SubscribeProps, VuuUIMessageInRPCEditReject, - VuuUIMessageInRPCEditResponse + SubscribeProps, + VuuUIMessageInRPCEditReject, + VuuUIMessageInRPCEditResponse, } from "@finos/vuu-data-types"; import { ClientToServerEditRpc, @@ -15,7 +18,7 @@ import { ClientToServerViewportRpcCall, VuuMenu, VuuRange, - VuuRowDataItemType + VuuRowDataItemType, } from "@finos/vuu-protocol-types"; import { metadataKeys } from "@finos/vuu-utils"; import { makeSuggestions } from "./makeSuggestions"; diff --git a/vuu-ui/packages/vuu-data-test/src/basket/basket-module.ts b/vuu-ui/packages/vuu-data-test/src/basket/basket-module.ts index 37fe1c24d..2977e074e 100644 --- a/vuu-ui/packages/vuu-data-test/src/basket/basket-module.ts +++ b/vuu-ui/packages/vuu-data-test/src/basket/basket-module.ts @@ -91,6 +91,8 @@ function createTradingBasket(basketId: string, basketName: string) { (c) => c[key] === basketId ); + const { instanceId } = tableMaps.basketTrading; + constituents.forEach(([, , description, , ric, , , quantity, weighting]) => { const algo = ""; const algoParams = ""; @@ -103,7 +105,6 @@ function createTradingBasket(basketId: string, basketName: string) { const side = "BUY"; const venue = "venue"; - const { instanceId } = tableMaps.basketTrading; const basketInstanceId = basketTradingRow[instanceId]; const basketTradingConstituentRow: VuuRowDataItemType[] = [ algo, @@ -126,6 +127,9 @@ function createTradingBasket(basketId: string, basketName: string) { ]; basketTradingConstituent.insert(basketTradingConstituentRow); }); + + // return the key + return basketTradingRow[instanceId] as string; } async function addConstituent(rpcRequest: ClientToServerViewportRpcCall) { @@ -144,7 +148,13 @@ async function createNewBasket(rpcRequest: ClientToServerViewportRpcCall) { const { params: [basketId, basketName], } = rpcRequest; - createTradingBasket(basketId, basketName); + const key = createTradingBasket(basketId, basketName); + return { + action: { + type: "VP_CREATE_SUCCESS", + key, + }, + }; } //------------------- diff --git a/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts b/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts index 0966fe4e1..c4123ed9a 100644 --- a/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts +++ b/vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts @@ -1,5 +1,5 @@ import { MenuActionHandler, MenuBuilder } from "@finos/vuu-data-types"; -import { useDragDropNext as useDragDrop } from "@finos/vuu-ui-controls"; +import { useDragDrop as useDragDrop } from "@finos/vuu-ui-controls"; import { isValidNumber, MEASURES, diff --git a/vuu-ui/packages/vuu-table/src/Row.tsx b/vuu-ui/packages/vuu-table/src/Row.tsx index 1309e484d..122b9f09f 100644 --- a/vuu-ui/packages/vuu-table/src/Row.tsx +++ b/vuu-ui/packages/vuu-table/src/Row.tsx @@ -92,7 +92,6 @@ export const Row = memo( return (
{data.map((data) => ( buildColumnMap(dataSource.columns), [dataSource.columns] @@ -260,7 +253,6 @@ export const useTable = ({ const handleConfigEditedInSettingsPanel = useCallback( (tableConfig: TableConfig) => { - console.log(`settings changed`); dispatchColumnAction({ type: "init", tableConfig, @@ -661,11 +653,6 @@ export const useTable = ({ itemQuery: ".vuuTableRow", }); - // console.log({ - // tableAttributes, - // config: tableConfig, - // }); - return { ...containerProps, "aria-rowcount": dataSource.size, diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DragDropState.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DragDropState.ts index 2f5351e7f..2c210aa31 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DragDropState.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DragDropState.ts @@ -1,4 +1,4 @@ -import { MouseOffset } from "./dragDropTypesNext"; +import { MouseOffset, MousePosition } from "./dragDropTypes"; export class DragDropState { /** Distance between start (top | left) of dragged element and point where user pressed to drag */ @@ -10,9 +10,9 @@ export class DragDropState { payload: unknown = null; - constructor(evt: MouseEvent, dragElement: HTMLElement) { + constructor(mousePosition: MousePosition, dragElement: HTMLElement) { this.initialDragElement = dragElement; - this.mouseOffset = this.getMouseOffset(evt, dragElement); + this.mouseOffset = this.getMouseOffset(mousePosition, dragElement); } /** Used to capture a ref to the Draggable JSX.Element */ @@ -24,8 +24,11 @@ export class DragDropState { this.payload = payload; } - private getMouseOffset(evt: MouseEvent, dragElement: HTMLElement) { - const { clientX, clientY } = evt; + private getMouseOffset( + mousePosition: MousePosition, + dragElement: HTMLElement + ) { + const { clientX, clientY } = mousePosition; const draggableRect = dragElement.getBoundingClientRect(); return { diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DropIndicator.tsx b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DropIndicator.tsx index 89fb2095d..05103d83a 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DropIndicator.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/DropIndicator.tsx @@ -1,6 +1,6 @@ import { Portal } from "@finos/vuu-popups"; import { forwardRef } from "react"; -import { Rect } from "./dragDropTypesNext"; +import { Rect } from "./dragDropTypes"; import "./DropIndicator.css"; diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypesNext.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypes.ts similarity index 97% rename from vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypesNext.ts rename to vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypes.ts index 6bd327b31..146c0b2fb 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypesNext.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypes.ts @@ -37,6 +37,11 @@ export type Direction = "fwd" | "bwd"; export const FWD: Direction = "fwd"; export const BWD: Direction = "bwd"; +export interface MousePosition { + clientX: number; + clientY: number; +} + export interface MouseOffset { x: number; y: number; diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/drop-target-utils.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/drop-target-utils.ts index 9585f0323..48147feaa 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/drop-target-utils.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/drop-target-utils.ts @@ -1,6 +1,6 @@ import { orientationType } from "@finos/vuu-utils"; -import { ViewportRange } from "./dragDropTypesNext"; -import { Direction, Rect } from "./dragDropTypesNext"; +import { ViewportRange } from "./dragDropTypes"; +import { Direction, Rect } from "./dragDropTypes"; const LEFT_RIGHT = ["left", "right"]; const TOP_BOTTOM = ["top", "bottom"]; diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts index 2267fde99..6e2d1f1ea 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts @@ -1,6 +1,6 @@ -export * from "./dragDropTypesNext"; +export * from "./dragDropTypes"; export * from "./DragDropProvider"; export * from "./DragDropState"; -export * from "./useDragDropNext"; +export * from "./useDragDrop"; export * from "./drop-target-utils"; export * from "./useGlobalDragDrop"; diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDisplacers.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDisplacers.ts index 5a7ab37a4..1dc08ac11 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDisplacers.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDisplacers.ts @@ -1,6 +1,6 @@ import type { orientationType } from "@finos/vuu-utils"; import { useCallback, useMemo, useRef } from "react"; -import { Direction } from "./dragDropTypesNext"; +import { Direction } from "./dragDropTypes"; import { createDragSpacer as createDragDisplacer } from "./Draggable"; import { MeasuredDropTarget, diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNext.tsx b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDrop.tsx similarity index 95% rename from vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNext.tsx rename to vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDrop.tsx index 5aea4b058..860903271 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNext.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDrop.tsx @@ -16,7 +16,8 @@ import { InternalDragDropProps, InternalDragHookResult, MouseOffset, -} from "./dragDropTypesNext"; + MousePosition, +} from "./dragDropTypes"; import { Draggable } from "./Draggable"; import { cloneElement, @@ -29,7 +30,7 @@ import { import { ScrollStopHandler, useAutoScroll } from "./useAutoScroll"; import { useDragDropCopy } from "./useDragDropCopy"; import { useDragDropIndicator } from "./useDragDropIndicator"; -import { useDragDropNaturalMovement } from "./useDragDropNaturalMovementNext"; +import { useDragDropNaturalMovement } from "./useDragDropNaturalMovement"; import { ResumeDragHandler } from "./useGlobalDragDrop"; const NULL_DRAG_DROP_RESULT = { @@ -71,7 +72,7 @@ const dragThreshold = 3; const getDraggableElement = ( el: EventTarget | null, query: string -): HTMLElement => (el as HTMLElement).closest(query) as HTMLElement; +): HTMLElement => (el as HTMLElement)?.closest(query) as HTMLElement; const getLastElement = ( container: HTMLElement, @@ -83,7 +84,7 @@ const getLastElement = ( return [lastElement, isOverflowElement(lastElement)]; }; -export const useDragDropNext: DragDropHook = ({ +export const useDragDrop: DragDropHook = ({ allowDragDrop, containerRef, draggableClassName, @@ -112,6 +113,10 @@ export const useDragDropNext: DragDropHook = ({ const mouseDownTimer = useRef(null); /** do we actually have scrollable content */ const isScrollableRef = useRef(false); + + /** save this on mousedown. We cannot rely on the target of mousemove being same element*/ + const mousedownElementRef = useRef(null); + /** current mouse position */ const mousePosRef = useRef({ x: 0, y: 0 }); /** mouse position when mousedown initiated drag */ @@ -463,10 +468,10 @@ export const useDragDropNext: DragDropHook = ({ ); const dragStart = useCallback( - (evt: MouseEvent) => { - const { target } = evt; - const dragElement = getDraggableElement(target, itemQuery); + (mousePosition: MousePosition) => { const { current: container } = containerRef; + const { current: target } = mousedownElementRef; + const dragElement = getDraggableElement(target, itemQuery); if (container && dragElement) { const scrollableContainer = getScrollableContainer( container, @@ -483,7 +488,7 @@ export const useDragDropNext: DragDropHook = ({ const draggableRect = dragElement.getBoundingClientRect(); const dragDropState = (dragDropStateRef.current = new DragDropState( - evt, + mousePosition, dragElement )); @@ -512,6 +517,8 @@ export const useDragDropNext: DragDropHook = ({ onDragStart?.(dragDropState); attachDragHandlers(); + + mousedownElementRef.current = null; } }, [ @@ -529,9 +536,10 @@ export const useDragDropNext: DragDropHook = ({ const preDragMouseMoveHandler = useCallback( (evt: MouseEvent) => { + const { current: mouseDownPosition } = startPosRef; const { CLIENT_POS, POS } = dimensions(orientation); const { [CLIENT_POS]: clientPos } = evt; - const mouseMoveDistance = Math.abs(clientPos - startPosRef.current[POS]); + const mouseMoveDistance = Math.abs(clientPos - mouseDownPosition[POS]); if (mouseMoveDistance > dragThreshold && containerRef.current) { if (mouseDownTimer.current) { window.clearTimeout(mouseDownTimer.current); @@ -540,7 +548,11 @@ export const useDragDropNext: DragDropHook = ({ document.removeEventListener("mousemove", preDragMouseMoveHandler); document.removeEventListener("mouseup", preDragMouseUpHandler, false); - dragStart(evt); + const mousePosition = { + clientX: mouseDownPosition.x, + clientY: mouseDownPosition.y, + }; + dragStart(mousePosition); } }, // eslint-disable-next-line react-hooks/exhaustive-deps @@ -559,7 +571,6 @@ export const useDragDropNext: DragDropHook = ({ const mouseDownHandler: MouseEventHandler = useCallback( (evt) => { // TODO runtime check here for valid drop targets ? - const { current: container } = containerRef; // We don't want to prevent other handlers on this element from working // but we do want to stop a drag drop being initiated on a bubbled event. @@ -568,6 +579,12 @@ export const useDragDropNext: DragDropHook = ({ const { clientX, clientY } = evt; mousePosRef.current.x = startPosRef.current.x = clientX; mousePosRef.current.y = startPosRef.current.y = clientY; + mousedownElementRef.current = evt.target as HTMLElement; + + const mousePosition = { + clientX, + clientY, + }; document.addEventListener("mousemove", preDragMouseMoveHandler, false); document.addEventListener("mouseup", preDragMouseUpHandler, false); @@ -581,7 +598,7 @@ export const useDragDropNext: DragDropHook = ({ false ); document.removeEventListener("mouseup", preDragMouseUpHandler, false); - dragStart(evt.nativeEvent); + dragStart(mousePosition); }, 500); } }, diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropCopy.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropCopy.ts index e4ec1744c..76de2164f 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropCopy.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropCopy.ts @@ -4,7 +4,7 @@ import { InternalDragDropProps, InternalDragHookResult, ViewportRange, -} from "./dragDropTypesNext"; +} from "./dragDropTypes"; export const useDragDropCopy = ({ selected, diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx index f86509b8c..adbeef7a3 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx @@ -5,7 +5,7 @@ import { InternalDragHookResult, Direction, ViewportRange, -} from "./dragDropTypesNext"; +} from "./dragDropTypes"; import { useDropIndicator } from "./useDropIndicator"; import { diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovementNext.tsx b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovement.tsx similarity index 99% rename from vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovementNext.tsx rename to vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovement.tsx index 37845c616..29f3837df 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovementNext.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovement.tsx @@ -5,7 +5,7 @@ import { InternalDragDropProps, InternalDragHookResult, ViewportRange, -} from "./dragDropTypesNext"; +} from "./dragDropTypes"; import { useDragDisplacers } from "./useDragDisplacers"; import { dispatchMouseEvent } from "@finos/vuu-utils"; import { @@ -28,7 +28,6 @@ export const useDragDropNaturalMovement = ({ viewportRange, }: InternalDragDropProps): InternalDragHookResult => { const dragDirectionRef = useRef(); - const isScrollable = useRef(false); /** current position of dragged element */ const dragPosRef = useRef(-1); diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.ts index 579a452c2..b9ff3db7c 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.ts @@ -2,7 +2,7 @@ import { boxContainsPoint, dispatchCustomEvent } from "@finos/vuu-utils"; import { useCallback, useRef } from "react"; import { MeasuredTarget } from "./DragDropProvider"; import { DragDropState } from "./DragDropState"; -import { MouseOffset } from "./dragDropTypesNext"; +import { MouseOffset } from "./dragDropTypes"; export type ResumeDragHandler = (dragDropState: DragDropState) => boolean; export type GlobalDropHandler = (dragDropState: DragDropState) => void; @@ -93,9 +93,6 @@ export const useGlobalDragDrop = ({ const resumeDrag = useCallback( (dragDropState) => { - console.log(`resume drag of `, { - el: dragDropState.draggableElement, - }); dragDropStateRef.current = dragDropState; document.addEventListener("mousemove", dragMouseMoveHandler, false); document.addEventListener("mouseup", dragMouseUpHandler, false); diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts b/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts index 4e34c13ac..c0f26181c 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts @@ -17,7 +17,7 @@ import { SelectionStrategy, SingleSelectionHandler, } from "../common-hooks"; -import { DragStartHandler, useDragDropNext as useDragDrop } from "../drag-drop"; +import { DragStartHandler, useDragDrop as useDragDrop } from "../drag-drop"; import { closestListItemIndex, useCollapsibleGroups, diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/useTabstrip.ts b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/useTabstrip.ts index a6413ef25..418205c0a 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/useTabstrip.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/useTabstrip.ts @@ -8,7 +8,7 @@ import { useCallback, useRef, } from "react"; -import { useDragDropNext as useDragDrop } from "../drag-drop"; +import { useDragDrop as useDragDrop } from "../drag-drop"; import { isTabMenuOptions } from "./TabMenuOptions"; import { getIndexOfSelectedTab } from "./tabstrip-dom-utils"; import { useAnimatedSelectionThumb } from "./useAnimatedSelectionThumb"; diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx index fa2cdf6cc..edfc2189d 100644 --- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx +++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx @@ -38,7 +38,6 @@ export const BasketSelectorRow = ({ return (