60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import { TaggedGenericPointer } from "farmbot";
|
|
import { Saucer } from "../../ui";
|
|
import { Actions } from "../../constants";
|
|
import { push } from "../../history";
|
|
import { t } from "../../i18next_wrapper";
|
|
import { getMode } from "../map/util";
|
|
import { Mode } from "../map/interfaces";
|
|
import { mapPointClickAction } from "../map/actions";
|
|
|
|
export interface PointInventoryItemProps {
|
|
tpp: TaggedGenericPointer;
|
|
dispatch: Function;
|
|
hovered: boolean;
|
|
}
|
|
|
|
// The individual points that show up in the farm designer sub nav.
|
|
export class PointInventoryItem extends
|
|
React.Component<PointInventoryItemProps, {}> {
|
|
|
|
render() {
|
|
const point = this.props.tpp.body;
|
|
const { tpp, dispatch } = this.props;
|
|
const pointId = (point.id || "ERR_NO_POINT_ID").toString();
|
|
|
|
const toggle = (action: "enter" | "leave") => {
|
|
const isEnter = action === "enter";
|
|
dispatch({
|
|
type: Actions.TOGGLE_HOVERED_POINT,
|
|
payload: isEnter ? tpp.uuid : undefined
|
|
});
|
|
};
|
|
|
|
const click = () => {
|
|
if (getMode() == Mode.boxSelect) {
|
|
mapPointClickAction(dispatch, tpp.uuid)();
|
|
toggle("leave");
|
|
} else {
|
|
push(`/app/designer/points/${pointId}`);
|
|
dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: [tpp.uuid] });
|
|
}
|
|
};
|
|
|
|
return <div
|
|
className={`point-search-item ${this.props.hovered ? "hovered" : ""}`}
|
|
key={pointId}
|
|
onMouseEnter={() => toggle("enter")}
|
|
onMouseLeave={() => toggle("leave")}
|
|
onClick={click}>
|
|
<Saucer color={point.meta.color || "green"} />
|
|
<span className="point-search-item-name">
|
|
{point.name || t("Untitled point")}
|
|
</span>
|
|
<p className="point-search-item-info">
|
|
<i>{`(${point.x}, ${point.y}) ⌀${point.radius * 2}`}</i>
|
|
</p>
|
|
</div>;
|
|
}
|
|
}
|