| 1 | {"version":3,"file":"useTileTable.js","sources":["../../../src/tile-layout/useTileTable.ts"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { useDrag } from '@use-gesture/react';\nimport {\n GridConfig,\n TileInfo,\n TilePositionInfo,\n RenderTileProps,\n} from './model';\nimport * as TilesTableUtils from './table-utils/tiles-table';\nimport moveStrategy from './strategies/move';\nimport reorderStrategy from './strategies/reorder';\nimport { DragState } from './model';\nimport { reduceRight } from 'lodash';\n\ninterface TileTableDNDProps<T> {\n strategy: 'reorder' | 'move';\n enabled: boolean;\n elementWidth: number;\n elementHeight: number;\n activeBorderSize: number;\n columns: number;\n currentTiles: TileInfo<T>[];\n canAcceptDrop: (\n draggingTile: TileInfo<T>,\n targetTile: TileInfo<T>\n ) => boolean;\n didDrop: (draggingTile: TileInfo<T>, targetTile: TileInfo<T>) => void;\n changeTilesOrder: (tiles: TileInfo<T>[]) => void;\n}\n\nexport const useTileTable = <T>({\n enabled,\n strategy,\n elementWidth,\n elementHeight,\n activeBorderSize,\n columns,\n currentTiles,\n canAcceptDrop,\n changeTilesOrder,\n didDrop,\n}: TileTableDNDProps<T>) => {\n const strategyImpl = strategy === 'reorder' ? reorderStrategy : moveStrategy;\n const [state, setState] = useState<DragState<T>>({\n dragging: false,\n droppable: false,\n });\n\n //the tile layout table\n const { tiles: draggingTiles, dragging, insertionPoint } = state;\n\n const effectiveTiles = (enabled && dragging && draggingTiles) || currentTiles;\n\n const table = useMemo(\n () => TilesTableUtils.tilesListToTable(effectiveTiles, columns),\n [effectiveTiles, columns]\n );\n\n const positionedTiles = useMemo(\n () => TilesTableUtils.tableToTilesList(table),\n [table]\n );\n\n const config: GridConfig = {\n elementHeight,\n elementWidth,\n activeBorderSize,\n columns,\n };\n\n const bind = useDrag<React.PointerEvent<HTMLDivElement>>(\n ({ args: [data], dragging, tap, xy, movement, event }) => {\n if (dragging) {\n if (!tap) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n //if this is the first event, initialize the dragging\n if (!state.dragging) {\n const rect = event.currentTarget.getBoundingClientRect();\n\n //identify the hit tile\n const draggingTile = positionedTiles.find(tile => tile.data === data);\n if (!draggingTile) return;\n\n setState({\n dragging: true,\n droppable: false,\n tiles: positionedTiles,\n draggingTile,\n dragPosition: { x: xy[0] - rect.x, y: xy[1] - rect.y },\n offset: { x: movement[0], y: movement[1] },\n start: { col: draggingTile.col, row: draggingTile.row },\n });\n } else {\n const result =\n strategyImpl.onDragMove({\n offsetX: movement[0],\n offsetY: movement[1],\n canAcceptDrop,\n config,\n state,\n table,\n }) || {};\n setState(state => ({\n ...state,\n offset: { x: movement[0], y: movement[1] },\n dropTargetTile: undefined,\n droppable: false,\n insertionPoint: undefined,\n ...result,\n }));\n }\n } else {\n if (state.draggingTile && state.dropTargetTile && state.droppable) {\n didDrop(state.draggingTile, state.dropTargetTile);\n } else {\n const result =\n strategyImpl.onDragEnd({\n offsetX: movement[0],\n offsetY: movement[1],\n canAcceptDrop,\n config,\n state,\n table,\n }) || {};\n const finalState = { ...state, ...result };\n finalState.tiles && changeTilesOrder(finalState.tiles);\n }\n\n setState({\n dragging: false,\n droppable: false,\n });\n }\n },\n { filterTaps: true, enabled }\n );\n\n const renderTileProps = useMemo<\n (RenderTileProps<T> & {\n x: number;\n y: number;\n key: number;\n })[]\n >(() => {\n if (!enabled) {\n return positionedTiles\n .map(tile => ({\n ...tile,\n tileWidth: elementWidth,\n tileHeight: elementHeight,\n isDragging: false,\n isDropTarget: false,\n isDroppable: false,\n isDroppableAtInsertPosition: false,\n insertAtLeft: false,\n insertAtRight: false,\n x: tile.col * elementWidth,\n y: tile.row * elementHeight,\n }))\n .sort((a, b) => a.key - b.key);\n } else\n return positionedTiles\n .map(tile => {\n return {\n ...tile,\n tileWidth: elementWidth,\n tileHeight: elementHeight,\n isDragging: tile.data === state.draggingTile?.data,\n isDropTarget: tile.data === state.dropTargetTile?.data,\n insertAtLeft: tile.data === state.insertionPoint?.left?.data,\n insertAtRight: tile.data === state.insertionPoint?.right?.data,\n isDroppable:\n tile.data === state.draggingTile?.data && state.droppable,\n isDroppableAtInsertPosition: !!(\n tile.data === state.draggingTile?.data && state.insertionPoint\n ),\n x:\n tile.data === state.draggingTile?.data\n ? (state.start?.col || 0) * elementWidth +\n (state.offset?.x || 0)\n : tile.col * elementWidth,\n y:\n tile.data === state.draggingTile?.data\n ? (state.start?.row || 0) * elementHeight +\n (state.offset?.y || 0)\n : tile.row * elementHeight,\n };\n })\n .sort((a, b) => a.key - b.key);\n }, [state, positionedTiles, elementHeight, elementWidth, enabled]);\n\n const { draggingTile } = state;\n const insertIndicatorPosition = useMemo(() => {\n const { left, right } = insertionPoint || {};\n if (left)\n return {\n x: (left.col + left.colSpan) * elementWidth,\n y: left.row * elementHeight,\n };\n if (right)\n return {\n x: right.col * elementWidth,\n y: right.row * elementHeight,\n };\n if (draggingTile)\n return {\n x: draggingTile.col * elementWidth,\n y: draggingTile.row * elementHeight,\n };\n }, [insertionPoint, elementHeight, elementWidth, draggingTile]);\n\n return {\n table,\n tableHeight: table.length * elementHeight,\n tiles: positionedTiles,\n insertIndicatorPosition,\n bind,\n renderTileProps,\n };\n};\n"],"names":["reorderStrategy","moveStrategy","TilesTableUtils.tilesListToTable","TilesTableUtils.tableToTilesList"],"mappings":"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"} |
|---|
