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

feat: Add delete functionality to DataSourceSelector and ElementEditor components

Browse Source
This commit is contained in:
Nalvazhuthi
2025-12-18 17:55:01 +05:30
parent 5a1d1bdeaf
commit 3b645336bf
3 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
View File

@@ -550,12 +550,12 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
value={
element.dataBinding?.dataSource
? {
id: element.dataBinding.dataSource as string,
label:
getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
(element.dataBinding.dataSource === "global" ? "Global" : ""),
icon: <DeviceIcon />,
}
id: element.dataBinding.dataSource as string,
label:
getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
(element.dataBinding.dataSource === "global" ? "Global" : ""),
icon: <DeviceIcon />,
}
: null
}
onChange={(value) => {
@@ -574,13 +574,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
value={
element.dataBinding?.dataValue
? {
id: element.dataBinding.dataValue as string,
label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />,
}
id: element.dataBinding.dataValue as string,
label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />,
}
: null
}
onChange={(value) => {
@@ -620,7 +620,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
showEyeDropper={field.showEyeDropper}
/>
))}
{/* add delete */}
{singleValueFields.map((field, index) => (
<DataSourceSelector
key={field.id}
@@ -636,6 +636,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateDataValue(selectedBlock, selectedElement, newDataValue);
}}
showEyeDropper={field.showEyeDropper}
showDeleteBtn={true}
onDelete={() => {
const current = Array.isArray(element.dataBinding?.dataValue) ? element.dataBinding!.dataValue : [];
const next = [...current];
next.splice(index, 1);
updateDataValue(selectedBlock, selectedElement, next);
}}
/>
))}
@@ -662,7 +669,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
showEyeDropper={field.showEyeDropper}
/>
))}
{/* add delete */}
{multipleSourceFields.map((field, index) => (
<DataSourceSelector
key={field.id}
@@ -678,6 +685,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateDataSource(selectedBlock, selectedElement, next);
}}
showEyeDropper={field.showEyeDropper}
showDeleteBtn={true}
onDelete={() => {
const current = Array.isArray(element.dataBinding?.dataSource) ? element.dataBinding!.dataSource : [];
const next = [...current];
next.splice(index, 1);
updateDataSource(selectedBlock, selectedElement, next);
}}
/>
))}

11
app/src/components/ui/inputs/DataSourceSelector.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from "react";
import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
import RegularDropDownID from "./RegularDropDownID";
import { DeleteIcon } from "../../icons/ContextMenuIcons";
type DataSourceSelectorProps = {
label?: string;
@@ -12,9 +13,11 @@ type DataSourceSelectorProps = {
onSelect: (value: { id: string; label: string }) => void;
eyeDropperActive?: boolean; // initial state
showEyeDropper?: boolean;
showDeleteBtn?: boolean;
onDelete?: () => void;
};
const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data Source", options, selected, onSelect, showEyeDropper = true }) => {
const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data Source", options, selected, onSelect, showEyeDropper = true, showDeleteBtn, onDelete }) => {
// Local state to toggle EyeDropper
const [isEyeActive, setIsEyeActive] = useState(false);
@@ -31,6 +34,12 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data S
<EyeDroperIcon isActive={isEyeActive} />
</div>
)}
{showDeleteBtn && (
<div className="delete" onClick={() => onDelete?.()} style={{ cursor: onDelete ? "pointer" : "default" }}>
<DeleteIcon />
</div>
)}
</div>
</div>
);

7
app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
View File

@@ -287,6 +287,7 @@
justify-content: center;
align-items: center;
z-index: 100;
svg {
cursor: grab;
}
@@ -651,6 +652,7 @@
display: flex;
padding: 3px;
border-radius: 2px;
cursor: pointer;
&.active {
@@ -658,6 +660,10 @@
}
}
.delete {
cursor: pointer;
}
.regularDropdown-container {
.icon {
padding: 0;
@@ -696,6 +702,7 @@
position: fixed;
top: 80px;
right: 40px;
.appearance {
.design-datas-wrapper {