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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | 21400x 21400x 21400x 21400x 28985x 21400x 21400x 21400x 21400x 21400x 21400x 21400x 168x 21232x 21232x 2186x 21232x 23418x 21232x 2500x 28732x 21232x 63696x 21232x 63696x 21232x 683x 1x 148624x 106160x 84928x | import {
EllipsisVertical,
Replace,
SquareFunction,
Table2,
Tag,
} from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/ahuora-design-system/ui/dropdown-menu";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import {
MonitoringTableRead,
PropertyInfoRead,
PropertyValueRead,
} from "@/api/apiStore.gen";
import { CalculateFromTarget } from "../ControlTarget";
export default function PropertyOptions({
value,
property,
isEditable,
isControlSetPoint,
isControlManipulated,
onToggleFormula,
onSetTag,
isGuess,
ratingMode,
recycleFixed,
showFormula,
canMutate = true,
canMutateValue = canMutate,
canMutateFormula = canMutate,
monitoringTables = [],
isInMonitoringTable = () => false,
isAddingToMonitoringTable = false,
onAddToMonitoringTable,
}: {
value: PropertyValueRead;
property: PropertyInfoRead;
isEditable: boolean;
isControlSetPoint: number;
isControlManipulated: number;
onToggleFormula?: () => void;
onSetTag?: () => void;
isGuess?: boolean;
ratingMode?: boolean;
recycleFixed?: boolean;
showFormula?: boolean;
canMutate?: boolean;
canMutateValue?: boolean;
canMutateFormula?: boolean;
monitoringTables?: MonitoringTableRead[];
isInMonitoringTable?: (table: MonitoringTableRead) => boolean;
isAddingToMonitoringTable?: boolean;
onAddToMonitoringTable?: (table: MonitoringTableRead) => void;
}) {
const showReplaceDoF =
canMutateValue &&
(isEditable || recycleFixed) &&
!isControlSetPoint &&
!isControlManipulated &&
!isGuess &&
!ratingMode;
const showAddConstraint =
canMutateFormula &&
(isEditable || recycleFixed) &&
!isGuess &&
!showFormula;
const showSetTag = canMutateValue && Boolean(onSetTag);
const showAddToMonitoringTable = canMutate && Boolean(onAddToMonitoringTable);
const hasMonitoringTables = monitoringTables.length > 0;
// If there are no options to show, don't render the options trigger at all.
if (
!showReplaceDoF &&
!showAddConstraint &&
!showSetTag &&
!showAddToMonitoringTable
) {
return null;
}
return (
<DropdownMenu
// force remount the dropdown menu when the options change, to reset internal state
// e.g when the user chooses to replace DOF.
key={
"options" +
showReplaceDoF +
showAddConstraint +
showSetTag +
showAddToMonitoringTable +
hasMonitoringTables
}
>
<DropdownMenuTrigger>
<ToolTipCover content="Options..." delay={0} asChild>
<EllipsisVertical
aria-label={`Options for ${property.displayName}`}
/>
</ToolTipCover>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuRadioGroup>
{showReplaceDoF && (
<CalculateFromTarget value={value} property={property}>
<DropdownMenuItem
className="flex gap-2 items-center w-full"
onSelect={(event) => event.preventDefault()}
>
<Replace className="mr-2 h-4 w-4" />
<span>Replace DoF</span>
</DropdownMenuItem>
</CalculateFromTarget>
)}
{showAddConstraint && (
<DropdownMenuItem key="add-constraint" onSelect={onToggleFormula}>
<div className="flex gap-2 items-center w-full">
<SquareFunction className="mr-2 h-4 w-4" />
<span>Add Constraint</span>
</div>
</DropdownMenuItem>
)}
{showSetTag && (
<DropdownMenuItem key="set-tag" onSelect={onSetTag}>
<div className="flex gap-2 items-center w-full">
<Tag className="mr-2 h-4 w-4" />
<span>Set Tag</span>
</div>
</DropdownMenuItem>
)}
{showAddToMonitoringTable &&
(hasMonitoringTables ? (
<DropdownMenuSub>
<DropdownMenuSubTrigger className="cursor-pointer">
<Table2 className="mr-2 h-4 w-4" />
<span>Add to monitoring table</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="min-w-56">
{monitoringTables.map((table) => {
const alreadyAdded = isInMonitoringTable(table);
return (
<DropdownMenuItem
key={table.id}
disabled={alreadyAdded || isAddingToMonitoringTable}
onSelect={() => onAddToMonitoringTable?.(table)}
>
<span className="truncate">
{table.title}
{alreadyAdded ? " (already added)" : ""}
</span>
</DropdownMenuItem>
);
})}
</DropdownMenuSubContent>
</DropdownMenuSub>
) : (
<DropdownMenuItem disabled>
<div className="flex gap-2 items-center w-full">
<Table2 className="mr-2 h-4 w-4" />
<span>Add to monitoring table</span>
</div>
</DropdownMenuItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}
|