feat: Enhance Trigger component with rename functionality and resize option
This commit is contained in:
parent
94cdfa3a6c
commit
7282107cd5
|
|
@ -1,11 +1,19 @@
|
||||||
import React, { useState } from "react";
|
import React, { useRef, useState } from "react";
|
||||||
import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
|
import {
|
||||||
|
AddIcon,
|
||||||
|
RemoveIcon,
|
||||||
|
ResizeHeightIcon,
|
||||||
|
} from "../../../../../icons/ExportCommonIcons";
|
||||||
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
||||||
|
import RenameInput from "../../../../../ui/inputs/RenameInput";
|
||||||
|
import { handleResize } from "../../../../../../functions/handleResizePannel";
|
||||||
|
|
||||||
const Trigger: React.FC = () => {
|
const Trigger: React.FC = () => {
|
||||||
// State to hold the list of triggers
|
// State to hold the list of triggers
|
||||||
const [triggers, setTriggers] = useState<string[]>([]);
|
const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]);
|
||||||
|
const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1");
|
||||||
const [activeOption, setActiveOption] = useState("onComplete");
|
const [activeOption, setActiveOption] = useState("onComplete");
|
||||||
|
const triggersContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
// States for dropdowns
|
// States for dropdowns
|
||||||
const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
|
const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
|
||||||
|
|
@ -44,61 +52,85 @@ const Trigger: React.FC = () => {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="trigger-list">
|
<div className="trigger-list">
|
||||||
{/* Map over triggers and render them */}
|
<div
|
||||||
{triggers.map((trigger, index) => (
|
className="lists-main-container"
|
||||||
<div key={index.toFixed()} className="trigger-item">
|
ref={triggersContainerRef}
|
||||||
<div className="trigger-name">
|
style={{ height: "120px" }}
|
||||||
{trigger}
|
>
|
||||||
<button
|
<div className="list-container">
|
||||||
className="remove-button"
|
{triggers.map((trigger: any, index: number) => (
|
||||||
onClick={() => removeTrigger(index)}
|
<div
|
||||||
style={{ cursor: "pointer" }}
|
key={index}
|
||||||
|
className={`list-item ${
|
||||||
|
selectedTrigger === trigger ? "active" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedTrigger(trigger)}
|
||||||
>
|
>
|
||||||
<RemoveIcon />
|
<button className="value" onClick={() => {}}>
|
||||||
</button>
|
<RenameInput value={trigger} onRename={() => {}} />
|
||||||
|
</button>
|
||||||
|
{triggers.length > 1 && (
|
||||||
|
<button
|
||||||
|
className="remove-button"
|
||||||
|
onClick={() => removeTrigger(index)}
|
||||||
|
>
|
||||||
|
<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}</div>
|
||||||
|
<LabledDropdown
|
||||||
|
defaultOption={activeOption}
|
||||||
|
options={["onComplete", "onStart", "onStop", "delay"]}
|
||||||
|
onSelect={(option) => setActiveOption(option)}
|
||||||
|
/>
|
||||||
|
<div className="trigger-options">
|
||||||
|
<div>
|
||||||
|
<LabledDropdown
|
||||||
|
defaultOption={triggeredModel[0] || "Select Model"}
|
||||||
|
options={["Model 1", "Model 2", "Model 3"]}
|
||||||
|
onSelect={(option) => {
|
||||||
|
const newModel = [...triggeredModel];
|
||||||
|
newModel[0] = option;
|
||||||
|
setTriggeredModel(newModel);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<LabledDropdown
|
<div>
|
||||||
defaultOption={activeOption}
|
<LabledDropdown
|
||||||
options={["onComplete", "onStart", "onStop", "delay"]}
|
defaultOption={triggeredPoint[0] || "Select Point"}
|
||||||
onSelect={(option) => setActiveOption(option)}
|
options={["Point 1", "Point 2", "Point 3"]}
|
||||||
/>
|
onSelect={(option) => {
|
||||||
<div className="trigger-options">
|
const newPoint = [...triggeredPoint];
|
||||||
<div>
|
newPoint[0] = option;
|
||||||
<LabledDropdown
|
setTriggeredPoint(newPoint);
|
||||||
defaultOption={triggeredModel[index] || "Select Model"}
|
}}
|
||||||
options={["Model 1", "Model 2", "Model 3"]}
|
/>
|
||||||
onSelect={(option) => {
|
</div>
|
||||||
const newModel = [...triggeredModel];
|
<div>
|
||||||
newModel[index] = option;
|
<LabledDropdown
|
||||||
setTriggeredModel(newModel);
|
defaultOption={triggeredAction[0] || "Select Action"}
|
||||||
}}
|
options={["Action 1", "Action 2", "Action 3"]}
|
||||||
/>
|
onSelect={(option) => {
|
||||||
</div>
|
const newAction = [...triggeredAction];
|
||||||
<div>
|
newAction[0] = option;
|
||||||
<LabledDropdown
|
setTriggeredAction(newAction);
|
||||||
defaultOption={triggeredPoint[index] || "Select Point"}
|
}}
|
||||||
options={["Point 1", "Point 2", "Point 3"]}
|
/>
|
||||||
onSelect={(option) => {
|
|
||||||
const newPoint = [...triggeredPoint];
|
|
||||||
newPoint[index] = option;
|
|
||||||
setTriggeredPoint(newPoint);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<LabledDropdown
|
|
||||||
defaultOption={triggeredAction[index] || "Select Action"}
|
|
||||||
options={["Action 1", "Action 2", "Action 3"]}
|
|
||||||
onSelect={(option) => {
|
|
||||||
const newAction = [...triggeredAction];
|
|
||||||
newAction[index] = option;
|
|
||||||
setTriggeredAction(newAction);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue