Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 33158x 20666x 20666x 20666x 20666x 20666x 20666x 20666x 5148x 51628x 25814x 20666x 25814x 20666x 5206x 30962x 5206x 25814x 25872x 20666x 5148x 5148x 20666x 20666x 30962x 30962x 30962x 5148x 25814x 30962x 51902x 31078x | import { DragPreviewImage, useDrag } from "react-dnd";
import objects from "@/data/unitOpConfigs";
import { useFlowsheetAccess } from "@/hooks/flowsheetAccess";
import { ObjectTypeEnum } from "../../../../api/apiStore.gen";
import { cn } from "../../../../lib/utils";
interface objCardProps {
type: ObjectTypeEnum;
}
export const ObjectCard: React.FC<objCardProps> = (props: objCardProps) => {
const { type } = props;
const access = useFlowsheetAccess();
const lacksWriteAccess = access?.can_edit === false;
const isUnavailable = [
ObjectTypeEnum.RctBio,
ObjectTypeEnum.RctChem,
ObjectTypeEnum.Filter,
ObjectTypeEnum.ComponentSeparator,
ObjectTypeEnum.SepCol,
].includes(type);
const isDisabled = lacksWriteAccess || isUnavailable;
const [{ isDragging }, drag, preview] = useDrag(
() => ({
type: "unit_operation",
item: { unitOpType: type }, // unit operation type
canDrag: !isDisabled,
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}),
[isDisabled, type],
);
const image = new URL(
"/assets/UpdatedIcons/" + type + ".svg",
import.meta.url,
).href;
const displayType = objects[type].displayType;
return (
<>
<DragPreviewImage connect={preview} src={image} />
<div
ref={drag}
className={cn("w-24 m-0", isDisabled && "pointer-events-none")}
style={{ opacity: isDragging ? 0.5 : 1 }}
id={"new-" + type}
aria-disabled={isDisabled}
>
<div className="flex flex-col items-center gap-1 justify-center pb-2">
<div
className={cn(
"w-20 h-20 border-2 border-border p-4 rounded-lg bg-white",
isUnavailable && "opacity-20 pointer-events-none",
lacksWriteAccess && "cursor-not-allowed opacity-60",
)}
>
<img className="w-full h-full" src={image} alt={type} />
</div>
<p className="text-center text-muted-foreground break-words w-full capitalizes">
{displayType}
</p>
</div>
</div>
</>
);
};
|