Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Trigger component: pass selectedPointData and type props, enhance state management for triggers, and streamline rendering logic for better performance.

This commit is contained in:
Jerald-Golden-B 2025-05-02 17:34:55 +05:30
parent 66b3d75500
commit 439f917884
2 changed files with 117 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
View File

@ -271,7 +271,7 @@ function ConveyorMechanics() {
</div> </div>
</div> </div>
<div className="tirgger"> <div className="tirgger">
<Trigger /> <Trigger selectedPointData={selectedPointData as any} type= {'Conveyor'}/>
</div> </div>
</section> </section>
</> </>

237
app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
View File

@ -1,137 +1,132 @@
import React, { useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { import {
AddIcon, AddIcon,
RemoveIcon, RemoveIcon,
ResizeHeightIcon, ResizeHeightIcon,
} from "../../../../../icons/ExportCommonIcons"; } from "../../../../../icons/ExportCommonIcons";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown"; import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import RenameInput from "../../../../../ui/inputs/RenameInput"; import RenameInput from "../../../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../../../functions/handleResizePannel"; import { handleResize } from "../../../../../../functions/handleResizePannel";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
const Trigger: React.FC = () => { type TriggerProps = {
// State to hold the list of triggers selectedPointData?: PointsScheme | undefined;
const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]); type?: 'Conveyor' | 'Vehicle' | 'RoboticArm' | 'Machine' | 'StorageUnit';
const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1"); };
const [activeOption, setActiveOption] = useState("onComplete");
const triggersContainerRef = useRef<HTMLDivElement>(null);
// States for dropdowns const Trigger = ({ selectedPointData, type }: TriggerProps) => {
const [triggeredModel, setTriggeredModel] = useState<string[]>([]); const [currentAction, setCurrentAction] = useState<string | undefined>();
const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]); const { selectedProduct } = useSelectedProduct();
const [triggeredAction, setTriggeredAction] = useState<string[]>([]); const { getActionByUuid } = useProductStore();
const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
const [activeOption, setActiveOption] = useState("onComplete");
const triggersContainerRef = useRef<HTMLDivElement>(null);
// Function to handle adding a new trigger useEffect(() => {
const addTrigger = (): void => { if (!selectedPointData) return;
const newTrigger = `Trigger ${triggers.length + 1}`; if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
setTriggers([...triggers, newTrigger]); // Add new trigger to the state setCurrentAction((selectedPointData as ConveyorPointSchema).action.actionUuid);
}
}, [selectedPointData]);
// Initialize the states for the new trigger useEffect(() => {
setTriggeredModel([...triggeredModel, ""]); if (!currentAction || !selectedProduct) return;
setTriggeredPoint([...triggeredPoint, ""]); const action = getActionByUuid(selectedProduct.productId, currentAction);
setTriggeredAction([...triggeredAction, ""]); setTriggers(action?.triggers || []);
}; setSelectedTrigger(action?.triggers[0] || undefined);
}, [currentAction, selectedProduct]);
// Function to handle removing a trigger const addTrigger = (): void => {
const removeTrigger = (index: number): void => { };
setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
};
return ( const removeTrigger = (triggerUuid: string): void => {
<div className="trigger-wrapper"> };
<div className="header">
<div className="title">Trigger</div> const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" };
<button const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" };
className="add-button" const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" };
onClick={addTrigger}
style={{ cursor: "pointer" }} return (
> <div className="trigger-wrapper">
<AddIcon /> Add <div className="header">
</button> <div className="title">Trigger</div>
</div> <button
<div className="trigger-list"> className="add-button"
<div onClick={addTrigger}
className="lists-main-container" style={{ cursor: "pointer" }}
ref={triggersContainerRef} >
style={{ height: "120px" }} <AddIcon /> Add
>
<div className="list-container">
{triggers.map((trigger: any, index: number) => (
<div
key={index}
className={`list-item ${
selectedTrigger === trigger ? "active" : ""
}`}
onClick={() => setSelectedTrigger(trigger)}
>
<button className="value" onClick={() => {}}>
<RenameInput value={trigger} onRename={() => {}} />
</button> </button>
{triggers.length > 1 && ( </div>
<button <div className="trigger-list">
className="remove-button" <div
onClick={() => removeTrigger(index)} className="lists-main-container"
> ref={triggersContainerRef}
<RemoveIcon /> style={{ height: "120px" }}
</button> >
)} <div className="list-container">
</div> {triggers.map((trigger) => (
))} <div
</div> key={trigger.triggerUuid}
<button className={`list-item ${selectedTrigger?.triggerUuid === trigger.triggerUuid ? "active" : ""}`}
className="resize-icon" onClick={() => setSelectedTrigger(trigger)}
id="action-resize" >
onMouseDown={(e: any) => handleResize(e, triggersContainerRef)} <button className="value" onClick={() => { }}>
> <RenameInput value={trigger.triggerName} onRename={() => { }} />
<ResizeHeightIcon /> </button>
</button> {triggers.length > 1 && (
<button
className="remove-button"
onClick={() => removeTrigger(trigger.triggerUuid)}
>
<RemoveIcon />
</button>
)}
</div>
))}
</div>
<button
className="resize-icon"
id="action-resize"
onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
>
<ResizeHeightIcon />
</button>
</div>
<div className="trigger-item">
<div className="trigger-name">{selectedTrigger?.triggerName}</div>
<LabledDropdown
label="Trigger Type"
defaultOption={activeOption}
options={["onComplete", "onStart", "onStop", "delay"]}
onSelect={(option) => setActiveOption(option)}
/>
<div className="trigger-options">
<LabledDropdown
label="Triggered Object"
defaultOption={triggeredModel.modelName}
options={[]}
onSelect={(option) => { }}
/>
<LabledDropdown
label="Triggered Point"
defaultOption={triggeredPoint.pointName}
options={[]}
onSelect={(option) => { }}
/>
<LabledDropdown
label="Triggered Action"
defaultOption={triggeredAction.actionName}
options={[]}
onSelect={(option) => { }}
/>
</div>
</div>
</div>
</div> </div>
<div className="trigger-item"> );
<div className="trigger-name">{selectedTrigger}</div>
<LabledDropdown
label="Trigger on"
defaultOption={activeOption}
options={["onComplete", "onStart", "onStop", "delay"]}
onSelect={(option) => setActiveOption(option)}
/>
<div className="trigger-options">
<LabledDropdown
label="Triggered Object"
defaultOption={triggeredModel[0] || "Select Model"}
options={["Model 1", "Model 2", "Model 3"]}
onSelect={(option) => {
const newModel = [...triggeredModel];
newModel[0] = option;
setTriggeredModel(newModel);
}}
/>
<LabledDropdown
label="Triggered Point"
defaultOption={triggeredPoint[0] || "Select Point"}
options={["Point 1", "Point 2", "Point 3"]}
onSelect={(option) => {
const newPoint = [...triggeredPoint];
newPoint[0] = option;
setTriggeredPoint(newPoint);
}}
/>
<LabledDropdown
label="Triggered Action"
defaultOption={triggeredAction[0] || "Select Action"}
options={["Action 1", "Action 2", "Action 3"]}
onSelect={(option) => {
const newAction = [...triggeredAction];
newAction[0] = option;
setTriggeredAction(newAction);
}}
/>
</div>
</div>
</div>
</div>
);
}; };
export default Trigger; export default Trigger;