uid generater

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -1,10 +1,15 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   AddIcon,
   InfoIcon,
   RemoveIcon,
   ResizeHeightIcon,
 } from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { handleResize } from "../../../../functions/handleResizePannel";
 
 const MachineMechanics: React.FC = () => {
   const [actionList, setActionList] = useState<string[]>([]);
@@ -13,7 +18,9 @@ const MachineMechanics: React.FC = () => {
     type: "action" | "trigger";
     name: string;
   } | null>(null);
-  const [editedName, setEditedName] = useState<string>("");
+
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+  const triggersContainerRef = useRef<HTMLDivElement>(null);
 
   const handleAddAction = () => {
     setActionList([...actionList, `Action ${actionList.length + 1}`]);
@@ -30,7 +37,6 @@ const MachineMechanics: React.FC = () => {
       selectedItem.name === actionList[index]
     ) {
       setSelectedItem(null);
-      setEditedName("");
     }
   };
 
@@ -41,133 +47,135 @@ const MachineMechanics: React.FC = () => {
       selectedItem.name === triggerList[index]
     ) {
       setSelectedItem(null);
-      setEditedName("");
     }
   };
 
   const handleSelectItem = (type: "action" | "trigger", name: string) => {
     setSelectedItem({ type, name });
-    setEditedName(name);
-  };
-
-  const handleSave = () => {
-    if (!selectedItem) return;
-
-    if (selectedItem.type === "action") {
-      setActionList(
-        actionList.map((action) =>
-          action === selectedItem.name ? editedName : action
-        )
-      );
-    } else if (selectedItem.type === "trigger") {
-      setTriggerList(
-        triggerList.map((trigger) =>
-          trigger === selectedItem.name ? editedName : trigger
-        )
-      );
-    }
-
-    setSelectedItem({ ...selectedItem, name: editedName });
   };
 
   return (
     <div className="machine-mechanics-container">
-      <div className="actions">
-        <div className="header">
-          <div className="header-value">Actions</div>
-          <div className="add-button" onClick={handleAddAction}>
-            <AddIcon /> Add
-          </div>
-        </div>
-        <div className="lists-main-container">
-          <div className="list-container">
-            {actionList.map((action, index) => (
-              <div
-                key={index}
-                className={`list-item ${
-                  selectedItem?.type === "action" && selectedItem.name === action
-                    ? "active"
-                    : ""
-                }`}
-              >
-                <div className="value" onClick={() => handleSelectItem("action", action)}>
-                  {action}
-                </div>
-                <div
-                  className="remove-button"
-                  onClick={() => handleRemoveAction(index)}
-                >
-                  <RemoveIcon />
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="resize-icon">
-            <ResizeHeightIcon />
-          </div>
-        </div>
+      <div className="machine-mechanics-header">Selected Object</div>
+      <div className="process-list-container">
+        <div className="label">Process:</div>
+        <RegularDropDown
+          header={"activeOption"}
+          options={["options"]}
+          onSelect={() => {}}
+        />
       </div>
-      <div className="triggers">
-        <div className="header">
-          <div className="header-value">Triggers</div>
-          <div className="add-button" onClick={handleAddTrigger}>
-            <AddIcon /> Add
-          </div>
-        </div>
-        <div className="lists-main-container">
-          <div className="list-container">
-            {triggerList.map((trigger, index) => (
-              <div
-                key={index}
-                className={`list-item ${
-                  selectedItem?.type === "trigger" &&
-                  selectedItem.name === trigger
-                    ? "active"
-                    : ""
-                }`}
-              >
-                <div className="value" onClick={() => handleSelectItem("trigger", trigger)}>
-                  {trigger}
-                </div>
-                <div
-                  className="remove-button"
-                  onClick={() => handleRemoveTrigger(index)}
-                >
-                  <RemoveIcon />
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="resize-icon">
-            <ResizeHeightIcon />
-          </div>
-        </div>
-      </div>
-      <div className="selected-properties-container">
-        {selectedItem && (
-          <>
-            <div>
-              <label>Edit Name:</label>
-              <input
-                type="text"
-                value={editedName}
-                onChange={(e) => setEditedName(e.target.value)}
-              />
+      <div className="machine-mechanics-content-container">
+        <div className="actions">
+          <div className="header">
+            <div className="header-value">Actions</div>
+            <div className="add-button" onClick={handleAddAction}>
+              <AddIcon /> Add
             </div>
-            {/* Add other Properties Like:
-             * Object Selection Dropdown
-             * Buffer Time
-             * Get Value From Object
-             * Action
-             * etc.
-             */}
-            <div onClick={handleSave}>Update</div> {/* remove this */}
-          </>
-        )}
-      </div>
-      <div className="footer">
-        <InfoIcon />
-        By Selecting Path, you can create Object Triggers.
+          </div>
+          <div
+            className="lists-main-container"
+            ref={actionsContainerRef}
+            style={{ height: "120px" }}
+          >
+            <div className="list-container">
+              {actionList.map((action, index) => (
+                <div
+                  key={index}
+                  className={`list-item ${
+                    selectedItem?.type === "action" &&
+                    selectedItem.name === action
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => handleSelectItem("action", action)}
+                  >
+                    <RenameInput value={action} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveAction(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="action-resize"
+              onMouseDown={(e) => handleResize(e, actionsContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="triggers">
+          <div className="header">
+            <div className="header-value">Triggers</div>
+            <div className="add-button" onClick={handleAddTrigger}>
+              <AddIcon /> Add
+            </div>
+          </div>
+          <div
+            className="lists-main-container"
+            ref={triggersContainerRef}
+            style={{ height: "120px" }}
+          >
+            <div className="list-container">
+              {triggerList.map((trigger, index) => (
+                <div
+                  key={index}
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
+                    selectedItem.name === trigger
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => handleSelectItem("trigger", trigger)}
+                  >
+                    <RenameInput value={trigger} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveTrigger(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="trigger-resize"
+              onMouseDown={(e) => handleResize(e, triggersContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="selected-properties-container">
+          {selectedItem && (
+            <>
+              <div className="properties-header">{selectedItem.name}</div>
+              <LabledDropdown
+                defaultOption="On-hit"
+                options={["On-hit", "Buffer"]}
+              />
+              <InputWithDropDown label="Speed" value="" activeOption=".mm" />
+            </>
+          )}
+        </div>
+        <div className="footer">
+          <InfoIcon />
+          By Selecting Path, you can create Object Triggers.
+        </div>
       </div>
     </div>
   );