| 1 | {"version":3,"file":"DraggableZone.js","sourceRoot":"../src/","sources":["utilities/DraggableZone/DraggableZone.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassNames } from './DraggableZone.styles';\nimport { on } from '../../Utilities';\nimport type { IDraggableZoneProps, ICoordinates, IDragData } from './DraggableZone.types';\n\nexport interface IDraggableZoneState {\n isDragging: boolean;\n position: ICoordinates;\n lastPosition?: ICoordinates;\n}\n\nconst eventMapping = {\n touch: {\n start: 'touchstart',\n move: 'touchmove',\n stop: 'touchend',\n },\n mouse: {\n start: 'mousedown',\n move: 'mousemove',\n stop: 'mouseup',\n },\n};\n\n// These are needed so that we can generalize the events\n// and so we have access to clientX and clientY in the touch events\ntype MouseTouchEvent<T> = React.MouseEvent<T> & React.TouchEvent<T> & Event;\n\nexport class DraggableZone extends React.Component<IDraggableZoneProps, IDraggableZoneState> {\n private _touchId?: number;\n private _currentEventType = eventMapping.mouse;\n private _events: (() => void)[] = [];\n\n constructor(props: IDraggableZoneProps) {\n super(props);\n\n this.state = {\n isDragging: false,\n position: this.props.position || { x: 0, y: 0 },\n lastPosition: undefined,\n };\n }\n\n public componentDidUpdate(prevProps: IDraggableZoneProps) {\n if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {\n this.setState({ position: this.props.position });\n }\n }\n\n public componentWillUnmount() {\n this._events.forEach(dispose => dispose());\n }\n\n public render() {\n const child: any = React.Children.only(this.props.children);\n const { props } = child;\n const { position } = this.props;\n const { position: statePosition, isDragging } = this.state;\n let x = statePosition.x;\n let y = statePosition.y;\n\n if (position && !isDragging) {\n x = position.x;\n y = position.y;\n }\n\n return React.cloneElement(child, {\n style: {\n ...props.style,\n transform: `translate(${x}px, ${y}px)`,\n },\n className: getClassNames(props.className, this.state.isDragging).root,\n onMouseDown: this._onMouseDown,\n onMouseUp: this._onMouseUp,\n onTouchStart: this._onTouchStart,\n onTouchEnd: this._onTouchEnd,\n });\n }\n\n private _onMouseDown = (event: MouseTouchEvent<HTMLElement>) => {\n const onMouseDown = (React.Children.only(this.props.children) as any).props.onMouseDown;\n if (onMouseDown) {\n onMouseDown(event);\n }\n\n this._currentEventType = eventMapping.mouse;\n return this._onDragStart(event);\n };\n\n private _onMouseUp = (event: MouseTouchEvent<HTMLElement>) => {\n const onMouseUp = (React.Children.only(this.props.children) as any).props.onMouseUp;\n if (onMouseUp) {\n onMouseUp(event);\n }\n\n this._currentEventType = eventMapping.mouse;\n return this._onDragStop(event);\n };\n\n private _onTouchStart = (event: MouseTouchEvent<HTMLElement>) => {\n const onTouchStart = (React.Children.only(this.props.children) as any).props.onTouchStart;\n if (onTouchStart) {\n onTouchStart(event);\n }\n\n this._currentEventType = eventMapping.touch;\n return this._onDragStart(event);\n };\n\n private _onTouchEnd = (event: MouseTouchEvent<HTMLElement>) => {\n const onTouchEnd = (React.Children.only(this.props.children) as any).props.onTouchEnd;\n if (onTouchEnd) {\n onTouchEnd(event);\n }\n\n this._currentEventType = eventMapping.touch;\n this._onDragStop(event);\n };\n\n private _onDragStart = (event: MouseTouchEvent<HTMLElement>) => {\n // Only handle left click for dragging\n if (typeof event.button === 'number' && event.button !== 0) {\n return false;\n }\n\n // If the target doesn't match the handleSelector OR\n // if the target does match the preventDragSelector, bail out\n if (\n (this.props.handleSelector && !this._matchesSelector(event.target as HTMLElement, this.props.handleSelector)) ||\n (this.props.preventDragSelector &&\n this._matchesSelector(event.target as HTMLElement, this.props.preventDragSelector))\n ) {\n return;\n }\n\n // Remember the touch identifier if this is a touch event so we can\n // distinguish between individual touches in multitouch scenarios\n // by remembering which touch point we were given\n this._touchId = this._getTouchId(event);\n\n const position = this._getControlPosition(event);\n if (position === undefined) {\n return;\n }\n\n const dragData = this._createDragDataFromPosition(position);\n this.props.onStart && this.props.onStart(event, dragData);\n\n this.setState({\n isDragging: true,\n lastPosition: position,\n });\n\n // hook up the appropriate mouse/touch events to the body to ensure\n // smooth dragging\n this._events = [\n on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),\n on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */),\n ];\n };\n\n private _onDrag = (event: MouseTouchEvent<HTMLElement>) => {\n // Prevent scrolling on mobile devices\n if (event.type === 'touchmove') {\n event.preventDefault();\n }\n\n const position = this._getControlPosition(event);\n if (!position) {\n return;\n }\n\n // create the updated drag data from the position data\n const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));\n const updatedPosition = updatedData.position;\n\n this.props.onDragChange && this.props.onDragChange(event, updatedData);\n\n this.setState({\n position: updatedPosition,\n lastPosition: position,\n });\n };\n\n private _onDragStop = (event: MouseTouchEvent<HTMLElement>) => {\n if (!this.state.isDragging) {\n return;\n }\n\n const position = this._getControlPosition(event);\n if (!position) {\n return;\n }\n\n const baseDragData = this._createDragDataFromPosition(position);\n\n // Set dragging to false and reset the lastPosition\n this.setState({\n isDragging: false,\n lastPosition: undefined,\n });\n\n this.props.onStop && this.props.onStop(event, baseDragData);\n\n if (this.props.position) {\n this.setState({\n position: this.props.position,\n });\n }\n\n // Remove event handlers\n this._events.forEach(dispose => dispose());\n };\n\n /**\n * Get the control position based off the event that fired\n * @param event - The event to get offsets from\n */\n private _getControlPosition(event: MouseTouchEvent<HTMLElement>): ICoordinates | undefined {\n const touchObj = this._getActiveTouch(event);\n\n // did we get the right touch?\n if (this._touchId !== undefined && !touchObj) {\n return undefined;\n }\n\n const eventToGetOffset = touchObj || event;\n return {\n x: eventToGetOffset.clientX,\n y: eventToGetOffset.clientY,\n };\n }\n\n /**\n * Get the active touch point that we have saved from the event's TouchList\n * @param event - The event used to get the TouchList for the active touch point\n */\n private _getActiveTouch(event: MouseTouchEvent<HTMLElement>): React.Touch | undefined {\n return (\n (event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||\n (event.changedTouches && this._findTouchInTouchList(event.changedTouches))\n );\n }\n\n /**\n * Get the initial touch identifier associated with the given event\n * @param event - The event that contains the TouchList\n */\n private _getTouchId(event: MouseTouchEvent<HTMLElement>): number | undefined {\n const touch: React.Touch | undefined =\n (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);\n\n if (touch) {\n return touch.identifier;\n }\n }\n\n /**\n * Returns if an element (or any of the element's parents) match the given selector\n */\n private _matchesSelector(element: HTMLElement | null, selector: string): boolean {\n if (!element || element === document.body) {\n return false;\n }\n\n const matchesSelectorFn: Function =\n element.matches || element.webkitMatchesSelector || (element as any).msMatchesSelector; /* for IE */\n\n if (!matchesSelectorFn) {\n return false;\n }\n\n return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);\n }\n\n /**\n * Attempts to find the Touch that matches the identifier we stored in dragStart\n * @param touchList The TouchList to look for the stored identifier from dragStart\n */\n private _findTouchInTouchList(touchList: React.TouchList): React.Touch | undefined {\n if (this._touchId === undefined) {\n return;\n }\n\n for (let i = 0; i < touchList.length; i++) {\n if (touchList[i].identifier === this._touchId) {\n return touchList[i];\n }\n }\n\n return undefined;\n }\n\n /**\n * Create DragData based off of the last known position and the new position passed in\n * @param position The new position as part of the drag\n */\n private _createDragDataFromPosition(position: ICoordinates): IDragData {\n const { lastPosition } = this.state;\n\n // If we have no lastPosition, use the given position\n // for last position\n if (lastPosition === undefined) {\n return {\n delta: { x: 0, y: 0 },\n lastPosition: position,\n position,\n };\n }\n\n return {\n delta: {\n x: position.x - lastPosition.x,\n y: position.y - lastPosition.y,\n },\n lastPosition,\n position,\n };\n }\n\n /**\n * Creates an updated DragData based off the current position and given baseDragData\n * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions\n */\n private _createUpdatedDragData(baseDragData: IDragData): IDragData {\n const { position } = this.state;\n return {\n position: {\n x: position.x + baseDragData.delta.x,\n y: position.y + baseDragData.delta.y,\n },\n delta: baseDragData.delta,\n lastPosition: position,\n };\n }\n}\n"]} |