Skip to content
This repository was archived by the owner on Jan 30, 2026. It is now read-only.

feat: enhance FieldList component #4

Merged
caio-pizzol merged 1 commit into from
Oct 9, 2025
Merged

feat: enhance FieldList component #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 55 additions & 37 deletions src/defaults/FieldList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const FieldList: React.FC<FieldListProps> = ({
key={field.id}
onClick={() => onSelect(field)}
style={{
position: "relative",
padding: "12px",
background:
selectedFieldId === field.id ? "#eff6ff" : "#f9fafb",
Expand All @@ -61,55 +62,72 @@ export const FieldList: React.FC<FieldListProps> = ({
e.currentTarget.style.background = "#f9fafb";
}
}}
title={field.alias}
>
<div
<button
onClick={(e) => {
e.stopPropagation();
onDelete(field.id);
}}
style={{
position: "absolute",
top: "8px",
right: "8px",
padding: "4px",
background: "transparent",
border: "none",
cursor: "pointer",
color: "#9ca3af",
transition: "color 0.2s",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
justifyContent: "center",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "#ef4444";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "#9ca3af";
}}
title="Delete field"
>
<div>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
<div style={{ paddingRight: "24px" }}>
<div
style={{
fontWeight: "500",
fontSize: "14px",
marginBottom:
field.alias && field.alias !== field.id ? "4px" : "0",
}}
>
{field.id}
</div>
{field.alias && field.alias !== field.id && (
<div
style={{
fontWeight: "500",
fontSize: "14px",
marginBottom: "4px",
fontSize: "12px",
color: "#4b5563",
}}
>
{field.alias}
</div>
{field.tag && (
<div style={{ fontSize: "12px", color: "#6b7280" }}>
{field.tag}
</div>
)}
</div>
<button
onClick={(e) => {
e.stopPropagation();
onDelete(field.id);
}}
style={{
padding: "4px 8px",
background: "#ef4444",
color: "white",
border: "none",
borderRadius: "4px",
fontSize: "12px",
cursor: "pointer",
opacity: 0.8,
transition: "opacity 0.2s",
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = "1";
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = "0.8";
}}
>
Delete
</button>
)}
</div>
</div>
))}
Expand Down
Loading