Fix tooltips missing for editable properties
This commit is contained in:
@@ -19,6 +19,7 @@ interface EditablePropertyRowProps {
|
|||||||
targetId?: string // Target node ID (for edge type)
|
targetId?: string // Target node ID (for edge type)
|
||||||
onValueChange?: (newValue: any) => void // Optional callback when value changes
|
onValueChange?: (newValue: any) => void // Optional callback when value changes
|
||||||
isEditable?: boolean // Whether this property can be edited
|
isEditable?: boolean // Whether this property can be edited
|
||||||
|
tooltip?: string // Optional tooltip to display on hover
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -34,7 +35,8 @@ const EditablePropertyRow = ({
|
|||||||
sourceId,
|
sourceId,
|
||||||
targetId,
|
targetId,
|
||||||
onValueChange,
|
onValueChange,
|
||||||
isEditable = false
|
isEditable = false,
|
||||||
|
tooltip
|
||||||
}: EditablePropertyRowProps) => {
|
}: EditablePropertyRowProps) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const [isEditing, setIsEditing] = useState(false)
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
@@ -101,7 +103,11 @@ const EditablePropertyRow = ({
|
|||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<PropertyName name={name} />
|
<PropertyName name={name} />
|
||||||
<EditIcon onClick={handleEditClick} />:
|
<EditIcon onClick={handleEditClick} />:
|
||||||
<PropertyValue value={currentValue} onClick={onClick} />
|
<PropertyValue
|
||||||
|
value={currentValue}
|
||||||
|
onClick={onClick}
|
||||||
|
tooltip={tooltip || (typeof currentValue === 'string' ? currentValue : JSON.stringify(currentValue, null, 2))}
|
||||||
|
/>
|
||||||
<PropertyEditDialog
|
<PropertyEditDialog
|
||||||
isOpen={isEditing}
|
isOpen={isEditing}
|
||||||
onClose={handleCancel}
|
onClose={handleCancel}
|
||||||
|
@@ -207,6 +207,7 @@ const PropertyRow = ({
|
|||||||
sourceId={sourceId}
|
sourceId={sourceId}
|
||||||
targetId={targetId}
|
targetId={targetId}
|
||||||
isEditable={true}
|
isEditable={true}
|
||||||
|
tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@@ -38,14 +38,16 @@ export const EditIcon = ({ onClick }: EditIconProps) => (
|
|||||||
interface PropertyValueProps {
|
interface PropertyValueProps {
|
||||||
value: any
|
value: any
|
||||||
onClick?: () => void
|
onClick?: () => void
|
||||||
|
tooltip?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const PropertyValue = ({ value, onClick }: PropertyValueProps) => (
|
export const PropertyValue = ({ value, onClick, tooltip }: PropertyValueProps) => (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Text
|
<Text
|
||||||
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
|
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
|
||||||
tooltipClassName="max-w-80"
|
tooltipClassName="max-w-80"
|
||||||
text={value}
|
text={value}
|
||||||
|
tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
|
||||||
side="left"
|
side="left"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
/>
|
/>
|
||||||
|
Reference in New Issue
Block a user