2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { stepPut } from "./actions";
|
|
|
|
import { SequenceBodyItem as Step } from "farmbot";
|
|
|
|
import { DataXferIntent, StepDraggerProps } from "./interfaces";
|
|
|
|
|
|
|
|
/** Magic number to indicate that the draggerId was not provided or can't be
|
|
|
|
* known. */
|
|
|
|
export const NULL_DRAGGER_ID = 0xCAFEF00D;
|
|
|
|
|
|
|
|
/** This is an event handler that:
|
2017-12-14 12:28:37 -07:00
|
|
|
* Puts the step into the Redux store (and the drag event's dataTransfer)
|
2017-06-29 12:54:02 -06:00
|
|
|
* so that it can be pulled up when the "drop" event happens.
|
2017-07-19 10:28:34 -06:00
|
|
|
*
|
2017-06-29 12:54:02 -06:00
|
|
|
* Example usage:
|
|
|
|
*
|
|
|
|
* <button draggable={true}
|
2019-09-23 12:56:35 -06:00
|
|
|
* onDragStart={stepDragEventHandler(dispatch, step, "optnl-stuff")}>
|
2017-06-29 12:54:02 -06:00
|
|
|
* Drag this!
|
|
|
|
* </button>
|
|
|
|
* */
|
2019-12-10 12:53:20 -07:00
|
|
|
export const stepDragEventHandler = (dispatch: Function,
|
2017-06-29 12:54:02 -06:00
|
|
|
step: Step,
|
|
|
|
intent: DataXferIntent,
|
2017-08-03 11:59:43 -06:00
|
|
|
draggerId: number) => {
|
|
|
|
return (ev: React.DragEvent<HTMLElement>) => {
|
2017-06-29 12:54:02 -06:00
|
|
|
dispatch(stepPut(step, ev, intent, draggerId));
|
2017-07-19 10:28:34 -06:00
|
|
|
};
|
2017-08-03 11:59:43 -06:00
|
|
|
};
|
2017-06-29 12:54:02 -06:00
|
|
|
|
|
|
|
export function StepDragger({ dispatch,
|
|
|
|
step,
|
|
|
|
children,
|
|
|
|
intent,
|
|
|
|
draggerId }: StepDraggerProps) {
|
2017-12-15 16:09:24 -07:00
|
|
|
return <div
|
2017-06-29 12:54:02 -06:00
|
|
|
onDragStart={stepDragEventHandler(dispatch,
|
|
|
|
step,
|
|
|
|
intent,
|
2019-09-23 12:56:35 -06:00
|
|
|
draggerId)}>
|
2017-06-29 12:54:02 -06:00
|
|
|
{children}
|
|
|
|
</div>;
|
|
|
|
}
|