2017-08-02 09:22:41 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { Help } from "../ui/help";
|
2018-08-27 14:32:37 -06:00
|
|
|
import { Popover, Position } from "@blueprintjs/core";
|
|
|
|
import { SequenceBodyItem, TaggedSequence } from "farmbot";
|
|
|
|
import { splice, remove, move } from "./step_tiles";
|
2017-08-02 09:22:41 -06:00
|
|
|
|
2018-08-27 14:32:37 -06:00
|
|
|
export interface StepIconBarProps {
|
|
|
|
index: number;
|
|
|
|
dispatch: Function;
|
|
|
|
step: SequenceBodyItem;
|
|
|
|
sequence: TaggedSequence;
|
2017-08-02 09:22:41 -06:00
|
|
|
helpText: string;
|
2018-08-30 19:25:58 -06:00
|
|
|
confirmStepDeletion: boolean;
|
2017-08-02 09:22:41 -06:00
|
|
|
}
|
|
|
|
|
2018-08-27 14:32:37 -06:00
|
|
|
export function StepUpDownButtonPopover(
|
|
|
|
{ onMove }: { onMove: (d: number) => () => void }) {
|
|
|
|
return <Popover position={Position.TOP} usePortal={false}>
|
|
|
|
<i className="fa fa-arrows-v step-control" />
|
|
|
|
<div className={"step-up-down-arrows"}>
|
|
|
|
<i className="fa fa-arrow-circle-up" onClick={onMove(-1)} />
|
|
|
|
<i className="fa fa-arrow-circle-down" onClick={onMove(2)} />
|
|
|
|
</div>
|
|
|
|
</Popover>;
|
|
|
|
}
|
|
|
|
|
2017-08-02 09:22:41 -06:00
|
|
|
export function StepIconGroup(props: StepIconBarProps) {
|
2018-08-30 19:25:58 -06:00
|
|
|
const {
|
|
|
|
index, dispatch, step, sequence, helpText, confirmStepDeletion
|
|
|
|
} = props;
|
2018-08-27 14:32:37 -06:00
|
|
|
|
|
|
|
const onClone = () => dispatch(splice({ step, index, sequence }));
|
2018-08-30 19:25:58 -06:00
|
|
|
const onTrash = () =>
|
|
|
|
remove({ dispatch, index, sequence, confirmStepDeletion });
|
2018-08-27 14:32:37 -06:00
|
|
|
const onMove = (delta: number) => () => {
|
|
|
|
const to = Math.max(index + delta, 0);
|
|
|
|
dispatch(move({ step, sequence, from: index, to }));
|
|
|
|
};
|
2017-08-02 09:22:41 -06:00
|
|
|
|
|
|
|
return <span>
|
2018-08-27 14:32:37 -06:00
|
|
|
<StepUpDownButtonPopover onMove={onMove} />
|
2017-08-02 09:22:41 -06:00
|
|
|
<i className="fa fa-clone step-control" onClick={onClone} />
|
|
|
|
<i className="fa fa-trash step-control" onClick={onTrash} />
|
2020-03-13 15:21:44 -06:00
|
|
|
<Help text={helpText} position={Position.TOP} />
|
2017-08-02 09:22:41 -06:00
|
|
|
</span>;
|
|
|
|
}
|